Add.

src/components/common/Modal.tsx

@@ -12,7 +12,7 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { modalButtonState, modalState, modalValue } from '@/store/modal';
 import BottomButton from '@/components/common/BottomButton';
 import Spacer from './Spacer';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useModalCommon } from '@/hooks/modalCommon';
 
 const Modal = () => {
@@ -21,7 +21,12 @@ const Modal = () => {
   const modalInfo = useRecoilValue(modalState);
   const [nextButtonProps, setNextButtonProps] =
     useRecoilState(modalButtonState);
-  const setSelectedValue = useSetRecoilState(modalValue);
+  const [selectedValue, setSelectedValue] = useRecoilState(modalValue);
+  const refValue = useRef('');
+
+  useEffect(() => {
+    refValue.current = selectedValue
+  }, [selectedValue]);
 
   useEffect(() => {
     setNextButtonProps({
@@ -120,7 +125,8 @@ const Modal = () => {
                         label={`${name} 모드`}
                         control={
                           <Radio
-                            checked={!idx}
+                            // checked={!idx}
+                            checked={id === refValue.current.id}
                             onChange={() => {
                               setSelectedValue(() => option);
                               setNextButtonProps({

src/components/layout/CommonHeader.tsx

@@ -76,7 +76,7 @@ const CommonHeader = (props: CommonHeaderProps) => {
         </Typography>
       </Box>
       <Box sx={{ ml: 2, flex: '0 0 10vw' }}>
-        {props.isShowNextButton && (
+        {props.isShowNextButton && (props.nextButtonIcon ?? (
           <IconButton
             size="large"
             edge="start"
@@ -87,7 +87,7 @@ const CommonHeader = (props: CommonHeaderProps) => {
               {props.nextButtonText ?? '완료'}
             </Typography>
           </IconButton>
-        )}
+        ))}
       </Box>
     </AppBar>
   );

src/pages/auth/login/Login.tsx

@@ -104,8 +104,9 @@ export default function Login() {
       <Container
         sx={{
           display: 'flex',
-          flexDirection: 'column',
+          flexDirection: 'row',
           width: '100vw',
+          height: '75vh',
           flex: '1 1 497px',
         }}
       >
@@ -124,18 +125,20 @@ export default function Login() {
               >
                 <Logo />
               </Box>
-              <InputForm
-                key="id"
-                itemArray={itemArray1}
-                helper={helper1}
-                isHelperError={true}
-              />
-              <InputForm
-                key="password"
-                itemArray={itemArray2}
-                helper={helper2}
-                isHelperError={true}
-              />
+              <Box sx={{paddingBottom: '20px'}}>
+                <InputForm
+                  key="id"
+                  itemArray={itemArray1}
+                  helper={helper1}
+                  isHelperError={true}
+                />
+                <InputForm
+                  key="password"
+                  itemArray={itemArray2}
+                  helper={helper2}
+                  isHelperError={true}
+                />
+              </Box>
             </>
           }
         />
@@ -147,7 +150,8 @@ export default function Login() {
           flexDirection: 'column',
           justifyContent: 'center',
           alignItems: 'center',
-          height: '315px',
+          height: '25vh',
+          paddingBottom: 2
         }}
       >
         <Box

src/pages/settings/AccountSetting.tsx

@@ -1,18 +1,56 @@
 /* eslint-disable import/order */
-import { Box, IconButton, Input } from '@mui/material';
+import { Box, IconButton, Input, Typography } from '@mui/material';
 
 import UserAvatar from '@/components/settings/UserAvatar';
 import { useNavigate } from 'react-router-dom';
 import Wrapper from '../auth/common/Wrapper';
 import CommonHeader from '@/components/layout/CommonHeader';
+import { useRecoilValue } from 'recoil';
+import { currentUserInfo } from '@/store/info';
+import { useState, useEffect, useRef } from 'react';
 
 const AccountSetting = () => {
   const navigation = useNavigate();
+  const userInfo = useRecoilValue(currentUserInfo);
+  const [newNickname, setNewNickname] = useState(userInfo.nickname);
+
+  const refValue = useRef(newNickname);
+
+  useEffect(() => {
+    refValue.current = newNickname;
+  }, [newNickname]);
 
   return (
     <Wrapper
       headerComp={
-        <CommonHeader title={'수정하기'} isShowPrevButton={true} />
+        <CommonHeader
+          title={'수정하기'}
+          isShowPrevButton={true}
+          isShowNextButton={true}
+          nextButtonIcon={
+            <IconButton
+              size="large"
+              edge="start"
+              aria-label="menu"
+              onClick={() => {
+                if (refValue.current === userInfo.nickname && refValue.current !== "") {
+                  return;
+                }
+                // TODO: 회원 정보 변경
+              }}
+            >
+              <Typography
+                sx={{
+                  fontSize: '13px',
+                  color:
+                    newNickname !== userInfo.nickname ? 'pink.700' : 'grey.500',
+                }}
+              >
+                {'완료'}
+              </Typography>
+            </IconButton>
+          }
+        />
       }
       handlePrevBtn={() => navigation('/settings')}
     >
@@ -51,7 +89,13 @@ const AccountSetting = () => {
         </Box>
         <Input
           id="standard-textarea"
-          defaultValue="수달"
+          defaultValue={newNickname}
+          onChange={(event) => {
+            const newValue = event.target.value;
+            setNewNickname(newValue);
+            if (newValue !== userInfo.nickname) {
+            }
+          }}
           multiline
           sx={{
             fontSize: '20px',

src/pages/settings/SettingsPage.tsx

@@ -2,7 +2,6 @@
 import {
   Box,
   Button,
-  Container,
   List,
   ListItemButton,
   ListItemText,
@@ -19,14 +18,15 @@ import { bottomNavigation, stepIndex } from '@/store/common';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import SettingWrapper from '../auth/common/Wrapper';
-import { deleteUser, getInfo, signOut } from '@/api/auth';
+import { deleteUser, signOut } from '@/api/auth';
 import CommonResponse, { removeTokenCookie } from '@/api/http';
 import { modalState } from '@/store/modal';
 import { CategoryViewType, categoryViewMode } from '@/store/category';
 import { modalAnswer } from '@/constants/message';
 import { useModalCommon } from '@/hooks/modalCommon';
 import Wrapper from '../auth/common/Wrapper';
 import { currentUserInfo } from '@/store/info';
+import { UserModeList } from '../category/CategoryPage';
 
 const SettingPage = () => {
   const navigation = useNavigate();
@@ -116,14 +116,25 @@ const SettingPage = () => {
       });
   };
 
+  /**
+   * get user mode & nickname
+   * @returns
+   */
+  const getUserNickname = () => {
+    const type = UserModeList.filter(
+      (mode) => mode.type === userInfo.templateType,
+    )[0]?.name || 'TEST ACCOUNT';
+    return `#${type} ${userInfo.nickname}님`;
+  };
+
   useEffect(() => {
     setNavPage(2);
     setStepIndex(0);
   });
 
   return (
     <Wrapper>
-      <SettingWrapper >
+      <SettingWrapper>
         <Button
           onClick={() => navigation('/settings/account')}
           sx={{
@@ -145,13 +156,13 @@ const SettingPage = () => {
               align="left"
               sx={{ fontSize: '16px', fontWeight: '600' }}
             >
-              {'#직장인 수달님'}
+              {getUserNickname()}
             </Typography>
             <Typography
               align="left"
               sx={{ fontSize: '14px', fontWeight: '400' }}
             >
-              {'[email protected]'}
+              {userInfo.email}
             </Typography>
           </Box>
           <>
@@ -176,7 +187,10 @@ const SettingPage = () => {
           })}
 
           {getListSubHeader('고객 센터')}
-          {getListItem({ text: 'FAQ', handler: () => navigation('/settings/faq') })}
+          {getListItem({
+            text: 'FAQ',
+            handler: () => navigation('/settings/faq'),
+          })}
 
           {getListSubHeader('계정')}
           {getListItem({