배너 마진값 수정 & 카테고리탭 인디케이터 위치 수정

app/routes/home/components/BannerCarousel.tsx

@@ -26,7 +26,11 @@ const fashionBanners: BannerItem[] = [
   { src: bannerFashion3, alt: "패션 배너 3" },
 ];
 
-export default function BannerCarousel({ category }: { category: CategoryKey }) {
+export default function BannerCarousel({
+  category,
+}: {
+  category: CategoryKey;
+}) {
   const banners = category === "beauty" ? beautyBanners : fashionBanners;
 
   const [current, setCurrent] = useState(0);
@@ -51,7 +55,7 @@ export default function BannerCarousel({ category }: { category: CategoryKey })
   }, [start, stop]);
 
   return (
-    <div className="-mx-5 mb-4">
+    <div className="-mx-5">
       <div className="relative overflow-hidden">
         <div
           className="flex transition-transform duration-500 ease-in-out"

app/routes/home/components/CategoryTabs.tsx

@@ -1,20 +1,61 @@
-// src/routes/_home/components/CategoryTabs.tsx
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { CategoryKey } from "../types";
 
+const SIDE_MARGIN_PX = 20;
+
 export default function CategoryTabs({
   value,
   onChange,
 }: {
   value: CategoryKey;
   onChange: (v: CategoryKey) => void;
 }) {
-  const tabs: { key: CategoryKey; label: string }[] = [
-    { key: "beauty", label: "뷰티" },
-    { key: "fashion", label: "패션" },
-  ];
+  const tabs = useMemo(
+    () =>
+      [
+        { key: "beauty" as const, label: "뷰티" },
+        { key: "fashion" as const, label: "패션" },
+      ] satisfies { key: CategoryKey; label: string }[],
+    [],
+  );
+
+  const wrapRef = useRef<HTMLDivElement | null>(null);
+  const [wrapWidth, setWrapWidth] = useState(0);
+
+  useLayoutEffect(() => {
+    const el = wrapRef.current;
+    if (!el) return;
+
+    const measure = () => setWrapWidth(el.clientWidth);
+    measure();
+
+    const ro = new ResizeObserver(() => measure());
+    ro.observe(el);
+
+    return () => ro.disconnect();
+  }, []);
+
+  const activeIndex = Math.max(
+    0,
+    tabs.findIndex((t) => t.key === value),
+  );
+
+  const pxToRem = (px: number) => {
+    if (typeof window === "undefined") return `${px / 16}rem`;
+    const root = window.getComputedStyle(document.documentElement).fontSize;
+    const base = Number.parseFloat(root) || 16;
+    return `${px / base}rem`;
+  };
+
+  const trackWidth = Math.max(0, wrapWidth - SIDE_MARGIN_PX * 2);
+  const indicatorWidth = trackWidth / tabs.length;
+  const indicatorX = SIDE_MARGIN_PX + indicatorWidth * activeIndex;
 
   return (
-    <div className="relative -mx-5 h-12.5 w-[calc(100%+40px)] bg-white">
+    <div
+      ref={wrapRef}
+      className="relative -mx-5 h-12.5 w-[calc(100%+40px)] bg-white"
+    >
       <div className="flex h-full items-center px-4">
         {tabs.map((t) => {
           const active = t.key === value;
@@ -37,15 +78,13 @@ export default function CategoryTabs({
 
       <div className="absolute bottom-0 left-0 right-0 h-px bg-black/10" />
 
-      <div className="absolute bottom-0 left-0 right-0 px-0">
-        <div
-          className="h-0.5 w-1/2 bg-(--color-success) transition-transform"
-          style={{
-            transform:
-              value === "beauty" ? "translateX(0%)" : "translateX(100%)",
-          }}
-        />
-      </div>
+      <div
+        className="absolute bottom-0 h-0.5 bg-(--color-success) transition-transform duration-200"
+        style={{
+          width: pxToRem(indicatorWidth),
+          transform: `translateX(${pxToRem(indicatorX)})`,
+        }}
+      />
     </div>
   );
 }