Design: 여정페이지 / 여정계획페이지 마크업 (지도 x)

package.json

@@ -15,6 +15,7 @@
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-tabs": "^1.0.4",

src/components/Plan/PlanSectionTop.tsx

@@ -0,0 +1,28 @@
+import TripInfo from '@components/Trip/TripInfo';
+import { BackBox } from '@components/common';
+import { useNavigate } from 'react-router-dom';
+import TripBudget from './TripBudget';
+import Tab from '@components/common/tab/Tab';
+
+const PlanSectionTop = () => {
+  const navigate = useNavigate();
+  return (
+    <div className="min-h-screen">
+      <BackBox
+        showBack={true}
+        showShare={true}
+        backHandler={() => {
+          navigate(-1);
+        }}
+      />
+      <TripInfo />
+      <TripBudget />
+      <Tab
+        lists={['Day1', 'Day2', 'Day3']}
+        contents={[<div>Day1</div>, <div>Day2</div>, <div>Day3</div>]}
+      />
+    </div>
+  );
+};
+
+export default PlanSectionTop;

src/components/Plan/TripBudget.tsx

@@ -0,0 +1,62 @@
+import * as Progress from '@radix-ui/react-progress';
+import { useEffect, useState } from 'react';
+
+const TripBudget = () => {
+  const [targetBudget, setTargetBudget] = useState(10000); // 예시 목표 경비
+  const [currentSpending, setCurrentSpending] = useState(0); // 초기 사용 경비
+
+  // 프로그레스 바 값 계산
+  const progress = (currentSpending / targetBudget) * 100;
+
+  useEffect(() => {
+    // 경비 수정 모달 추가 예정
+    const timer = setTimeout(() => setCurrentSpending(3000), 300);
+    return () => clearTimeout(timer);
+  }, []);
+
+  // 목표 경비 설정 함수
+  const handleSetTargetBudget = (newTargetBudget: number) => {
+    setTargetBudget(newTargetBudget);
+  };
+
+  return (
+    <div className="my-4">
+      <div className="caption1 mb-[2px]">사용 경비</div>
+      <div className="flex items-center">
+        <span className="title2 mr-[2px]">
+          {currentSpending.toLocaleString()}
+        </span>
+        <span className="body1">원</span>
+      </div>
+
+      <Progress.Root
+        className="relative my-2 h-[25px] w-full overflow-hidden rounded-[8px] border border-solid border-gray2"
+        style={{
+          transform: 'translateZ(0)',
+        }}
+        value={progress}>
+        <Progress.Indicator
+          className="ease-[cubic-bezier(0.65, 0, 0.35, 1)] h-full w-full bg-gray3 transition-transform duration-[660ms]"
+          style={{ transform: `translateX(-${100 - progress}%)` }}
+        />
+      </Progress.Root>
+
+      <div className="caption2 flex items-center justify-between pt-1">
+        <div className="">
+          <span className="mr-[4px]">목표 경비</span>
+          <button
+            onClick={() => handleSetTargetBudget(20000)}
+            className="text-gray3">
+            설정
+          </button>
+        </div>
+        <div>
+          <span>{targetBudget.toLocaleString()}</span>
+          <span>원</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TripBudget;

src/components/Trip/PlanTripButton.tsx

@@ -0,0 +1,15 @@
+import { PlanIcon, RightIcon } from '@components/common/icons/Icons';
+
+const PlanTripButton = () => {
+  return (
+    <button className="body3 my-6 flex w-full items-center justify-between rounded-[8px] bg-[#F3F4F5] px-[15px] py-[15px] text-gray7 text-main1">
+      <div className="flex items-center justify-start">
+        <PlanIcon />
+        여행 계획하기
+      </div>
+      <RightIcon />
+    </button>
+  );
+};
+
+export default PlanTripButton;

src/components/Trip/TripInfo.tsx

@@ -0,0 +1,21 @@
+import { UserIcon } from '@components/common/icons/Icons';
+
+const TripInfo = () => {
+  return (
+    <div className="my-5">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center">
+          <div className="title1 mb-[10px] mr-1">강릉 여행 일정</div>
+          <div className="flex items-center pb-[10px]">
+            <UserIcon size={20} fill="#888" color="#888" />
+            <span className="body4 pt-[1px] text-gray4">5</span>
+          </div>
+        </div>
+        <button className="body3 text-gray3">편집</button>
+      </div>
+      <span className="body1 text-gray4">23.12.23 ~ 23.12.25</span>
+    </div>
+  );
+};
+
+export default TripInfo;

src/components/Trip/TripSectionTop.tsx

@@ -1,9 +1,23 @@
 import Tab from '@components/common/tab/Tab';
+import TripInfo from './TripInfo';
+import { BackBox } from '@components/common';
+import { useNavigate } from 'react-router-dom';
+import PlanTripButton from './PlanTripButton';
 
 const TripSectionTop = () => {
+  const navigate = useNavigate();
+
   return (
-    <div className="min-h-[800px]">
-      <div className="my-1">여정 생성 완료 페이지</div>
+    <div className="min-h-screen">
+      <BackBox
+        showBack={true}
+        showShare={true}
+        backHandler={() => {
+          navigate(-1);
+        }}
+      />
+      <TripInfo />
+      <PlanTripButton />
       <Tab
         lists={['우리의 여행취향', '우리의 관심목록']}
         contents={[<div>우리의 여행취향</div>, <div>우리의 관심목록</div>]}

src/components/common/BackBox/BackBox.tsx

@@ -1,4 +1,4 @@
-import { LeftIcon } from '../icons/Icons';
+import { LeftIcon, ShareIcon } from '../icons/Icons';
 import { ReactNode } from 'react';
 
 interface Props {
@@ -9,6 +9,7 @@ interface Props {
   skipHandler?: VoidFunction;
   showSave?: boolean;
   saveHandler?: VoidFunction;
+  showShare?: boolean;
 }
 
 const BackBox = ({
@@ -19,6 +20,7 @@ const BackBox = ({
   skipHandler,
   showSave,
   saveHandler,
+  showShare,
 }: Props) => {
   const onBackClick = () => {
     backHandler && backHandler();
@@ -52,6 +54,11 @@ const BackBox = ({
           저장
         </button>
       )}
+      {showShare && (
+        <button className="headline2 absolute right-0 text-main2">
+          <ShareIcon />
+        </button>
+      )}
     </div>
   );
 };