-
-
-
-
GreenMap
-
그린맵
-
- {!userInfo && (
-
- {['login', 'signup'].map((tab) => (
-
- ))}
-
- )}
-
- {!userInfo ? (
- page === 'login' ? (
-
- ) : (
-
- )
- ) : (
- setPage('HomeScreen')
- )}
-
- {!userInfo && (
-
- )}
-
+ const [page, setPage] = useState('login');
+ const [userInfo, setUserInfo] = useState(null);
+ const [modal, setModal] = useState(null);
+ const dispatch = useDispatch(); // redux없는 사람은 제거 가능
+
+ // 로그인 유지
+ useEffect(() => {
+ const token = localStorage.getItem('token');
+ if (!token) return;
+
+ api
+ .get('/member/me', {
+ headers: { Authorization: `Bearer ${token}` },
+ })
+ .then((res) => {
+ setUserInfo(res.data.data);
+ dispatch(
+ updateProfile?.({
+ name: res.data.data.nickname,
+ email: res.data.data.email,
+ })
+ );
+ })
+ .catch(() => localStorage.removeItem('token'));
+ }, [dispatch]);
+
+ return (
+ <>
+
+
+
+
+
GreenMap
+
그린맵
+
+ {!userInfo && (
+
+ {['login', 'signup'].map((tab) => (
+
+ ))}
-
- );
-}
+ )}
-/* ------------------ 로그인 ------------------ */
-function LoginForm({ setUserInfo }) {
- const [email, setEmail] = useState('');
- const [tEmail, setTEmail] = useState(false);
- const [password, setPassword] = useState('');
- const [tPw, setTPw] = useState(false);
-
- const emailValid = validateEmail(email);
- const pwValid = validatePassword(password);
- const formValid = emailValid && pwValid;
-
- const submitLogin = async () => {
- try {
- const res = await api.post('/member/login', {
- email,
- password,
- });
- console.log("login response: ", res.data.data);
- localStorage.setItem('token', res.data.data.accessToken);
- localStorage.setItem('memberId', res.data.data.memberId);
- const info = await api.get('/member/me', {
- headers: {
- Authorization: `Bearer ${res.data.data.accessToken}`,
- },
- });
-
- setUserInfo(info.data.data);
- alert('로그인 성공');
-
- // 로그인 성공 시 메인으로 이동
- window.location.href = '/';
- } catch (e) {
- alert('로그인 실패');
- }
- };
-
- return (
-
- );
+ )}
+
+
+ {/* ✅ 모달 표시 */}
+ {modal && (
+
setModal(null)}
+ />
+ )}
+
+
+ );
+}
+
+/* ------------------ 로그인 ------------------ */
+function LoginForm({ setUserInfo, setModal }) {
+ const [email, setEmail] = useState('');
+ const [tEmail, setTEmail] = useState(false);
+ const [password, setPassword] = useState('');
+ const [tPw, setTPw] = useState(false);
+
+ const emailValid = validateEmail(email);
+ const pwValid = validatePassword(password);
+ const formValid = emailValid && pwValid;
+
+ const submitLogin = async () => {
+ try {
+ const res = await api.post('/member/login', { email, password });
+ localStorage.setItem('token', res.data.data.accessToken);
+
+ const info = await api.get('/member/me', {
+ headers: { Authorization: `Bearer ${res.data.data.accessToken}` },
+ });
+ setUserInfo(info.data.data);
+
+ setModal({ message: '로그인 성공!', type: 'success' });
+ setTimeout(() => (window.location.href = '/'), 800);
+ } catch {
+ setModal({
+ message: '이메일 또는 비밀번호를 확인해주세요.',
+ type: 'error',
+ });
+ }
+ };
+
+ return (
+
+ );
}
/* ------------------ 회원가입 ------------------ */
-function SignupForm({ setPage }) {
+function SignupForm({ setPage, setModal }) {
const [email, setEmail] = useState('');
const [emailAvailable, setEmailAvailable] = useState(null);
const [password, setPassword] = useState('');
@@ -230,7 +282,7 @@ function SignupForm({ setPage }) {
emailAvailable === true &&
nickAvailable === true;
- // 이메일 중복검사
+ // 이메일 중복 검사
useEffect(() => {
if (!emailValid) {
setEmailAvailable(null);
@@ -248,7 +300,7 @@ function SignupForm({ setPage }) {
return () => clearTimeout(timer);
}, [email]);
- // 닉네임 중복검사
+ // 닉네임 중복 검사
useEffect(() => {
if (!nicknameValid) {
setNickAvailable(null);
@@ -256,7 +308,9 @@ function SignupForm({ setPage }) {
}
const timer = setTimeout(async () => {
try {
- const res = await api.get('/member/check-nickname', { params: { nickname } });
+ const res = await api.get('/member/check-nickname', {
+ params: { nickname },
+ });
const state = res.data.data.state;
setNickAvailable(!state);
} catch {
@@ -269,83 +323,68 @@ function SignupForm({ setPage }) {
const submitSignup = async () => {
try {
await api.post('/member', { email, password, nickname });
- alert('회원가입 완료. 로그인 해주세요');
- setPage('login');
+ setModal({
+ message: '회원가입 완료! 로그인해주세요 🌿',
+ type: 'success',
+ });
+ setTimeout(() => setPage('login'), 1000);
} catch {
- alert('회원가입 실패');
+ setModal({
+ message: '회원가입 실패. 다시 시도해주세요 🍂',
+ type: 'error',
+ });
}
};
return (