-
- )}
+ )
+ })
+ )}
+
+
+ )}
{/* 입력 영역 */}
{
color: 'white',
width: 32,
height: 32,
- '&:hover': {bgcolor: 'primary.dark'},
- '&:disabled': {bgcolor: 'grey.300'},
+ '&:hover': { bgcolor: 'primary.dark' },
+ '&:disabled': { bgcolor: 'grey.300' },
}}
>
- {sendingMessage ? :
- }
+ {sendingMessage ? :
+ }
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