diff --git a/package.json b/package.json index 1564a0c6..7bc3611e 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d60e833f..84212ab6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ dependencies: '@radix-ui/react-icons': specifier: ^1.3.0 version: 1.3.0(react@18.2.0) + '@radix-ui/react-progress': + specifier: ^1.0.3 + version: 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-radio-group': specifier: ^1.1.3 version: 1.1.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0) @@ -2245,6 +2248,28 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /@radix-ui/react-progress@1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-5G6Om/tYSxjSeEdrb1VfKkfZfn/1IlPWd731h2RfPuSbIfNUgfqAwbKfJCg/PP6nuUCTrYzalwHSpSinoWoCag==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.23.6 + '@radix-ui/react-context': 1.0.1(@types/react@18.2.45)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0) + '@types/react': 18.2.45 + '@types/react-dom': 18.2.18 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-radio-group@1.1.3(@types/react-dom@18.2.18)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-x+yELayyefNeKeTx4fjK6j99Fs6c4qKm3aY38G3swQVTN6xMpsrbigC0uHs2L//g8q4qR7qOcww8430jJmi2ag==} peerDependencies: diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx new file mode 100644 index 00000000..28cb6b9d --- /dev/null +++ b/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 ( +
+ { + navigate(-1); + }} + /> + + + Day1
,
Day2
,
Day3
]} + /> + + ); +}; + +export default PlanSectionTop; diff --git a/src/components/Plan/TripBudget.tsx b/src/components/Plan/TripBudget.tsx new file mode 100644 index 00000000..35892974 --- /dev/null +++ b/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 ( +
+
사용 경비
+
+ + {currentSpending.toLocaleString()} + + 원 +
+ + + + + +
+
+ 목표 경비 + +
+
+ {targetBudget.toLocaleString()} + 원 +
+
+
+ ); +}; + +export default TripBudget; diff --git a/src/components/Trip/PlanTripButton.tsx b/src/components/Trip/PlanTripButton.tsx new file mode 100644 index 00000000..b2d5012b --- /dev/null +++ b/src/components/Trip/PlanTripButton.tsx @@ -0,0 +1,15 @@ +import { PlanIcon, RightIcon } from '@components/common/icons/Icons'; + +const PlanTripButton = () => { + return ( + + ); +}; + +export default PlanTripButton; diff --git a/src/components/Trip/TripInfo.tsx b/src/components/Trip/TripInfo.tsx new file mode 100644 index 00000000..c0f9a54f --- /dev/null +++ b/src/components/Trip/TripInfo.tsx @@ -0,0 +1,21 @@ +import { UserIcon } from '@components/common/icons/Icons'; + +const TripInfo = () => { + return ( +
+
+
+
강릉 여행 일정
+
+ + 5 +
+
+ +
+ 23.12.23 ~ 23.12.25 +
+ ); +}; + +export default TripInfo; diff --git a/src/components/Trip/TripSectionTop.tsx b/src/components/Trip/TripSectionTop.tsx index ed283e77..ba8ad3b9 100644 --- a/src/components/Trip/TripSectionTop.tsx +++ b/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 ( -
-
여정 생성 완료 페이지
+
+ { + navigate(-1); + }} + /> + + 우리의 여행취향
,
우리의 관심목록
]} diff --git a/src/components/common/BackBox/BackBox.tsx b/src/components/common/BackBox/BackBox.tsx index 4f724838..4af0db0f 100644 --- a/src/components/common/BackBox/BackBox.tsx +++ b/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 = ({ 저장 )} + {showShare && ( + + )}
); }; diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx index 18f154b1..443384c4 100644 --- a/src/components/common/icons/Icons.tsx +++ b/src/components/common/icons/Icons.tsx @@ -400,74 +400,40 @@ export const StarIcon: React.FC = ({ }; export const PlusIcon: React.FC = ({ - size = 25, + size = 20, color = 'black', fill = 'none', }) => { return ( - - - - - - - - - - - - - - - - - - - - - + viewBox="0 0 21 21" + fill={fill}> + + + ); }; @@ -899,14 +865,14 @@ export const SuccessIcon = () => { cy="40.2585" r="35.1238" stroke="#29DDF6" - stroke-width="4" + strokeWidth="4" /> { id="Vector 792_2" d="M21.8516 38.6183L35.7266 52.9746L60.0579 27.9297" stroke="#29DDF6" - stroke-width="5.33333" - stroke-linecap="round" + strokeWidth="5.33333" + strokeLinecap="round" /> @@ -944,7 +910,7 @@ export const EllipseIcon: React.FC = ({ size = 61 }) => { cy="29.7959" r="23.4783" stroke="#F8F8F8" - stroke-width="1.04348" + strokeWidth="1.04348" /> @@ -997,11 +963,132 @@ export const TopIcon: React.FC = () => { xmlns="http://www.w3.org/2000/svg"> ); }; + +export const ShareIcon: React.FC = ({ + width = 20, + height = 19, + fill = 'none', + color = 'black', +}) => { + return ( + + + + + + ); +}; + +export const PlanIcon: React.FC = ({ + size = 20, + color = 'black', + fill = 'none', +}) => { + return ( + + + + + + + ); +}; + +export const CarIcon: React.FC = ({ + size = 19, + color = 'black', + fill = 'none', +}) => { + return ( + + + + ); +}; + +export const BusIcon: React.FC = ({ + size = 18, + color = 'black', + fill = 'none', +}) => { + return ( + + + + ); +}; diff --git a/src/components/common/tab/Tab.tsx b/src/components/common/tab/Tab.tsx index 9972076d..34fe447d 100644 --- a/src/components/common/tab/Tab.tsx +++ b/src/components/common/tab/Tab.tsx @@ -8,13 +8,13 @@ interface TabProps { const Tab = ({ lists, contents }: TabProps) => ( {lists.map((list, index) => { return ( {list} @@ -25,7 +25,7 @@ const Tab = ({ lists, contents }: TabProps) => ( return ( {content} diff --git a/src/pages/plan/planTrip.page.tsx b/src/pages/plan/planTrip.page.tsx index b4813c87..c49f35dd 100644 --- a/src/pages/plan/planTrip.page.tsx +++ b/src/pages/plan/planTrip.page.tsx @@ -1,13 +1,9 @@ -import Tab from '@components/common/tab/Tab'; +import PlanSectionTop from '@components/Plan/PlanSectionTop'; const PlanTrip = () => { return ( <> -
여행 계획 페이지
- Day1,
Day2
,
Day3
]} - /> + ); }; diff --git a/src/router/routerLayout.tsx b/src/router/routerLayout.tsx index 91d6bd86..7831224d 100644 --- a/src/router/routerLayout.tsx +++ b/src/router/routerLayout.tsx @@ -2,6 +2,7 @@ import { Header } from '@components/common/header'; import { Outlet, useLocation } from 'react-router-dom'; import { Nav } from '@components/common/nav'; import { InputComment } from '@components/common/nav'; +import '../index.css'; const MainLayout = () => { const location = useLocation(); diff --git a/tailwind.config.js b/tailwind.config.js index 88a5f6c7..98e0361e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -7,7 +7,7 @@ export default { main1: '#062139', main2: '#29DDF6', sub1: '#FFEC3E', - sub2: 'FF2167', + sub2: '#FF2167', gray1: '#f8f8f8', gray2: '#ededed', gray3: '#d7d7d7',