[route] 바텀시트 상단 api 연결, 경로상세 컴포넌트 연결

src/components/route/BottomSheet.tsx

@@ -2,7 +2,7 @@ import { Dispatch, SetStateAction, useRef } from 'react';
 import styled from 'styled-components';
 import TopInfo from '@/components/route/bottomSheet/TopInfo';
 import BackBtn from '@/components/route/common/BackBtn';
-import PathDetail from '@/components/route/bottomSheet/PathDetail';
+import DetailRoute from '@/components/main/DetailRoute';
 
 interface IBottomSheetType {
   isBottomSheetOpen: boolean;
@@ -30,7 +30,7 @@ export default function BottomSheet({
       <div>
         <TopInfo setIsBottomSheetOpen={setIsBottomSheetOpen} />
         <PathDetailInfo className="hide-scroll">
-          <PathDetail />
+          <DetailRoute index={0} />
         </PathDetailInfo>
       </div>
     </Container>
@@ -52,14 +52,15 @@ const Container = styled.div<{ $isBottomSheetOpen: boolean }>`
     height: calc(100vh - 203px);
 
     transform: ${(props) =>
-      props.$isBottomSheetOpen ? 'translate(0, 0)' : 'translate(0, 526px)'};
+      props.$isBottomSheetOpen ? 'translate(0, 0)' : 'translate(0, 85%)'};
     transition: all 0.5s ease-in-out;
   }
 `;
 
 const PathDetailInfo = styled.div`
+  width: 390px;
   height: 100%;
-  padding: 24px 27px 0 16px;
+  padding: 24px 16px 88px;
   background-color: #fff;
   overflow: auto;
 `;

src/components/route/bottomSheet/TopInfo.tsx

@@ -9,6 +9,10 @@ import { IPathProps } from '@/type/search';
 import { pathResultState } from '@/recoil/search';
 import { PathDetailResponseProps } from '@/type/path';
 import usePathDetailQuery from '@/hooks/usePathDetailQuery';
+import {
+  formattingTimeTaken,
+  formattingRemainTime,
+} from '@/utils/time/boardingTime';
 
 export default function TopInfo({
   setIsBottomSheetOpen,
@@ -34,6 +38,27 @@ export default function TopInfo({
     const [hour, minutes] = matchResult;
     const timeZone = Number(hour) < 24 && Number(hour) >= 12 ? 'PM' : 'AM';
     formatLastBoardingTime = `${timeZone}${hour}:${minutes}`;
+  } else {
+    formatLastBoardingTime = '정보없음';
+  }
+
+  // 소요시간
+  const totalTime = formattingTimeTaken(pathDetailLocations?.totalTime);
+
+  // 대기시간
+  let waitingTime;
+  if (
+    pathDetailLocations?.lastBoardingTime === undefined &&
+    pathDetailLocations?.totalTime === undefined &&
+    pathDetailLocations?.type === undefined
+  ) {
+    waitingTime = undefined;
+  } else {
+    waitingTime = formattingRemainTime(
+      pathDetailLocations?.lastBoardingTime,
+      pathDetailLocations?.totalTime,
+      pathDetailLocations?.type
+    );
   }
 
   const handleTopInfo = () => {
@@ -49,7 +74,11 @@ export default function TopInfo({
             <Image src={icSubGreen} alt="지하철 아이콘" />
             <Image src={icBusBlue} alt="버스 아이콘" />
           </div>
-          <p>지하철+버스</p>
+          <p>
+            {pathDetailLocations?.type === undefined
+              ? '정보없음'
+              : pathDetailLocations?.type}
+          </p>
         </Vehicle>
         <TextInfo>
           <ul>
@@ -60,11 +89,17 @@ export default function TopInfo({
             <span></span>
             <li>
               <span>소요시간 </span>
-              <span>1시간 31분</span>
+              <span>{totalTime === 0 ? '정보없음' : totalTime}</span>
             </li>
           </ul>
           <p>
-            <span>16분</span> 뒤에 출발해야해요
+            {waitingTime === undefined ? (
+              <span>정보없음</span>
+            ) : (
+              <>
+                <span>{waitingTime}</span> 뒤에 출발해야해요
+              </>
+            )}
           </p>
         </TextInfo>
       </div>

src/type/path.ts

@@ -12,6 +12,8 @@ export interface PathDetailRequestProps extends PathAllRequestProps {
 
 export interface PathDetailResponseProps {
   lastBoardingTime: string;
+  totalTime: number;
+  type: '버스' | '지하철';
   path: PathProps[];
 }
 export interface PathProps {