詳細ビュー (旧裏面) を作成

common/consts.ts

@@ -10,4 +10,20 @@ export const DAY_TO_JAPANESE_MAP = new Map<Day, string>([
   ["sun", "日"],
 ]);
 
-export const ACTIVE_DAYS = ["mon", "tue", "wed", "thu", "fri", "sat"] as const;
+export const ACTIVE_DAYS = ["mon", "tue", "wed", "thu", "fri"] as const;
+
+export const sortSlots = (
+  slots: {
+    day: "mon" | "tue" | "wed" | "thu" | "fri" | "sat" | "sun" | "other";
+    period: number;
+  }[],
+) => {
+  const order = ["mon", "tue", "wed", "thu", "fri", "sat", "sun", "other"];
+  return slots.sort((a, b) => {
+    const dayComparison = order.indexOf(a.day) - order.indexOf(b.day);
+    if (dayComparison !== 0) {
+      return dayComparison;
+    }
+    return a.period - b.period;
+  });
+};

server/src/seeds/test-data/data.ts

@@ -73,27 +73,27 @@ export const courses = [
   {
     id: "10001",
     name: "国語八列",
-    teacher: "足助太郎",
+    teacher: "八十島漕郎",
   },
   {
     id: "10002",
     name: "数学八列",
-    teacher: "足助太郎",
+    teacher: "八十島漕郎",
   },
   {
     id: "10003",
     name: "英語八列",
-    teacher: "足助太郎",
+    teacher: "八十島漕郎",
   },
   {
     id: "10004",
     name: "理科八列",
-    teacher: "足助太郎",
+    teacher: "八十島漕郎",
   },
   {
     id: "10005",
     name: "社会八列",
-    teacher: "足助太郎",
+    teacher: "八十島漕郎",
   },
 ];
 

web/app/edit/courses/page.tsx

@@ -12,16 +12,16 @@ export default function EditCourses() {
   const error = state.current === "error" ? state.error : null;
 
   return (
-    <div className="mx-auto my-0 flex h-full max-w-[350] flex-col p-5 text-center">
+    <div className="mx-auto my-0 flex h-full max-w-[350] flex-col p-2 text-center">
       <h1 className="mb-2 text-xl">授業編集</h1>
       {loading ? (
         <FullScreenCircularProgress />
       ) : error ? (
         <p>Error: {error.message}</p>
       ) : data ? (
-        <>
+        <div className="flex-1 p-2">
           <EditableCoursesTable userId={data.id} />
-        </>
+        </div>
       ) : (
         <p>データがありません。</p>
       )}

web/app/edit/layout.tsx

@@ -8,9 +8,9 @@ export default function EditPageLayout({
 }) {
   return (
     <NavigateByAuthState type="toLoginForUnauthenticated">
-      <Header title="編集/Edit" />
-      <div className="absolute top-14 right-0 left-0 overflow-y-auto sm:top-16">
-        {children}
+      <div className="flex h-screen flex-col">
+        <Header title="編集/Edit" />
+        <div className="mt-14 flex-1 sm:mt-16">{children}</div>
       </div>
     </NavigateByAuthState>
   );

web/app/home/components/PersonDetailedMenu.tsx

@@ -0,0 +1,153 @@
+import { DAY_TO_JAPANESE_MAP, sortSlots } from "common/consts";
+import type { UserWithCoursesAndSubjects } from "common/types";
+import { useState } from "react";
+import { MdClose } from "react-icons/md";
+import { MdOpenInNew } from "react-icons/md";
+import { MdArrowBack } from "react-icons/md";
+import NonEditableCoursesTable from "~/components/course/NonEditableCoursesTable";
+
+type Props = {
+  onClose: () => void;
+  displayedUser: UserWithCoursesAndSubjects;
+  currentUser: UserWithCoursesAndSubjects;
+};
+
+export default function PersonDetailedMenu({
+  onClose,
+  displayedUser,
+  currentUser,
+}: Props) {
+  const [menuStatus, setMenuStatus] = useState<"detailedInfo" | "coursesTable">(
+    "detailedInfo",
+  );
+
+  return (
+    <dialog
+      id="dialog"
+      className="modal modal-open modal-bottom sm:modal-middle p-0"
+    >
+      <div className="modal-box p-0">
+        <div className="sticky top-0 bg-white p-2">
+          <form method="dialog">
+            <div className="relative flex items-center justify-center">
+              <button
+                type="button"
+                className="btn btn-sm btn-circle btn-ghost absolute top-0 left-0"
+                onClick={onClose}
+              >
+                <MdClose className="text-2xl" />
+              </button>
+              <h3 className="text-lg">
+                {displayedUser.name}の
+                {menuStatus === "detailedInfo" ? "詳細情報" : "時間割表"}
+              </h3>
+              <span />
+            </div>
+          </form>
+        </div>
+        {menuStatus === "detailedInfo" ? (
+          <div className="p-4">
+            <div>
+              <span className="text-gray-500 text-xs">名前</span>
+              <p className="text-lg">{displayedUser.name}</p>
+            </div>
+            <div className="divider m-0" />
+            <div>
+              <span className="text-gray-500 text-xs">性別</span>
+              <p className="text-lg">{displayedUser.gender}</p>
+            </div>
+            <div className="divider m-0" />
+            <div>
+              <span className="text-gray-500 text-xs">自己紹介</span>
+              <p className="text-md">{displayedUser.intro}</p>
+            </div>
+            <div className="divider m-0" />
+            <div>
+              <div className="mt-0.5 mb-1 flex items-center justify-between">
+                <span className="text-gray-500 text-xs">講義</span>
+                <button
+                  type="button"
+                  className="btn btn-xs font-normal text-primary"
+                  onClick={() => setMenuStatus("coursesTable")}
+                >
+                  <MdOpenInNew className="mr-[-4px]" />
+                  時間割表を確認
+                </button>
+              </div>
+              <div className="flex flex-col gap-1">
+                {displayedUser.courses.map(
+                  (course) =>
+                    course.name && (
+                      <div
+                        key={course.id}
+                        className={`flex gap-0.5 rounded-md px-2 py-1 text-md ${
+                          currentUser.courses.some((c) => c.id === course.id)
+                            ? "bg-[#FFF1BF]"
+                            : "bg-[#F7FCFF]"
+                        }`}
+                      >
+                        <span className="w-[12vh]">
+                          {sortSlots(course.slots)
+                            .map(
+                              (slot) =>
+                                `${DAY_TO_JAPANESE_MAP.get(slot.day)}${slot.period}`,
+                            )
+                            .join("・")}
+                        </span>
+                        <span className="flex-1">
+                          {course.name} ({course.teacher}){" "}
+                        </span>
+                        <span>{course.id}</span>
+                      </div>
+                    ),
+                )}
+              </div>
+            </div>
+            <div className="divider m-0" />
+            <div>
+              <span className="text-gray-500 text-xs">興味分野</span>
+              <div className="flex flex-wrap gap-2">
+                {displayedUser.interestSubjects.map(
+                  (subject) =>
+                    subject.name && (
+                      <span
+                        key={subject.id}
+                        className={`rounded-md px-2 py-0.5 text-md text-primary ${
+                          currentUser.interestSubjects.some(
+                            (s) => s.id === subject.id,
+                          )
+                            ? "bg-[#FFF1BF]"
+                            : "bg-[#F7FCFF]"
+                        }`}
+                      >
+                        #{subject.name}
+                      </span>
+                    ),
+                )}
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="flex h-[80vh] flex-col">
+            <div className="flex justify-end pr-2">
+              <button
+                type="button"
+                className="btn btn-xs font-normal text-primary"
+                onClick={() => setMenuStatus("detailedInfo")}
+              >
+                <MdArrowBack className="mr-[-4px]" />
+                詳細情報に戻る
+              </button>
+            </div>
+            <div className="flex-1 p-2 pb-6">
+              <NonEditableCoursesTable
+                userId={displayedUser.id}
+                comparisonUserId={currentUser.id}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    </dialog>
+  );
+}

web/app/home/page.tsx

@@ -11,11 +11,13 @@ import { Card } from "~/components/Card";
 import { DraggableCard } from "~/components/DraggableCard";
 import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
 import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
+import PersonDetailedMenu from "./components/PersonDetailedMenu";
 
 export default function Home() {
   const { data, error } = useRecommended();
   const controls = useAnimation();
   const [clickedButton, setClickedButton] = useState<string>("");
+  const [openDetailedMenu, setOpenDetailedMenu] = useState(false);
   const {
     state: { data: currentUser },
   } = useAboutMe();
@@ -88,34 +90,54 @@ export default function Home() {
     <NavigateByAuthState type="toLoginForUnauthenticated">
       <div className="flex h-full flex-col items-center justify-center">
         {displayedUser && (
-          <div className="flex h-full flex-col items-center justify-center">
-            {nextUser && (
-              <div className="relative h-full w-full">
-                <div className="-translate-x-4 -translate-y-4 inset-0 z-0 mt-4 transform">
-                  <Card displayedUser={nextUser} currentUser={currentUser} />
+          <>
+            <div className="flex h-full flex-col items-center justify-center">
+              {nextUser && (
+                <div className="relative h-full w-full">
+                  <div className="-translate-x-4 -translate-y-4 inset-0 z-0 mt-4 transform">
+                    <Card displayedUser={nextUser} currentUser={currentUser} />
+                  </div>
+                  <motion.div
+                    animate={controls}
+                    className="absolute inset-0 z-10 mt-4 flex items-center justify-center"
+                  >
+                    <DraggableCard
+                      displayedUser={displayedUser}
+                      currentUser={currentUser}
+                      onSwipeLeft={reject}
+                      onSwipeRight={accept}
+                      clickedButton={clickedButton}
+                    />
+                  </motion.div>
                 </div>
-                <motion.div
-                  animate={controls}
-                  className="absolute inset-0 z-10 mt-4 flex items-center justify-center"
-                >
-                  <DraggableCard
-                    displayedUser={displayedUser}
-                    currentUser={currentUser}
-                    onSwipeLeft={reject}
-                    onSwipeRight={accept}
-                    clickedButton={clickedButton}
-                  />
-                </motion.div>
+              )}
+              <button
+                type="button"
+                onClick={() => setOpenDetailedMenu(!openDetailedMenu)}
+              >
+                てすと
+              </button>
+              <div className="button-container mt-4 mb-4 flex w-full justify-center space-x-8">
+                <CloseButton
+                  onclick={onClickClose}
+                  icon={<CloseIconStyled />}
+                />
+                <GoodButton
+                  onclick={onClickHeart}
+                  icon={<FavoriteIconStyled />}
+                />
               </div>
-            )}
-            <div className="button-container mt-4 mb-4 flex w-full justify-center space-x-8">
-              <CloseButton onclick={onClickClose} icon={<CloseIconStyled />} />
-              <GoodButton
-                onclick={onClickHeart}
-                icon={<FavoriteIconStyled />}
-              />
             </div>
-          </div>
+            {openDetailedMenu && (
+              <PersonDetailedMenu
+                onClose={() => {
+                  setOpenDetailedMenu(false);
+                }}
+                displayedUser={displayedUser}
+                currentUser={currentUser}
+              />
+            )}
+          </>
         )}
       </div>
     </NavigateByAuthState>

web/components/Card.tsx

@@ -183,10 +183,12 @@ const CardBack = ({ displayedUser, currentUser }: CardProps) => {
       <div className="flex justify-center">
         <p className="font-bold text-lg">{displayedUser?.name}</p>
       </div>
-      <NonEditableCoursesTable
-        userId={displayedUser.id}
-        comparisonUserId={currentUser.id}
-      />
+      <div className="flex-1">
+        <NonEditableCoursesTable
+          userId={displayedUser.id}
+          comparisonUserId={currentUser.id}
+        />
+      </div>
       <div className="mt-4 flex justify-center">
         <ThreeSixtyIcon className="text-3xl" />
       </div>