Merge pull request #86 from SWM-FIRE/FIRE-401-fe-로그인-정보-없으면-튕기게-설정

FIRE-401-fe-로그인-정보-없으면-튕기게-설정

Author: 071yoon

src/components/login/UserInput.tsx

@@ -32,12 +32,35 @@ export default function UserInput({
   };
 
   useEffect(() => {
-    if (!localStorage.getItem('uid')) {
+    /**
+     * @brief 유저 정보 수정
+     * validUID인 경우 -> 유저 정보 수정
+     * invalidUID인 경우 -> 유저 정보 생성
+     */
+    if (localStorage.getItem('uid')) {
+      const myUid = localStorage.getItem('uid');
+      setUid(myUid);
+      console.log('my uid', myUid);
+      axios.get((API.USER as string) + myUid).then((res) => {
+        console.log('axios good');
+        if (res.data.uid) {
+          // valid uid
+          console.log('valid uid', res.data.uid);
+          type = 'put';
+        } else {
+          console.log('will post');
+          // invalid uid
+          type = 'post';
+        }
+      });
+    } else {
+      console.log('uid is null');
+      // no uid
       const newUID = uuidv4();
       setUid(newUID);
       localStorage.setItem('uid', newUID);
       type = 'post';
-    } else type = 'put';
+    }
   }, []);
 
   const userRequest = async (newUser: userInterface) => {

src/components/main/Block.tsx

@@ -22,7 +22,6 @@ export default function Block({
     event.preventDefault();
     navigate(`/ready/${itemId}`);
   };
-  console.log(theme);
   return (
     <Container main={isMain}>
       <AvatarContainer>

src/hooks/useSetSelf.ts

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import axios from 'axios';
+import { API } from '../config';
+import UserStore from '../stores/userStore';
+
+export default function useSetSelf() {
+  const { setNickname, setUid, setAvatar } = UserStore();
+
+  useEffect(() => {
+    if (localStorage.getItem('uid')) {
+      const myUid = localStorage.getItem('uid');
+      axios.get((API.USER as string) + myUid).then((res) => {
+        if (res.data.uid) {
+          console.log('existing user', res.data);
+          setNickname(res.data.nickname);
+          setAvatar(res.data.avatar);
+          setUid(myUid);
+        }
+      });
+    }
+  }, []);
+}

src/hooks/useUserInfo.ts

@@ -2,11 +2,11 @@ import axios from 'axios';
 import { useQuery } from 'react-query';
 import { API } from '../config';
 
-const getUser = async (senderUid) => {
+const getUser = async (senderUid: string) => {
   const { data } = await axios.get((API.USER as string) + senderUid);
   return data;
 };
 
-export default function useUserInfo(senderUid) {
+export default function useUserInfo(senderUid: string) {
   return useQuery(['userData', 'getOne'], () => getUser(senderUid));
 }

src/pages/LandingPage.tsx

@@ -1,30 +1,20 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import styled from 'styled-components';
 import Scrolls from '../components/main/Scrolls';
 import Header from '../components/main/Header';
 import Title from '../components/main/TitleContainer';
 import Modal from '../components/layout/Modal';
 import LoginModal from '../components/login/LoginModal';
-import UserStore from '../stores/userStore';
+import useSetSelf from '../hooks/useSetSelf';
 import LandingPage from '../components/main/landingPage/LandingPage';
 
 export default function Main() {
   const [isModal, setIsModal] = useState(false);
-  const { setNickname, uid, setUid, setAvatar } = UserStore();
-
-  useEffect(() => {
-    if (localStorage.getItem('uid')) {
-      console.log('existing user', uid);
-      setNickname(localStorage.getItem('nickname'));
-      setUid(localStorage.getItem('uid'));
-      setAvatar(localStorage.getItem('avatar'));
-    }
-  }, []);
+  useSetSelf();
 
   const closeModalHandler = () => {
     setIsModal(false);
   };
-
   const openModalHandler = () => {
     setIsModal(true);
   };

src/pages/Main.tsx

@@ -1,29 +1,19 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import styled from 'styled-components';
 import RoomCards from '../components/main/RoomCards';
 import Header from '../components/main/Header';
 import MainTitle from '../components/main/MainTitle';
 import Modal from '../components/layout/Modal';
 import LoginModal from '../components/login/LoginModal';
-import UserStore from '../stores/userStore';
+import useSetSelf from '../hooks/useSetSelf';
 
 export default function Main() {
   const [isModal, setIsModal] = useState(false);
-  const { setNickname, uid, setUid, setAvatar } = UserStore();
-
-  useEffect(() => {
-    if (localStorage.getItem('uid')) {
-      console.log('existing user', uid);
-      setNickname(localStorage.getItem('nickname'));
-      setUid(localStorage.getItem('uid'));
-      setAvatar(localStorage.getItem('avatar'));
-    }
-  }, []);
 
+  useSetSelf();
   const closeModalHandler = () => {
     setIsModal(false);
   };
-
   const openModalHandler = () => {
     setIsModal(true);
   };