diff --git a/src/App.jsx b/src/App.jsx index 1f9a6fe..861df19 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -45,6 +45,7 @@ import { useAuth } from './contexts/AuthContext' import LoginPage from './pages/Login' import SignUpPage from './pages/SignUp' import { fetchMyProfile } from "./domains/profile/store/profileSlice"; +import ProfilePage from './domains/profile/pages/ProfilePage' function ProtectedRoute({ children }) { @@ -1183,6 +1184,7 @@ function App() { }> } /> } /> + } /> } /> } /> } /> diff --git a/src/domains/profile/pages/ProfilePage.jsx b/src/domains/profile/pages/ProfilePage.jsx new file mode 100644 index 0000000..2f29b8b --- /dev/null +++ b/src/domains/profile/pages/ProfilePage.jsx @@ -0,0 +1,106 @@ +import { useState, useEffect } from 'react' +import { Box, Button, Card, CardContent, Container, TextField, Typography, Avatar, Alert } from '@mui/material' +import { useDispatch, useSelector } from 'react-redux' + +// ▼▼▼ [중요] 파일 위치가 바뀌었으니 import 경로도 수정했습니다! ▼▼▼ +// (pages 폴더와 store 폴더가 같은 profile 폴더 안에 형제(sibling) 관계이므로) +import { updateProfile } from '../store/profileSlice' + +const ProfilePage = () => { + const dispatch = useDispatch() + const { profile, updateLoading } = useSelector((state) => state.profile) + + const [nickname, setNickname] = useState('') + const [successMsg, setSuccessMsg] = useState('') + + // 리덕스에 있는 내 정보(profile)가 로드되면 입력창에 채워넣기 + useEffect(() => { + if (profile?.nickname) { + setNickname(profile.nickname) + } + }, [profile]) + + const handleSave = async () => { + try { + // 1. 닉네임 변경 요청 보내기 + await dispatch(updateProfile({ nickname })).unwrap() + + // 2. 성공 메시지 띄우기 + setSuccessMsg('닉네임이 변경되었습니다! 로그아웃 후 다시 로그인해주세요.') + } catch (error) { + alert('변경 실패: ' + error) + } + } + + return ( + + + 내 프로필 수정 + + + + + + {/* 프로필 이미지 */} + + + {nickname ? nickname.substring(0, 1).toUpperCase() : 'U'} + + + + {/* 이메일 (수정 불가) */} + + + {/* 닉네임 (수정 가능) */} + setNickname(e.target.value)} + fullWidth + variant="outlined" + helperText="채팅방에서 사용할 멋진 닉네임을 지어주세요!" + /> + + {/* 성공 메시지 */} + {successMsg && ( + {successMsg} + )} + + {/* 저장 버튼 */} + + + + + + ) +} + +export default ProfilePage \ No newline at end of file