+
-
-
+
-
+
{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 (
+
+

+

+
곧 메인으로 돌아갑니다...
+
+ );
+}