Merge pull request #73 from LikeLionHGU/eunju_style/#71

feat:목표 생성 모달 날짜 선택 토글 적용, 스타일 수정
LikeLionHGU · Aug 3, 2024 · 40c3424 · 40c3424
2 parents 3383845 + 380a41f
commit 40c3424
Show file tree

Hide file tree

Showing 4 changed files with 168 additions and 27 deletions.
diff --git a/src/homepage/component/goals/CreateGoalModal/CreateGoalModal.jsx b/src/homepage/component/goals/CreateGoalModal/CreateGoalModal.jsx
@@ -6,7 +6,12 @@ import { useRecoilValue } from "recoil";
 import { tokenState } from "../../../../atom/atom";
 import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
 import ImgUpload from "../../../../asset/Icon/ImgUpload.svg";
+import { Toggle } from "./Toggle";
 
+/* 
+- 이미지 업로드 부분 안됨
+- 날짜 선택 안해도 목표 설정 가능해야함
+ */
 const formatDate = (date) => {
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, "0");
@@ -15,12 +20,14 @@ const formatDate = (date) => {
 };
 
 function CreateGoalModal({ setIsModalOpen }) {
+  const [isDateSetting, setIsDateSetting] = useState(true);
   const csrfToken = useRecoilValue(tokenState);
 
   const [formData, setFormData] = useState({
     title: "",
     startDate: null,
     endDate: null,
+    thumbnail: "",
   });
 
   useEffect(() => {
@@ -87,13 +94,14 @@ function CreateGoalModal({ setIsModalOpen }) {
 
       // 이미지 파일이 존재할 경우에만 추가
       if (fileInputRef.current.files[0]) {
-        formDataToSend.append("image", fileInputRef.current.files[0]);
+        formDataToSend.append("thumbnail", fileInputRef.current.files[0]);
       }
       await createGoal(formDataToSend, csrfToken);
       closeCreateGoalModal();
     } catch (error) {
       console.error("목표 생성 실패", error);
     }
+    window.location.reload();
   };
 
   return (
@@ -118,20 +126,39 @@ function CreateGoalModal({ setIsModalOpen }) {
                 name="title"
                 value={formData.title}
                 onChange={handleChange}
+                required
               />
             </GoalTitleContainer>
-            <PeriodContainer>
-              <DateRangePicker
-                startDate={formData.startDate}
-                setStartDate={handleStartDateChange}
-                endDate={formData.endDate}
-                setEndDate={handleEndDateChange}
+            <NoPeriodContainer>
+              <DatePickText>
+                <div>
+                  기간
+                  {isDateSetting ? (
+                    <span style={{ color: "red" }}>*</span>
+                  ) : null}
+                </div>
+                <div className="date-pick-explain">
+                  목표 진행 기간을 설정할 수 있어요!
+                </div>
+              </DatePickText>
+
+              <Toggle
+                setIsDateSetting={setIsDateSetting}
+                isDateSetting={isDateSetting}
               />
-              <NoPeriodContainer>
-                <Checkbox type="checkbox" />
-                <CheckboxText>종료일을 설정하지 않을래요!</CheckboxText>
-              </NoPeriodContainer>
-            </PeriodContainer>
+              {/* <Checkbox type="checkbox" />
+                <CheckboxText>종료일을 설정하지 않을래요!</CheckboxText> */}
+            </NoPeriodContainer>
+            {isDateSetting && (
+              <PeriodContainer>
+                <DateRangePicker
+                  startDate={formData.startDate}
+                  setStartDate={handleStartDateChange}
+                  endDate={formData.endDate}
+                  setEndDate={handleEndDateChange}
+                />
+              </PeriodContainer>
+            )}
             <ImgContainer>
               <ExplainText>사진</ExplainText>
               <ImageUpload onClick={handleImageUploadClick}>
@@ -206,14 +233,19 @@ const Overlay = styled.div`
 `;
 
 const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: #ffffff;
   width: 431px;
-  height: 580px;
+  /* height: 580px; */
+  min-height: 440px;
+  /* max-height: 580px; */
   border-radius: 12px;
+  cursor: default;
 `;
 
 const TopContainer = styled.div`
@@ -225,6 +257,7 @@ const TopContainer = styled.div`
 `;
 
 const TopText = styled.div`
+  display: flex;
   font-size: 18px;
   font-weight: bold;
   position: absolute;
@@ -248,7 +281,7 @@ const ExitButton = styled.div`
 const MainContainer = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: center;
+  /* align-items: center; */
   margin-top: 32px;
 `;
 
@@ -259,17 +292,35 @@ const GoalTitleContainer = styled.div`
 `;
 
 const ExplainText = styled.div`
+  display: flex;
   font-size: 12px;
+  margin-left: 24px;
   margin-right: auto;
 `;
-
+const DatePickText = styled.div`
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
+  /* border: 2px solid black; */
+  margin-top: 16px;
+  margin-left: 24px;
+  .date-pick-explain {
+    color: #676767;
+    font-size: 12px;
+    margin-top: 5px;
+  }
+`;
 const GoalTitleInput = styled.input`
   width: 373px;
   height: 45px;
   margin-top: 6px;
   border-radius: 8px;
   border: 1px solid #dfdfdf;
   padding-left: 12px;
+  outline: none;
+  &:focus {
+    border: 1px solid #676767;
+  }
 `;
 
 const PeriodContainer = styled.div`
@@ -280,8 +331,14 @@ const PeriodContainer = styled.div`
 
 const NoPeriodContainer = styled.div`
   display: flex;
-  margin-right: auto;
+  /* flex: 1; */
+  width: 100%;
+  justify-content: space-between;
+  /* justify-content: center; */
+  /* padding-left: 12px;
+  padding-right: 12px; */
   margin-top: 3px;
+  /* border: 2px solid green; */
 `;
 
 const Checkbox = styled.input`
@@ -330,4 +387,10 @@ const SubmitButton = styled.div`
   margin-left: auto;
   margin-right: 20px;
   border-radius: 8px;
+  margin-bottom: 18px;
+  cursor: pointer;
+
+  &:active {
+    background-color: #586eff;
+  }
 `;
diff --git a/src/homepage/component/goals/CreateGoalModal/DateRangePicker.jsx b/src/homepage/component/goals/CreateGoalModal/DateRangePicker.jsx
@@ -6,22 +6,24 @@ import GoalViewDropdown from "../../../../asset/Icon/GoalViewDropdown.svg";
 
 const CustomInputStart = forwardRef(({ value, onClick }, ref) => (
   <StyledButton onClick={onClick} ref={ref}>
-    {value || <span style={{ color: "#676767" }}>시작일</span>} <img src={GoalViewDropdown} alt="" />
+    {value || <span style={{ color: "#676767" }}>시작일</span>}{" "}
+    <img src={GoalViewDropdown} alt="" />
   </StyledButton>
 ));
 
 const CustomInputEnd = forwardRef(({ value, onClick }, ref) => (
   <StyledButton onClick={onClick} ref={ref} style={{ marginLeft: "7px" }}>
-    {value || <span style={{ color: "#676767" }}>종료일</span>} <img src={GoalViewDropdown} alt="" />
+    {value || <span style={{ color: "#676767" }}>종료일</span>}{" "}
+    <img src={GoalViewDropdown} alt="" />
   </StyledButton>
 ));
 
 function DateRangePicker({ startDate, setStartDate, endDate, setEndDate }) {
   return (
     <PeriodContainer>
-      <ExplainText>
+      {/* <ExplainText>
         기간<span style={{ color: "red" }}>*</span>
-      </ExplainText>
+      </ExplainText> */}
       <DateInputs>
         <StyledDatePicker
           dateFormat="yyyy-MM-dd"
@@ -49,7 +51,7 @@ const PeriodContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  margin-top: 16px;
+  margin-top: 6px;
 `;
 
 const ExplainText = styled.div`

diff --git a/src/homepage/component/goals/CreateGoalModal/Toggle.jsx b/src/homepage/component/goals/CreateGoalModal/Toggle.jsx
@@ -0,0 +1,58 @@
+import { useState } from "react";
+import styled from "styled-components";
+
+export const Toggle = ({ setIsDateSetting, isDateSetting }) => {
+  const [isOn, setisOn] = useState(true); // 맨 처음에는 true로 토글 버튼 눌린 상태
+
+  const toggleHandler = () => {
+    // 토글의 상태 관리
+    setisOn(!isOn);
+    setIsDateSetting(!isDateSetting);
+  };
+
+  return (
+    <>
+      <ToggleContainer onClick={toggleHandler}>
+        <div
+          className={`toggle-container ${isOn ? "toggle--checked" : null}`}
+        />
+        <div className={`toggle-circle ${isOn ? "toggle--checked" : null}`} />
+      </ToggleContainer>
+    </>
+  );
+};
+
+const ToggleContainer = styled.div`
+  display: flex;
+  position: relative;
+  margin-right: 24px;
+  margin-top: 16px;
+
+  cursor: pointer;
+  /* border: 2px solid red; */
+  > .toggle-container {
+    width: 40px;
+    height: 20px;
+    border-radius: 30px;
+    background-color: rgb(233, 233, 234);
+  }
+  > .toggle--checked {
+    background-color: #798bff;
+    transition: 0.5s;
+  }
+
+  > .toggle-circle {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background-color: rgb(255, 255, 255);
+    transition: 0.4s;
+  }
+  > .toggle--checked {
+    left: 22px;
+    transition: 0.4s;
+  }
+`;
diff --git a/src/homepage/component/topMenu/GoalViewDropdown.jsx b/src/homepage/component/topMenu/GoalViewDropdown.jsx
@@ -33,20 +33,37 @@ function GoalViewDropdown({ currentSort, setCurrentSort }) {
     <DropdownContainer ref={dropdownRef}>
       <Wrapper onClick={toggleDropdown}>
         <div style={{ marginLeft: "12px" }}>{currentSort}</div>
-        <Icon src={GoalViewDropdownIcon} alt="Dropdown Icon" isOpen={isDropdownOpen} />
+        <Icon
+          src={GoalViewDropdownIcon}
+          alt="Dropdown Icon"
+          isDropdownOpen={isDropdownOpen}
+        />
       </Wrapper>
-      <CSSTransition in={isDropdownOpen} timeout={300} classNames="dropdown" unmountOnExit>
+      <CSSTransition
+        in={isDropdownOpen}
+        timeout={300}
+        classNames="dropdown"
+        unmountOnExit
+      >
         <DropdownMenu>
-          {currentSort !== "최신순" && <DropdownItem onClick={() => handleOptionClick("최신순")}>최신순</DropdownItem>}
+          {currentSort !== "최신순" && (
+            <DropdownItem onClick={() => handleOptionClick("최신순")}>
+              최신순
+            </DropdownItem>
+          )}
           {currentSort !== "오름차순" && (
             <>
-              <DropdownItem onClick={() => handleOptionClick("오름차순")}>오름차순</DropdownItem>
+              <DropdownItem onClick={() => handleOptionClick("오름차순")}>
+                오름차순
+              </DropdownItem>
             </>
           )}
           {currentSort !== "내림차순" && (
             <>
               <Separator />
-              <DropdownItem onClick={() => handleOptionClick("내림차순")}>내림차순</DropdownItem>
+              <DropdownItem onClick={() => handleOptionClick("내림차순")}>
+                내림차순
+              </DropdownItem>
             </>
           )}
         </DropdownMenu>
@@ -98,7 +115,8 @@ const Wrapper = styled.div`
 
 const Icon = styled.img`
   transition: transform 0.3s;
-  transform: ${({ isOpen }) => (isOpen ? "rotate(180deg)" : "rotate(0deg)")};
+  transform: ${({ isDropdownOpen }) =>
+    isDropdownOpen ? "rotate(180deg)" : "rotate(0deg)"};
   margin-right: 10px;
 `;