chore: Tab 단수형 복수형으로 변경, default export 로 수정

GDSC-Hongik · Sep 11, 2024 · 7d90946 · 7d90946
1 parent 3e14e29
commit 7d90946
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 28 deletions.
diff --git a/apps/wow-docs/app/page.tsx b/apps/wow-docs/app/page.tsx
@@ -8,6 +8,10 @@ import RadioButton from "wowds-ui/RadioButton";
 import RadioGroup from "wowds-ui/RadioGroup";
 import SearchBar from "wowds-ui/SearchBar";
 import Switch from "wowds-ui/Switch";
+import Tabs from "wowds-ui/Tabs";
+import TabsContent from "wowds-ui/TabsContent";
+import TabsList from "wowds-ui/TabsList";
+import TabsTrigger from "wowds-ui/TabsTrigger";
 
 const Home = () => {
   return (
@@ -38,6 +42,22 @@ const Home = () => {
         <Switch label="switch4" value="switch4" />
       </MultiGroup>
       <SearchBar />
+      <Tabs defaultValue="1">
+        <TabsList>
+          <TabsTrigger value="1">첫번째첫번째첫번째첫번째</TabsTrigger>
+          <TabsTrigger value="2">두 번째</TabsTrigger>
+          <TabsTrigger value="3">세 번쨰</TabsTrigger>
+        </TabsList>
+        <TabsContent value="1">
+          <span>첫번째 탭</span>
+        </TabsContent>
+        <TabsContent value="2">
+          <span>두번째 탭</span>
+        </TabsContent>
+        <TabsContent value="3">
+          <span>세번째 탭</span>
+        </TabsContent>
+      </Tabs>
     </>
   );
 };

diff --git a/packages/wow-ui/src/components/Tabs/Tabs.stories.tsx b/packages/wow-ui/src/components/Tabs/Tabs.stories.tsx
@@ -2,10 +2,10 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 
 import type { TabsProps } from "@/components/Tabs";
-import { Tabs } from "@/components/Tabs";
-import { TabsContent } from "@/components/Tabs/TabsContent";
-import { TabsList } from "@/components/Tabs/TabsList";
-import { TabsTrigger } from "@/components/Tabs/TabsTrigger";
+import Tabs from "@/components/Tabs";
+import TabsContent from "@/components/Tabs/TabsContent";
+import TabsList from "@/components/Tabs/TabsList";
+import TabsTrigger from "@/components/Tabs/TabsTrigger";
 
 const meta: Meta<TabsProps> = {
   title: "UI/Tabs",

diff --git a/packages/wow-ui/src/components/Tabs/Tabs.test.tsx b/packages/wow-ui/src/components/Tabs/Tabs.test.tsx
@@ -3,10 +3,10 @@ import { render, waitFor } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 
 import type { TabsProps } from "@/components/Tabs";
-import { Tabs } from "@/components/Tabs";
-import { TabsContent } from "@/components/Tabs/TabsContent";
-import { TabsList } from "@/components/Tabs/TabsList";
-import { TabsTrigger } from "@/components/Tabs/TabsTrigger";
+import Tabs from "@/components/Tabs";
+import TabsContent from "@/components/Tabs/TabsContent";
+import TabsList from "@/components/Tabs/TabsList";
+import TabsTrigger from "@/components/Tabs/TabsTrigger";
 
 describe("Tabs component", () => {
   const renderTabs = (props: Partial<TabsProps> = {}): RenderResult => {

diff --git a/packages/wow-ui/src/components/Tabs/TabsContent.tsx b/packages/wow-ui/src/components/Tabs/TabsContent.tsx
@@ -5,7 +5,7 @@ import { forwardRef } from "react";
 
 import type { DefaultProps } from "@/types/DefaultProps";
 
-import { useTabContext } from "./contexts/TabContext";
+import { useTabsContext } from "./contexts/TabsContext";
 
 /**
  * @description TabsContent 컴포넌트는 각 Tab에 해당하는 콘텐츠입니다.
@@ -19,9 +19,9 @@ interface TabsContentProps extends PropsWithChildren, DefaultProps {
   value: string;
 }
 
-export const TabsContent = forwardRef<HTMLDivElement, TabsContentProps>(
+const TabsContent = forwardRef<HTMLDivElement, TabsContentProps>(
   ({ value: tabValue, children }: TabsContentProps, ref) => {
-    const { value, label } = useTabContext();
+    const { value, label } = useTabsContext();
     const selected = tabValue === value;
     if (!selected) return null;
 
@@ -39,4 +39,4 @@ export const TabsContent = forwardRef<HTMLDivElement, TabsContentProps>(
   }
 );
 
-TabsContent.displayName = "TabsContent";
+export default TabsContent;
diff --git a/packages/wow-ui/src/components/Tabs/TabsList.tsx b/packages/wow-ui/src/components/Tabs/TabsList.tsx
@@ -5,13 +5,13 @@ import { Flex } from "@styled-system/jsx";
 import { type KeyboardEvent, type PropsWithChildren, useCallback } from "react";
 
 import { useCollectionContext } from "./contexts/CollectionContext";
-import { useTabContext } from "./contexts/TabContext";
+import { useTabsContext } from "./contexts/TabsContext";
 
 /**
  * @description TabsList 컴포넌트는 TabTrigger 컴포넌트를 관리합니다.
  */
-export const TabsList = ({ children }: PropsWithChildren) => {
-  const { label, setSelectedValue, value: selectedValue } = useTabContext();
+const TabsList = ({ children }: PropsWithChildren) => {
+  const { label, setSelectedValue, value: selectedValue } = useTabsContext();
 
   const { values } = useCollectionContext();
 
@@ -53,6 +53,8 @@ export const TabsList = ({ children }: PropsWithChildren) => {
   );
 };
 
+export default TabsList;
+
 const tabsListStyle = css({
   lg: {
     overflowX: "scroll",

diff --git a/packages/wow-ui/src/components/Tabs/TabsTrigger.tsx b/packages/wow-ui/src/components/Tabs/TabsTrigger.tsx
@@ -9,7 +9,7 @@ import { useMergeRefs } from "@/hooks/useMergeRefs";
 import type { DefaultProps } from "@/types/DefaultProps";
 
 import { useCollectionContext } from "./contexts/CollectionContext";
-import { useTabContext } from "./contexts/TabContext";
+import { useTabsContext } from "./contexts/TabsContext";
 
 /**
  * @description TabsTrigger 컴포넌트는 각 Tab 컴포넌트입니다.
@@ -26,9 +26,9 @@ interface TabsTriggerProps
   value: string;
 }
 
-export const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(
+const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(
   ({ value, children, className, ...rest }: TabsTriggerProps, ref) => {
-    const { value: selectedValue, setSelectedValue, label } = useTabContext();
+    const { value: selectedValue, setSelectedValue, label } = useTabsContext();
     const selected = selectedValue === value;
 
     const handleClickTabTrigger = () => {
@@ -69,8 +69,7 @@ export const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(
     );
   }
 );
-
-TabsTrigger.displayName = "TabsTrigger";
+export default TabsTrigger;
 
 const tabTriggerStyle = cva({
   base: {

diff --git a/...rc/components/Tabs/contexts/TabContext.ts → ...c/components/Tabs/contexts/TabsContext.ts b/...rc/components/Tabs/contexts/TabContext.ts → ...c/components/Tabs/contexts/TabsContext.ts
@@ -4,15 +4,15 @@ import { createContext } from "react";
 
 import useSafeContext from "@/hooks/useSafeContext";
 
-interface TabContextProps {
+interface TabsContextProps {
   value: string;
   setSelectedValue: (value: string) => void;
   label?: string;
 }
 
-export const TabContext = createContext<TabContextProps | null>(null);
+export const TabsContext = createContext<TabsContextProps | null>(null);
 
-export const useTabContext = () => {
-  const context = useSafeContext(TabContext);
+export const useTabsContext = () => {
+  const context = useSafeContext(TabsContext);
   return context;
 };
diff --git a/packages/wow-ui/src/components/Tabs/index.tsx b/packages/wow-ui/src/components/Tabs/index.tsx
@@ -6,7 +6,7 @@ import type { PropsWithChildren } from "react";
 import { useEffect, useState } from "react";
 
 import { CollectionProvider } from "@/components/Tabs/contexts/CollectionContext";
-import { TabContext } from "@/components/Tabs/contexts/TabContext";
+import { TabsContext } from "@/components/Tabs/contexts/TabsContext";
 import type { DefaultProps } from "@/types/DefaultProps";
 
 /**
@@ -24,7 +24,7 @@ export interface TabsProps extends PropsWithChildren, DefaultProps {
   label?: string;
   onChange?: (value: string) => void;
 }
-export const Tabs = ({
+const Tabs = ({
   defaultValue,
   value,
   label = "default-tab",
@@ -52,19 +52,21 @@ export const Tabs = ({
 
   return (
     <div className={clsx(tabsContainerStyle, className)} style={style}>
-      <TabContext.Provider
+      <TabsContext.Provider
         value={{
           value: selectedValue,
           setSelectedValue: handleSelect,
           label,
         }}
       >
         <CollectionProvider>{children}</CollectionProvider>
-      </TabContext.Provider>
+      </TabsContext.Provider>
     </div>
   );
 };
 
+export default Tabs;
+
 const tabsContainerStyle = css({
   width: "100%",
 });