#9 feat : get party list

LWJ0513 · Mar 18, 2023 · 7d2e449 · 7d2e449
1 parent 22721dd
commit 7d2e449
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 65 deletions.
diff --git a/front/src/components/party/PartyCard.tsx b/front/src/components/party/PartyCard.tsx
@@ -1,16 +1,19 @@
+import { useNavigate } from "react-router-dom";
 import { PartyInfo } from "pages/party";
 import Card from "@mui/joy/Card";
 import AspectRatio from "@mui/joy/AspectRatio";
 import CardOverflow from "@mui/joy/CardOverflow";
 import Box from "@mui/joy/Box";
 import Button from "@mui/joy/Button";
-import IconButton from "@mui/joy/IconButton";
 import Typography from "@mui/joy/Typography";
 import BookmarkAdd from "@mui/icons-material/BookmarkAddOutlined";
 import { Divider } from "@mui/material";
-import Person from "@mui/icons-material/Person";
+import AccessTimeIcon from "@mui/icons-material/AccessTime";
 import format from "date-fns/format";
 import { differenceInHours, differenceInMinutes } from "date-fns";
+import PersonCounter from "./PersonCounter";
+import TimeCounter from "./TimeCounter";
+import { Link } from "react-router-dom";
 
 type PartyProps = {
   party: PartyInfo; // 부모컴포넌트에서 import 해온 타입을 재사용 해 줍시다.
@@ -22,20 +25,23 @@ type PartyProps = {
 // { title }: PartyInfo => PartyInfo 객체에서 title(string) 변수만 가져오겠다
 // { party }: PartyProps => wrapper PartyProps 객체에서 party(PartyInfo) 객체를 가져오겠다.
 const PartyCard = ({ party }: PartyProps): JSX.Element => {
-  const timer = (): string => {
-    const diffHours = differenceInHours(new Date(), party.created_date);
-    const diffMinutes = differenceInMinutes(new Date(), party.created_date);
+  const navigate = useNavigate();
+
+  const timer = (createdDate: Date): string => {
+    const diffHours = differenceInHours(new Date(), createdDate);
+    const diffMinutes = differenceInMinutes(new Date(), createdDate);
     if (diffHours === 0) return diffMinutes + " minutes ago";
     else return diffHours + " hours ago";
   };
 
   return (
+    // <Link to={`/party/${party.id}`}>
     <Card
       variant="outlined"
       sx={
-        party.status
-          ? { width: 320, marginTop: 1, bgcolor: "#ffffff" }
-          : { width: 320, marginTop: 1, bgcolor: "#999999" }
+        new Date() > party.due_date
+          ? { width: 320, marginTop: 1, bgcolor: "#999999" }
+          : { width: 320, marginTop: 1, bgcolor: "#ffffff" }
       }
     >
       <Box sx={{ display: "flex" }}>
@@ -46,35 +52,33 @@ const PartyCard = ({ party }: PartyProps): JSX.Element => {
           {party.writer}
         </Typography>
       </Box>
-      <Box sx={{ display: "flex", gap: 1, py: 1, alignItems: "center" }}>
-        <Person fontSize="small" />
-        <Typography
-          level="body3"
-          sx={{ fontWeight: "md", color: "text.secondary" }}
-        >
-          {party.current} / {party.max}
-        </Typography>
-
+      <Box
+        sx={{
+          display: "flex",
+          gap: 1,
+          py: 1,
+          alignItems: "center",
+          height: "32px",
+        }}
+      >
+        <PersonCounter current={party.current} max={party.max} />
         <Typography sx={{ color: "#aaaaaa" }}>|</Typography>
-        <Typography
-          level="body3"
-          sx={{ fontWeight: "md", color: "text.secondary" }}
-        >
-          ~ {format(party.due_date, "yyyy-MM-dd HH:mm:00")}
-        </Typography>
-        {party.status ? (
+        <TimeCounter dueDate={party.due_date} />
+        {new Date() > party.due_date ? (
+          ""
+        ) : (
           <Button
             variant="solid"
             size="sm"
             color="primary"
             aria-label="Explore Bahamas Islands"
             sx={{ ml: "auto", fontWeight: 600 }}
-            disabled={new Date() > party.due_date}
+            onClick={() => {
+              navigate(`/party/${party.id}`);
+            }}
           >
-            참여하기!
+            more
           </Button>
-        ) : (
-          ""
         )}
       </Box>
       <CardOverflow
@@ -95,12 +99,17 @@ const PartyCard = ({ party }: PartyProps): JSX.Element => {
         </Typography>
         <Typography
           level="body3"
-          sx={{ fontWeight: "md", color: "text.secondary", marginLeft: "auto" }}
+          sx={{
+            fontWeight: "md",
+            color: "text.secondary",
+            marginLeft: "auto",
+          }}
         >
-          {timer()}
+          {timer(party.created_date)}
         </Typography>
       </CardOverflow>
     </Card>
+    // </Link>
   );
 };
 

diff --git a/front/src/pages/party.tsx b/front/src/pages/party.tsx
@@ -1,7 +1,12 @@
 import { useState } from "react";
-import Stack from "@mui/joy/Stack";
-import Sheet from "@mui/joy/Sheet";
 import PartyCard from "components/party/PartyCard";
+import CreateModal from "components/party/CreateModal";
+import Stack from "@mui/joy/Stack";
+import AddCircleIcon from "@mui/icons-material/AddCircle";
+import { Box } from "@mui/joy";
+import { IconButton } from "@mui/joy";
+import { Typography } from "@mui/joy";
+import { Divider } from "@mui/material";
 
 export type PartyInfo = {
   id: number;
@@ -34,83 +39,77 @@ const Party = (): JSX.Element => {
       category: "배달",
       max: 5,
       current: 3,
-      due_date: new Date(),
+      due_date: new Date("2023-03-17 23:00:00"),
       created_date: new Date("2023-03-17 22:00:00"),
       writer: "danpark",
-      status: false,
+      status: true,
     },
     {
       id: 2,
       title: "저녁에 피자 드실 분",
       category: "배달",
       max: 5,
       current: 3,
-      due_date: new Date(),
+      due_date: new Date("2023-03-23 23:00:00"),
       created_date: new Date("2023-03-17 22:00:00"),
       writer: "danpark",
-      status: false,
+      status: true,
     },
     {
       id: 3,
       title: "저녁에 피자 드실 분",
       category: "배달",
       max: 5,
       current: 3,
-      due_date: new Date(),
+      due_date: new Date("2023-03-23 23:00:00"),
       created_date: new Date("2023-03-17 22:00:00"),
       writer: "danpark",
-      status: false,
+      status: true,
     },
     {
       id: 4,
       title: "저녁에 피자 드실 분",
       category: "배달",
       max: 5,
       current: 3,
-      due_date: new Date(),
+      due_date: new Date("2023-03-23 23:00:00"),
       created_date: new Date("2023-03-17 22:00:00"),
       writer: "danpark",
-      status: false,
+      status: true,
     },
     {
       id: 5,
       title: "저녁에 피자 드실 분",
       category: "배달",
       max: 5,
       current: 3,
-      due_date: new Date(),
+      due_date: new Date("2023-03-23 23:00:00"),
       created_date: new Date("2023-03-17 22:00:00"),
       writer: "danpark",
-      status: false,
+      status: true,
     },
   ]);
 
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
   return (
-    <div style={{ height: "92%" }}>
-      <Sheet
-        sx={{
-          width: "90%",
-          height: "85%",
-          mx: "auto", // margin left & right
-          my: 3, // margin top & botom
-          py: 1, // padding top & bottom
-          px: 1, // padding left & right
-          display: "flex",
-          flexDirection: "column",
-          gap: 2,
-          borderRadius: "sm",
-          boxShadow: "md",
-          alignItems: "center",
+    <>
+      <Stack sx={{ overflow: "auto", px: 1, height: "90%" }}>
+        {list.map((item) => (
+          <PartyCard party={item} />
+        ))}
+      </Stack>
+      <IconButton
+        aria-label="delete"
+        variant="plain"
+        onClick={() => {
+          setIsOpen(true);
         }}
-        variant="outlined"
       >
-        <Stack sx={{ overflow: "auto", px: 1 }}>
-          {list.map((item) => (
-            <PartyCard party={item} />
-          ))}
-        </Stack>
-      </Sheet>
-    </div>
+        <AddCircleIcon fontSize="large" />
+      </IconButton>
+      <CreateModal isOpen={isOpen} setIsOpen={setIsOpen} />
+    </>
   );
 };