From 7e1152ff3e948fb57c926d4637d68f7860087ae0 Mon Sep 17 00:00:00 2001
From: "SK\\ssssk" <ssssksss@naver.com>
Date: Fri, 6 Sep 2024 12:50:15 +0900
Subject: [PATCH] =?UTF-8?q?style:=20=EB=93=9C=EB=9E=98=EA=B7=B8=20?=
 =?UTF-8?q?=EB=B0=94=20=EC=98=81=EC=97=AD=EC=9D=B4=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=EA=B3=BC=20=EB=A7=9E=EC=A7=80=20=EC=95=8A=EC=95=84=EC=84=9C=20?=
 =?UTF-8?q?=EA=B3=84=EC=82=B0=EC=9D=84=20=ED=86=B5=ED=95=B4=20=EB=A7=9E?=
 =?UTF-8?q?=EA=B2=8C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../gathering/GatheringFilterModal.tsx        | 19 +++++++++++++++----
 .../GatheringParticipantsFilterModal.tsx      | 17 ++++++++++++++++-
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/components/gathering/GatheringFilterModal.tsx b/src/components/gathering/GatheringFilterModal.tsx
index 40b47598..b9e6452c 100644
--- a/src/components/gathering/GatheringFilterModal.tsx
+++ b/src/components/gathering/GatheringFilterModal.tsx
@@ -363,6 +363,18 @@ const GatheringFilterModal = ({closeModal}: IGatheringFilterModalProps) => {
                 {
                   backgroundColor: "#0d6efd",
                   height: 30,
+                  left:
+                    startAge >= 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={{
@@ -370,18 +382,17 @@ const GatheringFilterModal = ({closeModal}: IGatheringFilterModalProps) => {
                 height: 32,
               }}
             />
-            <div className="absolute left-0 right-0 top-[4.5rem] flex justify-between px-4">
-              {markerPositions.map((age) => (
+            <div className="absolute left-0 right-0 top-[4.5rem] flex w-full justify-between">
+              {markerPositions.map((age, index) => (
                 <button
                   key={age}
                   onClick={() => handleMarkerClick(age)}
                   className={
-                    "left-[-1rem] top-[-1.5rem] flex h-[1.875rem] w-8 cursor-pointer select-none items-center justify-center rounded-full bg-gray2 text-center text-white transition-transform duration-200 hover:bg-main" +
+                    "top-[-1.5rem] flex aspect-square w-[2rem] cursor-pointer select-none items-center justify-center rounded-full bg-gray2 text-center text-white transition-transform duration-200 hover:bg-main" +
                     ` ${age >= startAge && age <= endAge && "bg-main"}`
                   }
                   style={{
                     position: "relative",
-                    transform: `translateX(calc(${((age - 20) / 39) * 100}%))`,
                   }}
                 >
                   <div className="text-md absolute font-medium">{age}</div>
diff --git a/src/components/gathering/modal/GatheringParticipantsFilterModal.tsx b/src/components/gathering/modal/GatheringParticipantsFilterModal.tsx
index 51de7203..d0f9d75d 100644
--- a/src/components/gathering/modal/GatheringParticipantsFilterModal.tsx
+++ b/src/components/gathering/modal/GatheringParticipantsFilterModal.tsx
@@ -242,9 +242,24 @@ const onClickImproveMaxAge = () => {
                 {
                   backgroundColor: "#0d6efd",
                   height: 30,
+                  left:
+                    startAge >= 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 }}
+              railStyle={{
+                backgroundColor: "#ddd",
+                height: 32,
+              }}
             />
             <div className="absolute left-0 right-0 top-[4.5rem] flex justify-between px-4">
               {markerPositions.map((age) => (