diff --git a/src/image/Finish.svg b/src/image/Finish.svg new file mode 100644 index 0000000..7e71cc6 --- /dev/null +++ b/src/image/Finish.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/image/Logo.png b/src/image/Logo.png deleted file mode 100644 index fbb4c47..0000000 Binary files a/src/image/Logo.png and /dev/null differ diff --git a/src/image/Logo.svg b/src/image/Logo.svg new file mode 100644 index 0000000..0f48695 --- /dev/null +++ b/src/image/Logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/image/Nick.svg b/src/image/Nick.svg new file mode 100644 index 0000000..80a6754 --- /dev/null +++ b/src/image/Nick.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/image/Registerf.svg b/src/image/Registerf.svg new file mode 100644 index 0000000..dafa0b5 --- /dev/null +++ b/src/image/Registerf.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/image/Welcome.svg b/src/image/Welcome.svg new file mode 100644 index 0000000..fdcb888 --- /dev/null +++ b/src/image/Welcome.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/image/Welcomem.svg b/src/image/Welcomem.svg new file mode 100644 index 0000000..25a9a1c --- /dev/null +++ b/src/image/Welcomem.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/home/MyTravelList.tsx b/src/pages/home/MyTravelList.tsx index 0fe339e..be93e83 100644 --- a/src/pages/home/MyTravelList.tsx +++ b/src/pages/home/MyTravelList.tsx @@ -1,12 +1,22 @@ -import { useState } from 'react'; +import { useState } from 'react'; import Header from '@/component/Header'; import Sidebar from '@/component/SideBar'; import { X, Heart } from 'react-feather'; +import TagButton from '@/component/common/TagButton/TagButton'; import Button from '@/component/common/Button/Button'; +type TravelItem = { + id: number; + title: string; + tranquil: boolean; + type: string; + likes: number; + imgUrl?: string; +}; + const MyTravelList = () => { const [isSidebarOpen, setIsSidebarOpen] = useState(false); - const [travelItems, setTravelItems] = useState([ + const [travelItems, setTravelItems] = useState([ { id: 1, title: '행궁동', tranquil: true, type: '자연관광지', likes: 3 }, { id: 2, title: '행궁동', tranquil: true, type: '자연관광지', likes: 3 }, { id: 3, title: '행궁동', tranquil: true, type: '자연관광지', likes: 3 }, @@ -15,67 +25,74 @@ const MyTravelList = () => { const handleMenuClick = () => setIsSidebarOpen(true); const handleCloseSidebar = () => setIsSidebarOpen(false); - const handleRemoveItem = (id: number) => { + const handleRemoveItem = (id: number) => setTravelItems((prev) => prev.filter((item) => item.id !== id)); - }; return (
-
{/* 헤더 높이만큼 pt-14 추가 */} -
- 나의 여행지 +
+
+
나의 여행지
-
+
- + 🔍
-
+
{travelItems.map((item) => (
-
+
+ +
+
+
-
- {item.title} -
-
- - +
-
- + +
+ {item.likes}
))}
+ +
); diff --git a/src/pages/register/Register1.tsx b/src/pages/register/Register1.tsx new file mode 100644 index 0000000..420e929 --- /dev/null +++ b/src/pages/register/Register1.tsx @@ -0,0 +1,41 @@ +// src/pages/auth/Register1.tsx +import WelcomeMessage from '@/image/Welcomem.svg'; +import WelcomeIllustration from '@/image/Welcome.svg'; +import Button from '@/component/common/Button/Button'; +import { useNavigate } from 'react-router-dom'; + +export default function Register1() { + const navigate = useNavigate(); + + return ( +
+ +
+ 숨여행, 틈이 처음이시네요! 초기 설정을 진행할게요. +
+
+ 환영 일러스트 +
+ +
+ +
+
+ ); +} diff --git a/src/pages/register/Register2.tsx b/src/pages/register/Register2.tsx new file mode 100644 index 0000000..1734a69 --- /dev/null +++ b/src/pages/register/Register2.tsx @@ -0,0 +1,71 @@ +// src/pages/auth/Register2.tsx +import { useState } from 'react'; +import NickTitle from '@/image/nick.svg'; // 실제 파일명/대소문자 맞춰! +import Button from '@/component/common/Button/Button'; +import Alert from '@/component/common/Alert/Alert'; +import { useNavigate } from 'react-router-dom'; + +export default function Register2() { + const navigate = useNavigate(); + const [nickname, setNickname] = useState(''); + const [showAlert, setShowAlert] = useState(false); + + const len = nickname.trim().length; + + const handleNext = () => { + if (len < 2) { + setShowAlert(true); + return; + } + navigate('/register/3'); + }; + + return ( +
+
+ +
+ 닉네임을 지어주세요! +
+

Create your nickname.

+ + + setNickname(e.target.value)} + placeholder="Text" + className=" + mb-6 w-full rounded-xl border border-green-600 bg-transparent + px-4 py-3 text-sm text-black placeholder:text-gray-400 + focus:outline-none focus:ring-2 focus:ring-green-600 + " + /> + +
+ +
+ + {showAlert && ( +
+ setShowAlert(false)} className="rounded-xl shadow-md"> + 2글자 이상 지어야해요. + +
+ )} +
+ ); +} diff --git a/src/pages/register/Register3.tsx b/src/pages/register/Register3.tsx new file mode 100644 index 0000000..fcb645a --- /dev/null +++ b/src/pages/register/Register3.tsx @@ -0,0 +1,29 @@ +import { useEffect } from 'react'; +import { useNavigate } from 'react-router-dom'; +import FinishTitle from '@/image/Finish.svg'; +import RegisterFinal from '@/image/Registerf.svg'; + +export default function Register3() { + const navigate = useNavigate(); + + useEffect(() => { + const t = setTimeout(() => navigate('/'), 3000); + return () => clearTimeout(t); + }, [navigate]); + + return ( +
+ 회원가입이 완료되었어요! + 축하 일러스트 +

곧 메인으로 돌아갑니다...

+
+ ); +} diff --git a/src/routes/router.tsx b/src/routes/router.tsx index 15452f3..9ee8e18 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -9,7 +9,9 @@ import AlertComponent from '@/examples/AlertTest'; import AiExploreMain from '@/pages/ai/MainAI'; import ThemeSelcetPage from '@/pages/ai/ThemeSelect'; import Filter from '@/pages/explore/Filter'; -import TravelSpotDetail from '@/pages/ai/TravelSpotDetail'; +import Register1 from '@/pages/register/Register1'; +import Register2 from '@/pages/register/Register2'; +import Register3 from '@/pages/register/Register3'; export const router = createBrowserRouter([ { path: '/', @@ -38,11 +40,6 @@ export const router = createBrowserRouter([ }, ], }, - //여행지 상세페이지 - { - path: '/place/:contentId', - element: , - }, { path: '/mytravel', element: , @@ -52,11 +49,11 @@ export const router = createBrowserRouter([ element: , }, { - path: '/region', // 지역 선택 테스트용 + path: '/region', element: , }, { - path: '/activity', // ✅ 여행 활동 선택 테스트용 + path: '/activity', element: , }, { @@ -64,7 +61,19 @@ export const router = createBrowserRouter([ element: , }, { - path: '/explore/Filter', // ✅ 여행탐색 Filter 페이지 테스트용 + path: '/explore/Filter', element: , }, + { + path: '/register/1', + element: , + }, + { + path: '/register/2', + element: , + }, + { + path: '/register/3', + element: , + }, ]);