uchumu · bbbjihan · Dec 9, 2024 · Dec 9, 2024 · Dec 9, 2024 · Dec 9, 2024
diff --git a/src/components/Accordion/BaseAccordion/AccordionChevron.tsx b/src/components/Accordion/BaseAccordion/AccordionChevron.tsx
@@ -1,18 +1,18 @@
 interface CheveronProp {
-    isActive: boolean;
-  }
-  const AccordionChevron = ({ isActive }: CheveronProp) => {
-    return (
-      <svg
-        width="10"
-        height="5"
-        viewBox="0 0 10 5"
-        className="transition-transform duration-200"
-        style={{ transform: `rotate(${isActive ? 180 : 0}deg)` }}
-      >
-        <path d="M0 0 L5 5 L10 0" stroke="#A5A5A5" strokeWidth="2" fill="none" className="hover:stroke-[#5194F9] transition-colors" />
-      </svg>
-    );
-  };
+  isActive: boolean;
+}
+const AccordionChevron = ({ isActive }: CheveronProp) => {
+  return (
+    <svg
+      width="10"
+      height="5"
+      viewBox="0 0 10 5"
+      className="transition-transform duration-200"
+      style={{ transform: `rotate(${isActive ? 180 : 0}deg)` }}
+    >
+      <path d="M0 0 L5 5 L10 0" stroke="#A5A5A5" strokeWidth="2" fill="none"/>
+    </svg>
+  );
+};
 
-  export default AccordionChevron
+export default AccordionChevron;
diff --git a/src/components/Accordion/BaseAccordion/index.tsx b/src/components/Accordion/BaseAccordion/index.tsx
@@ -5,6 +5,7 @@ import AccordionChevron from "./AccordionChevron";
 import { AccordionProps, AccordionSectionProps } from "./types";
 
 import { AccordionContext, useAccordion } from "./useAcordionContext";
+import clsx from "clsx";
 
 /**
  * @name Accordion
@@ -50,23 +51,46 @@ const Section = ({
 }: AccordionSectionProps) => {
   const { activeSection, setActiveSection } = useAccordion();
   const isActive = activeSection === id;
+
+  const sharedRounded = "rounded-[16px]";
+  const sharedBg = "bg-[#F8F8F8]";
 
   return (
     <div className="flex flex-col gap-[10px] mb-[26px]">
       <p className="font-pretendard text-[14px] font-normal leading-[16.8px] text-left underline-offset-[from-font] decoration-skip-ink-none">
         {label}
       </p>
-      <div>
+      {/* 아코디언 트리거 관련 */}
+      <div className={clsx(isActive && [sharedBg, sharedRounded])}>
         <button
-          className="w-full py-[20px] px-[24px] rounded-[15px] h-[60px] flex items-center justify-between bg-[#F8F8F8]"
+          className={clsx(
+            "w-full py-[20px] px-[24px] h-[60px]",
+            "flex items-center justify-between",
+            !isActive && [sharedBg, sharedRounded]
+          )}
           onClick={() => setActiveSection(isActive ? " " : id)}
         >
           <span className="font-[400] text-[16px] leading-[19.2px]">
             {formatValue}
           </span>
           <AccordionChevron isActive={isActive} />
         </button>
-        {isActive && <div>{children}</div>}
+        {/* 아코디언 내부 콘텐츠 관련 */}
+        <div
+          className={clsx(
+            "transition-[max-height] duration-300 ease-out overflow-visible",
+            isActive ? "max-h-96" : "max-h-0"
+          )}
+        >
+          <div className={clsx(
+            "bg-white shadow-[0_4px_10px_rgba(0,0,0,0.05)]",
+            sharedRounded,
+            "relative z-0",
+            !isActive && "hidden"
+          )}>
+            {children}
+          </div>
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/Accordion/DatePicker/index.css b/src/components/Accordion/DatePicker/index.css
@@ -7,12 +7,137 @@
   max-width: none;
 }
 
-.picker-wrap .rdp-root .rdp-months .text-primary-main {
+/* Layout & Size */
+.rdp-root,
+.rdp-months,
+.rdp-month {
   width: 100%;
+  height: 100%;
+  flex-direction: column;
 }
-.picker-wrap .rdp-root .rdp-months .text-primary-main .rdp-month_grid {
+
+/* Navigation */
+.rdp-nav {
+  display: flex;
+  align-items: center;
+}
+
+.rdp-nav button {
+  width: 27px;
+  height: 27px;
+  background-color: #f2f2f2;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.rdp-nav button svg {
+  width: 16px;
+  height: 16px;
+  fill: #a5a5a5;
+}
+
+.rdp-button_previous {
+  margin-right: 16px;
+}
+
+/* Caption */
+.rdp-month_caption {
+  margin-bottom: 24px;
+}
+
+/* Grid Layout */
+.rdp-month_grid {
   width: 100%;
+  border-spacing: 0;
+  border-collapse: separate;
+  font-size: 14px;
+}
+
+/* Weekday Headers */
+.rdp-weekday {
+  width: 11px;
+  height: 14px;
+  text-align: center;
+  color: #a9a9a9;
+}
+
+/* Date Cells */
+.rdp-week td {
+  width: 17px;
+  height: 17px;
 }
-.picker-wrap .rdp-root .rdp-months .text-primary-main .rdp-month_grid button {
+
+.rdp-day_button {
   width: 100%;
+  height: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  position: relative;
+}
+
+/* States */
+.rdp-today .rdp-day_button {
+  color: #202020;
+}
+
+/* Selected Date */
+.rdp-week td[aria-selected="true"] {
+  position: relative;
+}
+
+.rdp-week td[aria-selected="true"] button {
+  color: white;
+}
+
+.rdp-month_grid td,
+.rdp-month_grid th {
+  padding: 0 12px; /* 양쪽으로 12px씩 = 총 24px 간격 */
 }
+
+/* 기본 선택된 날짜 스타일 (중간 열들) */
+.rdp-week td[aria-selected="true"]::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 36px;
+  height: 36px;
+  background-color: var(--primary-main, #5194f9);
+  border-radius: 50%;
+  z-index: 0;
+}
+
+/* 첫 번째 열 패딩 제거 및 마커 위치 조정 */
+.rdp-month_grid td:first-child {
+  padding-left: 0;
+}
+
+.rdp-month_grid td:first-child[aria-selected="true"]::before {
+  left: calc(50% - 6px); /* 패딩만큼 왼쪽으로 당김 */
+}
+
+.rdp-month_grid td:last-child[aria-selected="true"]::before {
+  left: calc(50% + 6px); /* 패딩만큼 오른쪽으로 밀어냄 */
+}
+
+/* 마지막 열 패딩 제거 및 마커 위치 조정 */
+.rdp-month_grid td:last-child {
+  padding-right: 0;
+}
+
+/* 요일(th) 패딩 제거 */
+.rdp-month_grid th:first-child {
+  padding-left: 0;
+}
+.rdp-month_grid th:last-child {
+  padding-right: 0;
+}
+
+.rdp-month_grid {
+  border-spacing: 0 12px;
+}
diff --git a/src/components/Accordion/DatePicker/index.tsx b/src/components/Accordion/DatePicker/index.tsx
@@ -33,7 +33,7 @@ export default function DatePicker({ dataValue, setDataValue }: Props) {
   };
 
   return (
-    <div className="flex items-center justify-center w-full h-[350px] px-[24px] py-[34px] bg-white  shadow-[0_4px_10px_rgba(0,0,0,0.25)] rounded-[16px] picker-wrap ">
+    <div className="flex items-center justify-center w-full h-[350px] px-[24px] py-[34px] picker-wrap ">
       <DayPicker
         mode="single"
         formatters={{ formatCaption: formatYearMonthKorean }}
@@ -45,12 +45,7 @@ export default function DatePicker({ dataValue, setDataValue }: Props) {
         classNames={{
           month: "text-primary-main",
           day: "text-[#202020]",
-          weekdays: "text-[#A9A9A9]",
-          selected: "bg-primary-main rounded-full text-primary-text",
-          button_next:
-            "bg-[#F2F2F2] rounded-full py-[9px] px-[10px] [&_svg]:fill-[#A5A5A5]",
-          button_previous:
-            "bg-[#F2F2F2] rounded-full py-[9px] px-[10px] [&_svg]:fill-[#A5A5A5] mr-[16px]",
+          selected: "text-primary-text",
         }}
       />
     </div>

diff --git a/src/components/Accordion/TimePicker/index.tsx b/src/components/Accordion/TimePicker/index.tsx
@@ -23,10 +23,10 @@ const NumberWheel = memo(
     return (
       <div
         className="relative w-full h-40 overflow-hidden bg-white rounded-lg select-none"
-        style={{ 
-          touchAction: 'none', 
-          WebkitOverflowScrolling: 'touch', 
-          overscrollBehavior: 'none' 
+        style={{
+          touchAction: "none",
+          WebkitOverflowScrolling: "touch",
+          overscrollBehavior: "none",
         }}
         onWheel={(e) => onWheel(e, type)}
         onMouseDown={(e) => onMouseDown(e, type)}
@@ -183,7 +183,6 @@ const WheelTimePicker = ({
   }, []);
 
   const handleTouchEnd = useCallback(() => {
-
     setIsDragging(false);
     setActiveWheel(null);
   }, []);
@@ -219,9 +218,10 @@ const WheelTimePicker = ({
   }, [handleMouseMove, handleMouseUp, handleTouchEnd]);
 
   return (
-    <div className="flex items-center w-full h-[182px] bg-white shadow-[0_4px_10px_rgba(0,0,0,0.25)] rounded-[16px] py-[30px] px-[50px]"
-    onTouchMove={e=> e.preventDefault()}
-    onTouchCancel={e=> e.preventDefault()}
+    <div
+      className="flex items-center w-full h-[182px] py-[30px] px-[50px]"
+      onTouchMove={(e) => e.preventDefault()}
+      onTouchCancel={(e) => e.preventDefault()}
     >
       <div className="flex items-center w-full gap-6">
         <div className="flex-1">