Merge pull request #91 from ktmihs/develop

전역 상태 관리

frontend/src/App.tsx

@@ -2,14 +2,17 @@ import { BrowserRouter } from 'react-router-dom';
 import { Global } from '@emotion/react';
 import { global } from './global';
 import Router from './Router';
+import { RecoilRoot } from 'recoil';
 
 function App() {
   return (
     <>
       <Global styles={global} />
-      <BrowserRouter>
-        <Router />
-      </BrowserRouter>
+      <RecoilRoot>
+        <BrowserRouter>
+          <Router />
+        </BrowserRouter>
+      </RecoilRoot>
     </>
   );
 }

frontend/src/component/Sidebar/Setting/backgroundSetting.tsx

@@ -1,11 +1,12 @@
-import { useState } from 'react';
+import { useRecoilState } from 'recoil';
 import Content from '../Content';
 import { backgroundSettingWrapper } from './setting.styled';
 import Toggle from './toggle';
+import { musicState, snowState } from '../../../store/atom/backgroundSetting';
 
 const BackgroundSetting = () => {
-  const [isMusicOn, setMusic] = useState<boolean>(false);
-  const [isSnowing, setSnowing] = useState<boolean>(false);
+  const [isMusicOn, setMusic] = useRecoilState(musicState);
+  const [isSnowing, setSnowing] = useRecoilState(snowState);
 
   const handleMusicStatus = () => {
     setMusic(!isMusicOn);

frontend/src/component/Sidebar/Setting/deviceSetting.tsx

@@ -1,9 +1,12 @@
 import { useEffect, useState } from 'react';
+import { useRecoilValue } from 'recoil';
+import { devicePermissionState } from '../../../store/atom/deviceSetting';
 import Device from './device';
 import { deviceListType } from './setting';
 import { deviceWrapper } from './setting.styled';
 
-const DeviceSetting = (permission: { permission: boolean }) => {
+const DeviceSetting = () => {
+  const permission = useRecoilValue(devicePermissionState);
   const [deviceList, setDeviceList] = useState<deviceListType>();
 
   useEffect(() => {

frontend/src/component/Sidebar/Setting/index.tsx

@@ -2,11 +2,11 @@ import BackgroundSetting from './backgroundSetting';
 import DeviceSetting from './deviceSetting';
 import { settingWrapper } from './setting.styled';
 
-const Setting = ({ permission }: { permission: boolean }) => {
+const Setting = () => {
   return (
     <ul css={settingWrapper}>
       <BackgroundSetting />
-      <DeviceSetting permission={permission} />
+      <DeviceSetting />
     </ul>
   );
 };

frontend/src/component/Sidebar/index.tsx

@@ -19,14 +19,14 @@ type componentType = {
   [key: string]: EmotionJSX.Element;
 };
 
-const Sidebar = ({ permission }: { permission: boolean }) => {
-  const component: componentType = {
-    mypage: <Mypage />,
-    friends: <Friends />,
-    chatting: <Chat />,
-    setting: <Setting permission={permission} />,
-  };
+const component: componentType = {
+  mypage: <Mypage />,
+  friends: <Friends />,
+  chatting: <Chat />,
+  setting: <Setting />,
+};
 
+const Sidebar = () => {
   const [isOpen, setOpen] = useState(true);
   const [isMicOn, setMic] = useState(false);
   const [isCamOn, setCam] = useState(true);

frontend/src/page/Main/index.tsx

@@ -1,15 +1,23 @@
 import axios from 'axios';
 import { useEffect, useState } from 'react';
+import { useRecoilState } from 'recoil';
 import Background from '../../component/Background';
 import MainContent from '../../component/MainContent';
+import { userState } from '../../store/atom/user';
 
 const Main = () => {
   const [hasToken, setHasToken] = useState(false);
+  const [user, setUser] = useRecoilState(userState);
 
   useEffect(() => {
     const checkAuth = async () => {
-      const data = await axios.get('/api/user/auth');
-      data.status === 200 ? setHasToken(true) : setHasToken(false);
+      const response = await axios.get('/api/user/auth');
+      response.status === 200 ? setHasToken(true) : setHasToken(false);
+
+      setUser({
+        nickname: response.data.nickname,
+        hair: response.data.characterName,
+      });
     };
 
     checkAuth();

frontend/src/page/Town/index.tsx

@@ -1,16 +1,19 @@
 import { useEffect, useState } from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import Game from '../../component/Game';
 import Loading from '../../component/Loading';
 import Sidebar from '../../component/Sidebar';
 import SleepyBoard from '../../component/SleepyBoard';
 import Snow from '../../component/Snow';
+import { snowState } from '../../store/atom/backgroundSetting';
+import { devicePermissionState } from '../../store/atom/deviceSetting';
 
 const Town = () => {
   const [isLoadingComplete, setIsLoadingComplete] = useState(false);
   const [isClose, setIsClose] = useState(false);
 
-  // 전역으로 관리할 예정 (이후 props drilling 제거)
-  const [permission, setPermission] = useState(false);
+  const [permission, setPermission] = useRecoilState(devicePermissionState);
+  const isSnowing = useRecoilValue(snowState);
 
   useEffect(() => {
     const getDevicePermission = async () => {
@@ -30,9 +33,9 @@ const Town = () => {
 
   return (
     <>
-      <Sidebar permission={permission} />
+      <Sidebar />
       <Game />
-      <Snow />
+      {isSnowing && <Snow />}
       <SleepyBoard />
 
       {isLoadingComplete || <Loading isClose={isClose} />}

frontend/src/store/atom/user.ts

@@ -2,13 +2,13 @@ import { atom } from 'recoil';
 
 export interface userProps {
   nickname: string;
-  hair: number;
+  hair: string;
 }
 
 export const userState = atom<userProps>({
   key: 'userState',
   default: {
     nickname: '',
-    hair: -1,
+    hair: '',
   },
 });