[FE] recoil을 통한 groupAccessCode 전역 상태 관리

frontend/package.json

@@ -19,11 +19,12 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "dotenv-webpack": "^8.1.0",
+    "jest": "^29.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router": "^6.24.1",
     "react-router-dom": "^6.24.1",
-    "jest": "^29.7.0"
+    "recoil": "^0.7.7"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",

frontend/src/hooks/index.ts

@@ -1,2 +1,3 @@
 export { default as useSidebar } from './useSidebar';
 export { default as useModalClose } from './useModalClose';
+export { default as useGroupAccessCode } from './useGroupAccessCode';

frontend/src/hooks/useGroupAccessCode.ts

@@ -0,0 +1,18 @@
+import { useRecoilState } from 'recoil';
+
+import { groupAccessCodeAtom } from '@/recoil';
+
+const useGroupAccessCode = () => {
+  const [groupAccessCode, setGroupAccessCode] = useRecoilState(groupAccessCodeAtom);
+
+  const updateGroupAccessCode = (code: string) => {
+    setGroupAccessCode(code);
+  };
+
+  return {
+    groupAccessCode,
+    updateGroupAccessCode,
+  };
+};
+
+export default useGroupAccessCode;

frontend/src/index.tsx

@@ -2,6 +2,7 @@ import { Global, ThemeProvider } from '@emotion/react';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { RecoilRoot } from 'recoil';
 
 import App from '@/App';
 
@@ -44,7 +45,9 @@ root.render(
   <React.StrictMode>
     <ThemeProvider theme={theme}>
       <Global styles={globalStyles} />
-      <RouterProvider router={router} />
+      <RecoilRoot>
+        <RouterProvider router={router} />
+      </RecoilRoot>
     </ThemeProvider>
   </React.StrictMode>,
 );

frontend/src/recoil/groupAccessCode/index.ts

@@ -0,0 +1,8 @@
+import { atom } from 'recoil';
+
+import { ATOM_KEY } from '../keys';
+// NOTE: atom.ts가 아닌 index.ts를 한 이유? atom.ts이면 index.ts를 만들어줘야하는데 현재 상황 상, atom.ts와 index.ts를 둘 다 만들 필요를 느끼지 못했어요.  3차-1주차 시현을 위해 임시로 groupAccessCode를 쓰고 깃헙 로그인 시 jwt같은 기능을 사용할 수 있어서 현재는 index.ts로 만들었습니다.
+export const groupAccessCodeAtom = atom<string | null>({
+  key: ATOM_KEY.groupAccessCodeAtom,
+  default: null,
+});

frontend/src/recoil/index.ts

@@ -0,0 +1,2 @@
+export * from './groupAccessCode';
+export * from './keys';

frontend/src/recoil/keys/index.ts

@@ -0,0 +1,3 @@
+export const ATOM_KEY = {
+  groupAccessCodeAtom: 'groupAccessCodeAtom',
+};

frontend/yarn.lock

@@ -4521,6 +4521,11 @@ graphql@^16.8.1:
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.9.0.tgz#1c310e63f16a49ce1fbb230bd0a000e99f6f115f"
   integrity sha512-GGTKBX4SD7Wdb8mqeDLni2oaRGYQWjWHGKPQ24ZMnUtKfcsVoiv4uX8+LJr1K6U5VW2Lu1BwJnj7uiori0YtRw==
 
+[email protected]:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/hamt_plus/-/hamt_plus-1.0.2.tgz#e21c252968c7e33b20f6a1b094cd85787a265601"
+  integrity sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA==
+
 handle-thing@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
@@ -6650,6 +6655,13 @@ rechoir@^0.8.0:
   dependencies:
     resolve "^1.20.0"
 
+recoil@^0.7.7:
+  version "0.7.7"
+  resolved "https://registry.yarnpkg.com/recoil/-/recoil-0.7.7.tgz#c5f2c843224384c9c09e4a62c060fb4c1454dc8e"
+  integrity sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ==
+  dependencies:
+    hamt_plus "1.0.2"
+
 redent@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"