From 3945c337e33b0b9a11ea244a0816cbd5f943884d Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Fri, 7 Jun 2024 02:46:52 +0900
Subject: [PATCH 1/4] =?UTF-8?q?feat(#117):=20=EC=B2=B4=ED=97=98=ED=95=99?=
 =?UTF-8?q?=EC=8A=B5=20=EC=8B=A0=EC=B2=AD=EC=84=9C=20=EC=9E=91=EC=84=B1=20?=
 =?UTF-8?q?=ED=8C=9D=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../absentReason/form/page.tsx                |   6 +-
 .../parentReference/workStudy/form/page.tsx   |  26 +++-
 src/components/common/Calendar.tsx            |  13 +-
 .../school/parentReference/FormPopup.tsx      | 120 +++++++++++++-----
 4 files changed, 131 insertions(+), 34 deletions(-)

diff --git a/src/app/school/parentReference/absentReason/form/page.tsx b/src/app/school/parentReference/absentReason/form/page.tsx
index ad48ff0..852c018 100644
--- a/src/app/school/parentReference/absentReason/form/page.tsx
+++ b/src/app/school/parentReference/absentReason/form/page.tsx
@@ -33,7 +33,11 @@ const AbsentReasonForm = () => {
         />
       </ImageBox>
       {writeForm && (
-        <FormPopup onClose={handleWriteFormClick} setShowToast={setShowToast} />
+        <FormPopup
+          type="absent"
+          onClose={handleWriteFormClick}
+          setShowToast={setShowToast}
+        />
       )}
       {showToast && (
         <Toast
diff --git a/src/app/school/parentReference/workStudy/form/page.tsx b/src/app/school/parentReference/workStudy/form/page.tsx
index 6cb9ac8..4b719a1 100644
--- a/src/app/school/parentReference/workStudy/form/page.tsx
+++ b/src/app/school/parentReference/workStudy/form/page.tsx
@@ -4,8 +4,17 @@ import Button from "@/components/common/Button";
 import Topbar from "@/components/common/Topbar";
 import styled from "styled-components";
 import Image from "next/image";
+import { useState } from "react";
+import FormPopup from "@/components/school/parentReference/FormPopup";
+import Toast from "@/components/common/Toast";
 
 const WorkStudyForm = () => {
+  const [writeForm, setWriteForm] = useState(false);
+  const [showToast, setShowToast] = useState(false);
+  const handleWriteFormClick = () => {
+    setWriteForm(!writeForm);
+  };
+
   return (
     <Container>
       <div>
@@ -15,7 +24,7 @@ const WorkStudyForm = () => {
           작성을 시작해보세요
         </Title>
       </div>
-      <ImageBox style={{ width: "90%" }}>
+      <ImageBox style={{ width: "90%" }} onClick={handleWriteFormClick}>
         <Image
           src="/assets/school/workstudy_form.svg"
           alt="workstudy_form"
@@ -23,6 +32,21 @@ const WorkStudyForm = () => {
           objectFit="contain"
         />
       </ImageBox>
+      {writeForm && (
+        <FormPopup
+          type="work"
+          onClose={handleWriteFormClick}
+          setShowToast={setShowToast}
+        />
+      )}
+      {showToast && (
+        <Toast
+          message="제출이 완료되었어요!"
+          type="basic"
+          duration={3000}
+          onClose={() => setShowToast(false)}
+        />
+      )}
       <Button type={"gray"} text={"제출하기"} />
     </Container>
   );
diff --git a/src/components/common/Calendar.tsx b/src/components/common/Calendar.tsx
index bc5ab95..5968a47 100644
--- a/src/components/common/Calendar.tsx
+++ b/src/components/common/Calendar.tsx
@@ -12,11 +12,18 @@ import dayjs from "dayjs";
 export interface CalendarProps {
   value: string;
   onChange: (value: string) => void;
+  placeholder?: string;
   color?: "black";
   disabled?: boolean;
 }
 
-const Calendar = ({ value, onChange, color, disabled }: CalendarProps) => {
+const Calendar = ({
+  value,
+  onChange,
+  placeholder = "날짜를 선택해주세요",
+  color,
+  disabled,
+}: CalendarProps) => {
   const [date, setDate] = useState<dayjs.Dayjs | null>(null);
 
   const handleDateChange = (newDate: dayjs.Dayjs | null) => {
@@ -36,10 +43,10 @@ const Calendar = ({ value, onChange, color, disabled }: CalendarProps) => {
           <CustomInputContainer>
             <CalendarInput
               value={value}
-              placeholder="날짜를 선택해주세요"
+              placeholder={placeholder}
               onChange={() => {}}
               readonly={true}
-              color="black"
+              color={color}
               disabled={disabled}
             />
             <IconImage
diff --git a/src/components/school/parentReference/FormPopup.tsx b/src/components/school/parentReference/FormPopup.tsx
index 1a21a4c..9c933eb 100644
--- a/src/components/school/parentReference/FormPopup.tsx
+++ b/src/components/school/parentReference/FormPopup.tsx
@@ -5,9 +5,9 @@ import Button from "@/components/common/Button";
 import CustomInput from "@/components/common/CustomInput";
 import Calendar from "@/components/common/Calendar";
 import CustomTextarea from "@/components/common/CustomTextarea";
-import { useRouter } from "next/navigation";
 
 interface FormPopupProps {
+  type: "absent" | "work";
   onClose: () => void;
   setShowToast?: Dispatch<React.SetStateAction<boolean>>;
 }
@@ -15,16 +15,24 @@ interface FormPopupProps {
 const Reason = `결석 이유를 자세히 입력해주세요. \n예) 질병(감기, 독감, 복통, 장염, 설사, 골절, 생리통 등)\n경조사(결혼, 장례) 천재지변(지진, 폭우, 폭설, 폭풍, 해일 등) 기타`;
 
 const FormPopup = (props: FormPopupProps) => {
-  const { onClose, setShowToast } = props;
+  const { type, onClose, setShowToast } = props;
 
   const [grade, setGrade] = useState("");
   const [classNum, setClassNum] = useState("");
   const [studentNum, setStudentNum] = useState("");
   const [studentName, setStudentName] = useState("");
+
+  // 결석계
   const [reason, setReason] = useState("");
   const [date, setDate] = useState("");
   const [guardianName, setGuardianName] = useState("");
-  const router = useRouter();
+
+  // 체험학습
+  const [destination, setDestination] = useState("");
+  const [startDate, setStartDate] = useState("");
+  const [endDate, setEndDate] = useState("");
+  const [workContent, setWorkContent] = useState("");
+  const [workReason, setWorkReason] = useState("");
 
   const isButtonEnabled =
     grade &&
@@ -42,7 +50,11 @@ const FormPopup = (props: FormPopupProps) => {
 
   return (
     <>
-      <Popup onClose={onClose} title="결석계" height="668px">
+      <Popup
+        onClose={onClose}
+        title={type === "absent" ? "결석계" : "체험학습 신청서"}
+        height="668px"
+      >
         <ContentBox>
           <div>
             <SubTitle>학생의 학년 반 번호를 입력해주세요.</SubTitle>
@@ -73,31 +85,81 @@ const FormPopup = (props: FormPopupProps) => {
               onChange={(value: string) => setStudentName(value)}
             />
           </div>
-
-          <div>
-            <SubTitle>결석 사유 및 학부모 의견</SubTitle>
-            <CustomTextarea
-              value={reason}
-              placeholder={Reason}
-              onChange={(value: string) => setReason(value)}
-              height={96}
-            />
-          </div>
-
-          <div>
-            <SubTitle>작성 일자</SubTitle>
-            <Calendar value={date} onChange={setDate} />
-          </div>
-
-          <div>
-            <SubTitle>보호자 성함</SubTitle>
-            <CustomInput
-              value={guardianName}
-              placeholder={"보호자 성함을 입력해주세요"}
-              onChange={(value: string) => setGuardianName(value)}
-            />
-          </div>
-
+          {type === "absent" ? (
+            <>
+              <div>
+                <SubTitle>결석 사유 및 학부모 의견</SubTitle>
+                <CustomTextarea
+                  value={reason}
+                  placeholder={Reason}
+                  onChange={(value: string) => setReason(value)}
+                  height={96}
+                />
+              </div>
+
+              <div>
+                <SubTitle>작성 일자</SubTitle>
+                <Calendar value={date} onChange={setDate} />
+              </div>
+
+              <div>
+                <SubTitle>보호자 성함</SubTitle>
+                <CustomInput
+                  value={guardianName}
+                  placeholder={"보호자 성함을 입력해주세요"}
+                  onChange={(value: string) => setGuardianName(value)}
+                />
+              </div>
+            </>
+          ) : (
+            <>
+              <div>
+                <SubTitle>목적지를 입력해 주세요.</SubTitle>
+                <CustomTextarea
+                  value={destination}
+                  placeholder={
+                    "체험학습을 다녀올 목적지를 입력해 주세요.\n(ex. 일본, 제주도)"
+                  }
+                  onChange={(value: string) => setDestination(value)}
+                  height={62}
+                />
+              </div>
+
+              <div>
+                <SubTitle>기간</SubTitle>
+                <Calendar
+                  value={startDate}
+                  placeholder={"출발 날짜"}
+                  onChange={setStartDate}
+                />
+                <Calendar
+                  value={endDate}
+                  placeholder={"도착 날짜"}
+                  onChange={setEndDate}
+                />
+              </div>
+
+              <div>
+                <SubTitle>학습형태 및 내용</SubTitle>
+                <CustomInput
+                  value={workContent}
+                  placeholder={
+                    "체험학습 장소에서 새롭게 보고 느낄 내용을 작성해 주세요"
+                  }
+                  onChange={(value: string) => setWorkContent(value)}
+                />
+              </div>
+
+              <div>
+                <SubTitle>체험학습 사유</SubTitle>
+                <CustomInput
+                  value={workReason}
+                  placeholder={"체험학습 사유를 작성해 주세요"}
+                  onChange={(value: string) => setWorkReason(value)}
+                />
+              </div>
+            </>
+          )}
           <Button
             text="제출하기"
             onClick={handleButtonClick}

From 479767c0280654e6ea722ca772bdaf7bcbce28a7 Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Fri, 7 Jun 2024 02:47:28 +0900
Subject: [PATCH 2/4] =?UTF-8?q?design(#117):=20AllergyPopup=20=EB=AA=A8?=
 =?UTF-8?q?=EB=B0=94=EC=9D=BC=EB=B7=B0=20=EB=B0=98=EC=9D=91=ED=98=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/mypage/AllergyPopup.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/mypage/AllergyPopup.tsx b/src/components/mypage/AllergyPopup.tsx
index b5e633c..f6196a6 100644
--- a/src/components/mypage/AllergyPopup.tsx
+++ b/src/components/mypage/AllergyPopup.tsx
@@ -92,8 +92,9 @@ const ContentBox = styled.div`
 `;
 
 const CheckboxBox = styled.div`
+  width: 100%;
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   gap: 8px;
 `;
 

From 7d2b4722a20a2a282a0c0e9b2ed23c43c93e7d36 Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Fri, 7 Jun 2024 03:26:54 +0900
Subject: [PATCH 3/4] =?UTF-8?q?feat(#117):=20=EC=95=8C=EB=A0=88=EB=A5=B4?=
 =?UTF-8?q?=EA=B8=B0=20=EC=9C=A0=EB=B0=9C=EC=A0=95=EB=B3=B4=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8,=20=EB=A7=90?=
 =?UTF-8?q?=EC=A4=84=EC=9E=84=ED=91=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/mypage/children/page.tsx       | 25 ++++++++++++++++++++++---
 src/components/mypage/AllergyPopup.tsx | 26 ++++++++++++++++++++++----
 2 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/src/app/mypage/children/page.tsx b/src/app/mypage/children/page.tsx
index dc8e732..5f74d59 100644
--- a/src/app/mypage/children/page.tsx
+++ b/src/app/mypage/children/page.tsx
@@ -54,6 +54,7 @@ const MyPage = () => {
         (response) => {
           const data = response.data;
           setChild(data);
+          console.log("ckdkf", child.allergies);
         }
       );
     }
@@ -183,9 +184,14 @@ const MyPage = () => {
               hidden={true}
             />
             <KeywordItems>
-              {child.allergies?.map((allergies, index) => (
-                <KeywordItem key={index} keyword={allergies} />
-              ))}
+              {child.allergies
+                ?.slice(0, 3)
+                .map((allergies, index) => (
+                  <KeywordItem key={index} keyword={allergies} />
+                ))}
+              {child.allergies && child.allergies.length > 2 && (
+                <Omission>...</Omission>
+              )}
             </KeywordItems>
           </InputBox>
           {allergyPopup && (
@@ -305,3 +311,16 @@ const KeywordItems = styled.div`
   display: flex;
   gap: 10px;
 `;
+
+const Omission = styled.div`
+  width: auto;
+  display: flex;
+  padding: 6px 8px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+  background: rgba(255, 135, 0, 0.15);
+  color: ${theme.colors.primary500};
+  ${(props) => props.theme.fonts.caption1_b};
+  cursor: default;
+`;
diff --git a/src/components/mypage/AllergyPopup.tsx b/src/components/mypage/AllergyPopup.tsx
index f6196a6..b60bed2 100644
--- a/src/components/mypage/AllergyPopup.tsx
+++ b/src/components/mypage/AllergyPopup.tsx
@@ -1,4 +1,4 @@
-import { AllergyCategories } from "@/data/allergyData";
+import { AllergyCategories, allergiesData } from "@/data/allergyData";
 import Checkbox from "../common/Checkbox";
 import Popup from "../common/Popup";
 import Subtitle from "../signin/Subtitle";
@@ -21,8 +21,19 @@ const AllergyPopup = (props: AllergyProps) => {
     initialCheckedItems
   );
 
+  const getAllergyKey = (description: string) => {
+    const allergyData = allergiesData.find(
+      (data) => data.Description === description
+    );
+    return allergyData ? allergyData.Allergy : description;
+  };
+
   const handleCheckboxChange = (item: string) => {
-    setCheckedItems((prev) => ({ ...prev, [item]: !prev[item] }));
+    const allergyKey = getAllergyKey(item);
+    setCheckedItems((prev) => ({
+      ...prev,
+      [allergyKey]: !prev[allergyKey],
+    }));
   };
 
   const handleCheckComplete = () => {
@@ -30,7 +41,14 @@ const AllergyPopup = (props: AllergyProps) => {
     const selectedAllergy = Object.keys(checkedItems).filter(
       (item) => checkedItems[item]
     );
-    onUpdate(selectedAllergy);
+
+    const sortedAllergy = selectedAllergy.sort((a, b) => {
+      const aIndex = allergiesData.findIndex((data) => data.Allergy === a);
+      const bIndex = allergiesData.findIndex((data) => data.Allergy === b);
+      return aIndex - bIndex;
+    });
+
+    onUpdate(sortedAllergy);
     setModify(true);
     onClose();
   };
@@ -53,7 +71,7 @@ const AllergyPopup = (props: AllergyProps) => {
                     key={item}
                     label={item}
                     checkboxType="checkBtn"
-                    checked={checkedItems[item] || false}
+                    checked={checkedItems[getAllergyKey(item)] || false}
                     onChange={() => handleCheckboxChange(item)}
                   />
                 ))}

From a2de428624b3160e4d07087fcd342d8e35df474e Mon Sep 17 00:00:00 2001
From: yyypearl <hor629@naver.com>
Date: Fri, 7 Jun 2024 03:38:23 +0900
Subject: [PATCH 4/4] =?UTF-8?q?feat(#117):=20=EC=A0=9C=EC=B6=9C=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0=20=ED=83=80=EC=9E=85=EB=B3=84=20disabled=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../school/parentReference/FormPopup.tsx        | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/school/parentReference/FormPopup.tsx b/src/components/school/parentReference/FormPopup.tsx
index 9c933eb..a9b5f50 100644
--- a/src/components/school/parentReference/FormPopup.tsx
+++ b/src/components/school/parentReference/FormPopup.tsx
@@ -34,7 +34,7 @@ const FormPopup = (props: FormPopupProps) => {
   const [workContent, setWorkContent] = useState("");
   const [workReason, setWorkReason] = useState("");
 
-  const isButtonEnabled =
+  const isAbsentButtonEnabled =
     grade &&
     classNum &&
     studentNum &&
@@ -43,6 +43,17 @@ const FormPopup = (props: FormPopupProps) => {
     date &&
     guardianName;
 
+  const isWorkButtonEnabled =
+    grade &&
+    classNum &&
+    studentNum &&
+    studentName &&
+    destination &&
+    startDate &&
+    endDate &&
+    workContent &&
+    workReason;
+
   const handleButtonClick = () => {
     onClose();
     setShowToast && setShowToast(true);
@@ -163,7 +174,9 @@ const FormPopup = (props: FormPopupProps) => {
           <Button
             text="제출하기"
             onClick={handleButtonClick}
-            disabled={!isButtonEnabled}
+            disabled={
+              type === "absent" ? !isAbsentButtonEnabled : !isWorkButtonEnabled
+            }
           />
         </ContentBox>
       </Popup>