[FE] 지하철 포맷을 일시 수정한다.

frontend/src/components/ChecklistDetail/ChecklistDetailSection.tsx

@@ -20,11 +20,12 @@ const ChecklistDetailSection = () => {
   return (
     <>
       <RoomInfoSection
+        checklist={checklist}
         room={checklist?.room}
         options={checklist?.options}
         isLiked={checklist?.isLiked}
         checklistId={Number(checklistId)}
-        nearSubways={[]}
+        nearSubways={checklist.stations.stations}
       />
       <ChecklistAnswerSection categories={checklist?.categories} />
       <MemoSection memo={checklist?.room?.memo} />

frontend/src/components/ChecklistDetail/RoomInfoSection.tsx

@@ -17,6 +17,7 @@ import AddressMap from '@/components/_common/Map/AddressMap';
 import SubwayStations from '@/components/_common/Subway/SubwayStations';
 import { IncludedMaintenancesData } from '@/constants/roomInfo';
 import { flexColumn, flexRow, flexSpaceBetween, title2 } from '@/styles/common';
+import { ChecklistInfo } from '@/types/checklist';
 import { Option } from '@/types/option';
 import { RoomInfo } from '@/types/room';
 import { SubwayStation } from '@/types/subway';
@@ -29,9 +30,10 @@ interface Props {
   checklistId: number;
   isLiked: boolean;
   nearSubways: SubwayStation[];
+  checklist: ChecklistInfo;
 }
 
-const RoomInfoSection = ({ nearSubways, room, options, checklistId, isLiked }: Props) => {
+const RoomInfoSection = ({ checklist, nearSubways, room, options, checklistId, isLiked }: Props) => {
   const {
     roomName,
     deposit,
@@ -95,7 +97,7 @@ const RoomInfoSection = ({ nearSubways, room, options, checklistId, isLiked }: P
       </S.Row>
       <S.Row>
         <Subway aria-label="가까운 지하철" />
-        <SubwayStations stations={nearSubways} />
+        <SubwayStations stations={nearSubways} checklist={checklist} />
       </S.Row>
       <S.GapBox>
         <S.Row>

frontend/src/components/_common/Subway/SubwayStations.tsx

@@ -1,18 +1,32 @@
-import FlexBox from '@/components/_common/FlexBox/FlexBox';
-import FormField from '@/components/_common/FormField/FormField';
+import styled from '@emotion/styled';
+
 import SubwayStationItem from '@/components/_common/Subway/SubwayStationItem';
+import { flexColumn } from '@/styles/common';
+import { ChecklistInfo } from '@/types/checklist';
 import { SubwayStation } from '@/types/subway';
 
-const SubwayStations = ({ stations }: { stations: SubwayStation[] }) => {
+interface Props {
+  checklist?: ChecklistInfo;
+  stations: SubwayStation[];
+}
+
+const SubwayStations = ({ stations }: Props) => {
   return (
-    <FlexBox.Vertical>
-      {stations?.length ? (
-        stations?.map(station => <SubwayStationItem key={station.stationName} station={station} />)
+    <>
+      {stations.length ? (
+        <S.Box>{stations?.map(station => <SubwayStationItem station={station} key={station.stationName} />)}</S.Box>
       ) : (
-        <FormField.TextBox text={'보신 방과 가까운 지하철역을 찾아드릴게요.'} />
+        <span>{'보신 방과 가까운 지하철역을 찾아드릴게요.'}</span>
       )}
-    </FlexBox.Vertical>
+    </>
   );
 };
 
 export default SubwayStations;
+
+const S = {
+  Box: styled.div`
+    ${flexColumn};
+    gap: 1rem;
+  `,
+};

frontend/src/mocks/fixtures/checklistDetail.ts

@@ -69,5 +69,7 @@ export const checklistDetail: ChecklistInfo = {
       ],
     },
   ],
-  stations: nearSubway,
+  stations: {
+    stations: nearSubway,
+  },
 };

frontend/src/types/checklist.ts

@@ -62,7 +62,10 @@ export interface ChecklistInfo {
   room: Partial<RoomInfo>;
   options: Option[];
   categories: ChecklistCategoryWithAnswer[];
-  stations: SubwayStation[];
+  //TODO: 나중에 백엔드 api 수정되면 수정
+  stations: {
+    stations: SubwayStation[];
+  };
 }
 
 export interface ChecklistSelectedQuestions {