From e6cc7e871199a033093a40a2ecc4c729926a24fd Mon Sep 17 00:00:00 2001
From: Choi JunHo <duekzim@gmail.com>
Date: Mon, 5 Aug 2024 10:57:38 +0900
Subject: [PATCH 01/23] refactor: routes refactor and feat questionCheck admin
 routes

---
 src/routes/admin-routes.tsx  |  4 +++-
 src/routes/app-routes.tsx    |  2 --
 src/routes/private-route.tsx |  2 +-
 src/ui/pages/page-test.tsx   | 12 ------------
 4 files changed, 4 insertions(+), 16 deletions(-)
 delete mode 100644 src/ui/pages/page-test.tsx

diff --git a/src/routes/admin-routes.tsx b/src/routes/admin-routes.tsx
index 1b1739f..e4ce230 100644
--- a/src/routes/admin-routes.tsx
+++ b/src/routes/admin-routes.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 import PrivateRoute from './private-route';
 import FileList from '../ui/pages/admin/file-list';
-import AdminLayout from '../ui/components/admin/Layout/admin-layout';
 import Login from '../ui/pages/admin/login';
+import QuestionCheck from '../ui/pages/admin/question-check';
+import AdminLayout from '../ui/components/admin/Layout/admin-layout';
 
 const AdminRoutes: React.FC = () => {
   const token = sessionStorage.getItem('Authorization');
@@ -12,6 +13,7 @@ const AdminRoutes: React.FC = () => {
       <Route path="/login" element={<Login />} />
       <Route path="/" element={<PrivateRoute component={<AdminLayout />} authenticated={token} />}>
         <Route path="setting/file" element={<FileList />} />
+        <Route path="question/list" element={<QuestionCheck />} />
       </Route>
     </Routes>
   );
diff --git a/src/routes/app-routes.tsx b/src/routes/app-routes.tsx
index 8b6ce2b..8c1de84 100644
--- a/src/routes/app-routes.tsx
+++ b/src/routes/app-routes.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 import AdminRoutes from './admin-routes';
-import PageTest from '../ui/pages/page-test';
 import MaruEgg from '../ui/pages/maru-egg';
 
 const AppRoutes: React.FC = () => {
@@ -9,7 +8,6 @@ const AppRoutes: React.FC = () => {
     <Routes>
       <Route path="/" element={<MaruEgg />} />
       <Route path="/admin/*" element={<AdminRoutes />} />
-      <Route path="/test/*" element={<PageTest />} />
     </Routes>
   );
 };
diff --git a/src/routes/private-route.tsx b/src/routes/private-route.tsx
index f2d49d8..445a8c1 100644
--- a/src/routes/private-route.tsx
+++ b/src/routes/private-route.tsx
@@ -7,7 +7,7 @@ export interface PrivateRouteProps {
 }
 
 const PrivateRoute = ({ authenticated, component }: PrivateRouteProps) => {
-  return authenticated ? component : <Navigate to="/login"></Navigate>;
+  return authenticated ? component : <Navigate to="/admin/login"></Navigate>;
 };
 
 export default PrivateRoute;
diff --git a/src/ui/pages/page-test.tsx b/src/ui/pages/page-test.tsx
deleted file mode 100644
index 58a9c97..0000000
--- a/src/ui/pages/page-test.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import AdminLayout from '../components/molecule/admin/Layout/admin-layout';
-
-const PageTest: React.FC = () => {
-  return (
-    <div>
-      <AdminLayout />
-    </div>
-  );
-};
-
-export default PageTest;

From ca5b1d78686036be08f4605f00025524ced00172 Mon Sep 17 00:00:00 2001
From: Choi JunHo <duekzim@gmail.com>
Date: Mon, 5 Aug 2024 10:57:57 +0900
Subject: [PATCH 02/23] Refactor: tailwind CSS refactor

---
 src/ui/pages/admin/login.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/pages/admin/login.tsx b/src/ui/pages/admin/login.tsx
index 83c868a..f3059d4 100644
--- a/src/ui/pages/admin/login.tsx
+++ b/src/ui/pages/admin/login.tsx
@@ -44,7 +44,7 @@ export default function Login() {
                   required
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
-                  className="block w-full rounded-md border-0 py-1.5 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-lg sm:leading-6"
+                  className="block w-full rounded-md border-0 px-2 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-lg sm:leading-6"
                 />
               </div>
             </div>
@@ -64,7 +64,7 @@ export default function Login() {
                   required
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
-                  className="block w-full rounded-md border-0 py-1.5 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-lg sm:leading-6"
+                  className="block w-full rounded-md border-0 px-2 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-lg sm:leading-6"
                 />
               </div>
             </div>

From 3919640d0573ed06ce82785e74db6939dbb9f44e Mon Sep 17 00:00:00 2001
From: Choi JunHo <duekzim@gmail.com>
Date: Mon, 5 Aug 2024 10:59:27 +0900
Subject: [PATCH 03/23] feat: api admin-retrieve-file logic

---
 src/api/admin-retrieve-file.ts | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 src/api/admin-retrieve-file.ts

diff --git a/src/api/admin-retrieve-file.ts b/src/api/admin-retrieve-file.ts
new file mode 100644
index 0000000..a1b377c
--- /dev/null
+++ b/src/api/admin-retrieve-file.ts
@@ -0,0 +1,20 @@
+import { llm_axiosInstance } from '../utils/axios';
+
+interface AdminRetrieveFileProps {
+  type?: string;
+  category?: string;
+}
+
+export async function adminRetrieveFile({ type, category }: AdminRetrieveFileProps) {
+  try {
+    const response = await llm_axiosInstance.get('/retrieve_documents_by_type_and_category', {
+      params: {
+        type,
+        category,
+      },
+    });
+    return response.data;
+  } catch (error: any) {
+    throw new Error(`Upload failed: ${error.message}`);
+  }
+}

From ff432d18813fa68fafe7d999acc0758a5a5ac39b Mon Sep 17 00:00:00 2001
From: Choi JunHo <duekzim@gmail.com>
Date: Mon, 5 Aug 2024 10:59:46 +0900
Subject: [PATCH 04/23] refactor: add list current file list

---
 src/ui/pages/admin/file-list.tsx | 52 ++++++++++++++++++++++++++++++--
 1 file changed, 50 insertions(+), 2 deletions(-)

diff --git a/src/ui/pages/admin/file-list.tsx b/src/ui/pages/admin/file-list.tsx
index 570b2b0..6bef3b6 100644
--- a/src/ui/pages/admin/file-list.tsx
+++ b/src/ui/pages/admin/file-list.tsx
@@ -1,14 +1,22 @@
-import { Button, Divider, Select } from 'antd';
-import React, { useState } from 'react';
+import { Button, Divider, List, Select } from 'antd';
+import React, { useEffect, useState } from 'react';
 import { UploadFile } from 'antd/es/upload/interface';
 import Uploader from '../../components/admin/Uploader';
 import { useHtmlFileSubmit } from '../../../hooks/use-html-file-submit.hooks';
+import { adminRetrieveFile } from '../../../api/admin-retrieve-file';
+
+interface DataListType {
+  title: string;
+  createdAt: string;
+}
 
 const FileList: React.FC = () => {
   const [category, setCategory] = useState('모집요강');
   const [type, setType] = useState('수시');
   const [uploading, setUploading] = useState(false);
   const [fileList, setFileList] = useState<UploadFile<File>[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [dataList, setDataList] = useState<DataListType[]>([]);
 
   const handleTypeChange = (value: string) => {
     setType(value);
@@ -33,6 +41,33 @@ const FileList: React.FC = () => {
     setUploading(false);
   };
 
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true);
+      try {
+        const response = await adminRetrieveFile({ type, category });
+        const formattedData = response.documents.reduce((acc: DataListType[], item: any) => {
+          const exists = acc.find((data) => data.title === item.title);
+          if (!exists) {
+            acc.push({
+              title: item.title,
+              createdAt: item.created_at,
+            });
+          }
+          return acc;
+        }, []);
+        console.log(dataList);
+        setDataList(formattedData); // Overwrite the existing dataList instead of appending
+      } catch (error) {
+        console.error('다운로드 에러', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [type, category]);
+
   return (
     <div className="w-full">
       <Divider orientation="left">챗봇 관리 파일 리스트</Divider>
@@ -78,6 +113,19 @@ const FileList: React.FC = () => {
           {uploading ? 'Uploading' : 'Start Upload'}
         </Button>
       </div>
+
+      <Divider orientation="left">업로드된 파일 확인하기</Divider>
+      <div className="mx-8">
+        <List
+          itemLayout="horizontal"
+          dataSource={dataList}
+          renderItem={(item, index) => (
+            <List.Item key={index}>
+              <List.Item.Meta title={item.title} description={item.createdAt} />
+            </List.Item>
+          )}
+        />
+      </div>
     </div>
   );
 };

From e6aca88b739f70fc927f5079e8fb0e67275e5180 Mon Sep 17 00:00:00 2001
From: Choi JunHo <duekzim@gmail.com>
Date: Mon, 5 Aug 2024 11:00:06 +0900
Subject: [PATCH 05/23] feat: adminQuestionCheck api logic

---
 src/api/admin-question-check.ts | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 src/api/admin-question-check.ts

diff --git a/src/api/admin-question-check.ts b/src/api/admin-question-check.ts
new file mode 100644
index 0000000..a25185b
--- /dev/null
+++ b/src/api/admin-question-check.ts
@@ -0,0 +1,20 @@
+import { server_axiosInstance } from '../utils/axios';
+
+interface AdminQuestionCheckProps {
+  type: string;
+  category?: string;
+}
+
+export async function adminQuestionCheck({ type, category }: AdminQuestionCheckProps) {
+  try {
+    const response = await server_axiosInstance.get('/api/questions', {
+      params: {
+        type,
+        category,
+      },
+    });
+    return response.data;
+  } catch (error: any) {
+    throw new Error(`Upload failed: ${error.message}`);
+  }
+}

From 061f79fed9a93d44c793080af32d69409cba0756 Mon Sep 17 00:00:00 2001
From: Choi JunHo <duekzim@gmail.com>
Date: Mon, 5 Aug 2024 11:00:39 +0900
Subject: [PATCH 06/23] Feat: table question check page

---
 src/ui/pages/admin/question-check.tsx | 103 ++++++++++++++++++++++++++
 1 file changed, 103 insertions(+)
 create mode 100644 src/ui/pages/admin/question-check.tsx

diff --git a/src/ui/pages/admin/question-check.tsx b/src/ui/pages/admin/question-check.tsx
new file mode 100644
index 0000000..96bd9d0
--- /dev/null
+++ b/src/ui/pages/admin/question-check.tsx
@@ -0,0 +1,103 @@
+import { Divider, Select, Table, TableProps } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { adminQuestionCheck } from '../../../api/admin-question-check';
+
+interface DataType {
+  questionContent: string;
+  viewCount: string;
+  isChecked: boolean;
+}
+
+const columns: TableProps<DataType>['columns'] = [
+  {
+    title: '질문내용',
+    dataIndex: 'questionContent',
+    key: 'question_content',
+  },
+  {
+    title: '질문횟수',
+    dataIndex: 'viewCount',
+    key: 'viewCount',
+  },
+  {
+    title: '질문확인여부',
+    dataIndex: 'isChecked',
+    key: 'isChecked',
+    render: (isChecked) => (isChecked ? '확인됨' : '미확인'),
+  },
+];
+
+const QuestionCheck = () => {
+  const [type, setType] = useState('SUSI');
+  const [category, setCategory] = useState('');
+  const [data, setData] = useState<DataType[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const handleTypeChange = (value: string) => {
+    setType(value);
+  };
+
+  const handleCategoryChange = (value: string) => {
+    setCategory(value);
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true);
+      try {
+        const response = await adminQuestionCheck({ type, category });
+        const formattedData = response.map((item: any) => ({
+          questionContent: item.content,
+          viewCount: item.viewCount.toString(),
+          isChecked: item.isChecked,
+        }));
+        setData(formattedData);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [type, category]);
+
+  return (
+    <div className="w-full">
+      <Divider orientation="left">챗봇 질문 내용-답변 확인</Divider>
+      <div className="mx-8">
+        전형선택
+        <Select
+          defaultValue="SUSI"
+          className="ml-10 w-40"
+          onChange={handleTypeChange}
+          options={[
+            { value: 'SUSI', label: '수시' },
+            { value: 'JEONGSI', label: '정시' },
+            { value: 'PYEONIP', label: '편입학' },
+          ]}
+        />
+      </div>
+      <div className="mx-8">
+        카테고리 선택
+        <Select
+          defaultValue="전체보기"
+          className="ml-3 w-40"
+          onChange={handleCategoryChange}
+          options={[
+            { value: '', label: '전체보기' },
+            { value: 'ADMISSION_GUIDELINE', label: '모집요강' },
+            { value: 'PASSING_RESULT', label: '입시결과' },
+            { value: 'PAST_QUESTIONS', label: '기출문제' },
+            { value: 'INTERVIEW_PRACTICAL_TEST', label: '면접/실기' },
+          ]}
+        />
+      </div>
+      <div className="mx-8 my-3">
+        <Table columns={columns} dataSource={data} loading={loading} rowKey="questionContent" />
+      </div>
+    </div>
+  );
+};
+
+export default QuestionCheck;

From b8c1354f204b3c08050cd3b62b1c660963f30542 Mon Sep 17 00:00:00 2001
From: Choi JunHo <duekzim@gmail.com>
Date: Tue, 6 Aug 2024 11:37:28 +0900
Subject: [PATCH 07/23] Chore: Feat react-cookie

---
 package-lock.json | 50 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |  1 +
 2 files changed, 51 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 33c1f06..7076b63 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "prettier": "^3.3.2",
         "prettier-plugin-tailwindcss": "^0.6.5",
         "react": "^18.3.1",
+        "react-cookie": "^7.2.0",
         "react-dom": "^18.3.1",
         "react-icons": "^5.2.1",
         "react-markdown": "^9.0.1",
@@ -11333,6 +11334,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
+    },
     "node_modules/@types/cross-spawn": {
       "version": "6.0.6",
       "resolved": "https://registry.npmjs.org/@types/cross-spawn/-/cross-spawn-6.0.6.tgz",
@@ -11455,6 +11461,15 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
+      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -18766,6 +18781,19 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -27010,6 +27038,19 @@
         "react": "^16.3.0 || ^17.0.1 || ^18.0.0"
       }
     },
+    "node_modules/react-cookie": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-7.2.0.tgz",
+      "integrity": "sha512-mqhPERUyfOljq5yJ4woDFI33bjEtigsl8JDJdPPeNhr0eSVZmBc/2Vdf8mFxOUktQxhxTR1T+uF0/FRTZyBEgw==",
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.3.5",
+        "hoist-non-react-statics": "^3.3.2",
+        "universal-cookie": "^7.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -30356,6 +30397,15 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/universal-cookie": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-7.2.0.tgz",
+      "integrity": "sha512-PvcyflJAYACJKr28HABxkGemML5vafHmiL4ICe3e+BEKXRMt0GaFLZhAwgv637kFFnnfiSJ8e6jknrKkMrU+PQ==",
+      "dependencies": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^0.6.0"
+      }
+    },
     "node_modules/universalify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
diff --git a/package.json b/package.json
index 6176ae1..cc8c13b 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "react": "^18.3.1",
+    "react-cookie": "^7.2.0",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-markdown": "^9.0.1",

From eb76e931e4056cd571c7f62cdc2503e45ac3c559 Mon Sep 17 00:00:00 2001
From: Choi JunHo <duekzim@gmail.com>
Date: Tue, 6 Aug 2024 11:37:41 +0900
Subject: [PATCH 08/23] Refactor: set cookie provider

---
 src/index.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/index.tsx b/src/index.tsx
index 1a58c8e..234a8af 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,9 +3,14 @@ import App from './App';
 import ReactDOM from 'react-dom/client';
 import reportWebVitals from './reportWebVitals';
 import './index.css';
+import { CookiesProvider } from 'react-cookie';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-root.render(<App />);
+root.render(
+  <CookiesProvider>
+    <App />
+  </CookiesProvider>,
+);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

From fa58b68fac5bbb529431e7949595ff6206d395b5 Mon Sep 17 00:00:00 2001
From: Choi JunHo <duekzim@gmail.com>
Date: Tue, 6 Aug 2024 11:38:07 +0900
Subject: [PATCH 09/23] Feat: cookies util setting

---
 src/utils/cookies.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 src/utils/cookies.ts

diff --git a/src/utils/cookies.ts b/src/utils/cookies.ts
new file mode 100644
index 0000000..9603afa
--- /dev/null
+++ b/src/utils/cookies.ts
@@ -0,0 +1,15 @@
+import { Cookies } from 'react-cookie';
+
+const cookies = new Cookies();
+
+export const setCookie = (name: string, value: string, options: any) => {
+  return cookies.set(name, value, { ...options });
+};
+
+export const getCookie = (name: string) => {
+  return cookies.get(name);
+};
+
+export const removeCookie = (name: string) => {
+  return cookies.remove(name);
+};

From 83a5f5eaecc28844c4bde72cf530173513c5976e Mon Sep 17 00:00:00 2001
From: Choi JunHo <duekzim@gmail.com>
Date: Tue, 6 Aug 2024 11:38:25 +0900
Subject: [PATCH 10/23] Refactor: axios util withCredentails true

---
 src/utils/axios.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/axios.ts b/src/utils/axios.ts
index 5d78409..813a9e6 100644
--- a/src/utils/axios.ts
+++ b/src/utils/axios.ts
@@ -9,5 +9,5 @@ export const llm_axiosInstance = axios.create({
 export const server_axiosInstance = axios.create({
   baseURL: process.env.REACT_APP_SPRING_SERVER_API_ADDRESS,
   timeout: 20000,
-  withCredentials: false,
+  withCredentials: true,
 });

From ff8b0e4dc8377ad9f0a20d01bd6936cd9b3ad77f Mon Sep 17 00:00:00 2001
From: Choi JunHo <duekzim@gmail.com>
Date: Tue, 6 Aug 2024 13:14:48 +0900
Subject: [PATCH 11/23] Refactor: admin-login api not use swr and set Cookie

---
 src/api/admin-login.ts           | 45 +++++++++++++-------------------
 src/ui/pages/admin/file-list.tsx |  2 +-
 2 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/src/api/admin-login.ts b/src/api/admin-login.ts
index 64b34f1..3c1a087 100644
--- a/src/api/admin-login.ts
+++ b/src/api/admin-login.ts
@@ -1,34 +1,25 @@
-import axios from 'axios';
-import useSWR, { mutate } from 'swr';
+import { server_axiosInstance } from '../utils/axios';
+import { getCookie, removeCookie, setCookie } from '../utils/cookies';
 
-interface LoginResponse {
-  token: string;
-  user: {
-    email: string;
+export async function AdminLogin(email: string, password: string) {
+  const data = {
+    email,
+    password,
   };
-}
 
-const fetcher = (url: string) => axios.get(url).then((res) => res.data);
+  try {
+    if (getCookie('accessToken')) {
+      removeCookie('accessToken');
+      removeCookie('refreshToken');
+    }
 
-export async function login(email: string, password: string): Promise<LoginResponse> {
-  const response = await axios.post<LoginResponse>('경로변경넣어야됌', { email, password }, { withCredentials: true });
-  return response.data;
-}
+    const response = await server_axiosInstance.post('/api/auth/sign-in', data);
+    const accessToken: string = response.headers['jwt-token'];
+    const refreshToken: string = response.headers['jwt-token-refresh'];
 
-export function useUser() {
-  const { data, error } = useSWR<LoginResponse>('경로넣어야행', fetcher);
-  return {
-    user: data,
-    isLoading: !error && !data,
-    isError: error,
-  };
-}
-
-export async function handleLogin(email: string, password: string): Promise<void> {
-  try {
-    const userData = await login(email, password);
-    mutate('경로헤헿콩', userData, false);
-  } catch (err: any) {
-    throw new Error(err.message);
+    setCookie('accessToken', accessToken.split(' ')[1], { path: '/admin', secure: true, sameSite: 'lax' });
+    setCookie('refreshToken', refreshToken.split(' ')[1], { path: '/admin', secure: true, sameSite: 'lax' });
+  } catch (error: any) {
+    throw new Error('Login Failed - Server network failed');
   }
 }
diff --git a/src/ui/pages/admin/file-list.tsx b/src/ui/pages/admin/file-list.tsx
index 6bef3b6..d7891aa 100644
--- a/src/ui/pages/admin/file-list.tsx
+++ b/src/ui/pages/admin/file-list.tsx
@@ -57,7 +57,7 @@ const FileList: React.FC = () => {
           return acc;
         }, []);
         console.log(dataList);
-        setDataList(formattedData); // Overwrite the existing dataList instead of appending
+        setDataList(formattedData);
       } catch (error) {
         console.error('다운로드 에러', error);
       } finally {

From d26b38ff5111a08acbb1790630a07fa3b5602594 Mon Sep 17 00:00:00 2001
From: Choi JunHo <duekzim@gmail.com>
Date: Tue, 6 Aug 2024 13:15:27 +0900
Subject: [PATCH 12/23] Refactor: token postion set refactor sessionStorage to
 cookie

---
 src/routes/admin-routes.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/admin-routes.tsx b/src/routes/admin-routes.tsx
index e4ce230..537dccf 100644
--- a/src/routes/admin-routes.tsx
+++ b/src/routes/admin-routes.tsx
@@ -5,9 +5,9 @@ import FileList from '../ui/pages/admin/file-list';
 import Login from '../ui/pages/admin/login';
 import QuestionCheck from '../ui/pages/admin/question-check';
 import AdminLayout from '../ui/components/admin/Layout/admin-layout';
-
+import { getCookie } from '../utils/cookies';
 const AdminRoutes: React.FC = () => {
-  const token = sessionStorage.getItem('Authorization');
+  const token = getCookie('accessToken');
   return (
     <Routes>
       <Route path="/login" element={<Login />} />

From 52df81d90440db27d7f90696fff68e13cd6f9f90 Mon Sep 17 00:00:00 2001
From: Choi JunHo <duekzim@gmail.com>
Date: Tue, 6 Aug 2024 13:16:00 +0900
Subject: [PATCH 13/23] Refactor: admin login tsx refactor

---
 src/ui/pages/admin/login.tsx | 126 ++++++++++++++++++-----------------
 1 file changed, 65 insertions(+), 61 deletions(-)

diff --git a/src/ui/pages/admin/login.tsx b/src/ui/pages/admin/login.tsx
index f3059d4..a8583d4 100644
--- a/src/ui/pages/admin/login.tsx
+++ b/src/ui/pages/admin/login.tsx
@@ -1,89 +1,93 @@
 import React, { useState } from 'react';
-import { useUser, handleLogin } from '../../../api/admin-login';
+import { AdminLogin } from '../../../api/admin-login';
 import { Spin } from 'antd';
 import { LoadingOutlined } from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
 
 export default function Login() {
   const [email, setEmail] = useState<string>('');
   const [password, setPassword] = useState<string>('');
   const [error, setError] = useState<string>('');
-  const { user, isLoading, isError } = useUser();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const navigate = useNavigate();
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError('');
+    setIsLoading(true);
 
     try {
-      await handleLogin(email, password);
+      await AdminLogin(email, password);
     } catch (err: any) {
       setError(err.message);
+    } finally {
+      setIsLoading(false);
+      navigate('/admin/question/list');
     }
   };
 
   return (
-    <>
-      <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
-        <div className="sm:mx-auto sm:w-full sm:max-w-sm">
-          <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
-            Sign in to your account
-          </h2>
-        </div>
+    <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
+      <div className="sm:mx-auto sm:w-full sm:max-w-sm">
+        <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
+          Sign in to your account
+        </h2>
+      </div>
 
-        <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
-          <form className="space-y-6" onSubmit={handleSubmit}>
-            <div>
-              <label htmlFor="email" className="block text-lg font-medium leading-6 text-gray-900">
-                Email address
-              </label>
-              <div className="mt-2">
-                <input
-                  id="email"
-                  name="email"
-                  type="email"
-                  autoComplete="email"
-                  required
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  className="block w-full rounded-md border-0 px-2 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-lg sm:leading-6"
-                />
-              </div>
+      <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+        <form className="space-y-6" onSubmit={handleSubmit}>
+          <div>
+            <label htmlFor="email" className="block text-lg font-medium leading-6 text-gray-900">
+              Email address
+            </label>
+            <div className="mt-2">
+              <input
+                id="email"
+                name="email"
+                type="email"
+                autoComplete="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="block w-full rounded-md border-0 px-2 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-lg sm:leading-6"
+              />
             </div>
+          </div>
 
-            <div>
-              <div className="flex items-center justify-between">
-                <label htmlFor="password" className="block text-lg font-medium leading-6 text-gray-900">
-                  Password
-                </label>
-              </div>
-              <div className="mt-2">
-                <input
-                  id="password"
-                  name="password"
-                  type="password"
-                  autoComplete="current-password"
-                  required
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  className="block w-full rounded-md border-0 px-2 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-lg sm:leading-6"
-                />
-              </div>
+          <div>
+            <div className="flex items-center justify-between">
+              <label htmlFor="password" className="block text-lg font-medium leading-6 text-gray-900">
+                Password
+              </label>
             </div>
-            {isError ? '' : <div>다시 로그인해주세요</div>}
-            <div>
-              <button
-                type="submit"
-                className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-lg font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-              >
-                {isLoading ? (
-                  'Sign in'
-                ) : (
-                  <Spin indicator={<LoadingOutlined style={{ color: 'white' }} spin />} size="large" />
-                )}
-              </button>
+            <div className="mt-2">
+              <input
+                id="password"
+                name="password"
+                type="password"
+                autoComplete="current-password"
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="block w-full rounded-md border-0 px-2 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-lg sm:leading-6"
+              />
             </div>
-          </form>
-        </div>
+          </div>
+          {error && <div className="text-red-500">{error}</div>}
+          <div>
+            <button
+              type="submit"
+              className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-lg font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            >
+              {isLoading ? (
+                <Spin indicator={<LoadingOutlined style={{ color: 'white' }} spin />} size="large" />
+              ) : (
+                'Sign in'
+              )}
+            </button>
+          </div>
+        </form>
       </div>
-    </>
+    </div>
   );
 }

From e7ae47d0d57e8d3f18b3deb78ae9dec880f23bf3 Mon Sep 17 00:00:00 2001
From: Choi JunHo <duekzim@gmail.com>
Date: Tue, 6 Aug 2024 13:16:30 +0900
Subject: [PATCH 14/23] Feat: edit modal ant.design

---
 src/ui/components/admin/modal/edit-modal.tsx | 108 +++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 src/ui/components/admin/modal/edit-modal.tsx

diff --git a/src/ui/components/admin/modal/edit-modal.tsx b/src/ui/components/admin/modal/edit-modal.tsx
new file mode 100644
index 0000000..37c83c9
--- /dev/null
+++ b/src/ui/components/admin/modal/edit-modal.tsx
@@ -0,0 +1,108 @@
+import { Button, Modal } from 'antd';
+import TextArea from 'antd/es/input/TextArea';
+import React, { useState } from 'react';
+import { AdminEditAnswer } from '../../../../api/admin-edit-answer';
+import { AdminCheckQuestionAnswer } from '../../../../api/admin-check-question-answer';
+
+interface CustomModalProps {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  modalTitle: string;
+  modalContent: string;
+  modalContentId: number;
+  questionId: number;
+  isChecked: boolean;
+}
+
+const EditModal = ({
+  open,
+  setOpen,
+  modalTitle,
+  modalContent,
+  modalContentId,
+  questionId,
+  isChecked,
+}: CustomModalProps) => {
+  const [editStatus, setEditStatus] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [content, setContent] = useState(modalContent);
+
+  const executeWithLoading = async (action: () => Promise<void>) => {
+    setLoading(true);
+    try {
+      await action();
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleEditSubmit = async () => {
+    try {
+      await executeWithLoading(async () => {
+        await AdminEditAnswer(modalContentId, modalContent);
+        await AdminCheckQuestionAnswer({ questionId, check: true });
+        console.log('편집 및 확인 완료');
+      });
+    } catch (err) {
+      setEditStatus(false);
+      console.error(err);
+    }
+  };
+
+  const handleCheckToggle = async () => {
+    await executeWithLoading(async () => {
+      await AdminCheckQuestionAnswer({ questionId, check: !isChecked });
+      console.log('검토 상태 변경 완료');
+    });
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const enableEditMode = () => {
+    setEditStatus(true);
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setContent(e.target.value);
+  };
+
+  return (
+    <Modal
+      open={open}
+      title={modalTitle}
+      onCancel={handleClose}
+      footer={[
+        <Button key="close" onClick={handleClose}>
+          닫기
+        </Button>,
+        !isChecked ? (
+          <Button key="checked" onClick={handleCheckToggle} loading={loading} type="dashed">
+            질문-답변 확인 상태 변경
+          </Button>
+        ) : (
+          <Button key="checked" onClick={handleCheckToggle} loading={loading} type="dashed" danger>
+            질문-답변 미확인 상태 변경
+          </Button>
+        ),
+
+        editStatus ? (
+          <Button key="submit" onClick={handleEditSubmit} loading={loading} type="primary">
+            편집완료
+          </Button>
+        ) : (
+          <Button key="edit" onClick={enableEditMode} type="primary">
+            편집하기
+          </Button>
+        ),
+      ]}
+    >
+      {editStatus ? <TextArea rows={25} value={content} onChange={handleChange} /> : <div>{modalContent}</div>}
+    </Modal>
+  );
+};
+
+export default EditModal;

From 987ee8bdf3ecca4a7881739a78712e6a26c509c2 Mon Sep 17 00:00:00 2001
From: Choi JunHo <duekzim@gmail.com>
Date: Tue, 6 Aug 2024 13:16:40 +0900
Subject: [PATCH 15/23] Refactor: add edit modal

---
 src/ui/pages/admin/question-check.tsx | 53 +++++++++++++++++++++++----
 1 file changed, 46 insertions(+), 7 deletions(-)

diff --git a/src/ui/pages/admin/question-check.tsx b/src/ui/pages/admin/question-check.tsx
index 96bd9d0..b2176ef 100644
--- a/src/ui/pages/admin/question-check.tsx
+++ b/src/ui/pages/admin/question-check.tsx
@@ -1,18 +1,24 @@
-import { Divider, Select, Table, TableProps } from 'antd';
+import { Divider, Select, Table, TableProps, Tag } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { adminQuestionCheck } from '../../../api/admin-question-check';
+import EditModal from '../../components/admin/modal/edit-modal';
 
 interface DataType {
-  questionContent: string;
+  id: number;
+  content: string;
   viewCount: string;
   isChecked: boolean;
+  answer: {
+    id: number;
+    content: string;
+  };
 }
 
 const columns: TableProps<DataType>['columns'] = [
   {
     title: '질문내용',
-    dataIndex: 'questionContent',
-    key: 'question_content',
+    dataIndex: 'content',
+    key: 'content',
   },
   {
     title: '질문횟수',
@@ -23,7 +29,7 @@ const columns: TableProps<DataType>['columns'] = [
     title: '질문확인여부',
     dataIndex: 'isChecked',
     key: 'isChecked',
-    render: (isChecked) => (isChecked ? '확인됨' : '미확인'),
+    render: (isChecked) => (isChecked ? <Tag color="green">확인</Tag> : <Tag color="red">미확인</Tag>),
   },
 ];
 
@@ -33,6 +39,9 @@ const QuestionCheck = () => {
   const [data, setData] = useState<DataType[]>([]);
   const [loading, setLoading] = useState(false);
 
+  const [modalOpen, setModalOpen] = useState(false);
+  const [selectedQuestion, setSelectedQuestion] = useState<DataType | null>(null);
+
   const handleTypeChange = (value: string) => {
     setType(value);
   };
@@ -41,15 +50,25 @@ const QuestionCheck = () => {
     setCategory(value);
   };
 
+  const handleRowClick = (record: DataType) => {
+    setSelectedQuestion(record);
+    setModalOpen(true);
+  };
+
   useEffect(() => {
     const fetchData = async () => {
       setLoading(true);
       try {
         const response = await adminQuestionCheck({ type, category });
         const formattedData = response.map((item: any) => ({
-          questionContent: item.content,
+          id: item.id,
+          content: item.content,
           viewCount: item.viewCount.toString(),
           isChecked: item.isChecked,
+          answer: {
+            id: item.answer.id,
+            content: item.answer.content,
+          },
         }));
         setData(formattedData);
       } catch (error) {
@@ -94,8 +113,28 @@ const QuestionCheck = () => {
         />
       </div>
       <div className="mx-8 my-3">
-        <Table columns={columns} dataSource={data} loading={loading} rowKey="questionContent" />
+        <Table
+          columns={columns}
+          dataSource={data}
+          loading={loading}
+          rowKey="id"
+          onRow={(record) => ({
+            onClick: () => handleRowClick(record),
+          })}
+        />
       </div>
+
+      {selectedQuestion && (
+        <EditModal
+          open={modalOpen}
+          setOpen={setModalOpen}
+          modalTitle={selectedQuestion.content}
+          modalContent={selectedQuestion.answer.content}
+          modalContentId={selectedQuestion.answer.id}
+          questionId={selectedQuestion.id}
+          isChecked={selectedQuestion.isChecked}
+        />
+      )}
     </div>
   );
 };

From 7de60feacb678ae0d315476016d7fbe2c79ff679 Mon Sep 17 00:00:00 2001
From: Choi JunHo <duekzim@gmail.com>
Date: Tue, 6 Aug 2024 13:16:58 +0900
Subject: [PATCH 16/23] Feat: admin api with bearer token

---
 src/api/admin-check-question-answer.ts | 23 +++++++++++++++++++++++
 src/api/admin-edit-answer.ts           | 21 +++++++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 src/api/admin-check-question-answer.ts
 create mode 100644 src/api/admin-edit-answer.ts

diff --git a/src/api/admin-check-question-answer.ts b/src/api/admin-check-question-answer.ts
new file mode 100644
index 0000000..8afc4b3
--- /dev/null
+++ b/src/api/admin-check-question-answer.ts
@@ -0,0 +1,23 @@
+import { server_axiosInstance } from '../utils/axios';
+import { getCookie } from '../utils/cookies';
+
+interface AdminCheckQuestionAnswerProps {
+  questionId: number;
+  check: boolean;
+}
+export async function AdminCheckQuestionAnswer({ questionId, check }: AdminCheckQuestionAnswerProps) {
+  const data = {
+    questionId,
+    check,
+  };
+  try {
+    const response = await server_axiosInstance.post('/api/admin/questions/check', JSON.stringify(data), {
+      headers: {
+        Authorization: `Bearer ${getCookie('accessToken')}`,
+      },
+    });
+    return response.data;
+  } catch (error: any) {
+    throw new Error('checked failed');
+  }
+}
diff --git a/src/api/admin-edit-answer.ts b/src/api/admin-edit-answer.ts
new file mode 100644
index 0000000..cb302b8
--- /dev/null
+++ b/src/api/admin-edit-answer.ts
@@ -0,0 +1,21 @@
+import { server_axiosInstance } from '../utils/axios';
+import { getCookie } from '../utils/cookies';
+
+export async function AdminEditAnswer(id: number, content: string): Promise<any> {
+  const data = {
+    id,
+    content,
+  };
+
+  try {
+    const response = await server_axiosInstance.post('/api/admin/answers', JSON.stringify(data), {
+      headers: {
+        Authorization: `Bearer ${getCookie('accessToken')}`,
+      },
+    });
+    console.log(response.data);
+    return response.data;
+  } catch (error: any) {
+    throw new Error('Post Failed');
+  }
+}

From e7fc052d09bd593c1dd3650159e17efbf314c13f Mon Sep 17 00:00:00 2001
From: Choi JunHo <duekzim@gmail.com>
Date: Tue, 6 Aug 2024 13:57:06 +0900
Subject: [PATCH 17/23] Refactor: Admin logout api add

---
 src/api/admin-login.ts |  5 +++++
 src/utils/cookies.ts   | 16 +++++++++++++---
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/api/admin-login.ts b/src/api/admin-login.ts
index 3c1a087..3d574fe 100644
--- a/src/api/admin-login.ts
+++ b/src/api/admin-login.ts
@@ -23,3 +23,8 @@ export async function AdminLogin(email: string, password: string) {
     throw new Error('Login Failed - Server network failed');
   }
 }
+
+export function AdminLogout() {
+  removeCookie('accessToken', { path: '/admin', secure: true, sameSite: 'lax' });
+  removeCookie('refreshToken', { path: '/admin', secure: true, sameSite: 'lax' });
+}
diff --git a/src/utils/cookies.ts b/src/utils/cookies.ts
index 9603afa..68c2558 100644
--- a/src/utils/cookies.ts
+++ b/src/utils/cookies.ts
@@ -2,7 +2,17 @@ import { Cookies } from 'react-cookie';
 
 const cookies = new Cookies();
 
-export const setCookie = (name: string, value: string, options: any) => {
+interface CookieSetOptions {
+  path?: string;
+  expires?: Date;
+  maxAge?: number;
+  domain?: string;
+  secure?: boolean;
+  httpOnly?: boolean;
+  sameSite?: 'strict' | 'lax' | 'none';
+}
+
+export const setCookie = (name: string, value: string, options: CookieSetOptions = {}) => {
   return cookies.set(name, value, { ...options });
 };
 
@@ -10,6 +20,6 @@ export const getCookie = (name: string) => {
   return cookies.get(name);
 };
 
-export const removeCookie = (name: string) => {
-  return cookies.remove(name);
+export const removeCookie = (name: string, options?: CookieSetOptions) => {
+  return cookies.remove(name, { ...options });
 };

From 7e8b590f409a58c797c07ade13b445e3dae32d97 Mon Sep 17 00:00:00 2001
From: Choi JunHo <duekzim@gmail.com>
Date: Tue, 6 Aug 2024 13:57:31 +0900
Subject: [PATCH 18/23] Refactor: add timeout function

---
 src/ui/pages/admin/login.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/ui/pages/admin/login.tsx b/src/ui/pages/admin/login.tsx
index a8583d4..275634f 100644
--- a/src/ui/pages/admin/login.tsx
+++ b/src/ui/pages/admin/login.tsx
@@ -21,8 +21,10 @@ export default function Login() {
     } catch (err: any) {
       setError(err.message);
     } finally {
-      setIsLoading(false);
-      navigate('/admin/question/list');
+      setTimeout(() => {
+        setIsLoading(false);
+        navigate('/admin/question/list');
+      }, 1000);
     }
   };
 

From cb153ec1379ff53b3ef77b192a9f41d23f39ac92 Mon Sep 17 00:00:00 2001
From: Choi JunHo <duekzim@gmail.com>
Date: Tue, 6 Aug 2024 13:57:47 +0900
Subject: [PATCH 19/23] Refactor: Add logout button

---
 src/ui/components/admin/Layout/admin-layout.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/ui/components/admin/Layout/admin-layout.tsx b/src/ui/components/admin/Layout/admin-layout.tsx
index 79dd66a..277d590 100644
--- a/src/ui/components/admin/Layout/admin-layout.tsx
+++ b/src/ui/components/admin/Layout/admin-layout.tsx
@@ -1,19 +1,27 @@
 import React, { useEffect, useState } from 'react';
-import { Breadcrumb, Layout, Menu } from 'antd';
-import { Outlet, useLocation } from 'react-router-dom';
+import { Breadcrumb, Button, Layout, Menu } from 'antd';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import SlideMenu from '../slide-menu/slide-menu';
 import { Header } from 'antd/es/layout/layout';
+import { AdminLogout } from '../../../../api/admin-login';
+import { removeCookie } from '../../../../utils/cookies';
 
 const { Sider, Content, Footer } = Layout;
 
 const AdminLayout: React.FC = () => {
   const { pathname } = useLocation();
+  const navigate = useNavigate();
   useEffect(() => {
     pathname.split('/').map((a, i) => {
       console.log(pathname.split('/')[i]);
     });
   });
 
+  const handleLogout = () => {
+    AdminLogout();
+    navigate('/admin/login');
+  };
+
   const breadcrumpItem1 = pathname.split('/')[1];
   const breadcrumpItem2 = pathname.split('/')[2];
 
@@ -24,8 +32,11 @@ const AdminLayout: React.FC = () => {
         <SlideMenu />
       </Sider>
       <Layout className="site-layout">
-        <Header className="flex items-center bg-[#DFF4FF]">
+        <Header className="flex items-center justify-between bg-white">
           <Breadcrumb separator=">" items={breadcrumpItems} className="pl-2 text-lg text-black" />
+          <Button type="primary" onClick={handleLogout}>
+            로그아웃
+          </Button>
         </Header>
         <Content style={{ margin: '16px 0' }}>
           <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>

From dfad7223e52401355aad82235b99e9bbe7c3ee74 Mon Sep 17 00:00:00 2001
From: Choi JunHo <duekzim@gmail.com>
Date: Tue, 6 Aug 2024 23:01:12 +0900
Subject: [PATCH 20/23] Refactor: admin api header set

---
 src/api/admin-check-question-answer.ts | 1 +
 src/api/admin-edit-answer.ts           | 1 +
 src/api/admin-login.ts                 | 4 ++--
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/api/admin-check-question-answer.ts b/src/api/admin-check-question-answer.ts
index 8afc4b3..629c174 100644
--- a/src/api/admin-check-question-answer.ts
+++ b/src/api/admin-check-question-answer.ts
@@ -14,6 +14,7 @@ export async function AdminCheckQuestionAnswer({ questionId, check }: AdminCheck
     const response = await server_axiosInstance.post('/api/admin/questions/check', JSON.stringify(data), {
       headers: {
         Authorization: `Bearer ${getCookie('accessToken')}`,
+        'Content-Type': 'application/json',
       },
     });
     return response.data;
diff --git a/src/api/admin-edit-answer.ts b/src/api/admin-edit-answer.ts
index cb302b8..6d96676 100644
--- a/src/api/admin-edit-answer.ts
+++ b/src/api/admin-edit-answer.ts
@@ -11,6 +11,7 @@ export async function AdminEditAnswer(id: number, content: string): Promise<any>
     const response = await server_axiosInstance.post('/api/admin/answers', JSON.stringify(data), {
       headers: {
         Authorization: `Bearer ${getCookie('accessToken')}`,
+        'Content-Type': 'application/json',
       },
     });
     console.log(response.data);
diff --git a/src/api/admin-login.ts b/src/api/admin-login.ts
index 3d574fe..0c6c44c 100644
--- a/src/api/admin-login.ts
+++ b/src/api/admin-login.ts
@@ -14,8 +14,8 @@ export async function AdminLogin(email: string, password: string) {
     }
 
     const response = await server_axiosInstance.post('/api/auth/sign-in', data);
-    const accessToken: string = response.headers['jwt-token'];
-    const refreshToken: string = response.headers['jwt-token-refresh'];
+    const accessToken: string = response.headers['authorization'];
+    const refreshToken: string = response.headers['authorization-refresh'];
 
     setCookie('accessToken', accessToken.split(' ')[1], { path: '/admin', secure: true, sameSite: 'lax' });
     setCookie('refreshToken', refreshToken.split(' ')[1], { path: '/admin', secure: true, sameSite: 'lax' });

From 6ab68ef56f080e9806b98a4ad42c824da3e79f2e Mon Sep 17 00:00:00 2001
From: Choi JunHo <duekzim@gmail.com>
Date: Tue, 6 Aug 2024 23:02:16 +0900
Subject: [PATCH 21/23] Refactor: page navigate error refactor

---
 src/ui/pages/admin/login.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/ui/pages/admin/login.tsx b/src/ui/pages/admin/login.tsx
index 275634f..34c0b56 100644
--- a/src/ui/pages/admin/login.tsx
+++ b/src/ui/pages/admin/login.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { AdminLogin } from '../../../api/admin-login';
 import { Spin } from 'antd';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -9,6 +9,7 @@ export default function Login() {
   const [password, setPassword] = useState<string>('');
   const [error, setError] = useState<string>('');
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [loginSuccess, setLoginSuccess] = useState<boolean>(false);
   const navigate = useNavigate();
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -21,13 +22,18 @@ export default function Login() {
     } catch (err: any) {
       setError(err.message);
     } finally {
-      setTimeout(() => {
-        setIsLoading(false);
-        navigate('/admin/question/list');
-      }, 1000);
+      setIsLoading(false);
+      setLoginSuccess(true);
     }
   };
 
+  useEffect(() => {
+    if (loginSuccess === true) {
+      navigate('/admin/question/list');
+      window.location.reload();
+    }
+  }, [loginSuccess]);
+
   return (
     <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
       <div className="sm:mx-auto sm:w-full sm:max-w-sm">

From b2e18a59978262246e8deff83916223ac2bc044d Mon Sep 17 00:00:00 2001
From: Choi JunHo <duekzim@gmail.com>
Date: Tue, 6 Aug 2024 23:02:58 +0900
Subject: [PATCH 22/23] Refactor: edit-modal textarea content

---
 src/ui/components/admin/modal/edit-modal.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/ui/components/admin/modal/edit-modal.tsx b/src/ui/components/admin/modal/edit-modal.tsx
index 37c83c9..c4b27b7 100644
--- a/src/ui/components/admin/modal/edit-modal.tsx
+++ b/src/ui/components/admin/modal/edit-modal.tsx
@@ -41,9 +41,8 @@ const EditModal = ({
   const handleEditSubmit = async () => {
     try {
       await executeWithLoading(async () => {
-        await AdminEditAnswer(modalContentId, modalContent);
+        await AdminEditAnswer(modalContentId, content);
         await AdminCheckQuestionAnswer({ questionId, check: true });
-        console.log('편집 및 확인 완료');
       });
     } catch (err) {
       setEditStatus(false);
@@ -54,7 +53,6 @@ const EditModal = ({
   const handleCheckToggle = async () => {
     await executeWithLoading(async () => {
       await AdminCheckQuestionAnswer({ questionId, check: !isChecked });
-      console.log('검토 상태 변경 완료');
     });
   };
 

From e9cef4659d08907bfbe5c44f6015bfb0a774bdc6 Mon Sep 17 00:00:00 2001
From: Choi JunHo <duekzim@gmail.com>
Date: Tue, 6 Aug 2024 23:43:54 +0900
Subject: [PATCH 23/23] Fix: Conflict error

---
 src/routes/admin-routes.tsx  |   2 +-
 src/ui/pages/admin/login.tsx |   4 +-
 src/ui/pages/page-test.tsx   | 101 +++++++++++++++++++++++++++++++++++
 3 files changed, 104 insertions(+), 3 deletions(-)
 create mode 100644 src/ui/pages/page-test.tsx

diff --git a/src/routes/admin-routes.tsx b/src/routes/admin-routes.tsx
index 537dccf..e1cfca7 100644
--- a/src/routes/admin-routes.tsx
+++ b/src/routes/admin-routes.tsx
@@ -3,9 +3,9 @@ import { Route, Routes } from 'react-router-dom';
 import PrivateRoute from './private-route';
 import FileList from '../ui/pages/admin/file-list';
 import Login from '../ui/pages/admin/login';
-import QuestionCheck from '../ui/pages/admin/question-check';
 import AdminLayout from '../ui/components/admin/Layout/admin-layout';
 import { getCookie } from '../utils/cookies';
+import QuestionCheck from '../ui/pages/admin/question-check';
 const AdminRoutes: React.FC = () => {
   const token = getCookie('accessToken');
   return (
diff --git a/src/ui/pages/admin/login.tsx b/src/ui/pages/admin/login.tsx
index 34c0b56..f7648f3 100644
--- a/src/ui/pages/admin/login.tsx
+++ b/src/ui/pages/admin/login.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
-import { AdminLogin } from '../../../api/admin-login';
+import React, { useState, useEffect } from 'react';
 import { Spin } from 'antd';
 import { LoadingOutlined } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
+import { AdminLogin } from '../../../api/admin-login';
 
 export default function Login() {
   const [email, setEmail] = useState<string>('');
diff --git a/src/ui/pages/page-test.tsx b/src/ui/pages/page-test.tsx
new file mode 100644
index 0000000..a9a10ad
--- /dev/null
+++ b/src/ui/pages/page-test.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import ChatForm from '../components/molecule/user/chat-form/chat-form';
+import ChatCard from '../components/atom/chat-card/chat-card';
+
+const PageTest: React.FC = () => {
+  return (
+    <div className="flex flex-col items-center">
+      <ChatForm category="ADMISSION_GUIDELINE" type="SUSI" />
+      <div className="h-24" />
+      <div className="w-96 bg-background-default">
+        <ChatCard content="질문대답입니다" role="system" />
+        <ChatCard content="질문" role="user" />
+        <ChatCard content="버그걸리지마라 버그걸리지마라 버그걸리지마라   버그걸리지마라" role="system" />
+        <ChatCard
+          content="# 명지대학교 2025학년도 수시 모집요강
+
+## 1. 모집 전형
+수시 모집은 다음과 같은 전형으로 나뉩니다:
+- 학생부교과 전형
+- 학생부교과(교과면접, 만학도, 특성화고등졸재직자전형)
+- 실기/실적 전형
+- 실기/실적(특기자 - 문학/체육)
+
+## 2. 블라인드 면접
+명지대학교는 모든 면접 전형에서 블라인드 면접을 시행하여 공정성과 투명성을 높이고 있습니다. 블라인드 면접의 주요 내용은 다음과 같습니다:
+
+- **목적:** 지원자의 성명, 수험번호, 출신고교, 부모(친인척 포함)의 실명 및 직업 등 사회경제적 배경을 배제하고 지원자의 역량에 기반하여 평가.
+- **유의사항:**
+  - 지원자는 본인의 신상정보에 대한 언급을 금지하고, 특정 과목이나 비교과 프로그램에 대한 질문에도 유의해야 합니다.
+  - 면접 과정은 녹화 및 녹음될 수 있습니다.
+  
+## 3. 면접 절차
+면접 절차는 다음과 같습니다:
+- 사전 준비: 신분증과 복장 규정 확인.
+- 대기실 입실: 지정된 시간까지 대기실에 도착하여 가번호를 확인.
+- 면접 진행: 가번호 호명 시 고사실로 이동, 면접위원의 질의에 차분히 응답.
+- 면접 종료 후 대기실에 재입실하지 않고 바로 퇴실.
+
+## 4. 면접 기초 자료 문항 예시
+지원자가 답변해야 할 면접 기초 자료 문항은 다음과 같습니다:
+- 고교생활 중 가장 아쉬웠던 활동과 개선 방안.
+- 관심 있는 학문 분야와 그에 대한 노력.
+- 지원한 학과에서 성공하기 위한 핵심 능력.
+- 대학생활 계획 등.
+
+## 5. 등록 포기 안내
+등록 포기를 원할 경우, 지정된 기간 내에 입학처 홈페이지를 통해 신청해야 하며, 등록 포기 후에는 이를 번복할 수 없습니다.
+
+## 6. 추가 정보
+- 더 자세한 내용은 명지대학교 입학처 홈페이지에서 확인할 수 있습니다. 
+
+이러한 내용을 바탕으로 수시 모집에 준비하면 도움이 될 것입니다. 각 전형 및 면접 과정을 철저히 준비하시길 바랍니다!"
+          role="user"
+        />
+        <ChatCard
+          content="명지대학교의 2025학년도 수시 모집요강은 다음과 같은 주요 사항으로 구성되어 있습니다:
+
+### 1. 모집 전형
+수시 모집은 다음과 같은 전형으로 나뉩니다:
+- 학생부교과 전형
+- 학생부교과(교과면접, 만학도, 특성화고등졸재직자전형)
+- 실기/실적 전형
+- 실기/실적(특기자 - 문학/체육)
+
+### 2. 블라인드 면접
+명지대학교는 모든 면접 전형에서 블라인드 면접을 시행하여 공정성과 투명성을 높이고 있습니다. 블라인드 면접의 주요 내용은 다음과 같습니다:
+
+- **목적:** 지원자의 성명, 수험번호, 출신고교, 부모(친인척 포함)의 실명 및 직업 등 사회경제적 배경을 배제하고 지원자의 역량에 기반하여 평가.
+- **유의사항:**
+  - 지원자는 본인의 신상정보에 대한 언급을 금지하고, 특정 과목이나 비교과 프로그램에 대한 질문에도 유의해야 합니다.
+  - 면접 과정은 녹화 및 녹음될 수 있습니다.
+  
+### 3. 면접 절차
+면접 절차는 다음과 같습니다:
+- 사전 준비: 신분증과 복장 규정 확인.
+- 대기실 입실: 지정된 시간까지 대기실에 도착하여 가번호를 확인.
+- 면접 진행: 가번호 호명 시 고사실로 이동, 면접위원의 질의에 차분히 응답.
+- 면접 종료 후 대기실에 재입실하지 않고 바로 퇴실.
+
+### 4. 면접 기초 자료 문항 예시
+지원자가 답변해야 할 면접 기초 자료 문항은 다음과 같습니다:
+- 고교생활 중 가장 아쉬웠던 활동과 개선 방안.
+- 관심 있는 학문 분야와 그에 대한 노력.
+- 지원한 학과에서 성공하기 위한 핵심 능력.
+- 대학생활 계획 등.
+
+### 5. 등록 포기 안내
+등록 포기를 원할 경우, 지정된 기간 내에 입학처 홈페이지를 통해 신청해야 하며, 등록 포기 후에는 이를 번복할 수 없습니다.
+
+### 6. 추가 정보
+- 더 자세한 내용은 명지대학교 입학처 홈페이지에서 확인할 수 있습니다. 
+
+이러한 내용을 바탕으로 수시 모집에 준비하면 도움이 될 것입니다. 각 전형 및 면접 과정을 철저히 준비하시길 바랍니다!"
+          role="system"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default PageTest;