feature: add drawer in matchlist

Room-Fit · Nov 21, 2024 · cc41489 · cc41489
1 parent 816d0a2
commit cc41489
Show file tree

Hide file tree

Showing 5 changed files with 415 additions and 61 deletions.
diff --git a/src/domains/match/components/MatchListItem.tsx b/src/domains/match/components/MatchListItem.tsx
@@ -1,10 +1,15 @@
+import { useSelector } from "react-redux";
+
 import { House, Users } from "lucide-react";
+import { Drawer } from "vaul";
+
+import { RootState } from "@/apps/store/store";
 
-import { MatchStatus } from "@/pages/match/MatchListPage";
+import { Button } from "@/components/ui/button";
 
-import bgMain from "@/assets/bg__main.webp";
+import { ParticipatingUserCardList } from "./ParticipatingUserCardList";
 
-export interface MatchListItemProps {
+export interface MatchListItemProps extends React.ComponentProps<"li"> {
     title: string;
     dormitory: string;
     description: string;
@@ -20,22 +25,78 @@ export const MatchListItem = ({
     currentQuota,
     maxQuota,
 }: MatchListItemProps) => {
+    const isParticipated = useSelector((state: RootState) => state.auth.isParticipated);
+
     return (
-        <li className="list-none border-b-[1px] p-3 hover:cursor-pointer">
-            <h1 className="text-lg font-bold">{title}</h1>
-            <p className="text-sm text-gray-800 line-clamp-1">{description}</p>
-            <div className="flex justify-end gap-3 py-1 text-gray-500">
-                <p className="flex items-center gap-1 text-sm">
-                    <House size={14} />
-                    <span>{dormitory}</span>
-                </p>
-                <p className="flex items-center gap-1 text-sm">
-                    <Users size={14} />
-                    <span>
-                        {currentQuota}/{maxQuota}
-                    </span>
-                </p>
-            </div>
-        </li>
+        <Drawer.Root>
+            <Drawer.Trigger className="list-none border-b-[1px] p-3 hover:cursor-pointer w-full">
+                <h1 className="text-lg font-bold text-left line-clamp-1">{title}</h1>
+                <p className="text-sm text-left text-gray-800 line-clamp-1">{description}</p>
+                <div className="flex justify-start gap-3 py-1 text-gray-500">
+                    <p className="flex items-center gap-1 text-xs">
+                        <House size={14} />
+                        <span>{dormitory}</span>
+                    </p>
+                    <p className="flex items-center gap-1 text-xs">
+                        <Users size={14} />
+                        <span>
+                            {currentQuota}/{maxQuota}
+                        </span>
+                    </p>
+                </div>
+            </Drawer.Trigger>
+
+            <Drawer.Portal>
+                <Drawer.Overlay className="fixed inset-0 z-40 bg-black/40" />
+                <Drawer.Content className="bg-gray-100 flex flex-col rounded-t-[10px] mt-24 h-fit fixed bottom-0 left-0 right-0 outline-none z-50">
+                    <div className="p-3 bg-white rounded-t-[10px] flex-1">
+                        <div
+                            aria-hidden
+                            className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-gray-300 mb-2"
+                        />
+                        <div className="max-w-[600px] mx-auto px-4 py-2">
+                            <Drawer.Title className="mb-4 text-gray-900">
+                                <div className="text-lg font-bold">{title}</div>
+                                <div className="flex gap-2">
+                                    <p className="flex items-center">
+                                        <Users size={14} className="mr-1" />
+                                        <span className="text-sm">
+                                            {currentQuota}/{maxQuota}
+                                        </span>
+                                    </p>
+                                    <p className="flex items-center">
+                                        <House size={14} className="mr-1" />
+                                        <span className="text-sm">{dormitory}</span>
+                                    </p>
+                                </div>
+                            </Drawer.Title>
+                            <p className="mb-4 text-gray-600">{description}</p>
+
+                            <div className="my-2">
+                                <ParticipatingUserCardList
+                                    users={[
+                                        { id: 1, index: 1, nickname: "김철수", status: "ACCEPTED" },
+                                        { id: 2, index: 2, nickname: "홍길동", status: "PENDING" },
+                                        { id: 3, index: 3, nickname: "이영희", status: "PENDING" },
+                                    ]}
+                                />
+                            </div>
+
+                            <div className="flex flex-col gap-1">
+                                <Button
+                                    variant="default"
+                                    className="w-full"
+                                    disabled={isParticipated}
+                                >
+                                    {!isParticipated
+                                        ? "채팅하기"
+                                        : "이미 참여중인 채팅방이 있습니다"}
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+                </Drawer.Content>
+            </Drawer.Portal>
+        </Drawer.Root>
     );
 };
diff --git a/src/domains/match/components/UserCard.tsx b/src/domains/match/components/UserCard.tsx
diff --git a/src/pages/match/MatchDetailPage.tsx b/src/pages/match/MatchDetailPage.tsx
diff --git a/src/pages/match/MatchListPage.tsx b/src/pages/match/MatchListPage.tsx
@@ -1,10 +1,87 @@
+import { useState } from "react";
+
 import { Plus } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 
 import { useRemoveSearchParams } from "@/common/hooks/useRemoveSearchParams";
 import { MatchListItem } from "@/domains/match/components/MatchListItem";
 
+const dummyData = [
+    {
+        title: "조용하고 청결한 룸메이트 구해요",
+        dormitory: "첨성관",
+        description:
+            "조용하고 청결한 룸메이트를 구합니다. 학교 근처에 있으면 좋겠어요. MBTI 는 I 를 선호합니다.",
+        currentQuota: 1,
+        maxQuota: 4,
+    },
+    {
+        title: "활발한 룸메이트 구합니다",
+        dormitory: "기숙사 A",
+        description: "활발하고 외향적인 룸메이트를 구합니다. 운동을 좋아하면 좋겠어요.",
+        currentQuota: 2,
+        maxQuota: 4,
+    },
+    {
+        title: "조용한 룸메이트 구해요",
+        dormitory: "기숙사 B",
+        description: "조용하고 책 읽는 것을 좋아하는 룸메이트를 구합니다.",
+        currentQuota: 1,
+        maxQuota: 2,
+    },
+    {
+        title: "청결한 룸메이트 구합니다",
+        dormitory: "기숙사 C",
+        description: "청결하고 깔끔한 룸메이트를 구합니다. 정리정돈 잘하는 분이면 좋겠어요.",
+        currentQuota: 3,
+        maxQuota: 4,
+    },
+    {
+        title: "친절한 룸메이트 구해요",
+        dormitory: "기숙사 D",
+        description: "친절하고 배려심 있는 룸메이트를 구합니다.",
+        currentQuota: 1,
+        maxQuota: 3,
+    },
+    {
+        title: "조용하고 청결한 룸메이트 구해요",
+        dormitory: "첨성관",
+        description:
+            "조용하고 청결한 룸메이트를 구합니다. 학교 근처에 있으면 좋겠어요. MBTI 는 I 를 선호합니다.",
+        currentQuota: 1,
+        maxQuota: 4,
+    },
+    {
+        title: "활발한 룸메이트 구합니다",
+        dormitory: "기숙사 A",
+        description: "활발하고 외향적인 룸메이트를 구합니다. 운동을 좋아하면 좋겠어요.",
+        currentQuota: 2,
+        maxQuota: 4,
+    },
+    {
+        title: "조용한 룸메이트 구해요",
+        dormitory: "기숙사 B",
+        description: "조용하고 책 읽는 것을 좋아하는 룸메이트를 구합니다.",
+        currentQuota: 1,
+        maxQuota: 2,
+    },
+    {
+        title: "청결한 룸메이트 구합니다",
+        dormitory: "기숙사 C",
+        description: "청결하고 깔끔한 룸메이트를 구합니다. 정리정돈 잘하는 분이면 좋겠어요.",
+        currentQuota: 3,
+        maxQuota: 4,
+    },
+    {
+        title: "친절한 룸메이트 구해요",
+        dormitory: "기숙사 D",
+        description: "친절하고 배려심 있는 룸메이트를 구합니다.",
+        currentQuota: 1,
+        maxQuota: 3,
+    },
+];
+
 export enum MatchStatus {
     PENDING = "PENDING",
     MATCHING = "MATCHING",
@@ -14,6 +91,8 @@ export enum MatchStatus {
 export default function MatchListPage() {
     useRemoveSearchParams();
 
+    const [isOpen, setIsOpen] = useState<boolean>(true);
+
     return (
         <div>
             <div className="fixed bottom-8 right-8">
@@ -23,14 +102,15 @@ export default function MatchListPage() {
                 </Button>
             </div>
 
-            {Array.from({ length: 15 }).map(() => {
+            {dummyData.map((data) => {
                 return (
                     <MatchListItem
-                        title={"조용하고 청결한 룸메이트 구해요"}
-                        dormitory={"첨성관"}
-                        description="조용하고 청결한 룸메이트를 구합니다. 학교 근처에 있으면 좋겠어요. MBTI 는 I 를 선호합니다."
-                        currentQuota={1}
-                        maxQuota={4}
+                        title={data.title}
+                        dormitory={data.dormitory}
+                        description={data.description}
+                        currentQuota={data.currentQuota}
+                        maxQuota={data.maxQuota}
+                        onClick={() => setIsOpen(true)}
                     />
                 );
             })}