feat: get checklist list v1 에 맞춰 업데이트

woowacourse-teams · Oct 24, 2024 · ba56d4e · ba56d4e
1 parent 9400525
commit ba56d4e
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 15 deletions.
diff --git a/frontend/src/apis/checklist.ts b/frontend/src/apis/checklist.ts
@@ -24,7 +24,7 @@ export const getChecklistDetail = async (id: number) => {
 
 export const getChecklists = async (isLikeFiltered: boolean = false) => {
   const response = await fetcher.get({
-    url: BASE_URL + (isLikeFiltered ? ENDPOINT.CHECKLISTS_LIKE : ENDPOINT.CHECKLISTS),
+    url: BASE_URL + (isLikeFiltered ? ENDPOINT.CHECKLISTS_LIKE : ENDPOINT.CHECKLISTS_V1),
   });
   const data = await response.json();
   return data.checklists.map(mapObjNullToUndefined).slice(0, 10);

diff --git a/frontend/src/components/Main/ChecklistPreviewCard.tsx b/frontend/src/components/Main/ChecklistPreviewCard.tsx
@@ -18,7 +18,7 @@ const ChecklistPreviewCard = ({ index, checklist }: Props) => {
   const colorList = ['green', 'blue', 'red'];
   const { color200, color500 } = getSeqColor(index, colorList);
 
-  const { checklistId, station, walkingTime, roomName, deposit, rent } = checklist;
+  const { checklistId, station, roomName, deposit, rent } = checklist;
 
   const handleClick = () => {
     navigate(ROUTE_PATH.checklistOne(checklistId));
@@ -29,7 +29,7 @@ const ChecklistPreviewCard = ({ index, checklist }: Props) => {
       <HomeCircle color={color500} bgColor={color200} aria-hidden="true" />
       <S.Column>
         <S.Label>
-          {formattedUndefined(station)}역 · {formattedUndefined(walkingTime)}분
+          {formattedUndefined(station.stationName)}역 · {formattedUndefined(station.walkingTime)}분
         </S.Label>
         <S.Row>
           <S.Title>{roomName}</S.Title>

diff --git a/frontend/src/components/_common/Subway/SubwayLineIcon/SubwayLineIcon.tsx b/frontend/src/components/_common/Subway/SubwayLineIcon/SubwayLineIcon.tsx
@@ -3,7 +3,11 @@ import styled from '@emotion/styled';
 import { flexCenter, title4 } from '@/styles/common';
 import SUBWAY_LINE_PALLETE, { SubwayLineName } from '@/styles/subway';
 
-const SubwayLineIcon = ({ lineName }: { lineName: SubwayLineName }) => {
+interface Props {
+  lineName: SubwayLineName;
+}
+
+const SubwayLineIcon = ({ lineName }: Props) => {
   const lineColor = SUBWAY_LINE_PALLETE[lineName];
 
   const isNumberTypeSubwayName = lineName.slice(-2) === '호선' && lineName.length === 3;

diff --git a/frontend/src/mocks/fixtures/checklistList.ts b/frontend/src/mocks/fixtures/checklistList.ts
@@ -6,8 +6,11 @@ export const checklistList = {
       address: '서울 광진구 구의동 센트럴빌',
       deposit: 800,
       rent: 65,
-      station: '건대입구',
-      walkingTime: 10,
+      station: {
+        stationName: '잠실(송파구청)',
+        stationLine: ['8호선', '2호선'],
+        walkingTime: 10,
+      },
       createdAt: '2024-01-01T10:00:00Z',
       summary: '전체적으로 무난, 방 크기는 평범',
       isLiked: true,
@@ -18,8 +21,11 @@ export const checklistList = {
       address: '서울시 관악구 봉천동 관악로 23',
       deposit: 1000,
       rent: 50,
-      station: '서울대 입구',
-      walkingTime: 10,
+      station: {
+        stationName: '서울대입구',
+        stationLine: ['2호선'],
+        walkingTime: 10,
+      },
       createdAt: '2024-02-01T10:00:00Z',
       summary: '트리플 역세권이나 회사에서 조금 멀다.',
       isLiked: false,
@@ -30,8 +36,11 @@ export const checklistList = {
       address: '서울 동작구 사당동',
       deposit: 500,
       rent: 45,
-      station: '사당',
-      walkingTime: 5,
+      station: {
+        stationName: '사당',
+        stationLine: ['4호선', '2호선'],
+        walkingTime: 10,
+      },
       createdAt: '2024-03-01T10:00:00Z',
       summary: '방은 좁으나 싼 가격이 장점!',
       isLiked: false,
@@ -42,8 +51,11 @@ export const checklistList = {
       address: '서울 동작구 사당동',
       deposit: 500,
       rent: 45,
-      station: '사당',
-      walkingTime: 5,
+      station: {
+        stationName: '사당',
+        stationLine: ['4호선', '2호선'],
+        walkingTime: 10,
+      },
       createdAt: '2024-08-21T10:00:00Z',
       summary: '방은 좁으나 싼 가격이 장점!',
       isLiked: false,

diff --git a/frontend/src/mocks/handlers/checklist.ts b/frontend/src/mocks/handlers/checklist.ts
@@ -23,6 +23,10 @@ export const checklistHandlers = [
     return HttpResponse.json(checklistList, { status: 200 });
   }),
 
+  http.get(BASE_URL + ENDPOINT.CHECKLISTS_V1, () => {
+    return HttpResponse.json(checklistList, { status: 200 });
+  }),
+
   http.get(BASE_URL + ENDPOINT.CHECKLISTS_LIKE, () => {
     const newChecklistList = {
       ...checklistList,
@@ -36,7 +40,12 @@ export const checklistHandlers = [
   }),
 
   http.post(BASE_URL + ENDPOINT.CHECKLISTS_V1, () => {
-    return HttpResponse.json(checklistList, { status: 201 });
+    return HttpResponse.json(
+      {
+        bangggoodCode: 'AUTH_TOKEN_EMPTY',
+      },
+      { status: 401 },
+    );
   }),
 
   http.put(BASE_URL + ENDPOINT.CHECKLIST_CUSTOM, () => {

diff --git a/frontend/src/types/checklist.ts b/frontend/src/types/checklist.ts
@@ -48,11 +48,10 @@ export interface ChecklistPreview {
   address: string;
   deposit: number;
   rent: number;
+  station: SubwayStation;
   createdAt: string;
   summary: string;
   isLiked: boolean;
-  station: string;
-  walkingTime: number;
 }
 
 // 체크리스트 디테일