diff --git a/src/component/Header.tsx b/src/component/Header.tsx index 548c872..e5fa3d8 100644 --- a/src/component/Header.tsx +++ b/src/component/Header.tsx @@ -1,6 +1,6 @@ import { Menu, User } from 'react-feather'; import { useNavigate } from 'react-router-dom'; -import Logo from '../image/Logo.png'; +import Logo from '../image/Logo.svg'; type HeaderProps = { onMenuClick: () => void; @@ -9,11 +9,23 @@ type HeaderProps = { export default function Header({ onMenuClick }: HeaderProps) { const navigate = useNavigate(); + const handleUserClick = () => { + const token = localStorage.getItem('accessToken'); // ✅ 로그인 여부 확인 + if (token) { + navigate('/mypage'); // 로그인 → 마이페이지 + } else { + navigate('/login'); // 비로그인 → 로그인 페이지 + } + }; + return (
{/* 왼쪽: 메뉴(햄버거) 아이콘 */} - + {/* 가운데: 로고 이미지 */}
@@ -28,7 +40,7 @@ export default function Header({ onMenuClick }: HeaderProps) { {/* 오른쪽: 사람 아이콘 */} navigate('/mypage')} + onClick={handleUserClick} // ✅ 조건부 이동 />
diff --git a/src/constants/MyTravel.tsx b/src/constants/MyTravel.tsx new file mode 100644 index 0000000..ef8c6f9 --- /dev/null +++ b/src/constants/MyTravel.tsx @@ -0,0 +1,6 @@ +export const TRAVEL_ITEMS = [ + { id: 1, title: '행궁동', tranquil: true, type: '자연관광지', likes: 3 }, + { id: 2, title: '행궁동', tranquil: true, type: '자연관광지', likes: 3 }, + { id: 3, title: '행궁동', tranquil: true, type: '자연관광지', likes: 3 }, + { id: 4, title: '행궁동', tranquil: true, type: '자연관광지', likes: 3 }, +]; 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 cbe9bd6..0000000 Binary files a/src/image/Logo.png and /dev/null differ diff --git a/src/image/Logo.png.url b/src/image/Logo.png.url new file mode 100644 index 0000000..c07ffd9 --- /dev/null +++ b/src/image/Logo.png.url @@ -0,0 +1,2 @@ +[InternetShortcut] +URL=https://github.com/SoomTeum/frontend/blob/develop/src/image/Logo.png 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/Search.svg b/src/image/Search.svg new file mode 100644 index 0000000..d6819ed --- /dev/null +++ b/src/image/Search.svg @@ -0,0 +1,8 @@ + + + + + + + + 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..24eed4d 100644 --- a/src/pages/home/MyTravelList.tsx +++ b/src/pages/home/MyTravelList.tsx @@ -1,84 +1,66 @@ -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 Button from '@/component/common/Button/Button'; +import SearchIcon from '@/image/Search.svg'; +import { TRAVEL_ITEMS } from '@/constants/MyTravel'; +import PlaceCard from '@/component/common/Card/PlaceCard'; + +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([ - { id: 1, title: '행궁동', tranquil: true, type: '자연관광지', likes: 3 }, - { id: 2, title: '행궁동', tranquil: true, type: '자연관광지', likes: 3 }, - { id: 3, title: '행궁동', tranquil: true, type: '자연관광지', likes: 3 }, - { id: 4, title: '행궁동', tranquil: true, type: '자연관광지', likes: 3 }, - ]); + const [travelItems, setTravelItems] = useState( + () => TRAVEL_ITEMS.map((it) => ({ ...it })) + ); 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 추가 */} -
- 나의 여행지 -
- -
+
+
+
나의 여행지
+
+
- - 🔍 - -
+ type="text" + placeholder="Search" + className="w-full rounded-full bg-green3-light px-4 py-2 pl-10 text-sm text-black placeholder:text-green2 focus:outline-none"/> + + search + -
+
+
{travelItems.map((item) => ( -
-
-
-
-
- {item.title} -
-
- - -
-
-
- -
- handleRemoveItem(item.id)} - /> -
- - {item.likes} -
-
-
+ title={item.title} + theme={item.type} + likeCount={item.likes} + imgUrl={item.imgUrl} + quietLevel={item.tranquil ? 5 : 3} //백 연동 전 구현 확인 용 + showRemoveButton + onRemove={() => handleRemoveItem(item.id)} + /> ))}
); }; - export default MyTravelList; diff --git a/src/pages/register/Register.tsx b/src/pages/register/Register.tsx new file mode 100644 index 0000000..03d62ec --- /dev/null +++ b/src/pages/register/Register.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 ( +
+ +
+ 숨여행, 틈이 처음이시네요! 초기 설정을 진행할게요. +
+
+ 환영 일러스트 +
+ +
+ +
+
+ ); +} \ No newline at end of file diff --git a/src/pages/register/Register2.tsx b/src/pages/register/Register2.tsx new file mode 100644 index 0000000..4f27144 --- /dev/null +++ b/src/pages/register/Register2.tsx @@ -0,0 +1,69 @@ +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글자 이상 지어야해요. + +
+ )} +
+ ); +} \ No newline at end of file diff --git a/src/pages/register/Register3.tsx b/src/pages/register/Register3.tsx new file mode 100644 index 0000000..55f5dbe --- /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 ( +
+ 회원가입이 완료되었어요! + 축하 일러스트 +

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

+
+ ); +} \ No newline at end of file diff --git a/src/routes/router.tsx b/src/routes/router.tsx index 0ba9158..39a8e12 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -13,6 +13,9 @@ import TravelSpotDetail from '@/pages/ai/TravelSpotDetail'; import AILoadingPage from '@/pages/ai/AILoadingPage'; import AIResultPage from '@/pages/ai/AIResultPage'; import LoginPage from '@/pages/home/Login'; +import Register from '@/pages/register/Register'; +import Register2 from '@/pages/register/Register2'; +import Register3 from '@/pages/register/Register3'; import KakaoCallbackPage from '@/pages/home/KakaoCallbackPage'; export const router = createBrowserRouter([ { @@ -82,5 +85,18 @@ export const router = createBrowserRouter([ { path: '/explore/Filter', // ✅ 여행탐색 Filter 페이지 테스트용 element: , + }, + { + path: '/register/1', + element: , + }, + { + path: '/register/2', + element: , }, + { + path: '/register/3', + element: , + }, + ]);