[feat/#37] 탭바 컴포넌트 구현

src/App.tsx

@@ -1,52 +1,41 @@
 import * as styles from "./test.css";
-import {
-  ArrowLeft,
-  ArrowRight,
-  Banner,
-  Benefit,
-  BottomSheetHeart,
-  BottomSheetHeartFill,
-  ChatFloating,
-  Check,
-  ChevronDown,
-  ChevronRightRounded,
-  ChevronRightSharp,
-  ChevronUp,
-  Delete,
-  Home,
-  Logo,
-  MakerHeart,
-  MakerHeartFill,
-  Search,
-  Share,
-  ShoppingCart,
-  Star,
-} from "./assets/svg";
+
+import { Header } from "./shared/components/header";
+import { Content } from "./shared/components/content";
+import Section1 from "./shared/components/section1";
+import Section2 from "./shared/components/section2";
+import Section3 from "./shared/components/section3";
+import { TabBar } from "./shared/components/tab-bar/tab-bar";
+import { useScrollableTabs } from "./shared/hooks/useScrollableTabs";
 
 function App() {
+  const { productInfoRef, reviewRef, recommendRef, activeTab, handleTabClick } =
+    useScrollableTabs();
+
   return (
     <div className={styles.test}>
-      <MakerHeart width={24} height={24} />
-      <MakerHeartFill width={24} height={24} />
-      <BottomSheetHeart width={24} height={24} />
-      <BottomSheetHeartFill width={50} height={50} />
-      <ArrowLeft width={24} height={24} />
-      <ArrowRight width={24} height={24} />
-      <ChevronDown width={24} height={24} />
-      <ChevronRightRounded width={24} height={24} />
-      <ChevronRightSharp width={24} height={24} />
-      <ChevronUp width={24} height={24} />
-      <Banner width={200} height={200} />
-      <Benefit width={24} height={24} />
-      <ChatFloating width={24} height={24} />
-      <Check width={24} height={24} />
-      <Delete width={24} height={24} />
-      <Home width={24} height={24} />
-      <Logo width={24} height={24} />
-      <Search width={24} height={24} />
-      <Share width={24} height={24} />
-      <ShoppingCart width={24} height={24} />
-      <Star width={24} height={24} />
+      <Header />
+
+      {/* 내용들 - 탭바 위에 있을 캐러셀 부분 ㅎㅎ */}
+      {[...Array(20)].map((_, i) => (
+        <Content key={i} type="내용" />
+      ))}
+
+      {/* 탭바 - sticky로 헤더에 닿으면!! 고정 */}
+      <TabBar activeTab={activeTab} onTabClick={handleTabClick} />
+
+      {/* 작품 정보, 후기, 추천 섹션들 - 탭바 아래 */}
+      <div ref={productInfoRef} data-section="product-info">
+        <Section1 />
+      </div>
+
+      <div ref={reviewRef} data-section="review">
+        <Section2 />
+      </div>
+
+      <div ref={recommendRef} data-section="recommend">
+        <Section3 />
+      </div>
     </div>
   );
 }

src/shared/components/content.css.ts

@@ -0,0 +1,6 @@
+import { style } from "@vanilla-extract/css";
+import { typographyVars } from "../styles/typography.css";
+
+export const content = style({
+  ...typographyVars.heading1,
+});

src/shared/components/content.tsx

@@ -0,0 +1,7 @@
+import * as styles from "./content.css";
+interface ContentProps {
+  type: string;
+}
+export const Content = ({ type }: ContentProps) => {
+  return <div className={styles.content}>{type}</div>;
+};

src/shared/components/header.css.ts

@@ -0,0 +1,8 @@
+import { style } from "@vanilla-extract/css";
+
+export const header = style({
+  height: "5.6rem",
+  position: "sticky",
+  top: 0,
+  backgroundColor: "pink",
+});

src/shared/components/header.tsx

@@ -0,0 +1,4 @@
+import * as styles from "./header.css";
+export const Header = () => {
+  return <div className={styles.header}>헤더</div>;
+};

src/shared/components/section.css.ts

@@ -0,0 +1,5 @@
+import { style } from "@vanilla-extract/css";
+
+export const container = style({
+  border: "1px solid black",
+});

src/shared/components/section1.tsx

@@ -0,0 +1,13 @@
+import { Content } from "./content";
+import * as styles from "./section.css";
+function Section1() {
+  return (
+    <div className={styles.container}>
+      {[...Array(20)].map((_, i) => (
+        <Content key={i} type="section1" />
+      ))}
+    </div>
+  );
+}
+
+export default Section1;

src/shared/components/section2.tsx

@@ -0,0 +1,13 @@
+import { Content } from "./content";
+import * as styles from "./section.css";
+function Section2() {
+  return (
+    <div className={styles.container}>
+      {[...Array(20)].map((_, i) => (
+        <Content key={i} type="section2" />
+      ))}
+    </div>
+  );
+}
+
+export default Section2;

src/shared/components/section3.tsx

@@ -0,0 +1,14 @@
+import { Content } from "./content";
+
+import * as styles from "./section.css";
+function Section3() {
+  return (
+    <div className={styles.container}>
+      {[...Array(20)].map((_, i) => (
+        <Content key={i} type="section3" />
+      ))}
+    </div>
+  );
+}
+
+export default Section3;

src/shared/components/tab-bar/tab-bar.css.ts

@@ -0,0 +1,38 @@
+import { color } from "@/shared/styles/tokens/color.css";
+import { typographyVars } from "@/shared/styles/typography.css";
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+
+export const tabBar = style({
+  position: "sticky",
+  top: "5.6rem", // 헤더 높이만큼 띄워서 헤더 바로 아래에 붙도록
+  display: "flex",
+  backgroundColor: color.white[100],
+  borderBottom: `1px solid ${color.gray[200]}`,
+  zIndex: 10,
+});
+
+export const tab = recipe({
+  base: {
+    flex: 1,
+    textAlign: "center",
+    ...typographyVars.body1,
+    padding: "1.2rem 1rem",
+    border: "none",
+    background: "none",
+    cursor: "pointer",
+    color: color.gray[300],
+    transition: "color 0.2s",
+    position: "relative",
+    marginBottom: "-1px", // tabBar의 border를 덮기 위해
+    borderBottom: `2px solid transparent`,
+  },
+  variants: {
+    active: {
+      true: {
+        color: color.black[100],
+        borderBottom: `2px solid ${color.black[100]}`,
+      },
+    },
+  },
+});

src/shared/components/tab-bar/tab-bar.tsx

@@ -0,0 +1,29 @@
+import * as styles from "./tab-bar.css";
+
+interface TabBarProps {
+  activeTab: "product-info" | "review" | "recommend";
+  onTabClick: (_tab: "product-info" | "review" | "recommend") => void;
+}
+
+export const TabBar = ({ activeTab, onTabClick }: TabBarProps) => {
+  const tabs = [
+    { id: "product-info" as const, label: "작품 정보" },
+    { id: "review" as const, label: "후기 634" },
+    { id: "recommend" as const, label: "추천" },
+  ];
+
+  return (
+    <div className={styles.tabBar}>
+      {tabs.map(({ id, label }) => (
+        <button
+          key={id}
+          type="button"
+          aria-selected={activeTab === id}
+          className={styles.tab({ active: activeTab === id })}
+          onClick={() => onTabClick(id)}>
+          {label}
+        </button>
+      ))}
+    </div>
+  );
+};

src/shared/hooks/useScrollableTabs.ts

@@ -0,0 +1,81 @@
+import { useEffect, useRef, useState } from "react";
+
+const HEADER_HEIGHT = 56;
+const TAB_BAR_HEIGHT = 46;
+
+export function useScrollableTabs() {
+  const productInfoRef = useRef<HTMLDivElement>(null);
+  const reviewRef = useRef<HTMLDivElement>(null);
+  const recommendRef = useRef<HTMLDivElement>(null);
+
+  const [activeTab, setActiveTab] = useState<
+    "product-info" | "review" | "recommend"
+  >("product-info");
+
+  // IntersectionObserver로 현재 섹션 감지
+  useEffect(() => {
+    const observerOptions = {
+      // 섹션이 화면의 중앙 즈음에 올 때
+      rootMargin: `-${window.innerHeight / 2}px 0px -${window.innerHeight / 2}px 0px`,
+      threshold: 0,
+    };
+
+    const observerCallback = (entries: IntersectionObserverEntry[]) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const sectionId = entry.target.getAttribute("data-section") as
+            | "product-info"
+            | "review"
+            | "recommend";
+
+          if (sectionId) {
+            setActiveTab(sectionId);
+          }
+        }
+      });
+    };
+
+    const sectionObserver = new IntersectionObserver(
+      observerCallback,
+      observerOptions
+    );
+
+    // 각 섹션 관찰 시작
+    if (productInfoRef.current) sectionObserver.observe(productInfoRef.current);
+    if (reviewRef.current) sectionObserver.observe(reviewRef.current);
+    if (recommendRef.current) sectionObserver.observe(recommendRef.current);
+
+    return () => {
+      sectionObserver.disconnect();
+    };
+  }, []);
+
+  // 탭 클릭 시 해당 섹션으로 스크롤
+  const handleTabClick = (tab: "product-info" | "review" | "recommend") => {
+    const sectionRefMap = {
+      "product-info": productInfoRef,
+      review: reviewRef,
+      recommend: recommendRef,
+    };
+
+    const targetRef = sectionRefMap[tab];
+
+    if (targetRef.current) {
+      const offsetTop =
+        targetRef.current.offsetTop - HEADER_HEIGHT - TAB_BAR_HEIGHT;
+
+      window.scrollTo({
+        top: offsetTop,
+        behavior: "smooth",
+      });
+    }
+  };
+
+  return {
+    productInfoRef,
+    reviewRef,
+    recommendRef,
+    activeTab,
+    handleTabClick,
+  };
+}