Merge pull request #218 from AngelaChaejung/Refactor-ScheduleAdd

dong-fa · web-flow · commit 0b131b9b3087 · 2023-05-01T23:25:34.000+09:00
Refactor 1. custom hook 추가 (scheduleAdd component) 2. 모달 열기방식 수정(테스트로 kebob modal만 작업)
diff --git a/src/components/Schedule/ScheduleDetail.jsx b/src/components/Schedule/ScheduleDetail.jsx
@@ -45,7 +45,7 @@ const ScheduleDetail = () => {
           {/* 케밥모달이 열리면 bottomNavi는 사라집니다 */}
           {modalOpen ? false : <BottomNavi />}
         </div>
-        {modalOpen && <KebabModal setModalOpen={setModalOpen} id={id} />}
+        {<KebabModal modalOpen={modalOpen} setModalOpen={setModalOpen} id={id} />}
         <div
           className={`h-[202px] bg-${schedule.cardColor} pl-[18px] w-[375px] pt-[23px] pr-[21px] text-white align-
            `}
diff --git a/src/components/login/EmailLogin.jsx b/src/components/login/EmailLogin.jsx
@@ -36,8 +36,7 @@ const EmailLogin = () => {
   });
 
   //이메일, 비밀번호 정규 표현식
-  const emailRegulationExp =
-    /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
+  const emailRegulationExp = /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
   const passwordRegulationExp = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/;
 
   //유효성검사
@@ -136,11 +135,7 @@ const EmailLogin = () => {
         <div className="grid grid-rows pt-[100px]">
           <div className="h-[150px]">
             <div className="mx-auto w-[150px] h-[64px] overflow-hidden gap-[10px] ">
-              <img
-                src={gnimsLogo}
-                alt="곰캐릭터가 우쭐거리며 왠지 잘될 것 같은 기분포즈 중"
-                className="w-full h-full "
-              />
+              <img src={gnimsLogo} alt="" className="w-full h-full " />
             </div>
           </div>
           <form className="mt-[-40px]">
@@ -187,7 +182,7 @@ const EmailLogin = () => {
                     hidden={regulation.regulationPassword}
                     // hidden={false}
                   >
-                    8글자이상 영문숫자 조합으로 입려해주세요.
+                    8글자이상 영문숫자 조합으로 입력해주세요.
                   </p>
                 </div>
               </div>
@@ -220,18 +215,14 @@ const EmailLogin = () => {
           <div className="hr-sect">
             <div>간편 로그인</div>
           </div>
-          <div className="flex gap-[110px] mx-auto h-[100px] mt-[46px]">
+          <div className="flex gap-[110px] mx-auto h-[100px] mt-[46px] mb-[28px]">
             <div className="text-center ">
               <NaverLogin />
-              <p className="mt-[20px] text-[#12396F] font-[400] text-[14px]">
-                네이버
-              </p>
+              <p className="mt-[20px] text-[#12396F] font-[400] text-[14px]">네이버</p>
             </div>
             <div className="text-center">
               <KakaoLogin onEvent={onClickKakaoLongin} img={kakaologo} />
-              <p className="mt-[20px] text-[#12396F] font-[400] text-[14px]">
-                카카오
-              </p>
+              <p className="mt-[20px] text-[#12396F] font-[400] text-[14px]">카카오</p>
             </div>
           </div>
           <IsModal onMoalClose={onMoalClose} message={{ ModalStr }} />
diff --git a/src/components/modal/KebabButtonModal.jsx b/src/components/modal/KebabButtonModal.jsx
@@ -7,7 +7,7 @@ import { useDispatch } from "react-redux";
 import { __deleteSchedule } from "../../redux/modules/ScheduleSlice";
 import { motion } from "framer-motion";
 
-const KebabModal = ({ setModalOpen, id }) => {
+const KebabModal = ({ setModalOpen, id, modalOpen }) => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const scheduleEditHandler = () => {
@@ -39,55 +39,57 @@ const KebabModal = ({ setModalOpen, id }) => {
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
   return (
     <>
-      <motion.div
-        variants={list}
-        initial="hidden"
-        animate="visible"
-        className="h-full w-[375px] bg-black bg-opacity-50  justify-center fixed bottom-0 z-10 flex"
-      >
-        {deleteModalOpen ? (
-          <div className="text-black pt-8 items-center w-[300px] h-[167px] text-center rounded-[16px] fixed top-[38%] z-20 bg-white ">
-            <div className="text-[18px] font-bold flex flex-col ">해당 일정을 삭제하시겠습니까? </div>
-            <div className="mt-[14px] text-[14px] text-[#6F6F6F]">삭제된 일정은 복구가 불가능합니다.</div>
-            <button
-              className="bg-[#A31414] rounded-[4px]  h-[40px] w-[127px] text-white mt-[18px]"
-              onClick={confirmDeleteHandler}
-            >
-              삭제
-            </button>
-            <button
-              className="ml-[14px] h-[40px] rounded-[4px] border-solid border-black border-[1px] w-[127px] text-black mt-[18px]"
-              onClick={() => setDeleteModalOpen(false)}
-            >
-              취소
-            </button>
-          </div>
-        ) : (
-          //이하는 모두 케밥버튼눌렀을 때 수정&삭제 모달
-          <motion.div variants={item} className=" bottom-0 w-[375px] h-[205px] rounded-t-lg bg-white fixed ">
-            <div className="h-[25px]  pt-[11px]">
-              <img src={barIcon} alt="bar" className="w-[80px] h-[3px] m-auto" />
+      {modalOpen && (
+        <motion.div
+          variants={list}
+          initial="hidden"
+          animate="visible"
+          className="h-full w-[375px] bg-black bg-opacity-50  justify-center fixed bottom-0 z-10 flex"
+        >
+          {deleteModalOpen ? (
+            <div className="text-black pt-8 items-center w-[300px] h-[167px] text-center rounded-[16px] fixed top-[38%] z-20 bg-white ">
+              <div className="text-[18px] font-bold flex flex-col ">해당 일정을 삭제하시겠습니까? </div>
+              <div className="mt-[14px] text-[14px] text-[#6F6F6F]">삭제된 일정은 복구가 불가능합니다.</div>
+              <button
+                className="bg-[#A31414] rounded-[4px]  h-[40px] w-[127px] text-white mt-[18px]"
+                onClick={confirmDeleteHandler}
+              >
+                삭제
+              </button>
+              <button
+                className="ml-[14px] h-[40px] rounded-[4px] border-solid border-black border-[1px] w-[127px] text-black mt-[18px]"
+                onClick={() => setDeleteModalOpen(false)}
+              >
+                취소
+              </button>
             </div>
-            <div
-              onClick={scheduleEditHandler}
-              className="cursor-pointer text-[#121213] font-bold pt-[23px] h-[60px] flex row border-solid border-[rgb(226,226,226)] border-b-[1px]"
-            >
-              <img src={editIcon} alt="edit" className="w-[18px] h-[18px] ml-[30px] mr-[20px]" />
-              수정
-            </div>
-            <div
-              onClick={scheduleDeleteHandler}
-              className="cursor-pointer text-[#A31414] font-bold pt-[23px] h-[60px] flex row border-solid border-[rgb(226,226,226)] border-b-[1px]"
-            >
-              <img src={deleteIcon} alt="delete" className="w-[24px] h-[24px] ml-[30px] mr-[20px] z-0" />
-              삭제
-            </div>
-            <div className="cursor-pointer m-auto text-center pt-[22px] h-[60px] font-bold" onClick={closeModal}>
-              닫기
-            </div>
-          </motion.div>
-        )}
-      </motion.div>
+          ) : (
+            //이하는 모두 케밥버튼눌렀을 때 수정&삭제 모달
+            <motion.div variants={item} className=" bottom-0 w-[375px] h-[205px] rounded-t-lg bg-white fixed ">
+              <div className="h-[25px]  pt-[11px]">
+                <img src={barIcon} alt="bar" className="w-[80px] h-[3px] m-auto" />
+              </div>
+              <div
+                onClick={scheduleEditHandler}
+                className="cursor-pointer text-[#121213] font-bold pt-[23px] h-[60px] flex row border-solid border-[rgb(226,226,226)] border-b-[1px]"
+              >
+                <img src={editIcon} alt="edit" className="w-[18px] h-[18px] ml-[30px] mr-[20px]" />
+                수정
+              </div>
+              <div
+                onClick={scheduleDeleteHandler}
+                className="cursor-pointer text-[#A31414] font-bold pt-[23px] h-[60px] flex row border-solid border-[rgb(226,226,226)] border-b-[1px]"
+              >
+                <img src={deleteIcon} alt="delete" className="w-[24px] h-[24px] ml-[30px] mr-[20px] z-0" />
+                삭제
+              </div>
+              <div className="cursor-pointer m-auto text-center pt-[22px] h-[60px] font-bold" onClick={closeModal}>
+                닫기
+              </div>
+            </motion.div>
+          )}
+        </motion.div>
+      )}
     </>
   );
 };
diff --git a/src/components/schedule/ScheduleAdd.jsx b/src/components/schedule/ScheduleAdd.jsx
@@ -2,19 +2,21 @@ import React, { useEffect, useState } from "react";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { useDispatch, useSelector } from "react-redux";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { scheduleReset, __postSchedule, __editSchedule, __getScheduleDetail } from "../../redux/modules/ScheduleSlice";
 import FollowingModal from "../modal/FollowingModal";
 import ScheduleAddModal from "../modal/ScheduleAddModal";
 import ScheduleModal from "../modal/ScheduleModal";
+import useCardColorSelector from "../../customHook/useCardColorSelector";
 
 // state.type:"add" 은 스케줄 추가, state.type:edit은 수정
 const ScheduleAdd = () => {
   const dispatch = useDispatch();
-  const navigate = useNavigate();
+
   //스케줄 추가, 수정 분기를 결정할 state 값을 받아옴
   const { state } = useLocation();
 
+  const { border, colorSelected, eventHandler } = useCardColorSelector();
   useEffect(() => {
     if (state.type === "edit") {
       dispatch(__getScheduleDetail(state.id));
@@ -36,51 +38,16 @@ const ScheduleAdd = () => {
     state.type === "edit" ? new Date(oldSchedule.date + "T" + oldSchedule.time) : ""
   );
 
-  const [selectedColor, setColorSelected] = useState(state.type === "edit" ? oldSchedule.cardColor : "sora");
-
   //제목
   const [subject, setSubject] = useState(state.type === "edit" ? oldSchedule.subject : "");
 
   //내용
   const [content, setContent] = useState(state.type === "edit" ? oldSchedule.content : "");
 
-  const [borderSora, setBorderSora] = useState(
-    state.type !== "edit"
-      ? "border-blackBorder"
-      : oldSchedule.cardColor === "sora"
-      ? "border-blackBorder"
-      : "border-none"
-  );
-  const [borderPink, setBorderPink] = useState(
-    state.type !== "edit" ? "border-none" : oldSchedule.cardColor === "pink" ? "border-blackBorder" : "border-none"
-  );
-  const [borderGreen, setBorderGreen] = useState(
-    state.type !== "edit" ? "border-none" : oldSchedule.cardColor === "green" ? "border-blackBorder" : "border-none"
-  );
-
   //완료모달&경고모달
   const [modalOpen, setModalOpen] = useState(false);
   const [completeModal, setCompleteModal] = useState(false);
 
-  //색상지정시 카드의 백그라운드컬러가 바뀌면서 selectedColor에 값이 입혀진다.
-  const eventHandlerSora = () => {
-    setColorSelected("sora");
-    setBorderSora("border-blackBorder");
-    setBorderPink("border-none");
-    setBorderGreen("border-none");
-  };
-  const eventHandlerPink = () => {
-    setColorSelected("pink");
-    setBorderSora("border-none");
-    setBorderPink("border-blackBorder");
-    setBorderGreen("border-none");
-  };
-  const eventHandlerGreen = () => {
-    setColorSelected("green");
-    setBorderSora("border-none");
-    setBorderPink("border-none");
-    setBorderGreen("border-blackBorder");
-  };
   //일정의 제목과 내용, 참여자 onChangeHandler
   const onSubjectChangeHandler = (e) => {
     setSubject(e.target.value);
@@ -105,7 +72,7 @@ const ScheduleAdd = () => {
 
     if (subject.length > 0 && [selectedDate].toString().length > 0) {
       const newSchedule = {
-        cardColor: selectedColor,
+        cardColor: colorSelected,
         date: date,
         time: time,
         subject: subject,
@@ -152,20 +119,20 @@ const ScheduleAdd = () => {
                 카드 테마 색상
                 <div className="flex flex-row mt-4 ">
                   <div
-                    className={`${borderSora} border-solid border-[4px] cursor-pointer rounded-[4px] w-[42px] h-[42px] bg-sora`}
-                    onClick={eventHandlerSora}
+                    className={`${border.sora} border-solid border-[4px] cursor-pointer rounded-[4px] w-[42px] h-[42px] bg-sora`}
+                    onClick={() => eventHandler("sora")}
                   >
                     {""}
                   </div>
                   <div
-                    className={`${borderPink} border-solid border-[4px] cursor-pointer rounded-[4px] ml-[17px] w-[42px] h-[42px] bg-pink`}
-                    onClick={eventHandlerPink}
+                    className={`${border.pink} border-solid border-[4px] cursor-pointer rounded-[4px] ml-[17px] w-[42px] h-[42px] bg-pink`}
+                    onClick={() => eventHandler("pink")}
                   >
                     {""}
                   </div>
                   <div
-                    className={`${borderGreen} border-solid border-[4px] cursor-pointer rounded-[4px] ml-[17px] w-[42px] h-[42px] bg-green`}
-                    onClick={eventHandlerGreen}
+                    className={`${border.green} border-solid border-[4px] cursor-pointer rounded-[4px] ml-[17px] w-[42px] h-[42px] bg-green`}
+                    onClick={() => eventHandler("green")}
                   >
                     {""}
                   </div>
diff --git a/src/components/schedule/ScheduleDetail.jsx b/src/components/schedule/ScheduleDetail.jsx
@@ -45,7 +45,7 @@ const ScheduleDetail = () => {
           {/* 케밥모달이 열리면 bottomNavi는 사라집니다 */}
           {modalOpen ? false : <BottomNavi />}
         </div>
-        {modalOpen && <KebabModal setModalOpen={setModalOpen} id={id} />}
+        {<KebabModal modalOpen={modalOpen} setModalOpen={setModalOpen} id={id} />}
         <div
           className={`h-[202px] bg-${schedule.cardColor} pl-[18px] w-[375px] pt-[23px] pr-[21px] text-white align-
            `}
diff --git a/src/customHook/useCardColorSelector.jsx b/src/customHook/useCardColorSelector.jsx
@@ -0,0 +1,31 @@
+import { useState } from "react";
+
+const useCardColorSelector = () => {
+  const [border, setBorder] = useState({
+    sora: "border-blackBorder",
+    pink: "border-none",
+    green: "border-none",
+  });
+  const [colorSelected, setColorSelected] = useState("");
+
+  // 뭐 하나를 클릭했을때 그친구만 보더를 바꾸고, 다른 친구들은 보더를 없앤다.
+  // a를 클릭했을 때 클릭함수의 매개변수로 a를 줘서 그걸 useCardColorSelector까지 전달한다.
+  // 모든 보더를 제거하고 a만 보더를 준다.
+
+  const eventHandler = (color) => {
+    setColorSelected(color);
+    setBorder({
+      sora: "border-none",
+      pink: "border-none",
+      green: "border-none",
+    });
+    setBorder((prev) => ({ ...prev, [color]: "border-blackBorder" }));
+  };
+
+  return {
+    border,
+    colorSelected,
+    eventHandler,
+  };
+};
+export default useCardColorSelector;
