From 78b20b7ec33fc47adb7190086380c280144c7625 Mon Sep 17 00:00:00 2001 From: ktmihs Date: Mon, 28 Nov 2022 15:12:53 +0900 Subject: [PATCH 1/4] =?UTF-8?q?[feat]=20#85=20recoil=20=EC=A0=84=EC=97=AD?= =?UTF-8?q?=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - RecoilRoot 추가 --- frontend/src/App.tsx | 9 ++++++--- frontend/src/component/Sidebar/Setting/index.tsx | 4 ++-- frontend/src/component/Sidebar/index.tsx | 14 +++++++------- 3 files changed, 15 insertions(+), 12 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 67c16ef..353b0f1 100644 --- a/frontend/src/App.tsx +++ b/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 ( <> - - - + + + + + ); } diff --git a/frontend/src/component/Sidebar/Setting/index.tsx b/frontend/src/component/Sidebar/Setting/index.tsx index d60347a..e354547 100644 --- a/frontend/src/component/Sidebar/Setting/index.tsx +++ b/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 ( ); }; diff --git a/frontend/src/component/Sidebar/index.tsx b/frontend/src/component/Sidebar/index.tsx index fa49e8b..ef25c7a 100644 --- a/frontend/src/component/Sidebar/index.tsx +++ b/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: , - friends: , - chatting: , - setting: , - }; +const component: componentType = { + mypage: , + friends: , + chatting: , + setting: , +}; +const Sidebar = () => { const [isOpen, setOpen] = useState(true); const [isMicOn, setMic] = useState(false); const [isCamOn, setCam] = useState(true); From 2f2de80dc5bbbd19496d2f27c3c2323b9f40784e Mon Sep 17 00:00:00 2001 From: ktmihs Date: Mon, 28 Nov 2022 15:14:38 +0900 Subject: [PATCH 2/4] =?UTF-8?q?[feat]=20#85=20=EB=88=88=20=EB=82=B4?= =?UTF-8?q?=EB=A6=AC=EA=B8=B0=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 전역으로 상태 관리하여 버튼 토클에 따라 눈내리기 설정 및 해제 --- frontend/src/page/Town/index.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/frontend/src/page/Town/index.tsx b/frontend/src/page/Town/index.tsx index 72adb80..525f4da 100644 --- a/frontend/src/page/Town/index.tsx +++ b/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 ( <> - + - + {isSnowing && } {isLoadingComplete || } From 055bce7632570c47adac9e7831dddb71bda050f8 Mon Sep 17 00:00:00 2001 From: ktmihs Date: Mon, 28 Nov 2022 16:26:38 +0900 Subject: [PATCH 3/4] =?UTF-8?q?[feat]=20#85=20=EC=9C=A0=EC=A0=80=20?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EC=A0=84=EC=97=AD=20=EC=A0=80=EC=9E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 로그인이 되어있는 경우, 메인페이지에서 유저 정보 전역으로 저장 --- frontend/src/page/Main/index.tsx | 12 ++++++++++-- frontend/src/store/atom/user.ts | 4 ++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/frontend/src/page/Main/index.tsx b/frontend/src/page/Main/index.tsx index e235f96..68bc1c7 100644 --- a/frontend/src/page/Main/index.tsx +++ b/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(); diff --git a/frontend/src/store/atom/user.ts b/frontend/src/store/atom/user.ts index 22d400c..094c4ac 100644 --- a/frontend/src/store/atom/user.ts +++ b/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({ key: 'userState', default: { nickname: '', - hair: -1, + hair: '', }, }); From fcb690eefdf726a3958c35e2bffb0ef5b912ffe2 Mon Sep 17 00:00:00 2001 From: ktmihs Date: Mon, 28 Nov 2022 16:32:16 +0900 Subject: [PATCH 4/4] =?UTF-8?q?[feat]=20#85=20=EB=B0=B0=EA=B2=BD=EC=9D=8C?= =?UTF-8?q?=EC=95=85=20=EC=A0=95=EB=B3=B4=20=EC=A0=84=EC=97=AD=20=EC=A0=80?= =?UTF-8?q?=EC=9E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 배경 음악 토클 시, 전역 정보 변경 --- .../src/component/Sidebar/Setting/backgroundSetting.tsx | 7 ++++--- frontend/src/component/Sidebar/Setting/deviceSetting.tsx | 5 ++++- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/frontend/src/component/Sidebar/Setting/backgroundSetting.tsx b/frontend/src/component/Sidebar/Setting/backgroundSetting.tsx index a0c9134..a38a287 100644 --- a/frontend/src/component/Sidebar/Setting/backgroundSetting.tsx +++ b/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(false); - const [isSnowing, setSnowing] = useState(false); + const [isMusicOn, setMusic] = useRecoilState(musicState); + const [isSnowing, setSnowing] = useRecoilState(snowState); const handleMusicStatus = () => { setMusic(!isMusicOn); diff --git a/frontend/src/component/Sidebar/Setting/deviceSetting.tsx b/frontend/src/component/Sidebar/Setting/deviceSetting.tsx index cc773e3..f03e43a 100644 --- a/frontend/src/component/Sidebar/Setting/deviceSetting.tsx +++ b/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(); useEffect(() => {