♻️ Refactor: userInfo atom 변경에 따라 적용

src/components/Footer/TabMenu.jsx

@@ -2,15 +2,16 @@ import React, { useState, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import Button from './BottomBarButton';
-import { accountAtom } from '../../atoms/UserAtom';
+import { userInfoAtom } from '../../atoms/UserAtom';
 import { isDarkModeState } from '../../atoms/StylesAtom';
 import { Container } from './TabMenuStyle';
 
 const TabMenu = () => {
   const [selectedButton, setSelectedButton] = useState('icon-home');
   const navigate = useNavigate();
   const location = useLocation();
-  const myaccount = useRecoilValue(accountAtom);
+  const userInfo = useRecoilValue(userInfoAtom);
+  const myaccount = userInfo.account;
   const isDarkMode = useRecoilValue(isDarkModeState);
 
   useEffect(() => {

src/components/common/User/Follow/Follow.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
-import { accountAtom } from '../../../../atoms/UserAtom';
+import { userInfoAtom } from '../../../../atoms/UserAtom';
 import { isDarkModeState } from '../../../../atoms/StylesAtom';
 import Button from '../../Button/ButtonContainer';
 import basicImg from '../../../../assets/images/basic-profile-s.svg';
@@ -16,22 +16,24 @@ import {
 } from './FollowStyle.jsx';
 
 const Follow = ({ user }) => {
+
   const { username, accountname, intro, image, isfollow } = user;
   const [isFollow, setIsFollow] = useState(isfollow);
-  const account = useRecoilValue(accountAtom);
+  const userInfo = useRecoilValue(userInfoAtom);
+  const account = userInfo.account;
   const isDarkMode = useRecoilValue(isDarkModeState);
+
   const handleClick = () => {
     setIsFollow(!isFollow);
   };
-  const numberRegex =
-    /^https:\/\/api\.mandarin\.weniv\.co\.kr\/(?:(?!null|undefined)[\w.]*)$/;
+
+  const numberRegex = /^https:\/\/api\.mandarin\.weniv\.co\.kr\/(?:(?!null|undefined)[\w.]*)$/;
 
   return (
     <Container>
       <Image
-        src={numberRegex.test(image) ?
-              image
-              : isDarkMode ? basicDarkImg : basicImg}
+        src={numberRegex.test(image) ? image
+          : isDarkMode ? basicDarkImg : basicImg}
         alt="프로필 이미지"
         width="50"
       />

src/pages/FollowListPage/FollowerListPage/FollowerListPage.jsx

@@ -5,7 +5,6 @@ import Follower from '../../../components/common/User/Follow/Follow';
 import Header from '../../../components/Header/TopListNavHeader';
 import Footer from '../../../components/Footer/TabMenu';
 import Loading from '../../../components/common/Loading/Loading';
-import { tokenAtom } from '../../../atoms/UserAtom';
 import { isDarkModeState } from '../../../atoms/StylesAtom';
 import { getFollowerList } from '../../../api/follow';
 import Logo from '../../../assets/images/home-logo.svg';
@@ -20,21 +19,20 @@ import {
   Text,
 } from './FollowerListPageStyle';
 
-const FollowerListPage = ({theme}) => {
+const FollowerListPage = () => {
   const account = useParams().id;
   const isDarkMode = useRecoilValue(isDarkModeState);
-  const token = useRecoilValue(tokenAtom);
   const [isLoading, setIsLoading] = useState(true);
   const [followings, setFollowings] = useState([]);
+
   useEffect(() => {
     const followList = async () => {
-      // 팔로워 리스트 목록
       const data = await getFollowerList(account);
       setFollowings(data);
       setIsLoading(false);
     };
     followList();
-  }, [account, token]);
+  }, [account]);
 
   return (
     <>

src/pages/LoginPage/LoginPage/LoginPage.jsx

@@ -1,16 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import Input from '../../../components/common/Input/Input';
 import ButtonContainer from '../../../components/common/Button/ButtonContainer';
 import { loginAtom } from '../../../atoms/LoginAtom';
-import {
-  tokenAtom,
-  accountAtom,
-  profileImgAtom,
-  usernameAtom,
-  introAtom,
-} from '../../../atoms/UserAtom';
+import { userInfoAtom } from '../../../atoms/UserAtom';
 import { isDarkModeState } from '../../../atoms/StylesAtom';
 import { postUserLogin } from '../../../api/auth';
 import {
@@ -22,20 +16,16 @@ import {
   ErrorMessage,
 } from './LoginPageStyle';
 
-const LoginPage = ({theme}) => {
+const LoginPage = () => {
   const navigate = useNavigate();
   const [userEmail, setUserEmail] = useState('');
   const [userPassword, setUserPassword] = useState('');
   const [errorMsg, setErrorMsg] = useState('');
   const [isComplete, setIsComplete] = useState(false);
   const [hasError, setHasError] = useState(false);
-  const [userToken, setUserToken] = useRecoilState(tokenAtom);
-  const [userAccount, setUserAccount] = useRecoilState(accountAtom);
-  const [userProfileImg, setUserProfileImg] = useRecoilState(profileImgAtom);
-  const [userName, setUserName] = useRecoilState(usernameAtom);
-  const [userLogin, setUserLogin] = useRecoilState(loginAtom);
-  const [userIntro, setUserIntro] = useRecoilState(introAtom);
+  const [userInfo, setUserInfo] = useRecoilState(userInfoAtom);
   const isDarkMode = useRecoilValue(isDarkModeState);
+  const setLogin = useSetRecoilState(loginAtom);
 
   const handleInputEmail = (e) => {
     const userEmail = e.target.value;
@@ -55,24 +45,22 @@ const LoginPage = ({theme}) => {
   const handleLogin = async (e) => {
     e.preventDefault();
     const loginData = await postUserLogin(userEmail, userPassword);
-    if (loginData.message === '이메일 또는 비밀번호가 일치하지 않습니다.') {
+    console.log(loginData);
+    if (loginData.status === 422) {
       setErrorMsg('*이메일 또는 비밀번호가 일치하지 않습니다 🥲');
       setHasError(true);
       setIsComplete(false);
     } else {
-      const token = loginData.user.token;
-      const account = loginData.user.accountname;
-      const profileImg = loginData.user.image;
-      const username = loginData.user.username;
-      const intro = loginData.user.intro;
       localStorage.setItem('token', loginData.user.token);
-      setUserToken(token);
-      setUserAccount(account);
-      setUserProfileImg(profileImg);
-      setUserName(username);
-      setUserIntro(intro);
-      setUserLogin(true);
+      setUserInfo({
+        ...userInfo,
+        account: loginData.user.accountname,
+        profileImg: loginData.user.image,
+        username: loginData.user.username,
+        intro: loginData.user.intro,
+      })
       setIsComplete(!isComplete);
+      setLogin(true);
       navigate('/home', {
         state: {
           token: loginData.user.token,
@@ -86,12 +74,6 @@ const LoginPage = ({theme}) => {
     return userEmail !== '' && userPassword !== '';
   };
 
-  useEffect(() => {
-    if (userLogin) {
-      navigate('/home');
-    }
-  }, [userLogin]);
-
   return (
     <Container>
       <Title>로그인</Title>

src/pages/PostPage/PostDetailPage/PostDetailPage.jsx

@@ -14,7 +14,7 @@ import Header from '../../../components/Header/TopListNavHeader';
 import Comment from '../../FeedPage/FeedComment';
 import Post from '../PostPage';
 import { isDarkModeState } from '../../../atoms/StylesAtom';
-import { accountAtom, tokenAtom } from '../../../atoms/UserAtom';
+import { userInfoAtom } from '../../../atoms/UserAtom';
 import { getComment, postComment } from '../../../api/comment';
 import BasicProfileImg from '../../../assets/images/basic-profile-xs.svg';
 import BasicDarkProfileImg from '../../../assets/images/basic-profile-xs-dark.svg';
@@ -29,10 +29,11 @@ import {
   Button,
 } from './PostDetailPageStyle';
 
-const PostPageDetail = ({ theme }) => {
+const PostPageDetail = () => {
   const isDarkMode = useRecoilValue(isDarkModeState);
-  const account = useRecoilValue(accountAtom);
-  const token = useRecoilValue(tokenAtom);
+    const userInfo = useRecoilValue(userInfoAtom);
+  const account = userInfo.account;
+  const token = localStorage.getItem('token');
   const location = useLocation();
   const data = location.state?.data;
   const postId = location.state?.data.id;

src/pages/ProfilePage/ProfileEditPage/ProfileEditPage.jsx

@@ -1,16 +1,10 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useRecoilState, useSetRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import Input from '../../../components/common/Input/Input';
 import Header from '../../../components/Header/TopUploadHeader';
 import Loading from '../../../components/common/Loading/Loading';
-import {
-  accountAtom,
-  profileImgAtom,
-  usernameAtom,
-  introAtom,
-  tokenAtom,
-} from '../../../atoms/UserAtom';
+import { userInfoAtom } from '../../../atoms/UserAtom';
 import { isDarkModeState } from '../../../atoms/StylesAtom';
 import { getMyInfo, editProfile } from '../../../api/profile';
 import { postAccountnameDuplicate, postUploadProfile } from '../../../api/auth';
@@ -23,16 +17,17 @@ import {
   ImageInput,
   ErrorMessage } from './ProfileEditPageStyle';
 
-const ProfileEditPage = ({theme}) => {
+const ProfileEditPage = () => {
   const URL = 'https://api.mandarin.weniv.co.kr';
-  const userToken = useRecoilValue(tokenAtom);
+  const token = localStorage.getItem('token');
   const isDarkMode = useRecoilValue(isDarkModeState);
 
   const navigate = useNavigate();
   const fileInputRef = useRef();
   const formData = new FormData();
 
   const [isLoading, setIsLoading] = useState(true);
+
   const [username, setUsername] = useState('');
   const [accountname, setAccountname] = useState('');
   const [intro, setIntro] = useState('');
@@ -41,22 +36,21 @@ const ProfileEditPage = ({theme}) => {
   const [accountnameErrorMsg, setAccountnameErrorMsg] = useState('');
   const [usernameValid, setUsernameValid] = useState(false);
   const [accountnameValid, setAccountnameValid] = useState(false);
-  const [userIntro, setUserIntro] = useRecoilState(introAtom);
+  const [userInfo, setUserInfo] = useRecoilState(userInfoAtom);
 
-  const setAtomAccount = useSetRecoilState(accountAtom);
-  const setAtomIntroAtom = useSetRecoilState(introAtom);
-  const setAtomProfileImgAtom = useSetRecoilState(profileImgAtom);
-  const setAtomUsernameAtom = useSetRecoilState(usernameAtom);
 
   /* 기존 프로필 정보 불러오기 */
   useEffect(() => {
     const fetchMyInfo = async () => {
-      const response = await getMyInfo(userToken);
+      const response = await getMyInfo(token);
       setIsLoading(false);
-      setUsername(response.user.username);
-      setAccountname(response.user.accountname);
-      setIntro(response.user.intro);
-      setImage(response.user.image);
+      setUserInfo({
+        ...userInfo,
+        account: response.user.accountname,
+        profileImg: response.user.image,
+        username: response.user.username,
+        intro: response.user.intro,
+      })
     };
     fetchMyInfo();
   }, []);
@@ -140,12 +134,13 @@ const ProfileEditPage = ({theme}) => {
         intro,
         image,
       });
-      setUserIntro(intro);
-      setAtomAccount(accountname);
-      setAtomIntroAtom(intro);
-      setAtomProfileImgAtom(image);
-      setAtomUsernameAtom(username);
-
+      setUserInfo({
+        ...userInfo,
+        account: accountname,
+        profileImg: image,
+        username: username,
+        intro: intro,
+      })
       alert('프로필 수정이 완료되었습니다 🌬️');
       navigate(`/profile/${accountname}`);
     }

src/pages/ProfilePage/ProfilePage.jsx

@@ -18,27 +18,23 @@ import PostPage from '../PostPage/PostPage';
 import { getUserProfile } from '../../api/profile';
 import { getMyPost } from '../../api/post';
 import { loginAtom } from '../../atoms/LoginAtom';
-import {
-  tokenAtom,
-  accountAtom,
-  profileImgAtom,
-  usernameAtom,
-  introAtom,
-} from '../../atoms/UserAtom';
+import { userInfoAtom } from '../../atoms/UserAtom';
 
 import { Container, Section } from './ProfilePageStyle';
+
 const UserInfo = lazy(() => import('./UserInfo'));
 
-const ProfilePage = ({ theme }) => {
+const ProfilePage = () => {
   const location = useLocation();
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState(true);
   const [posts, setPosts] = useState([]);
   const [profile, setProfile] = useState();
   const [accountName, setAccountName] = useState('');
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const userToken = useRecoilValue(tokenAtom);
-  const account = useRecoilValue(accountAtom);
+  const userToken = localStorage.getItem('token');
+  const userInfo = useRecoilValue(userInfoAtom);
+  const account = userInfo.account;
   const setLoginState = useSetRecoilState(loginAtom);
   const [isDelete, setIsDelete] = useState(false);
   const [modalText, setModalText] = useState([]);
@@ -95,11 +91,7 @@ const ProfilePage = ({ theme }) => {
   };
 
   const handleResetState = useRecoilCallback(({ reset }) => () => {
-    reset(tokenAtom);
-    reset(accountAtom);
-    reset(profileImgAtom);
-    reset(usernameAtom);
-    reset(introAtom);
+    reset(userInfoAtom);
   });
 
   const onShowModal = (postId) => {
@@ -148,17 +140,13 @@ const ProfilePage = ({ theme }) => {
   return (
     <Container>
       <Header onButtonClick={onShowHeaderModal} />
-
       <>
         {profile && (
           <Suspense fallback={<Loading />}>
             <UserInfo
               data={profile}
-              myProfile={
-                JSON.parse(localStorage.getItem('recoil-persist'))[
-                  'accountAtom'
-                ] === accountName
-              }
+              myProfile={userInfoAtom.account === accountName}
+
             />
           </Suspense>
         )}

src/pages/ProfilePage/UserInfo.jsx

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import Button from '../../components/common/Button/ButtonContainer';
 import FollowCount from './FollowCount';
-import { accountAtom } from '../../atoms/UserAtom';
+import { userInfoAtom } from '../../atoms/UserAtom';
 import { isDarkModeState } from '../../atoms/StylesAtom';
 import { postFollow, deleteFollow } from '../../api/follow';
 import basicProfile from '../../assets/images/basic-profile-l.svg';
@@ -23,7 +23,8 @@ import {
 
 const UserInfo = ({ data, myProfile }) => {
   const navigate = useNavigate();
-  const account = useRecoilValue(accountAtom);
+  const userInfo = useRecoilValue(userInfoAtom);
+  const account = userInfo.account;
   const isDarkMode = useRecoilValue(isDarkModeState);
   const [profile, setProfile] = useState(data);
   const numberRegex = /^https:\/\/api\.mandarin\.weniv\.co\.kr\/[/\w.]*$/;