Merge pull request #118 from Kusitms-29th-ASAP/feat/#117

[Feat] 체험학습 신청서 작성, 마이페이지 알러지 설정
Kusitms-29th-ASAP · Jun 6, 2024 · ac405b2 · ac405b2
2 parents 460c2c2 + a2de428
commit ac405b2
Show file tree

Hide file tree

Showing 6 changed files with 192 additions and 44 deletions.
diff --git 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/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
@@ -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,14 +24,29 @@ const WorkStudyForm = () => {
           작성을 시작해보세요
         </Title>
       </div>
-      <ImageBox style={{ width: "90%" }}>
+      <ImageBox style={{ width: "90%" }} onClick={handleWriteFormClick}>
         <Image
           src="/assets/school/workstudy_form.svg"
           alt="workstudy_form"
           layout="fill"
           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
@@ -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/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,16 +21,34 @@ 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 = () => {
     /* 체크정보 저장 */
     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)}
                   />
                 ))}
@@ -92,8 +110,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;
 `;
 

diff --git a/src/components/school/parentReference/FormPopup.tsx b/src/components/school/parentReference/FormPopup.tsx
@@ -5,28 +5,36 @@ 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>>;
 }
 
 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 isButtonEnabled =
+  // 체험학습
+  const [destination, setDestination] = useState("");
+  const [startDate, setStartDate] = useState("");
+  const [endDate, setEndDate] = useState("");
+  const [workContent, setWorkContent] = useState("");
+  const [workReason, setWorkReason] = useState("");
+
+  const isAbsentButtonEnabled =
     grade &&
     classNum &&
     studentNum &&
@@ -35,14 +43,29 @@ const FormPopup = (props: FormPopupProps) => {
     date &&
     guardianName;
 
+  const isWorkButtonEnabled =
+    grade &&
+    classNum &&
+    studentNum &&
+    studentName &&
+    destination &&
+    startDate &&
+    endDate &&
+    workContent &&
+    workReason;
+
   const handleButtonClick = () => {
     onClose();
     setShowToast && setShowToast(true);
   };
 
   return (
     <>
-      <Popup onClose={onClose} title="결석계" height="668px">
+      <Popup
+        onClose={onClose}
+        title={type === "absent" ? "결석계" : "체험학습 신청서"}
+        height="668px"
+      >
         <ContentBox>
           <div>
             <SubTitle>학생의 학년 반 번호를 입력해주세요.</SubTitle>
@@ -73,35 +96,87 @@ 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}
-            disabled={!isButtonEnabled}
+            disabled={
+              type === "absent" ? !isAbsentButtonEnabled : !isWorkButtonEnabled
+            }
           />
         </ContentBox>
       </Popup>