fix: 투표와 라우팅 관련 버그를 수정한다.

fix: 투표와 라우팅 관련 버그를 수정한다.

frontend/src/App.tsx

@@ -5,6 +5,8 @@ import { MenuRoute } from './routes/MenuRoute';
 import NavigationLayout from './layouts/NavigationLayout/NavigationLayout';
 import GroupRoute from './routes/GroupRoute';
 import ErrorPage from './pages/ErrorPage/ErrorPage';
+import { AuthProvider } from './context/AuthProvider';
+import FallbackPage from './pages/FallbackPage/FallbackPage';
 
 const PollMainPage = lazy(() => import('./pages/PollMainPage/PollMainPage'));
 const PollCreatePage = lazy(() => import('./pages/PollCreatePage/PollCreatePage'));
@@ -29,12 +31,18 @@ const RoleMainPage = lazy(() => import('./pages/RoleMainPage/RoleMainPage'));
 function App() {
   return (
     // TODO: 로딩 UI 필요
-    <Suspense fallback={<div>로딩중</div>}>
+    <Suspense fallback={<FallbackPage />}>
       <Routes>
         <Route path="/">
           <Route index element={<LandingPage />} />
           <Route path="invite/:invitationCode" element={<InvitationPage />} />
-          <Route element={<PrivateRoute />}>
+          <Route
+            element={
+              <AuthProvider>
+                <PrivateRoute />
+              </AuthProvider>
+            }
+          >
             <Route path="init" element={<GroupInitPage />} />
 
             <Route element={<NavigationLayout />}>

frontend/src/api/appointment.ts

@@ -1,34 +1,36 @@
 import { Group } from '../types/group';
-import { groupInstance as axios } from './axios';
+import { privateGroupsAxiosInstance } from './axios';
 import { Appointment, CreateAppointmentRequest, AvailableTimes } from '../types/appointment';
 
 const createAppointment = (groupCode: Group['code'], appointment: CreateAppointmentRequest) =>
-  axios.post(`/${groupCode}/appointments`, appointment);
+  privateGroupsAxiosInstance.post(`/${groupCode}/appointments`, appointment);
 
-const getAppointments = (groupCode: Group['code']) => axios.get(`/${groupCode}/appointments`);
+const getAppointments = (groupCode: Group['code']) =>
+  privateGroupsAxiosInstance.get(`/${groupCode}/appointments`);
 
 const getAppointmentRecommendation = (
   groupCode: Group['code'],
   appointmentCode: Appointment['code']
-) => axios.get(`/${groupCode}/appointments/${appointmentCode}/recommendation`);
+) => privateGroupsAxiosInstance.get(`/${groupCode}/appointments/${appointmentCode}/recommendation`);
 
 const getAppointment = (groupCode: Group['code'], appointmentCode: Appointment['code']) =>
-  axios.get(`/${groupCode}/appointments/${appointmentCode}`);
+  privateGroupsAxiosInstance.get(`/${groupCode}/appointments/${appointmentCode}`);
 
 const progressAppointment = (
   groupCode: Group['code'],
   appointmentCode: Appointment['code'],
   availableTimes: AvailableTimes
-) => axios.put(`/${groupCode}/appointments/${appointmentCode}`, availableTimes);
+) =>
+  privateGroupsAxiosInstance.put(`/${groupCode}/appointments/${appointmentCode}`, availableTimes);
 
 const closeAppointment = (groupCode: Group['code'], appointmentCode: Appointment['code']) =>
-  axios.patch(`/${groupCode}/appointments/${appointmentCode}/close`);
+  privateGroupsAxiosInstance.patch(`/${groupCode}/appointments/${appointmentCode}/close`);
 
 const deleteAppointment = (groupCode: Group['code'], appointmentCode: Appointment['code']) =>
-  axios.delete(`/${groupCode}/appointments/${appointmentCode}`);
+  privateGroupsAxiosInstance.delete(`/${groupCode}/appointments/${appointmentCode}`);
 
 const getAppointmentStatus = (groupCode: Group['code'], appointmentCode: Appointment['code']) =>
-  axios.get(`/${groupCode}/appointments/${appointmentCode}/status`);
+  privateGroupsAxiosInstance.get(`/${groupCode}/appointments/${appointmentCode}/status`);
 
 export {
   getAppointments,

frontend/src/api/auth.ts

@@ -1,5 +1,9 @@
-import { authInstance as axios } from './axios';
+import { EditUsernameRequest } from '../types/auth';
+import { publicAuthAxiosInstance, privateAuthAxiosInstance } from './axios';
 
-const signin = (code: string) => axios.post('/signin', code);
+const signin = (code: string) => publicAuthAxiosInstance.post('/signin', code);
+const getUser = () => privateAuthAxiosInstance.get('/me');
+const editUsername = (userName: EditUsernameRequest) =>
+  privateAuthAxiosInstance.patch('/me/name', userName);
 
-export { signin };
+export { signin, getUser, editUsername };

frontend/src/api/axios.ts

@@ -7,7 +7,7 @@ import {
 
 type Path = 'auth' | 'groups';
 
-const axiosInstanceGenerator = (path: Path, isAuthRequired = true) => {
+const axiosInstanceGenerator = (path: Path) => (isAuthRequired: boolean) => {
   const instance = axios.create({
     baseURL: `${process.env.BASE_API_URL}/${path}`,
     headers: { 'Content-Type': 'application/json' }
@@ -68,7 +68,8 @@ const axiosInstanceGenerator = (path: Path, isAuthRequired = true) => {
   return instance;
 };
 
-const authInstance = axiosInstanceGenerator('auth', false);
-const groupInstance = axiosInstanceGenerator('groups');
+const publicAuthAxiosInstance = axiosInstanceGenerator('auth')(false);
+const privateAuthAxiosInstance = axiosInstanceGenerator('auth')(true);
+const privateGroupsAxiosInstance = axiosInstanceGenerator('groups')(true);
 
-export { authInstance, groupInstance };
+export { publicAuthAxiosInstance, privateAuthAxiosInstance, privateGroupsAxiosInstance };

frontend/src/api/group.ts

@@ -1,22 +1,27 @@
-import { groupInstance as axios } from './axios';
+import { privateGroupsAxiosInstance } from './axios';
 import { Group } from '../types/group';
 
-const getGroups = () => axios.get('');
+const getGroups = () => privateGroupsAxiosInstance.get('');
 
-const getGroupMembers = (groupCode: Group['code']) => axios.get(`/${groupCode}/members`);
+const getGroupMembers = (groupCode: Group['code']) =>
+  privateGroupsAxiosInstance.get(`/${groupCode}/members`);
 
 // TODO: '' 해결해야할듯
-const createGroup = (name: Group['name']) => axios.post('', { name });
+const createGroup = (name: Group['name']) => privateGroupsAxiosInstance.post('', { name });
 
-const createInvitationCode = (groupCode: Group['code']) => axios.post(`/${groupCode}/invitation`);
+const createInvitationCode = (groupCode: Group['code']) =>
+  privateGroupsAxiosInstance.post(`/${groupCode}/invitation`);
 
-const participateGroup = (invitationCode: string) => axios.post(`/in/${invitationCode}`);
+const participateGroup = (invitationCode: string) =>
+  privateGroupsAxiosInstance.post(`/in/${invitationCode}`);
 
-const getIsJoinedGroup = (invitationCode: string) => axios.get(`/in/${invitationCode}`);
+const getIsJoinedGroup = (invitationCode: string) =>
+  privateGroupsAxiosInstance.get(`/in/${invitationCode}`);
 
-const getDefaultGroup = () => axios.get('/default');
+const getDefaultGroup = () => privateGroupsAxiosInstance.get('/default');
 
-const leaveGroup = (groupCode: Group['code']) => axios.delete(`/out/${groupCode}`);
+const leaveGroup = (groupCode: Group['code']) =>
+  privateGroupsAxiosInstance.delete(`/out/${groupCode}`);
 
 export {
   getGroups,

frontend/src/api/poll.ts

@@ -1,34 +1,33 @@
-// NOTE: 왜 axios로 치환해주었냐면, axios라는 것을 사용해서 http 요청을 하는 것을 알려주기 위해서 사용을 했고,
-// groupInstance보다는 더 명확할 것 같아서 사용을 했습니다.
-import { groupInstance as axios } from './axios';
+import { privateGroupsAxiosInstance } from './axios';
 import { Poll, createPollRequest, SelectedPollItem } from '../types/poll';
 import { Group } from '../types/group';
 
-const getPolls = (groupCode: Group['code']) => axios.get(`/${groupCode}/polls`);
+const getPolls = (groupCode: Group['code']) =>
+  privateGroupsAxiosInstance.get(`/${groupCode}/polls`);
 
 const getPoll = (pollCode: Poll['code'], groupCode: Group['code']) =>
-  axios.get(`/${groupCode}/polls/${pollCode}`);
+  privateGroupsAxiosInstance.get(`/${groupCode}/polls/${pollCode}`);
 
 const getPollItems = (pollCode: Poll['code'], groupCode: Group['code']) =>
-  axios.get(`/${groupCode}/polls/${pollCode}/items`);
+  privateGroupsAxiosInstance.get(`/${groupCode}/polls/${pollCode}/items`);
 
 const getPollResult = (pollCode: Poll['code'], groupCode: Group['code']) =>
-  axios.get(`/${groupCode}/polls/${pollCode}/result`);
+  privateGroupsAxiosInstance.get(`/${groupCode}/polls/${pollCode}/result`);
 
 const createPoll = (poll: createPollRequest, groupCode: Group['code']) =>
-  axios.post(`/${groupCode}/polls`, poll);
+  privateGroupsAxiosInstance.post(`/${groupCode}/polls`, poll);
 
 const progressPoll = (
   groupCode: Group['code'],
   pollCode: Poll['code'],
   items: Array<SelectedPollItem>
-) => axios.put(`/${groupCode}/polls/${pollCode}`, items);
+) => privateGroupsAxiosInstance.put(`/${groupCode}/polls/${pollCode}`, items);
 
 const deletePoll = (pollCode: Poll['code'], groupCode: Group['code']) =>
-  axios.delete(`/${groupCode}/polls/${pollCode}`);
+  privateGroupsAxiosInstance.delete(`/${groupCode}/polls/${pollCode}`);
 
 const closePoll = (pollCode: Poll['code'], groupCode: Group['code']) =>
-  axios.patch(`/${groupCode}/polls/${pollCode}/close`);
+  privateGroupsAxiosInstance.patch(`/${groupCode}/polls/${pollCode}/close`);
 
 export {
   getPolls,

frontend/src/api/role.ts

@@ -1,11 +1,14 @@
 import { Group } from '../types/group';
 import { EditRolesRequest } from '../types/role';
-import { groupInstance as axios } from './axios';
+import { privateGroupsAxiosInstance } from './axios';
 
-const getRoles = (groupCode: Group['code']) => axios.get(`/${groupCode}/roles/names`);
+const getRoles = (groupCode: Group['code']) =>
+  privateGroupsAxiosInstance.get(`/${groupCode}/roles/names`);
 const editRoles = (groupCode: Group['code'], roles: EditRolesRequest) =>
-  axios.put(`/${groupCode}/roles/names`, roles);
-const allocateRoles = (groupCode: Group['code']) => axios.post(`/${groupCode}/roles`);
-const getRolesHistories = (groupCode: Group['code']) => axios.get(`/${groupCode}/roles/histories`);
+  privateGroupsAxiosInstance.put(`/${groupCode}/roles/names`, roles);
+const allocateRoles = (groupCode: Group['code']) =>
+  privateGroupsAxiosInstance.post(`/${groupCode}/roles`);
+const getRolesHistories = (groupCode: Group['code']) =>
+  privateGroupsAxiosInstance.get(`/${groupCode}/roles/histories`);
 
 export { getRoles, editRoles, allocateRoles, getRolesHistories };

frontend/src/api/slack.ts

@@ -1,9 +1,9 @@
-import { groupInstance as axios } from './axios';
+import { privateGroupsAxiosInstance } from './axios';
 
 import { Group } from '../types/group';
 import { LinkSlackRequest } from '../types/slack';
 
 const linkSlack = (slack: LinkSlackRequest, groupCode: Group['code']) =>
-  axios.post(`/${groupCode}/slack`, slack);
+  privateGroupsAxiosInstance.post(`/${groupCode}/slack`, slack);
 
 export { linkSlack };