[REFACTOR] 경로 검색 페이지 디자인 수정사항 반영

frontend/src/pages/RouteSelectPage/components/RouteResult/RouteList/RouteItem/RouteBar/RouteBar.styled.ts

@@ -42,7 +42,6 @@ export const RouteProgressBar = styled.div<{ $isTraffic: boolean; $color: string
 `;
 
 export const RouteProgressBarText = styled.div<{ $trafficType: string }>`
-  padding-left: 1.2rem;
   display: flex;
   justify-content: center;
   align-items: center;

frontend/src/pages/RouteSelectPage/components/RouteResult/RouteList/RouteItem/RouteBar/index.tsx

@@ -1,15 +1,9 @@
 import { getPathBarWidth, getPathColor } from '../RouteItem.utils';
 import * as S from './RouteBar.styled';
 
-import Icon, { IconType } from '@/components/Icon';
 import { RouteType } from '@/pages/RouteSelectPage/RouteSelectPage.types';
 
-const MIN_BAR_WIDTH = 11;
-
-const ICON_MAPPER = {
-  BUS: 'Bus' as const,
-  SUBWAY: 'Subway' as const,
-} satisfies Record<string, IconType>;
+const MIN_BAR_WIDTH = 6;
 
 const RouteBar = ({ route }: { route: RouteType }) => {
   return (
@@ -24,15 +18,6 @@ const RouteBar = ({ route }: { route: RouteType }) => {
 
         return (
           <S.RouteItem key={index} $barWidth={barWidth}>
-            {path.trafficType !== 'WALK' && (
-              <S.IconWrapper $color={pathColor}>
-                <Icon
-                  icon={ICON_MAPPER[path.trafficType as keyof typeof ICON_MAPPER]}
-                  width={10}
-                  height={10}
-                />
-              </S.IconWrapper>
-            )}
             <S.RouteProgressBar
               $isTraffic={path.trafficType === 'BUS' || path.trafficType === 'SUBWAY'}
               $color={pathColor}

frontend/src/pages/RouteSelectPage/components/RouteResult/RouteList/RouteItem/RouteTimeInfo/RouteTimeInfo.styled.ts

@@ -13,13 +13,13 @@ export const TotalTime = styled.span`
 `;
 
 export const TotalSectionTimeBox = styled.div`
-  ${({ theme }) => theme.fonts.label14Med};
-  color: ${({ theme }) => theme.colors.gray500};
+  ${({ theme }) => theme.fonts.body15};
+  color: ${({ theme }) => theme.colors.gray400};
   display: flex;
   align-items: center;
   gap: 0.4rem;
 `;
 
 export const TotalSectionTime = styled.span`
-  color: ${({ theme }) => theme.colors.gray800};
+  color: ${({ theme }) => theme.colors.gray900};
 `;

frontend/src/pages/RouteSelectPage/components/RouteResult/RouteList/RouteItem/RouteTimeInfo/index.tsx

@@ -15,7 +15,7 @@ const RouteTimeInfo = ({ totalTime, totalSectionTime }: RouteTimeInfoProps) => {
       <S.TotalTime>{minutesToHours(totalTime)}</S.TotalTime>
 
       <S.TotalSectionTimeBox>
-        <Icon icon="Fire" width={16} height={16} color={theme.colors.green600} />
+        <Icon icon="Fire" width={16} height={16} color={theme.colors.gray400} />
         <span>활용 가능 시간</span>
         <S.TotalSectionTime>{minutesToHours(totalSectionTime)}</S.TotalSectionTime>
       </S.TotalSectionTimeBox>

frontend/src/pages/RouteSelectPage/components/RouteResult/RouteList/RouteItem/index.tsx

@@ -16,7 +16,7 @@ const RouteItem = ({ route, isSelected, onClick }: RouteItemProps) => {
 
   return (
     <S.RouteResultItem $isSelected={isSelected} onClick={onClick}>
-      {isRecentlyUsed ? <S.RecentlyUsedBox>최근에 이용했어요</S.RecentlyUsedBox> : ''}
+      {isRecentlyUsed && <S.RecentlyUsedBox>최근에 이용했어요</S.RecentlyUsedBox>}
       <RouteTimeInfo totalTime={totalTime} totalSectionTime={totalSectionTime} />
       <RouteBar route={route} />
       <RouteDetail route={route} />

frontend/src/pages/RouteSelectPage/components/RouteResult/RouteResult.styled.ts

@@ -10,6 +10,32 @@ export const RouteResultContainer = styled.div`
   overflow: hidden;
 `;
 
+export const NoRouteContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-top: 8rem;
+  gap: 2rem;
+`;
+
+export const NoRouteText = styled.div`
+  ${({ theme }) => theme.fonts.body15Med};
+  color: ${({ theme }) => theme.colors.gray600};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const NoRouteButton = styled.button`
+  ${({ theme }) => theme.fonts.body15};
+  color: ${({ theme }) => theme.colors.gray950};
+  border-radius: 0.8rem;
+  padding: 0.8rem 1.6rem;
+  border: 0.15rem solid ${({ theme }) => theme.colors.gray300};
+`;
+
 export const StartButton = styled.button`
   position: fixed;
   bottom: 4rem;

frontend/src/pages/RouteSelectPage/components/RouteResult/StartTime/StartTime.styled.ts

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 export const StartTimeBox = styled.div`
-  ${({ theme }) => theme.fonts.label14Med};
+  ${({ theme }) => theme.fonts.label14Semi};
   color: ${({ theme }) => theme.colors.gray500};
   padding: 1.2rem 2.4rem;
   border-bottom: 0.4rem solid ${({ theme }) => theme.colors.gray50};

frontend/src/pages/RouteSelectPage/components/RouteResult/index.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useSearchParams } from 'react-router';
+import { useNavigate, useSearchParams } from 'react-router';
 
 import RouteList from './RouteList';
 import * as S from './RouteResult.styled';
@@ -14,6 +14,11 @@ const RouteResult = () => {
   const { data: routes = [] } = useSearchRoutesQuery(startX, startY, endX, endY);
   const { mutate: createPlan } = useCreatePlanMutation(startX, startY, endX, endY);
   const [selectedRoute, setSelectedRoute] = useState<RouteType | null>(null);
+  const navigate = useNavigate();
+
+  const goToHome = () => {
+    navigate('/');
+  };
 
   const handleRouteSelect = (route: RouteType) => {
     if (selectedRoute === route) {
@@ -44,14 +49,26 @@ const RouteResult = () => {
   return (
     <S.RouteResultContainer>
       <StartTime />
-      <RouteList
-        routes={routes}
-        selectedRoute={selectedRoute}
-        handleRouteSelect={handleRouteSelect}
-      />
-      <S.StartButton onClick={handleStartButtonClick} disabled={!selectedRoute}>
-        {selectedRoute ? '이 경로로 출발할까요?' : '경로를 선택해주세요'}
-      </S.StartButton>
+      {routes.length === 0 ? (
+        <S.NoRouteContainer>
+          <S.NoRouteText>
+            <span>길 찾기 결과가 없어요</span>
+            <span>주소를 다시 입력해볼까요?</span>
+          </S.NoRouteText>
+          <S.NoRouteButton onClick={goToHome}>처음으로 가기</S.NoRouteButton>
+        </S.NoRouteContainer>
+      ) : (
+        <>
+          <RouteList
+            routes={routes}
+            selectedRoute={selectedRoute}
+            handleRouteSelect={handleRouteSelect}
+          />
+          <S.StartButton onClick={handleStartButtonClick} disabled={!selectedRoute}>
+            {selectedRoute ? '이 경로로 출발할까요?' : '경로를 선택해주세요'}
+          </S.StartButton>
+        </>
+      )}
     </S.RouteResultContainer>
   );
 };