Merge pull request #94 from boostcampwm-2022/refactor/update-recruit-…

…card refactor: #93 RecruitCard 최신화
boostcampwm-2022 · Nov 24, 2022 · b88d5d7 · b88d5d7
2 parents 833fa2b + f3f1a7a
commit b88d5d7
Show file tree

Hide file tree

Showing 12 changed files with 79 additions and 46 deletions.
diff --git a/client/src/assets/icons/index.ts b/client/src/assets/icons/index.ts
@@ -12,6 +12,7 @@ import UNDO_ICON from "./undo_icon.svg";
 import RULER_ICON from "./ruler_icon.svg";
 import LOCATION_ICON from "./location_icon.svg";
 import RUNNING_ICON from "./running_icon.svg";
+import USER_ICON from "./user_icon.svg";
 export {
     USER_CIRCLE_ICON,
     ARROW_LEFT_ICON,
@@ -27,4 +28,5 @@ export {
     LOCATION_ICON,
     RUNNING_ICON,
     SEARCH_ICON,
+    USER_ICON,
 };
diff --git a/client/src/assets/icons/ruler_icon.svg b/client/src/assets/icons/ruler_icon.svg
diff --git a/client/src/assets/icons/running_icon.svg b/client/src/assets/icons/running_icon.svg
diff --git a/client/src/assets/icons/user_icon.svg b/client/src/assets/icons/user_icon.svg
diff --git a/client/src/components/Card/Card.styles.ts b/client/src/components/Card/Card.styles.ts
@@ -24,6 +24,7 @@ export const CardTitle = styled.p`
 
 export const SummaryBody = styled.div`
     ${flexRowSpaceBetween};
+    align-items: center;
     div {
         ${flexRowSpaceBetween};
         margin-top: 4px;
@@ -43,3 +44,17 @@ export const SummaryBody = styled.div`
 export const UserIdLabel = styled.span`
     color: ${COLOR.LIGHT_GRAY} !important;
 `;
+
+export const PeopleWrapper = styled.div`
+    img {
+        width: 10px;
+        margin-right: 4px;
+    }
+    span {
+        ${fontSmall(COLOR.BLACK, 400)};
+    }
+`;
+
+export const SummaryHead = styled.div`
+    ${flexRowSpaceBetween};
+`;
diff --git a/client/src/components/Card/CourseCard/CourseCard.stories.tsx b/client/src/components/Card/CourseCard/CourseCard.stories.tsx
@@ -18,19 +18,21 @@ export const _CourseCard: ComponentStory<typeof CourseCard> = (args) => (
 );
 _CourseCard.args = {
     data: {
-        title: "황새울공원 한 바퀴 도는 코스입니다.",
-        courseId: 5,
-        path: [
+        id: 1,
+        title: "Dirty Ho (Lan tou He)",
+        img: "https://kr.object.ncloudstorage.com/j199/img/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202022-11-20%20%EC%98%A4%ED%9B%84%204.01.56.png",
+        path: JSON.stringify([
             { lat: 126.57091836134346, lng: 33.45090000378721 },
             { lat: 126.57004847387998, lng: 33.450635526049844 },
             { lat: 126.56931524544794, lng: 33.45101165404891 },
             { lat: 126.56932224193068, lng: 33.44959616387136 },
             { lat: 126.5700747443057, lng: 33.449670903389 },
             { lat: 126.570502727405, lng: 33.450123187413496 },
-        ],
-        pathLength: 3355,
-        userId: "gchoi96",
-        img: "https://kr.object.ncloudstorage.com/j199/img/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202022-11-20%20%EC%98%A4%ED%9B%84%204.01.56.png",
-        hCode: "신림동",
+        ]),
+        pathLength: 60,
+        hDong: {
+            name: "",
+        },
+        createdAt: "2022-11-21T08:55:33.162Z",
     },
 };
diff --git a/client/src/components/Card/CourseCard/CourseCard.tsx b/client/src/components/Card/CourseCard/CourseCard.tsx
@@ -9,12 +9,12 @@ interface CourseCardProps {
 
 const CourseCard = ({ data }: CourseCardProps) => {
     return (
-        <Card img={data.img} to={`/course/${data.courseId}`}>
+        <Card img={data.img} to={`/course/${data.id}`}>
             <CardTitle>{data.title}</CardTitle>
             <SummaryBody>
                 <div>
                     <img src={LOCATION_ICON} />
-                    <span>{data.hCode}</span>
+                    <span>{data.hDong.name}</span>
                     <img src={RULER_ICON} />
                     <span>{`${(data.pathLength / 1000).toFixed(1)}km`}</span>
                 </div>

diff --git a/client/src/components/Card/RecruitCard/RecruitCard.stories.tsx b/client/src/components/Card/RecruitCard/RecruitCard.stories.tsx
@@ -17,27 +17,24 @@ export const _RecruitCard: ComponentStory<typeof RecruitCard> = (args) => (
 );
 _RecruitCard.args = {
     data: {
-        title: "달려~ 달려~",
-        recruitId: 5,
+        id: 125,
+        title: "gustas",
+        startTime: "2022-11-25T14:50:00.000Z",
+        maxPpl: 4,
+        currentPpl: 1,
+        userId: "guss95",
+        createdAt: "2022-11-24T15:04:46.095Z",
+        pace: 330,
         course: {
-            title: "황새울공원 한 바퀴 도는 코스입니다.",
-            courseId: 5,
-            path: [
-                { lat: 126.57091836134346, lng: 33.45090000378721 },
-                { lat: 126.57004847387998, lng: 33.450635526049844 },
-                { lat: 126.56931524544794, lng: 33.45101165404891 },
-                { lat: 126.56932224193068, lng: 33.44959616387136 },
-                { lat: 126.5700747443057, lng: 33.449670903389 },
-                { lat: 126.570502727405, lng: 33.450123187413496 },
-            ],
-            pathLength: 3355,
-            userId: "gchoi96",
+            id: 1,
+            title: "Dirty Ho (Lan tou He)",
             img: "https://kr.object.ncloudstorage.com/j199/img/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202022-11-20%20%EC%98%A4%ED%9B%84%204.01.56.png",
-            hCode: "신림동",
+            path: "",
+            pathLength: 60,
+            hDong: {
+                name: "잠실동",
+            },
+            createdAt: "2022-11-21T08:55:33.162Z",
         },
-        startTime: new Date(),
-        maxPpl: 4,
-        pace: 210,
-        authorId: "gchoi96",
     },
 };
diff --git a/client/src/components/Card/RecruitCard/RecruitCard.tsx b/client/src/components/Card/RecruitCard/RecruitCard.tsx
@@ -1,27 +1,33 @@
 import { Recruit } from "#types/Recruit";
 import { getDisplayPaceString } from "#utils/stringtils";
 import Card from "../Card";
-import { LOCATION_ICON, RULER_ICON, RUNNING_ICON } from "#assets/icons";
-import { CardTitle, SummaryBody, UserIdLabel } from "../Card.styles";
+import { LOCATION_ICON, RULER_ICON, RUNNING_ICON, USER_ICON } from "#assets/icons";
+import { CardTitle, PeopleWrapper, SummaryBody, SummaryHead, UserIdLabel } from "../Card.styles";
 
 interface RecruitCardProps {
     data: Recruit;
 }
 
 const RecruitCard = ({ data }: RecruitCardProps) => {
     return (
-        <Card img={data.course.img} to={`/recruid/${data.recruitId}`}>
-            <CardTitle>{data.title}</CardTitle>
+        <Card img={data.course.img} to={`/recruid/${data.id}`}>
+            <SummaryHead>
+                <CardTitle>{data.title}</CardTitle>
+                <PeopleWrapper>
+                    <img src={USER_ICON} />
+                    <span>{`${data.currentPpl}/${data.maxPpl}`}</span>
+                </PeopleWrapper>
+            </SummaryHead>
             <SummaryBody>
                 <div>
                     <img src={LOCATION_ICON} />
-                    <span>{data.course.hCode}</span>
+                    <span>{data.course.hDong.name}</span>
                     <img src={RULER_ICON} />
                     <span>{`${(data.course.pathLength / 1000).toFixed(1)}km`}</span>
                     <img src={RUNNING_ICON} />
                     <span>{getDisplayPaceString(data.pace)}</span>
                 </div>
-                <UserIdLabel>{data.authorId}</UserIdLabel>
+                <UserIdLabel>{data.userId}</UserIdLabel>
             </SummaryBody>
         </Card>
     );

diff --git a/client/src/types/Course.ts b/client/src/types/Course.ts
@@ -1,11 +1,13 @@
+import { hDong } from "./hDong";
 import { LatLng } from "./LatLng";
 
 export interface Course {
+    id: number;
     title: string;
-    courseId: number;
-    path: LatLng[];
-    pathLength: number;
-    hCode: string;
-    userId: string;
     img: string;
+    path: string;
+    pathLength: number;
+    hDong: hDong;
+    createdAt: string;
+    userId?: string;
 }
diff --git a/client/src/types/Recruit.ts b/client/src/types/Recruit.ts
@@ -1,11 +1,13 @@
 import { Course } from "./Course";
 
 export interface Recruit {
+    id: number;
     title: string;
-    recruitId: number;
-    course: Course;
-    startTime: Date;
+    startTime: string;
     maxPpl: number;
+    currentPpl: number;
+    userId: string;
+    createdAt: string;
+    course: Course;
     pace: number;
-    authorId: string;
 }
diff --git a/client/src/types/hDong.ts b/client/src/types/hDong.ts
@@ -0,0 +1,4 @@
+export interface hDong {
+    name?: string;
+    code?: string;
+}