From 2d7e0aa63dd78efb24368b1a1c97159118a65bf2 Mon Sep 17 00:00:00 2001
From: TaegeonKim <61930500+Taegon21@users.noreply.github.com>
Date: Mon, 1 Jul 2024 18:06:00 +0900
Subject: [PATCH] :sparkles: Implement custom script selection (#36)

---
 src/api/client.ts                             |  4 +-
 src/api/endpoints.ts                          |  2 +-
 src/api/hooks/useProfessor.ts                 |  1 +
 .../create-container/page.module.css          | 22 ++++-
 src/app/(professor)/create-container/page.tsx | 95 ++++++++++++++++---
 .../edit-container/page.module.css            |  7 +-
 src/app/(professor)/edit-container/page.tsx   | 49 ++--------
 src/app/(professor)/layout.tsx                |  2 +-
 src/type/schemas.ts                           |  2 +-
 9 files changed, 120 insertions(+), 64 deletions(-)

diff --git a/src/api/client.ts b/src/api/client.ts
index 93b0da4..6aaa90d 100644
--- a/src/api/client.ts
+++ b/src/api/client.ts
@@ -4,8 +4,8 @@ import Cookies from "js-cookie";
 const apiUrl = process.env.NEXT_PUBLIC_API_URL;
 
 const apiClient = axios.create({
-  // baseURL: apiUrl,
-  baseURL: "/api",
+  baseURL: apiUrl,
+  // baseURL: "/api",
   headers: {
     "Content-Type": "application/json",
   },
diff --git a/src/api/endpoints.ts b/src/api/endpoints.ts
index e913880..f1dc917 100644
--- a/src/api/endpoints.ts
+++ b/src/api/endpoints.ts
@@ -6,7 +6,7 @@ export const API_ENDPOINTS = {
   },
   PROFESSOR: {
     CHECK: (professorId: string) => `/class/${professorId}/pod`,
-    CREATE: (professorId: string) => `api/class/${professorId}/create`,
+    CREATE: (professorId: string) => `/class/${professorId}/create`,
     DELETE: (professorId: string) => `/class/${professorId}/delete`,
   },
 };
diff --git a/src/api/hooks/useProfessor.ts b/src/api/hooks/useProfessor.ts
index b243918..68c9286 100644
--- a/src/api/hooks/useProfessor.ts
+++ b/src/api/hooks/useProfessor.ts
@@ -37,6 +37,7 @@ export const useCreateClass = () => {
     },
     onError: (error) => {
       alert(`Error: ${error.message}`);
+      console.log("error", error);
     },
   });
 };
diff --git a/src/app/(professor)/create-container/page.module.css b/src/app/(professor)/create-container/page.module.css
index b34ac96..18f3145 100644
--- a/src/app/(professor)/create-container/page.module.css
+++ b/src/app/(professor)/create-container/page.module.css
@@ -65,7 +65,6 @@
   border: 1px solid #ccc;
   border-radius: 12px;
   width: 100%;
-
 }
 
 .submitButton {
@@ -99,6 +98,27 @@
   cursor: pointer;
 }
 
+.checkboxGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  margin-top: 10px;
+}
+.firstLine {
+  display: flex;
+  gap: 15px;
+}
+
+.checkbox {
+  display: flex;
+  align-items: center;
+}
+
+.checkbox input {
+  margin-right: 5px;
+}
+
 @media (max-width: 768px) {
   .leftContainer {
     display: none;
diff --git a/src/app/(professor)/create-container/page.tsx b/src/app/(professor)/create-container/page.tsx
index a1b30f5..bd3c784 100644
--- a/src/app/(professor)/create-container/page.tsx
+++ b/src/app/(professor)/create-container/page.tsx
@@ -11,7 +11,7 @@ const CreateContainerPage = () => {
   const [classId, setClassId] = useState<string>("");
   const [studentIds, setStudentIds] = useState<string[]>([""]);
   const [type, setType] = useState<string>("vscode");
-  const [script, setScript] = useState<string>("");
+  const [scripts, setScripts] = useState<string[]>([]);
 
   const { mutate: createClass, status } = useCreateClass();
 
@@ -20,7 +20,7 @@ const CreateContainerPage = () => {
     studentIds,
     options: type === "vscode" ? { vscode: "yes" } : { ssh: "yes" },
     command: [],
-    customScript: script,
+    customScript: scripts,
   };
 
   const handleStudentIdChange = (index: number, value: string) => {
@@ -39,8 +39,17 @@ const CreateContainerPage = () => {
     setStudentIds(newStudentIds);
   };
 
+  const handleScriptChange = (value: string) => {
+    if (scripts.includes(value)) {
+      setScripts(scripts.filter((script) => script !== value));
+    } else {
+      setScripts([...scripts, value]);
+    }
+  };
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
+    console.log("data:", containerData);
     createClass({ professorId: studentId, classData: containerData });
   };
 
@@ -117,15 +126,79 @@ const CreateContainerPage = () => {
             </div>
 
             <div className={styles.formGroup}>
-              <label htmlFor="port">Custom Script</label>
-              <input
-                type="text"
-                id="port"
-                placeholder="ex) apt install -y vim \n"
-                value={script}
-                onChange={(e) => setScript(e.target.value)}
-                required
-              />
+              <label>Custom Script</label>
+              <div className={styles.checkboxGroup}>
+                <div className={styles.firstLine}>
+                  <div className={styles.checkbox}>
+                    <input
+                      type="checkbox"
+                      id="python"
+                      name="customScript"
+                      value="python"
+                      checked={scripts.includes("python")}
+                      onChange={(e) => handleScriptChange(e.target.value)}
+                    />
+                    <label htmlFor="python">python</label>
+                  </div>
+                  <div className={styles.checkbox}>
+                    <input
+                      type="checkbox"
+                      id="nodejs"
+                      name="customScript"
+                      value="nodejs"
+                      checked={scripts.includes("nodejs")}
+                      onChange={(e) => handleScriptChange(e.target.value)}
+                    />
+                    <label htmlFor="nodejs">nodejs</label>
+                  </div>
+                  <div className={styles.checkbox}>
+                    <input
+                      type="checkbox"
+                      id="ruby"
+                      name="customScript"
+                      value="ruby"
+                      checked={scripts.includes("ruby")}
+                      onChange={(e) => handleScriptChange(e.target.value)}
+                    />
+                    <label htmlFor="ruby">ruby</label>
+                  </div>
+                </div>
+                <div className={styles.firstLine}>
+                  <div className={styles.checkbox}>
+                    <input
+                      type="checkbox"
+                      id="vim"
+                      name="customScript"
+                      value="vim"
+                      checked={scripts.includes("vim")}
+                      onChange={(e) => handleScriptChange(e.target.value)}
+                    />
+                    <label htmlFor="vim">vim</label>
+                  </div>
+                  <div className={styles.checkbox}>
+                    <input
+                      type="checkbox"
+                      id="nginx"
+                      name="customScript"
+                      value="nginx"
+                      checked={scripts.includes("nginx")}
+                      onChange={(e) => handleScriptChange(e.target.value)}
+                    />
+                    <label htmlFor="nginx">nginx</label>
+                  </div>
+                  <div className={styles.checkbox}>
+                    <input
+                      type="checkbox"
+                      id="golang"
+                      name="customScript"
+                      value="golang"
+                      checked={scripts.includes("golang")}
+                      onChange={(e) => handleScriptChange(e.target.value)}
+                    />
+                    <label htmlFor="golang">golang</label>
+                  </div>
+                </div>
+              </div>
             </div>
 
             <button type="submit" className={styles.submitButton}>
diff --git a/src/app/(professor)/edit-container/page.module.css b/src/app/(professor)/edit-container/page.module.css
index 9f420d1..3be8c4f 100644
--- a/src/app/(professor)/edit-container/page.module.css
+++ b/src/app/(professor)/edit-container/page.module.css
@@ -74,7 +74,6 @@
   justify-content: space-between;
 }
 
-.saveButton,
 .deleteButton {
   margin-top: 30px;
   padding: 10px 15px;
@@ -86,12 +85,8 @@
   flex: 1;
 }
 
-.saveButton {
-  background-color: var(--orange-color);
-}
-
 .deleteButton {
-  background-color: var(--gray-color);
+  background-color: var(--orange-color);
 }
 
 @media (max-width: 768px) {
diff --git a/src/app/(professor)/edit-container/page.tsx b/src/app/(professor)/edit-container/page.tsx
index b537f60..31d4521 100644
--- a/src/app/(professor)/edit-container/page.tsx
+++ b/src/app/(professor)/edit-container/page.tsx
@@ -2,7 +2,6 @@
 import { useState } from "react";
 import styles from "./page.module.css";
 import Logo2Icon from "/public/icons/Logo2.svg";
-import WarningModal from "@/components/common/WarningModal";
 import { useDeleteClass, useFetchCheck } from "@/api/hooks/useProfessor";
 import { ContainerCheckSchema, ContainerDeleteSchema } from "@/type/schemas";
 import { IDelete } from "@/type/interfaces";
@@ -28,8 +27,6 @@ const EditContainerPage = () => {
   const [type, setType] = useState<string>("");
   const [containerStatus, setStatus] = useState<string>("");
   const [command, setCommand] = useState<string>("");
-  const [showSaveModal, setShowSaveModal] = useState<boolean>(false);
-  const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);
 
   const { data: containerCheckData, isLoading, error } = useFetchCheck();
   const { mutate: deleteClass, status } = useDeleteClass();
@@ -69,7 +66,6 @@ const EditContainerPage = () => {
       command: type === "ssh" ? command : undefined,
     };
     console.log("Container Data:", containerData);
-    setShowSaveModal(true);
   };
 
   const handleDelete = () => {
@@ -79,7 +75,6 @@ const EditContainerPage = () => {
     };
     console.log("Delete Data:", deleteData);
     deleteClass({ professorId: studentId, deleteData: deleteData });
-    setShowDeleteModal(true);
   };
 
   return (
@@ -88,8 +83,10 @@ const EditContainerPage = () => {
       <div className={styles.container}>
         <div className={styles.leftContainer}>
           <Logo2Icon />
-          <div className={styles.logoText}>Edit Container</div>
-          <div className={styles.grayText}>Edit or delete your container</div>
+          <div className={styles.logoText}>Delete Container</div>
+          <div className={styles.grayText}>
+            Choose Class ID to delete your container
+          </div>
         </div>
         <div className={styles.rightContainer}>
           <form className={styles.form} onSubmit={handleSave}>
@@ -111,17 +108,13 @@ const EditContainerPage = () => {
             </div>
             <div className={styles.formGroup}>
               <label htmlFor="type">Type</label>
-              <select
+              <input
                 id="type"
                 value={type}
                 onChange={(e) => setType(e.target.value)}
                 required
-                disabled={!classId}
-              >
-                <option value=""></option>
-                <option value="vscode">VSCode</option>
-                <option value="ssh">SSH</option>
-              </select>
+                disabled={true}
+              ></input>
             </div>
 
             <div className={styles.formGroup}>
@@ -132,24 +125,10 @@ const EditContainerPage = () => {
                 value={containerStatus}
                 onChange={(e) => setStatus(e.target.value)}
                 required
-                disabled={type !== "vscode"}
-              />
-            </div>
-            <div className={styles.formGroup}>
-              <label htmlFor="command">명령어</label>
-              <input
-                type="text"
-                id="command"
-                value={command}
-                onChange={(e) => setCommand(e.target.value)}
-                required
-                disabled={type !== "ssh"}
+                disabled={true}
               />
             </div>
             <div className={styles.buttonGroup}>
-              <button type="submit" className={styles.saveButton}>
-                수정
-              </button>
               <button
                 type="button"
                 className={styles.deleteButton}
@@ -161,18 +140,6 @@ const EditContainerPage = () => {
           </form>
         </div>
       </div>
-      {showSaveModal && (
-        <WarningModal
-          message={`"${classId}" 컨테이너가 수정되었습니다`}
-          onClose={() => setShowSaveModal(false)}
-        />
-      )}
-      {showDeleteModal && (
-        <WarningModal
-          message={`"${classId}" 컨테이너가 삭제되었습니다`}
-          onClose={() => setShowDeleteModal(false)}
-        />
-      )}
     </>
   );
 };
diff --git a/src/app/(professor)/layout.tsx b/src/app/(professor)/layout.tsx
index b233ed9..14ade32 100644
--- a/src/app/(professor)/layout.tsx
+++ b/src/app/(professor)/layout.tsx
@@ -103,7 +103,7 @@ export default function Layout({ children }: LayoutProps) {
               <div
                 className={`${styles.menuItem} ${isActive("/edit-container")}`}
               >
-                <div>컨테이너 수정 및 삭제</div>
+                <div>컨테이너 삭제</div>
               </div>
             </Link>
           </div>
diff --git a/src/type/schemas.ts b/src/type/schemas.ts
index 7c409c5..d16bac7 100644
--- a/src/type/schemas.ts
+++ b/src/type/schemas.ts
@@ -24,7 +24,7 @@ export interface ClassCreationSchema {
   studentIds: string[];
   options: { [key: string]: string };
   command: string[];
-  customScript: string;
+  customScript: string[];
 }
 
 export interface ContainerCheckSchema {