diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 172098c..353742c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -16,7 +16,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",
@@ -1350,6 +1351,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/hamt_plus": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz",
+      "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA=="
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -1682,6 +1688,25 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/recoil": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.6.tgz",
+      "integrity": "sha512-hsBEw7jFdpBCY/tu2GweiyaqHKxVj6EqF2/SfrglbKvJHhpN57SANWvPW+gE90i3Awi+A5gssOd3u+vWlT+g7g==",
+      "dependencies": {
+        "hamt_plus": "1.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.13.10",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz",
@@ -2771,6 +2796,11 @@
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
     },
+    "hamt_plus": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz",
+      "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA=="
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -3008,6 +3038,14 @@
         "react-router": "6.4.3"
       }
     },
+    "recoil": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.6.tgz",
+      "integrity": "sha512-hsBEw7jFdpBCY/tu2GweiyaqHKxVj6EqF2/SfrglbKvJHhpN57SANWvPW+gE90i3Awi+A5gssOd3u+vWlT+g7g==",
+      "requires": {
+        "hamt_plus": "1.0.2"
+      }
+    },
     "regenerator-runtime": {
       "version": "0.13.10",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 2d5c07b..b187b5d 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/store/atom/backgroundSetting.ts b/frontend/src/store/atom/backgroundSetting.ts
new file mode 100644
index 0000000..6883eae
--- /dev/null
+++ b/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,
+});
diff --git a/frontend/src/store/atom/deviceSetting.ts b/frontend/src/store/atom/deviceSetting.ts
new file mode 100644
index 0000000..268f813
--- /dev/null
+++ b/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',
+  },
+});
diff --git a/frontend/src/store/atom/user.ts b/frontend/src/store/atom/user.ts
new file mode 100644
index 0000000..22d400c
--- /dev/null
+++ b/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,
+  },
+});
diff --git a/frontend/src/types/types.ts b/frontend/src/types/types.ts
index f6ad562..42d6243 100644
--- a/frontend/src/types/types.ts
+++ b/frontend/src/types/types.ts
@@ -1,3 +1,7 @@
 export type childrenType = {
   children: JSX.Element | JSX.Element[];
 };
+
+export type stringObjectType = {
+  [key: string]: string;
+};