diff --git a/src/component/Header.tsx b/src/component/Header.tsx index 548c872..d1dfee6 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; 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.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..fa645a0 100644 --- a/src/pages/home/MyTravelList.tsx +++ b/src/pages/home/MyTravelList.tsx @@ -1,84 +1,67 @@ -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 추가 */} -
- 나의 여행지 +
+
+
나의 여행지
- -
+
- - 🔍 + + 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/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..e124f9d --- /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글자 이상 지어야해요. + +
+ )} +
+ ); +} diff --git a/src/pages/register/Register3.tsx b/src/pages/register/Register3.tsx new file mode 100644 index 0000000..f1a2a3f --- /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 ( +
+ 회원가입이 완료되었어요! + 축하 일러스트 +

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

+
+ ); +}