Feat/mypage: merge to dev

package.json

@@ -18,6 +18,7 @@
     "axios": "^1.7.4",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
+    "react-cookie": "^7.2.0",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
     "react-powerglitch": "^1.0.3",

src/App.jsx

@@ -4,11 +4,15 @@
 // 내비바의 높이는 80px입니다.
 
 import { Routes, Route, useLocation } from 'react-router-dom';
+import { CookiesProvider } from 'react-cookie';
 
 import { GlobalStyle } from './styles/global';
 import { MainLayout } from './components/layouts/MainLayout';
 import './styles/font.css';
 
+import { AuthProvider } from './components/navigation/AuthContext';
+import Navigator from './components/navigation/Navigation';
+
 import MainPage from './pages/MainPage';
 import NotFound from './pages/NotFound';
 
@@ -29,35 +33,43 @@ export default function App() {
 
   return (
     <>
-      <GlobalStyle />
-      <Routes>
-        <Route path="/" element={<MainLayout />}>
-          <Route index path="/" element={<MainPage />} />
-          <Route path="/developer" element={<DevDocument />} />
-          <Route path="/board">
-            <Route index path="/board" element={<Board />} />
-            <Route path="/board/new" element={<NewArticleEditor />} />
-          </Route>
-          <Route path="/articles/:id" element={<Article />} />
-          <Route path="/login" element={<Login />} />
-          <Route path="/signup" element={<SignUp />} />
-          <Route path="/mypage" element={<MyPage />} />
-          <Route path="*" element={<NotFound />} />
-
-          {/* 대시보드 페이지 */}
-          <Route element={<DashboardLayout location={location} />}>
-            <Route index path="/dashboard" element={<Dashboard.Home />} />
-            <Route path="/dashboard/history" element={<Dashboard.History />} />
-            <Route
-              path="/dashboard/executive"
-              element={<Dashboard.Executive />}
-            />
-            <Route path="/dashboard/admin" element={<Dashboard.Admin />} />
-            <Route path="/dashboard/users" element={<Dashboard.Users />} />
-            <Route path="/dashboard/*" element={<NotFound />} />
-          </Route>
-        </Route>
-      </Routes>
+      <CookiesProvider>
+        <AuthProvider>
+          <GlobalStyle />
+          <Navigator />
+          <Routes>
+            <Route path="/" element={<MainLayout />}>
+              <Route index path="/" element={<MainPage />} />
+              <Route path="/developer" element={<DevDocument />} />
+              <Route path="/board">
+                <Route index path="/board" element={<Board />} />
+                <Route path="/board/new" element={<NewArticleEditor />} />
+              </Route>
+              <Route path="/articles/:id" element={<Article />} />
+              <Route path="/login" element={<Login />} />
+              <Route path="/signup" element={<SignUp />} />
+              <Route path="/mypage" element={<MyPage />} />
+              <Route path="*" element={<NotFound />} />
+
+              {/* 대시보드 페이지 */}
+              <Route element={<DashboardLayout location={location} />}>
+                <Route index path="/dashboard" element={<Dashboard.Home />} />
+                <Route
+                  path="/dashboard/history"
+                  element={<Dashboard.History />}
+                />
+                <Route
+                  path="/dashboard/executive"
+                  element={<Dashboard.Executive />}
+                />
+                <Route path="/dashboard/admin" element={<Dashboard.Admin />} />
+                <Route path="/dashboard/users" element={<Dashboard.Users />} />
+                <Route path="/dashboard/*" element={<NotFound />} />
+              </Route>
+            </Route>
+          </Routes>
+        </AuthProvider>
+      </CookiesProvider>
     </>
   );
 }

src/components/display/HistoryPreview.jsx

@@ -107,7 +107,7 @@ const HistoryElement = ({ history }) => {
         {history.year}.{history.month}
       </Text>
       <Text size="m" color="white">
-        {history.description}
+        {history.content}
       </Text>
     </HistoryElementWrapper>
   );
@@ -117,7 +117,7 @@ HistoryElement.propTypes = {
   history: PropTypes.shape({
     year: PropTypes.number.isRequired,
     month: PropTypes.number.isRequired,
-    description: PropTypes.string.isRequired,
+    content: PropTypes.string.isRequired,
   }).isRequired,
 };
 
@@ -188,7 +188,7 @@ export const HistoryPreview = () => {
               ? sampleData[display_year]?.map((history, i) => (
                   <HistoryElement key={i} history={history} />
                 ))
-              : data[display_year].map((history, i) => (
+              : data[display_year]?.map((history, i) => (
                   <HistoryElement key={i} history={history} />
                 ))}
           </HistoryListWrapper>

src/components/display/dashboard/admin/AdminElement.jsx

@@ -80,7 +80,9 @@ export const AdminElement = ({ admin }) => {
   const { openConfirm, closeConfirm } = useConfirm();
 
   const { data, isLoading } = useQuery(`user-${admin.student_id}`, async () => {
-    const data = await API.GET(`/users/${admin.student_id}`);
+    const data = await API.GET(`/users/${admin.student_id}`, {
+      headers: { Authorization: localStorage.getItem('token') },
+    });
     return { ...admin, ...data };
   });
 
@@ -176,7 +178,10 @@ export const AdminElement = ({ admin }) => {
     // 문제가 없다면 서버 요청 시작
     showLoading({ message: '관리자 정보를 수정하는 중...' });
 
-    API.PUT(`/admin/${data.student_id}`, updated_admin)
+    API.PUT(`/admin/${data.student_id}`, {
+      body: updated_admin,
+      headers: { Authorization: localStorage.getItem('token') },
+    })
       .then((api_res) => {
         closeConfirm();
         openAlert({

src/components/display/dashboard/admin/EditAdmin.jsx

@@ -105,7 +105,9 @@ export const EditAdmin = forwardRef(({ admin, ...props }, ref) => {
     closeConfirm();
     showLoading({ message: '관리자를 삭제하는 중...' });
 
-    API.DELETE(`/admin/${admin.student_id}`)
+    API.DELETE(`/admin/${admin.student_id}`, {
+      headers: { Authorization: localStorage.getItem('token') },
+    })
       .then((api_res) => {
         openAlert({
           title: '관리자 삭제 완료',
@@ -164,7 +166,6 @@ export const EditAdmin = forwardRef(({ admin, ...props }, ref) => {
       <div style={{ display: 'flex' }}>
         <HintedInput
           ref={ref.generation}
-          type="number"
           label="가입 기수"
           defaultValue={admin.generation}
           onChange={(e) => {

src/components/display/dashboard/history/AddHistory.jsx

@@ -28,7 +28,7 @@ export const AddHistory = forwardRef(({ ...props }, ref) => {
         />
       </div>
       <Input
-        ref={ref.description}
+        ref={ref.content}
         label="내용"
         placeholder="연혁 내용 입력"
         defaultValue={history.description}

src/components/display/dashboard/history/EditHistory.jsx

@@ -49,7 +49,7 @@ export const EditHistory = forwardRef(
       return;
     }
 
-    const [previewDesc, setPreviewDesc] = useState(history.description);
+    const [previewDesc, setPreviewDesc] = useState(history.content);
 
     return (
       <Wrapper>
@@ -79,9 +79,9 @@ export const EditHistory = forwardRef(
           />
         </div>
         <HintedInput
-          ref={ref.description}
+          ref={ref.content}
           label="내용"
-          defaultValue={history.description}
+          defaultValue={history.content}
           onChange={(e) => {
             // 사용자가 내용을 변경하면 미리보기의 내용도 변경합니다.
             setPreviewDesc(e.target.value);

src/components/display/dashboard/history/HistoryElement.jsx

@@ -71,7 +71,7 @@ export const HistoryElement = ({ history }) => {
   const refs = {
     year: useRef(),
     month: useRef(),
-    description: useRef(),
+    content: useRef(),
   };
 
   // 연혁 요소를 눌렀을 때 이벤트
@@ -93,7 +93,7 @@ export const HistoryElement = ({ history }) => {
       ...history,
       year: parseInt(refs.year.current.value),
       month: parseInt(refs.month.current.value),
-      description: refs.description.current.value,
+      content: refs.content.current.value,
     };
 
     // 만약 변경된 내용 없이 기존과 같다면 중단
@@ -110,7 +110,7 @@ export const HistoryElement = ({ history }) => {
     if (
       !updated_history.year ||
       !updated_history.month ||
-      !updated_history.description
+      !updated_history.content
     ) {
       openAlert({
         title: '정보 부족',
@@ -122,7 +122,10 @@ export const HistoryElement = ({ history }) => {
     // 문제가 없다면 서버 요청 시작
     showLoading({ message: '연혁을 수정하는 중...' });
 
-    API.PUT(`/histories/${history.id}`, updated_history)
+    API.PUT(`/histories/${history.history_id}`, {
+      body: updated_history,
+      headers: { Authorization: localStorage.getItem('token') },
+    })
       .then((api_res) => {
         closeConfirm();
         openAlert({
@@ -154,7 +157,9 @@ export const HistoryElement = ({ history }) => {
     closeConfirm();
     showLoading({ message: '연혁을 삭제하는 중...' });
 
-    API.DELETE(`/histories/${history.id}`)
+    API.DELETE(`/histories/${history.history_id}`, {
+      headers: { Authorization: localStorage.getItem('token') },
+    })
       .then((api_res) => {
         openAlert({
           title: '연혁 삭제됨',
@@ -177,7 +182,7 @@ export const HistoryElement = ({ history }) => {
   return (
     <CardWrapper onClick={() => onClick()}>
       <Month>{history?.month}월</Month>
-      <Description>{history?.description}</Description>
+      <Description>{history?.content}</Description>
     </CardWrapper>
   );
 };

src/components/display/dashboard/history/UpdatedHistory.jsx

@@ -43,14 +43,14 @@ const Content = styled(Span).attrs({
 export const UpdatedHistory = ({ current_history, updated_history }) => {
   return (
     <>
-      <ID>History ID {updated_history.id}</ID>
+      <ID>History ID {updated_history.history_id}</ID>
       <Description>연혁이 다음과 같이 수정되었습니다.</Description>
       {/* 기존 연혁 */}
       <Display style={{ opacity: '0.5' }}>
         <Date>
           {current_history.year}년 {current_history.month}월
         </Date>
-        <Content>{current_history.description}</Content>
+        <Content>{current_history.content}</Content>
       </Display>
       {/* 화살표 */}
       <div style={{ margin: '10px 0', width: '100%', textAlign: 'center' }}>
@@ -61,7 +61,7 @@ export const UpdatedHistory = ({ current_history, updated_history }) => {
         <Date>
           {updated_history.year}년 {updated_history.month}월
         </Date>
-        <Content>{updated_history.description}</Content>
+        <Content>{updated_history.content}</Content>
       </Display>
     </>
   );