From 9d4de990d0a17f7a9369d667df5e511ce139e0aa Mon Sep 17 00:00:00 2001 From: heedda Date: Wed, 15 May 2024 23:43:38 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EC=BD=94=EB=93=9C=20=EC=B5=9C=EC=A0=81?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/login/index.ts | 2 +- src/app/afterManage/page.tsx | 28 +++------------------- src/app/classChange/page.tsx | 27 +++------------------ src/app/outAccept/page.tsx | 28 +++------------------- src/components/button/index.tsx | 7 ++---- src/hook/handleAcceptListClick.ts | 39 +++++++++++++++++++++++++++++++ 6 files changed, 51 insertions(+), 80 deletions(-) create mode 100644 src/hook/handleAcceptListClick.ts diff --git a/src/api/login/index.ts b/src/api/login/index.ts index b80f6c8..cbdc2dc 100644 --- a/src/api/login/index.ts +++ b/src/api/login/index.ts @@ -57,4 +57,4 @@ export const GetTeacherName = () => { return response.data; }, }); -}; +}; \ No newline at end of file diff --git a/src/app/afterManage/page.tsx b/src/app/afterManage/page.tsx index 055fc74..14c8a8c 100644 --- a/src/app/afterManage/page.tsx +++ b/src/app/afterManage/page.tsx @@ -13,6 +13,7 @@ import Dropdown from "@/components/dropdown"; import AfterList from "@/components/list/afterManage"; import AfterDelete from "@/components/list/delete"; import Modal from "@/components/modal"; +import useAcceptListSelection from "@/hook/handleAcceptListClick"; import { getStudentString, setStudentNum } from "@/util/util"; import { useEffect, useState } from "react"; @@ -24,14 +25,13 @@ const AfterManage = () => { const [selectClassTime, setSelectClassTime] = useState(8); const [selectClub, setSelectClub] = useState("대동여지도"); const [studentData, setStudentData] = useState(); - const [selectedStudents, setSelectedStudents] = useState([]); - const [selectedStudentName, setSelectedStudentName] = useState([]); const { data: getClub } = GetClubList(selectClub); const { mutate: Post } = PostStudent(); const { mutate: changeStatus } = FixStatus(); const { data: getStudent } = GetAfterStudent(); const { mutate: CulbCheck } = CheckStatus(); - + const { selectedStudents, selectedStudentName, handleAcceptListClick } = + useAcceptListSelection(); const handleSaveClub = async () => { const updatedData: ChangeClub[] = []; studentData?.forEach((item) => { @@ -116,28 +116,6 @@ const AfterManage = () => { setMadal(false); }; - const handleAcceptListClick = (id: string, name: string) => { - const selectedIndex = selectedStudents.indexOf(id); - const isSelected = selectedIndex !== -1; - if (isSelected) { - setSelectedStudents((prevSelectedStudents) => - prevSelectedStudents.filter((studentId) => studentId !== id) - ); - setSelectedStudentName((prevSelectedStudentName) => - prevSelectedStudentName.filter((studentName) => studentName !== name) - ); - } else { - setSelectedStudents((prevSelectedStudents) => [ - ...prevSelectedStudents, - id, - ]); - setSelectedStudentName((prevSelectedStudentName) => [ - ...prevSelectedStudentName, - name, - ]); - } - }; - useEffect(() => { setClubList([]); if (getClub) { diff --git a/src/app/classChange/page.tsx b/src/app/classChange/page.tsx index d93d374..a81beef 100644 --- a/src/app/classChange/page.tsx +++ b/src/app/classChange/page.tsx @@ -10,14 +10,15 @@ import Modal from "@/components/modal"; import { AcceptClass, AcceptClassChange } from "@/api/classChange"; import { FloorClass } from "@/api/type"; import ChangeClass from "@/components/classChange"; +import useAcceptListSelection from "@/hook/handleAcceptListClick"; const ClassChange = () => { const [selectedFloor, setSelectedFloor] = useState(2); const [data, setData] = useState([]); const [accept, setAccept] = useState(false); const [refuse, setRefuse] = useState(false); - const [selectedStudents, setSelectedStudents] = useState([]); - const [selectedStudentName, setSelectedStudentName] = useState([]); + const { selectedStudents, selectedStudentName, handleAcceptListClick } = + useAcceptListSelection(); const { data: AccpetMutate } = AcceptClassChange(selectedFloor); const { mutate: AccpetList } = AcceptClass(); @@ -46,28 +47,6 @@ const ClassChange = () => { } }, [AccpetMutate]); - const handleAcceptListClick = (id: string, name: string) => { - const isStudentSelected = selectedStudents.includes(id); - if (isStudentSelected) { - setSelectedStudents((prevSelectedStudents) => - prevSelectedStudents.filter((selectedStudent) => selectedStudent !== id) - ); - setSelectedStudentName((prevSelectedStudentName) => - prevSelectedStudentName.filter( - (selectedStudentName) => selectedStudentName !== name - ) - ); - } else { - setSelectedStudents((prevSelectedStudents) => [ - ...prevSelectedStudents, - id, - ]); - setSelectedStudentName((prevSelectedStudentName) => [ - ...prevSelectedStudentName, - name, - ]); - } - }; const nav = useRouter(); const handleFloorChange = (selectedOption: number) => { diff --git a/src/app/outAccept/page.tsx b/src/app/outAccept/page.tsx index 12ace6a..fd67815 100644 --- a/src/app/outAccept/page.tsx +++ b/src/app/outAccept/page.tsx @@ -6,6 +6,7 @@ import Button from "@/components/button"; import Dropdown from "@/components/dropdown"; import NonReturn from "@/components/list/application"; import Modal from "@/components/modal"; +import useAccepListSelection from "@/hook/handleAcceptListClick"; import { getFullToday } from "@/util/date"; import { getStudentString } from "@/util/util"; import React, { useEffect, useState } from "react"; @@ -15,10 +16,10 @@ const OutAccept = () => { const [applicationData, setApplicationData] = useState(); const [selectGrade, setSelectGrade] = useState(1); const [selectClass, setSelectClass] = useState(1); - const [selectedStudents, setSelectedStudents] = useState([]); const [acmodal, setAcModal] = useState(false); const [nomodal, setNomodal] = useState(false); - const [selectedStudentName, setSelectedStudentName] = useState([]); + const { selectedStudents, selectedStudentName, handleAcceptListClick } = + useAccepListSelection(); const { mutate: outAcceptMutate } = GetClass(); const { mutate: AcceptMutate } = OutAcceptApi(); @@ -96,29 +97,6 @@ const OutAccept = () => { } }; - const handleAcceptListClick = (id: string, name: string) => { - const isStudentSelected = selectedStudents.includes(id); - if (isStudentSelected) { - setSelectedStudents((prevSelectedStudents) => - prevSelectedStudents.filter((selectedStudent) => selectedStudent !== id) - ); - setSelectedStudentName((prevSelectedStudentName) => - prevSelectedStudentName.filter( - (selectedStudentName) => selectedStudentName !== name - ) - ); - } else { - setSelectedStudents((prevSelectedStudents) => [ - ...prevSelectedStudents, - id, - ]); - setSelectedStudentName((prevSelectedStudentName) => [ - ...prevSelectedStudentName, - name, - ]); - } - }; - const Accept = () => { if (selectedStudents.length === 0) { alert("외출 수락 할 학생을 선택해주세요"); diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx index 180b59d..e049c00 100644 --- a/src/components/button/index.tsx +++ b/src/components/button/index.tsx @@ -33,11 +33,8 @@ const Button: React.FC = ({ }) => { const getColorClass = () => { switch (colorType) { - case "primary": - return " rounded-lg bg-primary-200 text-primary-1000 focus:bg-primary-500 focus:border focus:border-primary-800 active:bg-primary-800"; - - case "secondary": - return " rounded-lg bg-secondary-200 text-secondary-1000 focus:bg-secondary-500 focus:border focus:border-secondary-800 active:bg-secondary-800"; + case "primary" || "secondary": + return ` rounded-lg bg-primary-200 text-primary-1000 focus:bg-primary-500 focus:border focus:border-primary-800 active:bg-${colorType}-800`; case "tertiary": return " rounded-lg bg-tertiary-500 text-primary-1200 focus:bg-tertiary-500 focus:border focus:border-tertiary-800 active:bg-tertiary-800"; diff --git a/src/hook/handleAcceptListClick.ts b/src/hook/handleAcceptListClick.ts new file mode 100644 index 0000000..71f0d01 --- /dev/null +++ b/src/hook/handleAcceptListClick.ts @@ -0,0 +1,39 @@ +import { useState } from "react"; + +interface AcceptListSelection { + selectedStudents: string[]; + selectedStudentName: string[]; + handleAcceptListClick: (id: string, name: string) => void; +} + +const useAcceptListSelection = (): AcceptListSelection => { + const [selectedStudents, setSelectedStudents] = useState([]); + const [selectedStudentName, setSelectedStudentName] = useState([]); + + const handleAcceptListClick = (id: string, name: string) => { + const isStudentSelected = selectedStudents.includes(id); + if (isStudentSelected) { + setSelectedStudents((prevSelectedStudents) => + prevSelectedStudents.filter((selectedStudent) => selectedStudent !== id) + ); + setSelectedStudentName((prevSelectedStudentName) => + prevSelectedStudentName.filter( + (selectedStudentName) => selectedStudentName !== name + ) + ); + } else { + setSelectedStudents((prevSelectedStudents) => [ + ...prevSelectedStudents, + id, + ]); + setSelectedStudentName((prevSelectedStudentName) => [ + ...prevSelectedStudentName, + name, + ]); + } + }; + + return { selectedStudents, selectedStudentName, handleAcceptListClick }; +}; + +export default useAcceptListSelection;