Feature/#80

src/components/Write/subject/awardTable/index.tsx

@@ -1,9 +1,59 @@
-import Checkbox from "@/components/common/Checkbox"
-import Input from "@/components/common/Input"
-import { Table } from "@/components/common/table"
-import React from "react"
+import Checkbox from "@/components/Common/Checkbox"
+import Input from "@/components/Common/Input"
+import { Table } from "@/components/Common/table"
+import React, { useState } from "react"
+import type { ChangeEvent } from "react"
+
+interface SemesterThProps {
+  text: string
+}
+
+interface GradeHeaderProps {
+  grade: string
+}
+
+const SemesterTh: React.FC<SemesterThProps> = ({ text }) => (
+  <Table.Th
+    width="59"
+    background="F9F9F9"
+    color="000"
+    style={{ fontSize: "12px", fontStyle: "normal" }}
+    notBorder
+  >
+    {text}
+  </Table.Th>
+)
+
+const GradeHeader: React.FC<GradeHeaderProps> = ({ grade }) => (
+  <Table.Th width="118" colspan={2}>
+    <Table.Tr height="31">
+      <Table.Th width="118" colspan={2} notBorder>
+        {grade}
+      </Table.Th>
+    </Table.Tr>
+    <Table.Tr height="31">
+      <SemesterTh text="1학기" />
+      <SemesterTh text="2학기" />
+    </Table.Tr>
+  </Table.Th>
+)
+
+const AwardTable: React.FC = () => {
+  const [checkedStates, setCheckedStates] = useState<boolean[]>(
+    Array(6).fill(false),
+  )
+  const [awardInput, setAwardInput] = useState<string>("")
+
+  const handleCheckboxChange = (index: number) => {
+    const updatedStates = [...checkedStates]
+    updatedStates[index] = !updatedStates[index]
+    setCheckedStates(updatedStates)
+  }
+
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setAwardInput(event.target.value)
+  }
 
-const AwardTable = () => {
   return (
     <Table>
       <Table.Header>
@@ -12,87 +62,9 @@ const AwardTable = () => {
           <Table.Th rowspan={2} width="186">
             설명
           </Table.Th>
-          <Table.Th width="118" colspan={2}>
-            <Table.Tr height="31">
-              <Table.Th width="118" colspan={2} notBorder>
-                1학년
-              </Table.Th>
-            </Table.Tr>
-            <Table.Tr height="31">
-              <Table.Th
-                width="59"
-                background="F9F9F9"
-                color="000"
-                style={{ fontSize: "12px", fontStyle: "normal" }}
-                notBorder
-              >
-                1학기
-              </Table.Th>
-              <Table.Th
-                width="59"
-                background="F9F9F9"
-                color="000"
-                style={{ fontSize: "12px", fontStyle: "normal" }}
-                notBorder
-              >
-                2학기
-              </Table.Th>
-            </Table.Tr>
-          </Table.Th>
-          <Table.Th width="118" colspan={2}>
-            <Table.Tr height="31">
-              <Table.Th width="118" colspan={2} notBorder>
-                2학년
-              </Table.Th>
-            </Table.Tr>
-            <Table.Tr height="31">
-              <Table.Th
-                width="59"
-                background="F9F9F9"
-                color="000"
-                style={{ fontSize: "12px", fontStyle: "normal" }}
-                notBorder
-              >
-                1학기
-              </Table.Th>
-              <Table.Th
-                width="59"
-                background="F9F9F9"
-                color="000"
-                style={{ fontSize: "12px", fontStyle: "normal" }}
-                notBorder
-              >
-                2학기
-              </Table.Th>
-            </Table.Tr>
-          </Table.Th>
-          <Table.Th width="118" colspan={2}>
-            <Table.Tr height="31">
-              <Table.Th width="118" colspan={2} notBorder>
-                3학년
-              </Table.Th>
-            </Table.Tr>
-            <Table.Tr height="31">
-              <Table.Th
-                width="59"
-                background="F9F9F9"
-                color="000"
-                style={{ fontSize: "12px", fontStyle: "normal" }}
-                notBorder
-              >
-                1학기
-              </Table.Th>
-              <Table.Th
-                width="59"
-                background="F9F9F9"
-                color="000"
-                style={{ fontSize: "12px", fontStyle: "normal" }}
-                notBorder
-              >
-                2학기
-              </Table.Th>
-            </Table.Tr>
-          </Table.Th>
+          <GradeHeader grade="1학년" />
+          <GradeHeader grade="2학년" />
+          <GradeHeader grade="3학년" />
         </Table.Tr>
       </Table.Header>
       <Table.Body>
@@ -103,27 +75,20 @@ const AwardTable = () => {
             color="8B939C"
             style={{ fontSize: "12px", padding: "0 18px" }}
           >
-            최소 한 학기 이상 학생회 임원 ( 전교 학생회장, 전교
-            학생부회장,학급반장 )
-          </Table.Td>
-          <Table.Td width="59">
-            <Checkbox checked={false} name="leader" />
-          </Table.Td>
-          <Table.Td width="59">
-            <Checkbox checked={false} name="leader" />
-          </Table.Td>
-          <Table.Td width="59">
-            <Checkbox checked={false} name="leader" />
-          </Table.Td>
-          <Table.Td width="59">
-            <Checkbox checked={false} name="leader" />
-          </Table.Td>
-          <Table.Td width="59">
-            <Checkbox checked={false} name="leader" />
-          </Table.Td>
-          <Table.Td width="59">
-            <Checkbox checked={false} name="leader" />
+            최소 한 학기 이상 학생회 임원 ( 전교 학생회장, 전교 학생부회장,
+            학급반장 )
           </Table.Td>
+          {Array(6)
+            .fill(null)
+            .map((_, index) => (
+              <Table.Td key={index} width="59">
+                <Checkbox
+                  checked={checkedStates[index]}
+                  onChange={() => handleCheckboxChange(index)}
+                  name={`leader-${index}`}
+                />
+              </Table.Td>
+            ))}
         </Table.Tr>
         <Table.Tr>
           <Table.Td background="F9F9F9">리더쉽</Table.Td>
@@ -137,6 +102,8 @@ const AwardTable = () => {
           <Table.Td width="354" colspan={6}>
             <Input
               type="text"
+              value={awardInput}
+              onChange={handleInputChange}
               style={{ margin: "0 auto", height: "36px", textAlign: "center" }}
             />
           </Table.Td>

src/components/Write/subject/hooks/useArray.ts

@@ -0,0 +1,29 @@
+import type { Dispatch, SetStateAction } from "react"
+
+interface IuseArray {
+  state: any[]
+  setState: Dispatch<SetStateAction<any[]>>
+}
+interface IChangeState {
+  changeValue: any
+  changeIndex: number
+}
+interface IAddState {
+  addValue: any
+}
+
+const useArray = ({ state, setState }: IuseArray) => {
+  const ChangeState = ({ changeValue, changeIndex }: IChangeState) => {
+    const copyArr = [...state]
+    copyArr[changeIndex] = changeValue
+    setState([...copyArr])
+  }
+  const AddState = ({ addValue }: IAddState) => {
+    const copyArr = [...state]
+    copyArr.push(addValue)
+    setState([...copyArr])
+  }
+  return { ChangeState, AddState }
+}
+
+export { useArray }

src/components/Write/subject/hooks/useSubjectValue.ts

@@ -0,0 +1,87 @@
+import { schoolYear, subjectNames } from "@/constants/Write/subject"
+import type { Dispatch, SetStateAction } from "react"
+
+export interface IInitValue {
+  year: string
+  semester: string
+  subject: string
+  score: string
+}
+interface ISetInitProps {
+  setState: Dispatch<SetStateAction<IInitValue[]>>
+}
+interface IOnChangeProps {
+  changeValue: string
+  index: number
+  state: IInitValue[]
+  setState: Dispatch<SetStateAction<IInitValue[]>>
+}
+interface IAddProps {
+  subject: string
+  state: IInitValue[]
+  setState: Dispatch<SetStateAction<IInitValue[]>>
+}
+interface IFreeSemesterProps {
+  semesterIndex: number
+  state: IInitValue[]
+  setState: Dispatch<SetStateAction<IInitValue[]>>
+}
+
+const useSetInitValue = ({ setState }: ISetInitProps) => {
+  const copyArr: IInitValue[] = []
+  subjectNames.forEach((subjectValue) =>
+    schoolYear.forEach((yearValue) =>
+      new Array(2).fill(0).forEach((_, semester) => {
+        const initValue: IInitValue = {
+          year: yearValue,
+          semester: `${semester}`,
+          subject: subjectValue,
+          score: "-",
+        }
+        copyArr.push(initValue)
+      }),
+    ),
+  )
+  setState([...copyArr])
+}
+
+const useAddValue = ({ subject, state, setState }: IAddProps) => {
+  const copyArr: IInitValue[] = [...state]
+  schoolYear.forEach((yearValue) =>
+    new Array(2).fill(0).forEach((_, semester) => {
+      const initValue: IInitValue = {
+        year: yearValue,
+        semester: `${semester}`,
+        subject,
+        score: "-",
+      }
+      copyArr.push(initValue)
+    }),
+  )
+  setState([...copyArr])
+}
+
+const useFreeSemester = ({
+  semesterIndex,
+  state,
+  setState,
+}: IFreeSemesterProps) => {
+  const copyArr: IInitValue[] = [...state]
+  copyArr.forEach((value, index) => {
+    if ((index + 1) % 6 === semesterIndex + 1) value.score = "-"
+  })
+  setState([...copyArr])
+}
+
+const useOnChangeValue = ({
+  changeValue,
+  index,
+  state,
+  setState,
+}: IOnChangeProps) => {
+  const copyArr: IInitValue[] = [...state]
+  copyArr[index].score = changeValue
+  setState([...copyArr])
+}
+
+export { useSetInitValue, useOnChangeValue, useAddValue, useFreeSemester }

src/components/Write/subject/prompt/index.tsx

@@ -0,0 +1,39 @@
+import React, { type Dispatch, type SetStateAction } from "react"
+import * as S from "./style"
+
+interface IPromptProps {
+  value: string
+  setValue: Dispatch<SetStateAction<string>>
+  setActive: Dispatch<SetStateAction<boolean>>
+  addFunc: () => void
+}
+
+export const UsePrompt = ({
+  value,
+  setValue,
+  setActive,
+  addFunc,
+}: IPromptProps) => {
+  return (
+    <S.MainLayout>
+      <S.ContentsContainerCol>
+        <div>
+          <S.Title>과목 추가</S.Title>
+          <div>
+            <S.Context>과목 명을 입력해주세요.</S.Context>
+            <S.Input
+              type="text"
+              placeholder="ex) 역사"
+              value={value}
+              onChange={(inputValue) => setValue(inputValue.target.value)}
+            />
+          </div>
+          <S.ButtonWrapRow>
+            <S.Button1 onClick={addFunc}>추가</S.Button1>
+            <S.Button2 onClick={() => setActive(false)}>취소</S.Button2>
+          </S.ButtonWrapRow>
+        </div>
+      </S.ContentsContainerCol>
+    </S.MainLayout>
+  )
+}