(feat: 마이페이지 기능 추가, 기타 레이아웃 수정) (#29)

* (fix: 빌드 의존성 에러 넘어가도록 변경) * (feat: 헤더 아바타에 회원의 닉네임과 이메일 표시되도록 변경) * (fix: 펫 수정 페이지에 기존 사진 안보이는 에러 해결) * (layout: 중복확인 버튼 색상 변경, 구분 선 추가, 기존 닉네임 표시되도록 변경) * (feat: 내 정보 수정 기능 추가) --------- Co-authored-by: Minseo Oh <[email protected]>
PetGoorm · Dec 12, 2023 · fe3034f · fe3034f
1 parent 413bffa
commit fe3034f
Show file tree

Hide file tree

Showing 11 changed files with 478 additions and 218 deletions.
diff --git a/src/components/board/BoardList.tsx b/src/components/board/BoardList.tsx
@@ -63,6 +63,7 @@ function BoardList(): JSX.Element {
 
   useEffect(() => {
     fetchBoardList(currentPage);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentPage, selectedCategory, status, keyword, search]);
 
 

diff --git a/src/components/board/reply/Reply.tsx b/src/components/board/reply/Reply.tsx
@@ -36,6 +36,7 @@ const Reply = () => {
 
     useEffect(() => {
         GetReplyList();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [refresh])
 
 

diff --git a/src/components/member/Signup.tsx b/src/components/member/Signup.tsx
@@ -151,7 +151,7 @@ const Signup = () => {
                 </Grid>
                 <Grid item xs={3} sx={{ display: 'flex', alignItems: 'center' }}>
                   <Button onClick={checkEmail} disabled={!!errors.email} variant="contained"
-                    sx={{ backgroundColor: '#FFAE8B', boxShadow: 'none', paddingY: 1 }} >중복확인</Button>
+                    sx={{ backgroundColor: '#969696', boxShadow: 'none', paddingY: 1 }} >중복확인</Button>
                 </Grid>
                 <Grid item xs={12}>
                   <Typography sx={{ color: '#969696' }}>비밀번호</Typography>
@@ -225,7 +225,7 @@ const Signup = () => {
                 </Grid>
                 <Grid item xs={3} sx={{ display: 'flex', alignItems: 'center' }}>
                   <Button onClick={checkNickname} disabled={!!errors.nickname} variant="contained"
-                    sx={{ backgroundColor: '#FFAE8B', boxShadow: 'none', paddingY: 1 }} >중복확인</Button>
+                    sx={{ backgroundColor: '#969696', boxShadow: 'none', paddingY: 1 }} >중복확인</Button>
                 </Grid>
 
                 <Grid item xs={4}>

diff --git a/src/components/member/mypage/EditNick.tsx b/src/components/member/mypage/EditNick.tsx
@@ -1,15 +1,16 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 import api from "lib/api";
 import useNicknameChecker from "lib/useNicknameChecker";
-import { Container, Typography, Grid, TextField, Box, Button, Card } from '@mui/material';
+import { Container, Typography, Grid, TextField, Box, Button, Card, Divider } from '@mui/material';
 
 interface FormData {
   nickname: string;
 }
 
 const EditNick = () => {
+  const [nowNick, setNowNick] = useState(String || null)
   const { register, handleSubmit, formState: { errors } } = useForm<FormData>({ mode: 'all' });
   const navigate = useNavigate();
 
@@ -43,8 +44,16 @@ const EditNick = () => {
     }
   };
 
+  useEffect(() => {
+    getNick();
+  }, [setNowNick])
 
-
+  const getNick = async () => {
+    const result = await api.get("member/myInfo")
+    setNowNick(result.data.data.nickname)
+    console.log("nowNick:" + result.data.data.nickname)
+  }
+
   return (
 
     <>
@@ -59,32 +68,28 @@ const EditNick = () => {
             padding: 4, backgroundColor: 'white'
           }}
         >
-          <Typography variant="h4" sx={{ mb: 5 }}>
+          <Typography variant="h4" sx={{ mb: 5  }}>
             닉네임 변경
           </Typography>
           <Box component="form" noValidate onSubmit={handleSubmit(handleFormSubmit)} sx={{ mt: 3 }}>
 
             <Grid container spacing={2}>
 
-              <Grid item xs={12}>
+              <Grid item xs={3}>
                 <Typography sx={{ color: '#969696' }}>현재 닉네임</Typography>
               </Grid>
-              <Grid item xs={12}>
-                <TextField
-                  type="text"
-                  size="small"
-                  hiddenLabel
-                  fullWidth
-                  inputProps={
-                    { readOnly: true, }
-                  }
-                  value="닉네임 들어올 곳"
-                />
+              <Grid item xs={9}>
+                <Typography>{nowNick}</Typography>
+
               </Grid>
               <Grid item xs={12}>
-                <Typography sx={{ color: '#969696' }}>새 닉네임</Typography>
+                <Divider style={{ width: '100%' }} sx={{ my: 1 }} />
+              </Grid>
+
+              <Grid item xs={3}>
+                <Typography sx={{ color: '#969696' }}>바꿀 닉네임</Typography>
               </Grid>
-              <Grid item xs={8}>
+              <Grid item xs={5}>
                 <TextField
                   type="text"
                   size="small"
@@ -108,18 +113,22 @@ const EditNick = () => {
               </Grid>
               <Grid item xs={4} sx={{ display: 'flex', justifyContent: 'center' }}>
                 <Button onClick={checkNickname} disabled={!!errors.nickname} variant="contained"
-                  sx={{ backgroundColor: '#FFAE8B', boxShadow: 'none', paddingY: 1 }} >중복확인</Button>
+                  sx={{ backgroundColor: '#969696', boxShadow: 'none' }} >중복확인</Button>
+              </Grid>
+              <Grid item xs={12}>
+                <Divider style={{ width: '100%' }} sx={{ my: 1 }} />
               </Grid>
 
             </Grid>
+            <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'center', marginTop:3 }}>
             <Button
               type="submit"
-              fullWidth
               variant="contained"
               sx={{ backgroundColor: '#FFAE8B', boxShadow: 'none', paddingY: 1, marginY: 3 }}
             >
               변경하기
             </Button>
+            </Grid>
           </Box>
         </Card>
       </Container>

diff --git a/src/components/member/mypage/EditPw.tsx b/src/components/member/mypage/EditPw.tsx
@@ -2,7 +2,7 @@ import { useRef } from "react";
 import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 import api from "lib/api";
-import { Container, Typography, Grid, TextField, Box, Button, Card } from '@mui/material';
+import { Container, Typography, Grid, TextField, Box, Button, Card, Divider } from '@mui/material';
 // components
 interface FormData {
 
@@ -52,10 +52,11 @@ const EditPw = () => {
           <Box component="form" noValidate onSubmit={handleSubmit(handleFormSubmit)} sx={{ mt: 3 }}>
 
             <Grid container spacing={2}>
-              <Grid item xs={12}>
+
+              <Grid item xs={3}>
                 <Typography sx={{ color: '#969696' }}>현재 비밀번호</Typography>
               </Grid>
-              <Grid item xs={12}>
+              <Grid item xs={9}>
                 <TextField
                   type="password"
                   size="small"
@@ -76,9 +77,12 @@ const EditPw = () => {
                 />
               </Grid>
               <Grid item xs={12}>
-                <Typography sx={{ color: '#969696' }}>새 비밀번호</Typography>
+                <Divider style={{ width: '100%' }} sx={{ my: 1 }} />
               </Grid>
-              <Grid item xs={12}>
+              <Grid item xs={3}>
+                <Typography sx={{ color: '#969696' }}>바꿀 비밀번호</Typography>
+              </Grid>
+              <Grid item xs={9}>
                 <TextField
                   type="password"
                   size="small"
@@ -98,11 +102,13 @@ const EditPw = () => {
                   helperText={errors.updatePW?.message}
                 />
               </Grid>
-
               <Grid item xs={12}>
-                <Typography sx={{ color: '#969696' }}>새 비밀번호 확인</Typography>
+                <Divider style={{ width: '100%' }} sx={{ my: 1 }} />
               </Grid>
-              <Grid item xs={12}>
+              <Grid item xs={3}>
+                <Typography sx={{ color: '#969696' }}>비밀번호 확인</Typography>
+              </Grid>
+              <Grid item xs={9}>
                 <TextField
                   type="password"
                   size="small"
@@ -116,6 +122,9 @@ const EditPw = () => {
                   helperText={errors.passwordCheck?.message}
                 />
               </Grid>
+              <Grid item xs={12}>
+                <Divider style={{ width: '100%' }} sx={{ my: 1 }} />
+              </Grid>
             </Grid>
             <Button
               type="submit"