From 4c1e6fae4d6b765260ed723aebcbc497aaac2133 Mon Sep 17 00:00:00 2001 From: naka-12 <104970808+naka-12@users.noreply.github.com> Date: Fri, 24 Jan 2025 02:57:08 +0900 Subject: [PATCH 1/4] delete web/README.md --- web/README.md | 30 ------------------------------ 1 file changed, 30 deletions(-) delete mode 100644 web/README.md diff --git a/web/README.md b/web/README.md deleted file mode 100644 index bb156850..00000000 --- a/web/README.md +++ /dev/null @@ -1,30 +0,0 @@ -# React + TypeScript + Vite - -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. - -Currently, two official plugins are available: - -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh - -## Expanding the ESLint configuration - -If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: - -- Configure the top-level `parserOptions` property like this: - -```js -export default { - // other rules... - parserOptions: { - ecmaVersion: "latest", - sourceType: "module", - project: ["./tsconfig.json", "./tsconfig.node.json"], - tsconfigRootDir: __dirname, - }, -}; -``` - -- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` -- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` -- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list From 729dbcde3cb668266ecb6d1b570f29d189a78a17 Mon Sep 17 00:00:00 2001 From: Shogo Nakamura <104970808+naka-12@users.noreply.github.com> Date: Fri, 24 Jan 2025 02:58:42 +0900 Subject: [PATCH 2/4] =?UTF-8?q?=E3=83=A2=E3=83=90=E3=82=A4=E3=83=AB?= =?UTF-8?q?=E3=81=A7=E3=81=AE=E5=85=A8=E7=94=BB=E9=9D=A2=E3=81=A7=E3=81=AE?= =?UTF-8?q?=E6=8C=99=E5=8B=95=E3=81=8C=E3=81=8A=E3=81=8B=E3=81=97=E3=81=8B?= =?UTF-8?q?=E3=81=A3=E3=81=9F=E3=81=AE=E3=81=A7=E4=BF=AE=E6=AD=A3=20(Heade?= =?UTF-8?q?r,=20BottomBar=20=E3=82=92=20fixed=20=E3=81=AB)=20(#622)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # PRの概要 - モバイルで h-screen だとタブバーが含まれず壊れるなどの修正。 - などなど。 - 同時に close #602 ## 具体的な変更内容 ## 影響範囲 ## 動作要件 ## 補足 ## レビューリクエストを出す前にチェック！ - [ ] 改めてセルフレビューしたか - [ ] 手動での動作検証を行ったか - [ ] server の機能追加ならば、テストを書いたか - 理由: 書いた | server の機能追加ではない - [ ] 間違った使い方が存在するならば、それのドキュメントをコメントで書いたか - 理由: 書いた | 間違った使い方は存在しない - [ ] わかりやすいPRになっているか --- web/app/chat/layout.tsx | 2 +- web/app/friends/layout.tsx | 2 +- web/app/friends/page.tsx | 10 +-- web/app/home/layout.tsx | 2 +- web/app/layout.tsx | 6 +- web/app/search/layout.tsx | 2 +- web/app/search/page.tsx | 2 +- web/app/settings/courses/page.tsx | 2 +- web/app/settings/layout.tsx | 2 +- web/app/settings/profile/page.tsx | 2 +- web/app/signup/page.tsx | 12 ++-- web/app/signup/steps/step1_profile.tsx | 2 +- web/app/signup/steps/step2_img.tsx | 2 +- web/app/signup/steps/step3_confirmation.tsx | 2 +- web/app/tutorial/layout.tsx | 8 +-- web/app/tutorial/page.tsx | 69 ++++++++++++--------- web/components/BanLandscape.tsx | 48 +++++++------- web/components/BottomBar.tsx | 2 +- web/components/Header.tsx | 2 +- 19 files changed, 92 insertions(+), 87 deletions(-) diff --git a/web/app/chat/layout.tsx b/web/app/chat/layout.tsx index e2ec6414..a2c62fd9 100644 --- a/web/app/chat/layout.tsx +++ b/web/app/chat/layout.tsx @@ -11,7 +11,7 @@ export default function Layout({ <>
-
{children}
+
{children}
 diff --git a/web/app/friends/layout.tsx b/web/app/friends/layout.tsx index 3d04d451..b5295993 100644 --- a/web/app/friends/layout.tsx +++ b/web/app/friends/layout.tsx @@ -11,7 +11,7 @@ export default function Layout({ <>
-
{children}
+
{children}
 diff --git a/web/app/friends/page.tsx b/web/app/friends/page.tsx index 6a105cdc..ce2a859e 100644 --- a/web/app/friends/page.tsx +++ b/web/app/friends/page.tsx @@ -15,11 +15,11 @@ export default function Friends() { const [activeTab, setActiveTab] = useState("matching"); return ( -
-
+
+
-
+
{activeTab === "matching" ? : }
diff --git a/web/app/home/layout.tsx b/web/app/home/layout.tsx index cea0d39f..ec50a110 100644 --- a/web/app/home/layout.tsx +++ b/web/app/home/layout.tsx @@ -11,7 +11,7 @@ export default function Layout({ <>
-
{children}
+
{children}
 diff --git a/web/app/layout.tsx b/web/app/layout.tsx index f1825a4a..254ffcf8 100644 --- a/web/app/layout.tsx +++ b/web/app/layout.tsx @@ -30,14 +30,14 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - + CourseMate - + -
{children}
+ {children} diff --git a/web/app/search/layout.tsx b/web/app/search/layout.tsx index 05bcccd1..3f75b04d 100644 --- a/web/app/search/layout.tsx +++ b/web/app/search/layout.tsx @@ -11,7 +11,7 @@ export default function Layout({ <>
-
{children}
+
{children}
 diff --git a/web/app/search/page.tsx b/web/app/search/page.tsx index 0eab8192..f1114915 100644 --- a/web/app/search/page.tsx +++ b/web/app/search/page.tsx @@ -54,7 +54,7 @@ export default function SearchPage({ ); return ( -
+

ユーザー検索

diff --git a/web/app/settings/courses/page.tsx b/web/app/settings/courses/page.tsx index 66e20fe7..b86b3e86 100644 --- a/web/app/settings/courses/page.tsx +++ b/web/app/settings/courses/page.tsx @@ -14,7 +14,7 @@ export default function EditCourses() { if (error) throw error; return ( -
+

授業編集

{loading ? ( diff --git a/web/app/settings/layout.tsx b/web/app/settings/layout.tsx index 51944af2..0dfbe9fc 100644 --- a/web/app/settings/layout.tsx +++ b/web/app/settings/layout.tsx @@ -11,7 +11,7 @@ export default function Layout({ <>
-
{children}
+
{children}
 diff --git a/web/app/settings/profile/page.tsx b/web/app/settings/profile/page.tsx index 09290079..e4971a47 100644 --- a/web/app/settings/profile/page.tsx +++ b/web/app/settings/profile/page.tsx @@ -82,7 +82,7 @@ function EditProfile({ defaultValues }: { defaultValues: User }) { const values = getValues(); return ( -
+
diff --git a/web/app/signup/page.tsx b/web/app/signup/page.tsx index 9b8dbf11..99b3e3d9 100644 --- a/web/app/signup/page.tsx +++ b/web/app/signup/page.tsx @@ -79,13 +79,13 @@ function Registration() { } export default function RegistrationPage() { return ( - -
-
-
+ <> +
+ +
-
- + + ); } diff --git a/web/app/signup/steps/step1_profile.tsx b/web/app/signup/steps/step1_profile.tsx index 4b84521e..d31ac639 100644 --- a/web/app/signup/steps/step1_profile.tsx +++ b/web/app/signup/steps/step1_profile.tsx @@ -43,7 +43,7 @@ export default function Step1({ onSave, prev, caller }: StepProps) { }, [selectedFaculty, setValue, resetField]); return ( <> -
+

アカウント設定

diff --git a/web/app/signup/steps/step2_img.tsx b/web/app/signup/steps/step2_img.tsx index 29ab191a..e392051e 100644 --- a/web/app/signup/steps/step2_img.tsx +++ b/web/app/signup/steps/step2_img.tsx @@ -38,7 +38,7 @@ export default function Step2({ return ( <> -
+

確認

diff --git a/web/app/tutorial/layout.tsx b/web/app/tutorial/layout.tsx index 0d7bf051..1e86f9cb 100644 --- a/web/app/tutorial/layout.tsx +++ b/web/app/tutorial/layout.tsx @@ -1,4 +1,3 @@ -import Link from "next/link"; import Header from "~/components/Header"; import { NavigateByAuthState } from "~/components/common/NavigateByAuthState"; @@ -11,13 +10,8 @@ export default function Layout({ <>
-
{children}
+
{children}
 -
- - ホーム画面へ - -
); } diff --git a/web/app/tutorial/page.tsx b/web/app/tutorial/page.tsx index bf7123fa..c016ed82 100644 --- a/web/app/tutorial/page.tsx +++ b/web/app/tutorial/page.tsx @@ -1,5 +1,7 @@ "use client"; +import Link from "next/link"; + const tutorialSteps = [ { label: "CourseMateの使い方", @@ -33,37 +35,44 @@ const tutorialSteps = [ export default function Tutorial() { return ( -
- {tutorialSteps.map((step, i) => ( -
-
-

{step.label}

- {step.label} -
-
- - ❮ - - - ❯ - +
+
+ {tutorialSteps.map((step, i) => ( +
+
+

{step.label}

+ {step.label} +
+
-
- ))} + ))} +
+
+ + ホーム画面へ + +
); } diff --git a/web/components/BanLandscape.tsx b/web/components/BanLandscape.tsx index 525488f2..8f61339f 100644 --- a/web/components/BanLandscape.tsx +++ b/web/components/BanLandscape.tsx @@ -24,34 +24,36 @@ const BanLandscape = () => { }, [checkOrientation]); return ( -
+
{isLandscape && ( -
+
- このアプリは縦画面で使用してください +
+ このアプリは縦画面で使用してください +
)} diff --git a/web/components/BottomBar.tsx b/web/components/BottomBar.tsx index dbde3aef..fdeac651 100644 --- a/web/components/BottomBar.tsx +++ b/web/components/BottomBar.tsx @@ -36,7 +36,7 @@ function BottomBarCell({ export default function BottomBar(props: Props) { const { activeTab } = props; return ( -
+
+
{title && ( Date: Fri, 24 Jan 2025 03:03:20 +0900 Subject: [PATCH 3/4] =?UTF-8?q?Home=20=E3=81=AE=E3=83=87=E3=82=B6=E3=82=A4?= =?UTF-8?q?=E3=83=B3=E3=82=92=E5=85=A8=E4=BD=93=E7=9A=84=E3=81=AB=E7=B5=B1?= =?UTF-8?q?=E4=B8=80=20(#627)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # PRの概要 ## 具体的な変更内容 - カードのスタイルを詳細表示と Figma に合わせて修正 image - 登録での確認部分をカード風にした (close #600 ) image ## 影響範囲 ## 動作要件 ## 補足 ## レビューリクエストを出す前にチェック！ - [ ] 改めてセルフレビューしたか - [ ] 手動での動作検証を行ったか - [ ] server の機能追加ならば、テストを書いたか - 理由: 書いた | server の機能追加ではない - [ ] 間違った使い方が存在するならば、それのドキュメントをコメントで書いたか - 理由: 書いた | 間違った使い方は存在しない - [ ] わかりやすいPRになっているか --- web/app/home/components/RoundButton.tsx | 16 +++++ web/app/home/page.tsx | 44 ++---------- web/app/settings/card/page.tsx | 2 +- .../signup/steps/components/MockCardFront.tsx | 63 ----------------- web/app/signup/steps/step3_confirmation.tsx | 36 +++++----- web/components/BottomBar.tsx | 2 +- web/components/Card.tsx | 67 +++++++------------ web/components/CardBasicInfo.tsx | 28 ++++++++ web/components/DraggableCard.tsx | 59 +++------------- web/tailwind.config.js | 1 + 10 files changed, 105 insertions(+), 213 deletions(-) create mode 100644 web/app/home/components/RoundButton.tsx delete mode 100644 web/app/signup/steps/components/MockCardFront.tsx create mode 100644 web/components/CardBasicInfo.tsx diff --git a/web/app/home/components/RoundButton.tsx b/web/app/home/components/RoundButton.tsx new file mode 100644 index 00000000..c1b92116 --- /dev/null +++ b/web/app/home/components/RoundButton.tsx @@ -0,0 +1,16 @@ +interface RoundButtonProps { + onclick: () => void; + icon: React.ReactNode; +} + +export default function RoundButton({ onclick, icon }: RoundButtonProps) { + return ( + + ); +} diff --git a/web/app/home/page.tsx b/web/app/home/page.tsx index 274721ec..aed25364 100644 --- a/web/app/home/page.tsx +++ b/web/app/home/page.tsx @@ -1,10 +1,9 @@ "use client"; -import CloseIcon from "@mui/icons-material/Close"; import type { UserWithCoursesAndSubjects } from "common/types"; import { motion, useAnimation } from "framer-motion"; import { useCallback, useEffect, useState } from "react"; -import { MdThumbUp } from "react-icons/md"; +import { MdClose, MdThumbUp } from "react-icons/md"; import request from "~/api/request"; import { useAboutMe, useRecommended } from "~/api/user"; import { Card } from "~/components/Card"; @@ -12,6 +11,7 @@ import { DraggableCard } from "~/components/DraggableCard"; import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress"; import NoMoreUser from "./components/NoMoreUser"; import PersonDetailedMenu from "./components/PersonDetailedMenu"; +import RoundButton from "./components/RoundButton"; export default function Home() { const { data, error } = useRecommended(); @@ -133,14 +133,14 @@ export default function Home() {
)} -
- + handleAction("reject")} - icon={} + icon={} /> - handleAction("accept")} - icon={} + icon={} />
{openDetailedMenu && ( @@ -158,36 +158,6 @@ export default function Home() { ); } -interface RoundButtonProps { - onclick: () => void; - icon: JSX.Element; -} - -const CloseButton = ({ onclick, icon }: RoundButtonProps) => ( - -); -const GoodButton = ({ onclick, icon }: RoundButtonProps) => ( - -); - -const CloseIconStyled = () => ; - -const FavoriteIconStyled = () => ( - -); - class Queue { private store: T[]; constructor(initial: T[]) { diff --git a/web/app/settings/card/page.tsx b/web/app/settings/card/page.tsx index 9db4c642..888c6df6 100644 --- a/web/app/settings/card/page.tsx +++ b/web/app/settings/card/page.tsx @@ -35,7 +35,7 @@ export default function SettingsProfile() { style={{ // (画面幅 - カード幅) / 2 - profile の padding marginRight: - "calc(calc(calc(100vw - min(40dvh, 87.5vw)) / 2) - 8px)", + "calc(calc(calc(100vw - min(50dvh, 87.5vw)) / 2) - 8px)", }} > diff --git a/web/app/signup/steps/components/MockCardFront.tsx b/web/app/signup/steps/components/MockCardFront.tsx deleted file mode 100644 index 6f7cfe23..00000000 --- a/web/app/signup/steps/components/MockCardFront.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import type { UserWithCoursesAndSubjects } from "common/types"; -import UserAvatar from "~/components/human/avatar"; - -// TODO: CardFront との統合 -export default function MockCardFront({ - displayedUser, -}: { - displayedUser: Omit< - UserWithCoursesAndSubjects, - "courses" | "interestSubjects" - >; -}) { - return ( -
-
- -
-

{displayedUser.name}

-

{displayedUser.grade}

-

{displayedUser.faculty}

-

{displayedUser.department}

-
-
- -
-

{displayedUser.intro}

-
- - {/*
-
-
- {isHiddenInterestExist && ( -
- And More -
- )} -
- -
-
- {isHiddenCourseExist && ( -
- And More -
- )} -
-
*/} -
- ); -} diff --git a/web/app/signup/steps/step3_confirmation.tsx b/web/app/signup/steps/step3_confirmation.tsx index b442e567..47f669ad 100644 --- a/web/app/signup/steps/step3_confirmation.tsx +++ b/web/app/signup/steps/step3_confirmation.tsx @@ -1,6 +1,6 @@ import type { Step1User } from "common/zod/types"; import type { BackProp, StepProps } from "~/app/signup/common"; -import MockCardFront from "./components/MockCardFront"; +import CardBasicInfo from "~/components/CardBasicInfo"; import type { Step2Data } from "./step2_img"; interface inputDataProps { @@ -18,30 +18,28 @@ export default function Confirmation({ throw new Error("don't skip the steps"); } return ( - <> -
-

確認

-
- +

確認

+

以下の内容で登録する場合は「次へ」を押してください。

+

基本情報

+
+
+
-
-

この内容で登録しますか？

-
-
+

自己紹介

+

{Step1Data.intro}

+
@@ -53,6 +51,6 @@ export default function Confirmation({ 次へ
- +
); } diff --git a/web/components/BottomBar.tsx b/web/components/BottomBar.tsx index fdeac651..b644eb15 100644 --- a/web/components/BottomBar.tsx +++ b/web/components/BottomBar.tsx @@ -36,7 +36,7 @@ function BottomBarCell({ export default function BottomBar(props: Props) { const { activeTab } = props; return ( -
+
{ coursesContainer.classList.add( "flex", "flex-wrap", - "gap-3", + "gap-1", "justify-start", ); container.appendChild(coursesContainer); @@ -61,17 +61,14 @@ export const CardFront = ({ displayedUser, currentUser }: CardProps) => { const element = document.createElement("div"); element.textContent = course.name; - element.classList.add( "rounded-full", "text-center", - "px-4", - "py-2", + "px-3", + "py-1", "text-base", - isMatching ? "font-bold" : "font-normal", + isMatching ? "bg-[#FFF1BF]" : "bg-base-200", ); - element.style.backgroundColor = "gray"; - element.style.color = "white"; element.style.flexShrink = "0"; coursesContainer.insertBefore(element, andMoreElement); @@ -125,7 +122,7 @@ export const CardFront = ({ displayedUser, currentUser }: CardProps) => { container.innerHTML = ""; const flexContainer = document.createElement("div"); - flexContainer.classList.add("flex", "flex-wrap", "gap-3", "justify-start"); + flexContainer.classList.add("flex", "flex-wrap", "gap-1", "justify-start"); container.appendChild(flexContainer); // `And More` 要素を作成して追加 (最初は非表示) @@ -158,18 +155,15 @@ export const CardFront = ({ displayedUser, currentUser }: CardProps) => { ); const element = document.createElement("div"); - element.textContent = interest.name; - + element.textContent = `#${interest.name}`; element.classList.add( - "rounded-full", + "rounded-md", "text-center", - "px-4", - "py-2", - "text-base", - isMatching ? "font-bold" : "font-normal", + "px-3", + "py-1", + "text-primary", + isMatching ? "bg-[#FFF1BF]" : "bg-[#F7FCFF]", ); - element.style.backgroundColor = "#FFF1BF"; - element.style.color = "#039BE5"; element.style.flexShrink = "0"; flexContainer.insertBefore(element, andMoreElement); @@ -247,34 +241,23 @@ export const CardFront = ({ displayedUser, currentUser }: CardProps) => { }, [calculateVisibleInterests, calculateVisibleCourses]); return ( -
-
- -
-

{displayedUser.name}

-

{displayedUser.grade}

-

{displayedUser.faculty}

-

{displayedUser.department}

-
-
- -

履修している科目

-
+
+ +
+

授業

- -

興味のある分野

+

興味分野

@@ -292,7 +275,7 @@ export function Card({
); diff --git a/web/components/CardBasicInfo.tsx b/web/components/CardBasicInfo.tsx new file mode 100644 index 00000000..2234c576 --- /dev/null +++ b/web/components/CardBasicInfo.tsx @@ -0,0 +1,28 @@ +import type { UserWithCoursesAndSubjects } from "common/types"; +import UserAvatar from "./human/avatar"; + +export default function CardBasicInfo({ + displayedUser, +}: { + displayedUser: Omit< + UserWithCoursesAndSubjects, + "courses" | "interestSubjects" + >; +}) { + return ( +
+ +
+

{displayedUser.name}

+

{displayedUser.grade}

+

10 ? "xs" : "md"}`} + >{`${displayedUser.faculty} ${displayedUser.department}`}

+
+
+ ); +} diff --git a/web/components/DraggableCard.tsx b/web/components/DraggableCard.tsx index 05e61f62..4856f86e 100644 --- a/web/components/DraggableCard.tsx +++ b/web/components/DraggableCard.tsx @@ -1,9 +1,7 @@ -import CloseIcon from "@mui/icons-material/Close"; -import { Box, Typography } from "@mui/material"; import type { UserWithCoursesAndSubjects } from "common/types"; import { motion, useMotionValue, useMotionValueEvent } from "framer-motion"; import { useCallback, useState } from "react"; -import { MdThumbUp } from "react-icons/md"; +import { MdClose, MdThumbUp } from "react-icons/md"; import { Card } from "./Card"; const SWIPE_THRESHOLD = 30; @@ -52,55 +50,18 @@ export const DraggableCard = ({ return (
{dragProgress > SWIPE_THRESHOLD || clickedButton === "heart" ? ( -
- +
+
- - いいね！ - - + いいね！ +
) : dragProgress < -SWIPE_THRESHOLD || clickedButton === "cross" ? ( -
- - - - スキップ - - +
+
+ + スキップ +
) : null}
diff --git a/web/tailwind.config.js b/web/tailwind.config.js index df376d37..49f0f340 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -16,6 +16,7 @@ export default { accent: "#FFC700", neutral: "#000000", "base-100": "#ffffff", + "base-200": "#f3f3f3", // base の薄いグレー "--rounded-btn": "0.25rem", "--rounded-box": "0.25rem", From 7b41eadc9f39d88b0c7db60226c2cb7e5b78f922 Mon Sep 17 00:00:00 2001 From: naka-12 <104970808+naka-12@users.noreply.github.com> Date: Thu, 6 Feb 2025 20:06:58 +0900 Subject: [PATCH 4/4] =?UTF-8?q?=E3=83=81=E3=83=A5=E3=83=BC=E3=83=88?= =?UTF-8?q?=E3=83=AA=E3=82=A2=E3=83=AB=E3=81=AE=E3=83=95=E3=82=A9=E3=83=B3?= =?UTF-8?q?=E3=83=88=E3=82=B5=E3=82=A4=E3=82=BA=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/app/tutorial/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/app/tutorial/page.tsx b/web/app/tutorial/page.tsx index c016ed82..1efeacf1 100644 --- a/web/app/tutorial/page.tsx +++ b/web/app/tutorial/page.tsx @@ -44,7 +44,7 @@ export default function Tutorial() { className="carousel-item relative w-full" >
-

{step.label}

+

{step.label}