recoil 설치 및 atom 생성

frontend/package.json

@@ -17,7 +17,8 @@
     "phaser": "^3.55.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.4.3"
+    "react-router-dom": "^6.4.3",
+    "recoil": "^0.7.6"
   },
   "devDependencies": {
     "@emotion/babel-plugin": "^11.10.5",

frontend/src/store/atom/backgroundSetting.ts

@@ -0,0 +1,11 @@
+import { atom } from 'recoil';
+
+export const musicState = atom<boolean>({
+  key: 'musicState',
+  default: true,
+});
+
+export const snowState = atom<boolean>({
+  key: 'snowState',
+  default: true,
+});

frontend/src/store/atom/deviceSetting.ts

@@ -0,0 +1,16 @@
+import { atom } from 'recoil';
+import { stringObjectType } from '../../types/types';
+
+export const devicePermissionState = atom<boolean>({
+  key: 'devicePermissionState',
+  default: false,
+});
+
+export const devicesState = atom<stringObjectType>({
+  key: 'devicesState',
+  default: {
+    speaker: 'default',
+    audio: 'default',
+    video: 'default',
+  },
+});

frontend/src/store/atom/user.ts

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

frontend/src/types/types.ts

@@ -1,3 +1,7 @@
 export type childrenType = {
   children: JSX.Element | JSX.Element[];
 };
+
+export type stringObjectType = {
+  [key: string]: string;
+};