Merge pull request #206 from Podo-Store/feat/admin-able-to-change-script-info

Feat/admin able to change script info

Author: game240

src/App.jsx

@@ -25,7 +25,7 @@ import PerformanceInfo from "./pages/myPage/PerformanceInfo";
 import PerformanceRefund from "./pages/myPage/PerformanceRefund";
 import ScriptManage from "./pages/myPage/ScriptManage";
 
-//Ver 1.1.0 
+//Ver 1.1.0
 import ScriptManageDetail from "./pages/myPage/ScriptManageDetail";
 
 //Ver 2.2.0
@@ -56,6 +56,9 @@ function App() {
         <AuthProvider>
           <Routes>
             <Route path="/" element={<DefaultLayout />}>
+              <Route path="admin/scriptManage" element={<AdminSwitch page={0} />} />
+              <Route path="admin/orderManage" element={<AdminSwitch page={1} />} />
+
               <Route index element={<MainVer2 />} />
               <Route path="v1" element={<MainVer1 />} />
 
@@ -71,21 +74,9 @@ function App() {
               <Route path="list" element={<List />} />
               <Route path="list/detail/:id" element={<Detail />} />
 
-              <Route
-                path="purchase/:id"
-                element={<ProtectedRoute element={<Purchase />} />}
-              />
+              <Route path="purchase/:id" element={<ProtectedRoute element={<Purchase />} />} />
 
               <Route element={<MarginLayout />}>
-                <Route
-                  path="admin/scriptManage"
-                  element={<AdminSwitch page={0} />}
-                />
-                <Route
-                  path="admin/orderManage"
-                  element={<AdminSwitch page={1} />}
-                />
-
                 <Route path="policy/:id" element={<PolicyBar />} />
 
                 {/*<Route path="list/detail/:id" element={<Detail />} />*/}
@@ -94,15 +85,9 @@ function App() {
                   path="purchase/success"
                   element={<ProtectedRoute element={<PurchaseSuccess />} />}
                 />
-                <Route
-                  path="purchase/abort"
-                  element={<ProtectedRoute element={<Abort />} />}
-                />
+                <Route path="purchase/abort" element={<ProtectedRoute element={<Abort />} />} />
                 <Route path="post" element={<PostWork />} />
-                <Route
-                  path="mypage/liked"
-                  element={<ProtectedRoute element={<LikedWorks />} />}
-                />
+                <Route path="mypage/liked" element={<ProtectedRoute element={<LikedWorks />} />} />
                 <Route
                   path="mypage/purchased"
                   element={<ProtectedRoute element={<PurchasedScript />} />}

src/components/admin/AdminScriptManage.tsx

@@ -20,6 +20,8 @@ import React, { useState, useEffect } from "react";
 
 import TableCellCenter from "./TableCellCenter";
 
+import { toastAlert } from "@/utils/ToastAlert";
+
 import { OrderStatus } from "@/types/orderStatus";
 import { FilterStatus } from "./types/filterStatus";
 
@@ -28,7 +30,6 @@ import { SERVER_URL } from "@/constants/ServerURL";
 import DownloadSvg from "../../assets/image/component/DownloadSvg";
 import AcceptSvg from "../../assets/image/component/AcceptSvg";
 import DenySvg from "../../assets/image/component/DenySvg";
-import { toastAlert } from "@/utils/ToastAlert";
 
 type PlayType = "LONG" | "SHORT" | null; // undefined: 선택 안함
 
@@ -57,6 +58,10 @@ const AdminScriptManage = () => {
   const [page, setPage] = useState<number>(1);
   const [totalPages, setTotalPages] = useState<number>(1);
 
+  // 작품 제목 / 작가명 변경
+  const [tempTitleMap, setTempTitleMap] = useState<Record<string, string>>({});
+  const [tempWriterMap, setTempWriterMap] = useState<Record<string, string>>({});
+
   // 전체
   const [totalCount, setTotalCount] = useState<number>(0);
   // 수락
@@ -116,6 +121,68 @@ const AdminScriptManage = () => {
     setPage(value);
   };
 
+  // 제목 변경
+  const handleUpdateTitle = async (id: string) => {
+    const newTitle = tempTitleMap[id];
+    // 새로 입력하지 않았거나 기존 제목과 같으면 API 호출 X
+    if (!newTitle || newTitle === data.find((item) => item.id === id)?.title) {
+      return;
+    }
+
+    toastAlert("수정사항 반영 중...", "info");
+    try {
+      await axios.patch(
+        `${SERVER_URL}admin/products/title`,
+        {
+          productId: id,
+          title: newTitle,
+        },
+        {
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: Cookies.get("accessToken")
+              ? `Bearer ${Cookies.get("accessToken")}`
+              : undefined,
+          },
+        }
+      );
+      toastAlert("수정사항이 반영되었습니다.", "success");
+    } catch (error) {
+      toastAlert("오류가 발생했습니다. 새로고침 후 다시 시도해주세요.", "error");
+    }
+  };
+
+  // 작가명 변경
+  const handleUpdateWriter = async (id: string) => {
+    const newWriter = tempWriterMap[id];
+    // 새로 입력하지 않았거나 기존 제목과 같으면 API 호출 X
+    if (!newWriter || newWriter === data.find((item) => item.id === id)?.writer) {
+      return;
+    }
+
+    toastAlert("수정사항 반영 중...", "info");
+    try {
+      await axios.patch(
+        `${SERVER_URL}admin/products/writer`,
+        {
+          productId: id,
+          writer: newWriter,
+        },
+        {
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: Cookies.get("accessToken")
+              ? `Bearer ${Cookies.get("accessToken")}`
+              : undefined,
+          },
+        }
+      );
+      toastAlert("수정사항이 반영되었습니다.", "success");
+    } catch (error) {
+      toastAlert("오류가 발생했습니다. 새로고침 후 다시 시도해주세요.", "error");
+    }
+  };
+
   // 장편극 / 단편극 변경
   const onChangeClassification = (id: string, newClassification: PlayType) => {
     const updatedData = data.map((item) =>
@@ -283,8 +350,30 @@ const AdminScriptManage = () => {
                   <TableRow key={item.id}>
                     <TableCellCenter>{totalCount - ((page - 1) * 10 + index)}</TableCellCenter>
                     <TableCellCenter>{item.createdAt}</TableCellCenter>
-                    <TableCellCenter>{item.title}</TableCellCenter>
-                    <TableCellCenter>{item.writer}</TableCellCenter>
+                    <TableCellCenter>
+                      <TextField
+                        variant="standard"
+                        value={tempTitleMap[item.id] ?? item.title}
+                        onChange={(event) => {
+                          setTempTitleMap((prev) => ({ ...prev, [item.id]: event.target.value }));
+                        }}
+                        onBlur={() => {
+                          handleUpdateTitle(item.id);
+                        }}
+                      ></TextField>
+                    </TableCellCenter>
+                    <TableCellCenter>
+                      <TextField
+                        variant="standard"
+                        value={tempWriterMap[item.id] ?? item.writer}
+                        onChange={(event) => {
+                          setTempWriterMap((prev) => ({ ...prev, [item.id]: event.target.value }));
+                        }}
+                        onBlur={() => {
+                          handleUpdateWriter(item.id);
+                        }}
+                      ></TextField>
+                    </TableCellCenter>
                     <TableCellCenter
                       sx={{
                         backgroundColor:

src/index.css

@@ -1,15 +1,15 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  overflow-x: hidden;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }
 
 @font-face {

src/layouts/DefaultLayout.css

@@ -1,3 +1,4 @@
 .__default-layout__ {
+  width: 100vw;
   min-height: 100vh;
 }

src/pages/admin/AdminSwitch.css

@@ -1,5 +1,7 @@
 .admin-switch {
   margin-top: 6.481vh; /* 70px */
+
+  width: 66.66666666666667%;
 }
 
 .admin-switch .switch-bar {

src/pages/admin/AdminSwitch.tsx

@@ -9,30 +9,32 @@ const AdminSwitch = ({ page = 0 }) => {
   const navigate = useNavigate();
 
   return (
-    <div className="admin-switch">
-      <div className="d-flex switch-bar">
-        <h1
-          className={`h1-bold c-pointer  ${page === 0 ? "c-black" : "c-grey"}`}
-          onClick={() => {
-            navigate("/admin/scriptManage");
-          }}
-        >
-          작품 관리
-        </h1>
-        <h1
-          className={`h1-bold c-pointer ${page === 1 ? "c-black" : "c-grey"}`}
-          onClick={() => {
-            navigate("/admin/orderManage");
-          }}
-        >
-          주문 관리
-        </h1>
-      </div>
+    <main className="flex flex-col items-center w-full">
+      <div className="admin-switch">
+        <div className="d-flex switch-bar">
+          <h1
+            className={`h1-bold c-pointer  ${page === 0 ? "c-black" : "c-grey"}`}
+            onClick={() => {
+              navigate("/admin/scriptManage");
+            }}
+          >
+            작품 관리
+          </h1>
+          <h1
+            className={`h1-bold c-pointer ${page === 1 ? "c-black" : "c-grey"}`}
+            onClick={() => {
+              navigate("/admin/orderManage");
+            }}
+          >
+            주문 관리
+          </h1>
+        </div>
 
-      <div style={{ padding: "20px" }}>
-        {page === 0 ? <AdminScriptManage /> : <AdminOrderManage />}
+        <div style={{ padding: "20px" }}>
+          {page === 0 ? <AdminScriptManage /> : <AdminOrderManage />}
+        </div>
       </div>
-    </div>
+    </main>
   );
 };