diff --git a/client/src/assets/icons/index.ts b/client/src/assets/icons/index.ts
index 3dbf2c7..f3a30af 100644
--- 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
index 323382b..0644573 100644
--- a/client/src/assets/icons/ruler_icon.svg
+++ b/client/src/assets/icons/ruler_icon.svg
@@ -1,3 +1,3 @@
diff --git a/client/src/assets/icons/running_icon.svg b/client/src/assets/icons/running_icon.svg
index 61d91c7..45b03ab 100644
--- a/client/src/assets/icons/running_icon.svg
+++ b/client/src/assets/icons/running_icon.svg
@@ -1,3 +1,3 @@
diff --git a/client/src/assets/icons/user_icon.svg b/client/src/assets/icons/user_icon.svg
new file mode 100644
index 0000000..f08b6e1
--- /dev/null
+++ b/client/src/assets/icons/user_icon.svg
@@ -0,0 +1,3 @@
+
diff --git a/client/src/components/Card/Card.styles.ts b/client/src/components/Card/Card.styles.ts
index 84e6545..1b62257 100644
--- 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
index dac30b3..111e515 100644
--- 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 = (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
index a79755d..427175b 100644
--- 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 (
-
+
{data.title}
-
{data.hCode}
+
{data.hDong.name}
{`${(data.pathLength / 1000).toFixed(1)}km`}
diff --git a/client/src/components/Card/RecruitCard/RecruitCard.stories.tsx b/client/src/components/Card/RecruitCard/RecruitCard.stories.tsx
index 6042c8d..2f0bdda 100644
--- 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 = (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
index e5cb7ef..f6be8d1 100644
--- a/client/src/components/Card/RecruitCard/RecruitCard.tsx
+++ b/client/src/components/Card/RecruitCard/RecruitCard.tsx
@@ -1,8 +1,8 @@
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;
@@ -10,18 +10,24 @@ interface RecruitCardProps {
const RecruitCard = ({ data }: RecruitCardProps) => {
return (
-
- {data.title}
+
+
+ {data.title}
+
+ 
+ {`${data.currentPpl}/${data.maxPpl}`}
+
+
-
{data.course.hCode}
+
{data.course.hDong.name}
{`${(data.course.pathLength / 1000).toFixed(1)}km`}
{getDisplayPaceString(data.pace)}
- {data.authorId}
+ {data.userId}
);
diff --git a/client/src/types/Course.ts b/client/src/types/Course.ts
index 17baf95..e55af65 100644
--- 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
index 97a546d..9696338 100644
--- 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
new file mode 100644
index 0000000..2aa082d
--- /dev/null
+++ b/client/src/types/hDong.ts
@@ -0,0 +1,4 @@
+export interface hDong {
+ name?: string;
+ code?: string;
+}