feat: 테스트 케이스 생성 모달 기본값 추가

package.json

@@ -21,6 +21,7 @@
   "dependencies": {
     "@tanstack/react-query": "^5.52.2",
     "classnames": "^2.5.1",
+    "date-fns": "^4.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",

src/components/common/Modal/ExtractCasesModal.tsx

@@ -1,18 +1,37 @@
 import { ElementType } from '@type/element';
 import { Modal } from './Modal';
+import classNames from 'classnames';
+import { LAYER_LIST } from '@constants/element';
 
 interface ExtractCasesModalProps {
   cases: ElementType[];
   onClose: () => void;
 }
 
+const LayerTableData = ({
+  layer,
+  className,
+  rowSpan,
+}: {
+  layer: number;
+  className: string;
+  rowSpan: number;
+}) => {
+  return (
+    <td rowSpan={rowSpan} className={classNames('py-1 border', className)}>
+      {`Layer${layer}`}
+      <br />({LAYER_LIST[layer - 1].name})
+    </td>
+  );
+};
+
 const ExtractCasesModal = ({ cases, onClose }: ExtractCasesModalProps) => {
   return (
     <Modal onClose={onClose}>
-      <div className="flex flex-col items-center gap-3 w-[80vw]">
+      <div className="max-w-[1200px] flex flex-col items-center gap-3 w-[80vw]">
         <h2 className="text-2xl font-bold">추출 결과</h2>
         <div className="flex w-full">
-          <table className="w-full text-center border border-collapse">
+          <table className="table break-keep w-full text-center border border-collapse">
             <colgroup>
               <col className="w-1/4" />
               <col className="w-1/4" />
@@ -28,11 +47,7 @@ const ExtractCasesModal = ({ cases, onClose }: ExtractCasesModalProps) => {
               </tr>
               {/* LAYER 1 시작 */}
               <tr>
-                <td className="py-1 border bg-red-50" rowSpan={9}>
-                  Layer1
-                  <br />
-                  (도로정보)
-                </td>
+                <LayerTableData layer={1} rowSpan={9} className="bg-red-50" />
                 <td className="py-1 border bg-red-50" colSpan={3}>
                   도로 기능과 등급
                 </td>
@@ -90,11 +105,11 @@ const ExtractCasesModal = ({ cases, onClose }: ExtractCasesModalProps) => {
               {/* LAYER 2 시작 */}
 
               <tr>
-                <td rowSpan={25} className="bg-orange-50">
-                  Layer2
-                  <br />
-                  (도로교통시설)
-                </td>
+                <LayerTableData
+                  layer={2}
+                  rowSpan={25}
+                  className="bg-orange-50"
+                />
                 <td className="py-1 border bg-orange-50" rowSpan={6}>
                   도로안전시설
                 </td>
@@ -221,11 +236,11 @@ const ExtractCasesModal = ({ cases, onClose }: ExtractCasesModalProps) => {
               {/* LAYER 3 시작 */}
 
               <tr>
-                <td className="py-1 border bg-yellow-50" rowSpan={4}>
-                  Layer3
-                  <br />
-                  (일시적 사건)
-                </td>
+                <LayerTableData
+                  layer={3}
+                  rowSpan={4}
+                  className="bg-yellow-50"
+                />
                 <td className="py-1 border bg-yellow-50" rowSpan={4}>
                   도로점용
                 </td>
@@ -249,11 +264,11 @@ const ExtractCasesModal = ({ cases, onClose }: ExtractCasesModalProps) => {
               {/* LAYER 4 시작 */}
 
               <tr>
-                <td className="py-1 border bg-green-50" rowSpan={46}>
-                  Layer4
-                  <br />
-                  (동적 객체)
-                </td>
+                <LayerTableData
+                  layer={4}
+                  rowSpan={46}
+                  className="bg-green-50"
+                />
                 <td className="py-1 border bg-green-50" rowSpan={41}>
                   주변 객체
                 </td>
@@ -421,11 +436,7 @@ const ExtractCasesModal = ({ cases, onClose }: ExtractCasesModalProps) => {
               {/* LAYER 5 시작 */}
 
               <tr>
-                <td className="py-1 border bg-blue-50" rowSpan={5}>
-                  Layer5
-                  <br />
-                  (주행 환경)
-                </td>
+                <LayerTableData layer={5} rowSpan={5} className="bg-blue-50" />
                 <td className="py-1 border bg-blue-50" rowSpan={2}>
                   시간
                 </td>
@@ -460,11 +471,11 @@ const ExtractCasesModal = ({ cases, onClose }: ExtractCasesModalProps) => {
               {/* LAYER 6 시작 */}
 
               <tr>
-                <td className="py-1 border bg-indigo-50" rowSpan={10}>
-                  Layer6
-                  <br />
-                  (디지털)
-                </td>
+                <LayerTableData
+                  layer={6}
+                  rowSpan={10}
+                  className="bg-indigo-50"
+                />
                 <td className="py-1 border bg-indigo-50" rowSpan={3}>
                   센싱정보
                 </td>
@@ -527,11 +538,11 @@ const ExtractCasesModal = ({ cases, onClose }: ExtractCasesModalProps) => {
               {/* LAYER 6 시작 */}
 
               <tr>
-                <td className="py-1 border bg-purple-50">
-                  Layer7
-                  <br />
-                  (법 · 규제)
-                </td>
+                <LayerTableData
+                  layer={7}
+                  rowSpan={1}
+                  className="bg-purple-50"
+                />
                 <td className="py-1 border bg-purple-50" colSpan={3}>
                   법 · 규제
                 </td>
@@ -546,7 +557,10 @@ const ExtractCasesModal = ({ cases, onClose }: ExtractCasesModalProps) => {
             {cases.map((item, index) => (
               <div
                 key={item.id}
-                className={`text-center border-b border-r ${index === cases.length - 1 ? 'py-4' : 'py-1'}`}
+                className={classNames(
+                  'text-center border-b border-r',
+                  index === cases.length - 1 ? 'py-4' : 'py-1',
+                )}
               >
                 {item.value ? item.value : '-'}
               </div>

src/components/common/Modal/RandomModal.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 import { Modal } from './Modal';
 import { useSetSelectedModalStore } from '@store/modal-type';
 import { Button } from '../Button/Button';
@@ -10,48 +10,42 @@ import Input from '../Input/Input';
 import { useSetParsedDataStore } from '@store/parsedData';
 import { useSetLoadingStateStore } from '@store/loading';
 import { message } from '@utils/toast';
+import { formatDate } from '@utils/date';
 
 const RandomModal = () => {
-  const [count, setCount] = useState<number>(0);
-  const [description, setDescription] = useState<string>('');
-  const empty = count === 0 || description === '';
+  const [count, setCount] = useState(10000);
+  const [description, setDescription] = useState(formatDate(new Date()));
   const setModal = useSetSelectedModalStore();
   const setResult = useSetResultStore();
   const defaultCase = useGetCaseStore();
   const setParsedData = useSetParsedDataStore();
   const setIsLoading = useSetLoadingStateStore();
 
-  const handleCountChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      setCount(Number(e.target.value.replace(/\D/g, '')));
-    },
-    [],
-  );
+  const empty = count === 0 || description === '';
 
-  const handleDescriptionChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      setDescription(e.target.value);
-    },
-    [],
-  );
+  const handleCountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCount(Number(e.target.value));
+  };
+
+  const handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setDescription(e.target.value);
+  };
 
-  /**
-   * @description 전체 케이스에서 시나리오를 랜덤으로 생성합니다.
-   */
   const handleRandomButtonClick = async (cases: ElementType[]) => {
     setIsLoading(true);
     setModal('none');
+    // TO-DO remove this
     await new Promise<void>((resolve) =>
       setTimeout(() => {
         resolve();
       }, 50),
     );
     const testCases = await createTestCases(cases, count, '랜덤', description);
     setResult(testCases);
-    const parsedData = parseTestCasesByLayer(testCases);
+    const parsedData = parseTestCasesByLayer(testCases, 'random');
     setParsedData(parsedData);
     setIsLoading(false);
-    message('생성이 완료되었습니다!');
+    message('랜덤 생성이 완료되었습니다!');
   };
 
   return (
@@ -62,13 +56,12 @@ const RandomModal = () => {
           <span>생성할 시나리오의 개수와 설명을 입력해주세요.</span>
           <span>최대 50,000개까지 입력 가능</span>
         </div>
-
         <div className="flex flex-col gap-4">
           <Input
+            type="number"
             label="테스트 케이스 개수"
             value={count}
             onChange={handleCountChange}
-            placeholder="생성할 테스트 케이스의 개수를 입력하세요"
           />
           <Input
             label="설명"
@@ -77,7 +70,6 @@ const RandomModal = () => {
             placeholder="테스트 케이스에 대한 설명을 작성해주세요"
           />
         </div>
-
         <Button
           color={`${empty ? 'disabled' : 'black'}`}
           onClick={() => handleRandomButtonClick(defaultCase)}

src/components/common/Modal/SelectedRandomModal.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 import { Modal } from './Modal';
 import { Button } from '../Button/Button';
 import { createTestCases, parseTestCasesByLayer } from '@utils/element';
@@ -10,36 +10,27 @@ import Input from '../Input/Input';
 import { useSetParsedDataStore } from '@store/parsedData';
 import { useSetLoadingStateStore } from '@store/loading';
 import { message } from '@utils/toast';
+import { formatDate } from '@utils/date';
 
 const SelectedRandomModal = () => {
-  const [count, setCount] = useState<number>(1);
-  const [description, setDescription] = useState<string>('');
-  const empty = count === 0 || description === '';
+  const [count, setCount] = useState(10000);
+  const [description, setDescription] = useState(formatDate(new Date()));
   const setModal = useSetSelectedModalStore();
   const selectedCase = useGetSelectedCaseStore();
   const setResult = useSetResultStore();
   const setParsedData = useSetParsedDataStore();
   const setIsLoading = useSetLoadingStateStore();
 
-  const handleCountChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      setCount(Number(e.target.value.replace(/\D/g, '')));
-    },
-    [],
-  );
+  const empty = count === 0 || description === '';
 
-  const handleDescriptionChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      setDescription(e.target.value);
-    },
-    [],
-  );
+  const handleCountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCount(Number(e.target.value));
+  };
+
+  const handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setDescription(e.target.value);
+  };
 
-  /**
-   * @description 선택된 케이스들에 한해 시나리오를 랜덤 생성합니다.
-   * @param cases 선택된 케이스들
-   * @param type 선택 생성 타입
-   */
   const handleRandomButtonClick = async (cases: ElementType[]) => {
     setIsLoading(true);
     setModal('none');
@@ -50,10 +41,10 @@ const SelectedRandomModal = () => {
     );
     const testCases = await createTestCases(cases, count, '선택', description);
     setResult(testCases);
-    const parsedData = parseTestCasesByLayer(testCases);
+    const parsedData = parseTestCasesByLayer(testCases, 'select');
     setParsedData(parsedData);
     setIsLoading(false);
-    message('생성이 완료되었습니다!');
+    message('선택 생성이 완료되었습니다!');
   };
 
   return (
@@ -64,13 +55,12 @@ const SelectedRandomModal = () => {
           <span>생성할 시나리오의 개수와 설명을 입력해주세요.</span>
           <span>최대 50,000개까지 입력 가능</span>
         </div>
-
         <div className="flex flex-col gap-4">
           <Input
+            type="number"
             label="테스트 케이스 개수"
             value={count}
             onChange={handleCountChange}
-            placeholder="생성할 테스트 케이스의 개수를 입력하세요"
           />
           <Input
             label="설명"
@@ -79,7 +69,6 @@ const SelectedRandomModal = () => {
             placeholder="테스트 케이스에 대한 설명을 작성해주세요"
           />
         </div>
-
         <Button
           color={`${empty ? 'disabled' : 'black'}`}
           onClick={() => handleRandomButtonClick(selectedCase)}

src/components/common/Spinner/Spinner.tsx

@@ -1,14 +1,9 @@
-import { IoLogoElectron } from 'react-icons/io5';
+import { LuLoader2 } from 'react-icons/lu';
 
 const Spinner = () => {
   return (
-    <div className="fixed inset-0 z-10 flex items-center justify-center bg-black bg-opacity-50">
-      <div className="flex flex-col items-center gap-2">
-        <div className="animate-spin">
-          <IoLogoElectron className="size-20" />
-        </div>
-        <p className="text-2xl">로딩중...</p>
-      </div>
+    <div className="fixed inset-0 z-10 flex items-center justify-center bg-black/50">
+      <LuLoader2 size={60} className="animate-spin text-white" />
     </div>
   );
 };

src/utils/date.ts

@@ -0,0 +1,5 @@
+import { format } from 'date-fns';
+
+export function formatDate(date: Date) {
+  return format(date, 'yyyy-MM-dd');
+}