From 57df4eb9a0a0ba2388af943d2eb464ab7102b79e Mon Sep 17 00:00:00 2001 From: "SK\\ssssk" Date: Fri, 6 Sep 2024 02:24:33 +0900 Subject: [PATCH] =?UTF-8?q?style:=20=EB=AA=A8=EC=9E=84=20=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=ED=95=84=ED=84=B0=EC=97=90=20=EB=82=98=EC=9D=B4=20?= =?UTF-8?q?=EC=84=A0=ED=83=9D=20=EB=B6=80=EB=B6=84,=20=EB=93=9C=EB=9E=98?= =?UTF-8?q?=EA=B7=B8=EB=B0=94=20=ED=98=95=ED=83=9C=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../gathering/GatheringFilterModal.tsx | 445 +++++++++++------- 1 file changed, 280 insertions(+), 165 deletions(-) diff --git a/src/components/gathering/GatheringFilterModal.tsx b/src/components/gathering/GatheringFilterModal.tsx index 6e46b775..40b47598 100644 --- a/src/components/gathering/GatheringFilterModal.tsx +++ b/src/components/gathering/GatheringFilterModal.tsx @@ -3,9 +3,10 @@ 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"; - interface IGatheringFilterModalProps { closeModal: () => void; } @@ -63,28 +64,8 @@ const SEX = [ ["남성", "MALE"], ["여성", "FEMALE"], ]; -const 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 markerPositions = [20, 25, 30, 35, 40, 45, 50, 55, 59]; function calculateDateDifference(startDate: Date, endDate: Date): number { const differenceInTime = endDate.getTime() - startDate.getTime(); @@ -105,6 +86,9 @@ const GatheringFilterModal = ({closeModal}: IGatheringFilterModalProps) => { searchParams.get("endAge") ? Number(searchParams.get("endAge")) : 59, ); const [isFilterSchedule, setIsFilterSchedule] = useState((searchParams.get("startDate") || searchParams.get("endDate")) ? true : false); + const [values, setValues] = useState([startAge, endAge]); + const [year, setYear] = useState(new Date().getFullYear()); + const [month, setMonth] = useState(new Date().getMonth() + 1); const [calendarDate, setCalendarDate] = useState([ { startDate: searchParams.get("startDate") @@ -117,6 +101,59 @@ const GatheringFilterModal = ({closeModal}: IGatheringFilterModalProps) => { }, ]); + 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 initFilterOptionHandler = () => { setLocation(0); setSex("ALL"); @@ -197,7 +234,7 @@ const GatheringFilterModal = ({closeModal}: IGatheringFilterModalProps) => { />

조건 선택

-
+
지역
@@ -226,166 +263,244 @@ const GatheringFilterModal = ({closeModal}: IGatheringFilterModalProps) => { ))}
-
-
나이
-
-
- {Object.entries(AGE).map((i) => ( +
+
+ 나이 +
+
+ {new Date().getFullYear() - startAge} 년생 + {`(${startAge} 세)`} +
+
+ {new Date().getFullYear() - endAge} 년생 + {`(${endAge} 세)`} +
+
+ {/* 화살표 버튼 */} +
+
+ +
+
+ + +
+
+
+ +
+ +
+ {markerPositions.map((age) => ( + ))}
-
- { - let num = Number(e.target.value); - if (e.target.value.length > 1) { - // ? 최대값을 넘었는가? - if (num > 59) { - num = 59; - } - // ? endAge값을 넘었는가? - if (num > endAge) { - if (endAge < 60) { - setEndAge(num); - } - } - // ? 최소 나이값보다 작은가? - if (num < 20) num = 20; - } - setStartAge(num); - }} - value={startAge} - className={ - "w-[8rem] rounded-[4rem] px-[1rem] py-[.5rem] outline outline-[1px] outline-offset-[-1px] outline-[#E9EBED]" - } - /> -
~
- { - let num = Number(e.target.value); - if (e.target.value.length > 1) { - // ? 최소 나이값보다 작은가? - if (num < 20) num = 20; - // ? startAge값보다 작은가? - if (num < startAge) { - if (startAge > 19) { - setStartAge(num); - } - } - // ? 최대값을 넘었는가? - if (num > 59) { - num = 59; - } - } - setEndAge(num); - }} - value={endAge} - className={ - "w-[8rem] rounded-[4rem] px-[1rem] py-[.5rem] outline outline-[1px] outline-offset-[-1px] outline-[#E9EBED]" - } - /> -
-
-
-
+
+
+
일정 -
- - { - isFilterSchedule && + + {isFilterSchedule && (
-
- { - SELECTED_SCHEDULE_DATA.map(i => ( - - )) - } -
- + {SELECTED_SCHEDULE_DATA.map((i) => ( + + ))} +
+
+ { const selection = rangesByKey.selection; - setCalendarDate([ - { - startDate: selection.startDate as Date, - endDate: selection.endDate as Date, - key: "selection", - }, - ]); + setCalendarDate([ + { + startDate: selection.startDate as Date, + endDate: selection.endDate as Date, + key: "selection", + }, + ]); + }} + minDate={new Date()} + maxDate={add(new Date(), { years: 1 })} + showDateDisplay={false} + months={1} + ranges={calendarDate} + locale={ko} + rangeColors={["#00B488", "#F2FAF7"]} + color={"#ff0000"} + onShownDateChange={(e) => { + setMonth(e.getMonth() + 1); + setYear(e.getFullYear()); }} - minDate={new Date()} - maxDate={add(new Date(), { years: 1 })} - showDateDisplay={false} - months={1} - ranges={calendarDate} - locale={ko} - rangeColors={["#00B488", "#F2FAF7"]} - color={"#ff0000"} /> -
-
{format(calendarDate[0].startDate, "yyyy-MM-dd")}
-
~
-
{format(calendarDate[0].startDate, "yyyy-MM-dd")}
-
- ( - {calculateDateDifference( - calendarDate[0].startDate, - calendarDate[0].endDate, - ) + 1} - 일) +
+ {year}.{month} +
+
+
+
{format(calendarDate[0].startDate, "yyyy-MM-dd")}
+
~
+
{format(calendarDate[0].endDate, "yyyy-MM-dd")}
+
+ ( + {calculateDateDifference( + calendarDate[0].startDate, + calendarDate[0].endDate, + ) + 1} + 일) +
+
-
-
- } + )} - +