From 20bd410d7c2cb47c899f7fb82cf4fd368619e36f Mon Sep 17 00:00:00 2001 From: "SK\\ssssk" Date: Fri, 13 Sep 2024 10:44:06 +0900 Subject: [PATCH 1/4] =?UTF-8?q?fix:=20=EC=9D=B8=EC=9B=90,=20=EB=82=98?= =?UTF-8?q?=EC=9D=B4=20UI=20=EB=B2=84=ED=8A=BC=20=EB=B0=A9=EC=8B=9D?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../GatheringParticipantsFilterModal.tsx | 456 +++++++++--------- 1 file changed, 224 insertions(+), 232 deletions(-) diff --git a/src/components/gathering/createUpdate/editor/modal/GatheringParticipantsFilterModal.tsx b/src/components/gathering/createUpdate/editor/modal/GatheringParticipantsFilterModal.tsx index d0f9d75d..0a49f350 100644 --- a/src/components/gathering/createUpdate/editor/modal/GatheringParticipantsFilterModal.tsx +++ b/src/components/gathering/createUpdate/editor/modal/GatheringParticipantsFilterModal.tsx @@ -1,82 +1,60 @@ import { - SETTING_MODAL_SEX + SETTING_MODAL_SEX, } from "@/constants/gathering/GatheringConstant"; import "@/styles/reactDataRange.css"; import Image from "next/image"; -import Slider from "rc-slider"; -import "rc-slider/assets/index.css"; import { useState } from "react"; import { useFormContext } from "react-hook-form"; - interface IGatheringParticipantsFilterModalProps { closeModal: () => void; } +const SETTING_MODAL_AGE = { + 전체: { + startAge: 20, + endAge: 59, + }, + "20대": { + startAge: 20, + endAge: 29, + }, + "30대": { + startAge: 30, + endAge: 39, + }, + "40대": { + startAge: 40, + endAge: 49, + }, + "50대": { + startAge: 50, + endAge: 59, + }, +} -const GatheringParticipantsFilterModal = (props: IGatheringParticipantsFilterModalProps) => { +const GatheringParticipantsFilterModal = ( + props: IGatheringParticipantsFilterModalProps, +) => { const formContext = useFormContext(); - const [peopleCount, setPeopleCount] = useState(formContext.getValues("personCount") || 6); + const [peopleCount, setPeopleCount] = useState( + formContext.getValues("personCount") || 5, + ); const [sex, setSex] = useState(formContext.getValues("allowedSex")); - const [startAge, setStartAge] = useState(formContext.getValues("startAge") ? new Date().getFullYear() - formContext.getValues("startAge") : 20); - const [endAge, setEndAge] = useState(formContext.getValues("endAge") ? new Date().getFullYear() - formContext.getValues("endAge") : 59); - const [values, setValues] = useState([startAge, endAge]); - const markerPositions = [20, 25, 30, 35, 40, 45, 50, 55, 59]; - -const onClickDecreaseMinAge = () => { - let temp = Math.max(20, startAge - 1); - if (temp <= endAge) { - setStartAge(temp); - setValues((prev) => [temp, prev[1]]); - } -}; - -const onClickImproveMinAge = () => { - let temp = Math.min(endAge, startAge + 1); - setStartAge(temp); - setValues((prev) => [temp, prev[1]]); -}; - -const onClickDecreaseMaxAge = () => { - let temp = Math.max(startAge, endAge - 1); - setEndAge(temp); - setValues((prev) => [prev[0], temp]); -}; - -const onClickImproveMaxAge = () => { - let temp = Math.min(59, endAge + 1); - if (temp >= startAge) { - setEndAge(temp); - setValues((prev) => [prev[0], temp]); - } -}; - - const handleChange = (newValues: number[] | number) => { - const valuesArray = newValues as number[]; - setValues(valuesArray); - setStartAge(valuesArray[0]); - setEndAge(valuesArray[1]); - }; - - const handleMarkerClick = (age: number) => { - const distanceToStart = Math.abs(startAge - age); - const distanceToEnd = Math.abs(endAge - age); - - if (distanceToStart < distanceToEnd) { - // Update startAge if it's closer to the clicked age - const newStartAge = age; - setStartAge(newStartAge); - setValues([newStartAge, endAge]); - } else { - // Update endAge if it's closer to the clicked age - const newEndAge = age; - setEndAge(newEndAge); - setValues([startAge, newEndAge]); - } - }; + const [startAge, setStartAge] = useState( + formContext.getValues("startAge") + ? new Date().getFullYear() - formContext.getValues("startAge") + : 20, + ); + const [endAge, setEndAge] = useState( + formContext.getValues("endAge") + ? new Date().getFullYear() - formContext.getValues("endAge") + : 59, + ); + const [directInput, setDirectInput] = useState(false); const submitHandler = () => { - formContext.setValue("startAge", new Date().getFullYear() - startAge); - formContext.setValue("endAge", new Date().getFullYear() - endAge); + formContext.setValue("startAge", new Date().getFullYear() - (startAge || 0)); + formContext.setValue("endAge", new Date().getFullYear() - (endAge || 0)); formContext.setValue("personCount", peopleCount); formContext.setValue("allowedSex", sex); formContext.watch(); @@ -84,11 +62,28 @@ const onClickImproveMaxAge = () => { props.closeModal(); }; + const ageHandler = ({ + _startAge, + _endAge, + }: { + _startAge: number; + _endAge: number; + }) => { + setDirectInput(false); + if ((endAge || 0) + 1 == _startAge) { + setEndAge(_endAge); + } else if ((startAge || 0) - 1 == _endAge) { + setStartAge(_startAge); + } else { + setStartAge(_startAge); + setEndAge(_endAge); + } + }; return (
-

- 참여자 선택 -

-
-
+

참여자 선택

+
+
+
인원
-
인원
-
-
{peopleCount}
명 +
{ + setPeopleCount(peopleCount <= 2 ? 2 : peopleCount - 1); + }} + > + {peopleCount > 2 ? ( + {"minus-icon"} + ) : ( +
+ )}
-
-
- setPeopleCount(value)} - trackStyle={[ - { - backgroundColor: "#0d6efd", - height: 30, - }, - ]} - handleStyle={{ - height: 30, - width: 30, - borderRadius: 50, - borderColor: "#0d6efd00", - backgroundColor: "#ffffff00", - transform: "translate(-50%, 8px)", - opacity: 0, +
+
{peopleCount}
명 +
+
{ + setPeopleCount(peopleCount >= 10 ? 10 : peopleCount + 1); }} - railStyle={{ backgroundColor: "#ddd", height: 32 }} - /> + > + {peopleCount < 10 ? ( + {"plus-icon"} + ) : ( +
+ )} +
-
-
- 나이 -
-
- {new Date().getFullYear() - startAge} 년생 - {`(${startAge} 세)`} -
-
- {new Date().getFullYear() - endAge} 년생 - {`(${endAge} 세)`} -
-
- {/* 화살표 버튼 */} -
-
+
+
나이
+
+
+ {Object.entries(SETTING_MODAL_AGE).map((i) => ( - -
-
- - -
+ ))} +
-
- -
- = 56 - ? `calc(${((startAge - 20) / 39) * 100}% - 2rem)` - : `calc(${((startAge - 20) / 35) * 87.5}% - ${((((startAge - 20) / 35) * 87.5) / 100) * 2}rem)`, - width: - startAge >= 56 - ? endAge >= 56 - ? `calc(100% - (${((startAge - 20) / 39) * 100}% - 2rem - (${((59 - endAge) / 39) * 87.5}%))` - : `calc(100% - (${((startAge - 20) / 39) * 100}% - 2rem - (${((59 - endAge) / 39) * 87.5}%))` // 55 1 , 57 0.5, 59 0 - : endAge >= 55 - ? `calc(100% - (${((startAge - 20) / 35) * 87.5}% - ${((((startAge - 20) / 35) * 87.5) / 100) * 2}rem) - calc(calc(100% - 2rem) / 8 * ${59 - endAge} / 4 )` - : `calc(100% - (${((startAge - 20) / 35) * 87.5}% - ${((((startAge - 20) / 35) * 87.5) / 100) * 2}rem) - calc(calc(100% - 2rem) / 8 * ${55 - endAge + 5} / 5 )`, - }, - ]} - railStyle={{ - backgroundColor: "#ddd", - height: 32, - }} - /> -
- {markerPositions.map((age) => ( - - ))} + {new Date().getFullYear() - (endAge || 0)} 년생 +
+
-
성별 제한
+
+ 성별 제한 +
{Object.entries(SETTING_MODAL_SEX).map((i) => ( @@ -298,10 +285,15 @@ const onClickImproveMaxAge = () => {
-
+
)} {children} - +
, document.getElementById("modal-root") as HTMLElement, ); From da804d66cbb34b98ffcdd61e96219e101253067d Mon Sep 17 00:00:00 2001 From: "SK\\ssssk" Date: Fri, 13 Sep 2024 11:03:46 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=EB=AA=A8=EC=9E=84=20=ED=95=84?= =?UTF-8?q?=ED=84=B0=EB=A7=81=20=EB=82=98=EC=9D=B4=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EB=B0=A9=EC=8B=9D=EC=9C=BC=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../read/modal/GatheringFilterModal.tsx | 310 ++++++++---------- 1 file changed, 129 insertions(+), 181 deletions(-) diff --git a/src/components/gathering/read/modal/GatheringFilterModal.tsx b/src/components/gathering/read/modal/GatheringFilterModal.tsx index 7d728e48..fdfbca42 100644 --- a/src/components/gathering/read/modal/GatheringFilterModal.tsx +++ b/src/components/gathering/read/modal/GatheringFilterModal.tsx @@ -1,9 +1,9 @@ +import { SETTING_MODAL_AGE } from "@/constants/gathering/GatheringConstant"; import "@/styles/reactDataRange.css"; import { add, format } from "date-fns"; import ko from "date-fns/locale/ko"; import Image from "next/image"; import { useSearchParams } from "next/navigation"; -import Slider from "rc-slider"; import "rc-slider/assets/index.css"; import { useEffect, useState } from "react"; import { DateRangePicker, RangeKeyDict } from "react-date-range"; @@ -79,10 +79,10 @@ const GatheringFilterModal = ({closeModal}: IGatheringFilterModalProps) => { searchParams.get("location") || 0, ); const [sex, setSex] = useState(searchParams.get("allowedSex") || "ALL"); - const [startAge, setStartAge] = useState( + const [startAge, setStartAge] = useState( searchParams.get("startAge") ? Number(searchParams.get("startAge")) : 20, ); - const [endAge, setEndAge] = useState( + const [endAge, setEndAge] = useState( searchParams.get("endAge") ? Number(searchParams.get("endAge")) : 59, ); const [isFilterSchedule, setIsFilterSchedule] = useState((searchParams.get("startDate") || searchParams.get("endDate")) ? true : false); @@ -100,60 +100,25 @@ const GatheringFilterModal = ({closeModal}: IGatheringFilterModalProps) => { key: "selection", }, ]); - - const onClickDecreaseMinAge = () => { - let temp = Math.max(20, startAge - 1); - if (temp <= endAge) { - setStartAge(temp); - setValues((prev) => [temp, prev[1]]); - } - }; - - const onClickImproveMinAge = () => { - let temp = Math.min(endAge, startAge + 1); - setStartAge(temp); - setValues((prev) => [temp, prev[1]]); - }; - - const onClickDecreaseMaxAge = () => { - let temp = Math.max(startAge, endAge - 1); - setEndAge(temp); - setValues((prev) => [prev[0], temp]); - }; - - const onClickImproveMaxAge = () => { - let temp = Math.min(59, endAge + 1); - if (temp >= startAge) { - setEndAge(temp); - setValues((prev) => [prev[0], temp]); - } - }; - - const handleChange = (newValues: number[] | number) => { - const valuesArray = newValues as number[]; - setValues(valuesArray); - setStartAge(valuesArray[0]); - setEndAge(valuesArray[1]); - }; - - const handleMarkerClick = (age: number) => { - const distanceToStart = Math.abs(startAge - age); - const distanceToEnd = Math.abs(endAge - age); - - if (distanceToStart < distanceToEnd) { - // Update startAge if it's closer to the clicked age - const newStartAge = age; - setStartAge(newStartAge); - setValues([newStartAge, endAge]); + const [directInput, setDirectInput] = useState(false); + const ageHandler = ({ + _startAge, + _endAge, + }: { + _startAge: number; + _endAge: number; + }) => { + setDirectInput(false); + if ((endAge || 0) + 1 == _startAge) { + setEndAge(_endAge); + } else if ((startAge || 0) - 1 == _endAge) { + setStartAge(_startAge); } else { - // Update endAge if it's closer to the clicked age - const newEndAge = age; - setEndAge(newEndAge); - setValues([startAge, newEndAge]); + setStartAge(_startAge); + setEndAge(_endAge); } }; - const initFilterOptionHandler = () => { setLocation(0); setSex("ALL"); @@ -221,7 +186,7 @@ const GatheringFilterModal = ({closeModal}: IGatheringFilterModalProps) => { return (
-
-
- 나이 -
-
- {new Date().getFullYear() - startAge} 년생 - {`(${startAge} 세)`} -
-
- {new Date().getFullYear() - endAge} 년생 - {`(${endAge} 세)`} -
-
- {/* 화살표 버튼 */} -
-
- +
+
나이
+
+
+ {Object.entries(SETTING_MODAL_AGE).map((i) => ( -
-
- - -
+ ))} +
-
- -
- = 56 - ? `calc(${((startAge - 20) / 39) * 100}% - 2rem)` - : `calc(${((startAge - 20) / 35) * 87.5}% - ${((((startAge - 20) / 35) * 87.5) / 100) * 2}rem)`, - width: - startAge >= 56 - ? endAge >= 56 - ? `calc(100% - (${((startAge - 20) / 39) * 100}% - 2rem - (${((59 - endAge) / 39) * 87.5}%))` - : `calc(100% - (${((startAge - 20) / 39) * 100}% - 2rem - (${((59 - endAge) / 39) * 87.5}%))` // 55 1 , 57 0.5, 59 0 - : endAge >= 55 - ? `calc(100% - (${((startAge - 20) / 35) * 87.5}% - ${((((startAge - 20) / 35) * 87.5) / 100) * 2}rem) - calc(calc(100% - 2rem) / 8 * ${59 - endAge} / 4 )` - : `calc(100% - (${((startAge - 20) / 35) * 87.5}% - ${((((startAge - 20) / 35) * 87.5) / 100) * 2}rem) - calc(calc(100% - 2rem) / 8 * ${55 - endAge + 5} / 5 )`, - }, - ]} - railStyle={{ - backgroundColor: "#ddd", - height: 32, - }} - /> -
- {markerPositions.map((age, index) => ( - - ))} + {new Date().getFullYear() - (endAge || 0)} 년생 +
+