@wishket/design-system 1.11.2 → 1.12.0

package/dist/Components/DataDisplays/Avatar/Avatar.js

@@ -19,7 +19,7 @@ const AvatarContent = ({ size = 'md', name, imgUrl, isMonogram, avatarStyle })=>
             alt: "",
             width: 80,
             height: 80,
-            className: "h-full w-full",
+            className: "h-full w-full object-cover",
             "data-testid": "design-system-avatar--image",
             onError: handleImageError
         });

package/dist/Components/Inputs/MultiColumnList/MultiColumnList.parts.js

@@ -45,11 +45,15 @@ const MultiColumnListContext = react.createContext({
     ]);
     const [activeCategory, setActiveCategory] = react.useState(currentActiveCategory);
     const handleCategoryClick = (index)=>{
+        if (index === activeCategory) return; // 현재 카테고리를 다시 클릭하는 경우 방지
         onCategoryChange === null || onCategoryChange === void 0 ? void 0 : onCategoryChange(index);
         setActiveCategory(index);
     };
     react.useEffect(()=>{
-        setActiveCategory(currentActiveCategory);
+        if (currentActiveCategory !== activeCategory) {
+            setActiveCategory(currentActiveCategory);
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         currentActiveCategory
     ]);

package/dist/Components/Navigations/BoxTab/BoxTab.d.ts

@@ -15,8 +15,8 @@
  *   return (
  *     <BoxTab.Root>
  *       <BoxTab.Tabs>
- *         <BoxTab.Tab index={0}>첫 번째 탭</BoxTab.Tab>
- *         <BoxTab.Tab index={1}>두 번째 탭</BoxTab.Tab>
+ *         <BoxTab.Tab index={0} href="/">첫 번째 탭</BoxTab.Tab>
+ *         <BoxTab.Tab index={1} href="/">두 번째 탭</BoxTab.Tab>
  *       </BoxTab.Tabs>
  *       <BoxTab.Panel index={0}>첫 번째 패널 내용</BoxTab.Panel>
  *       <BoxTab.Panel index={1}>두 번째 패널 내용</BoxTab.Panel>
@@ -28,7 +28,7 @@
 declare const BoxTab: {
     Root: ({ children, currentActiveTab, onChange, }: import("./BoxTab.types").BoxTabRootProps) => import("react/jsx-runtime").JSX.Element;
     Tabs: ({ children, className }: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
-    Tab: ({ children, index, className, isFirst, isLast, disabled, }: import("./BoxTab.types").BoxTabProps) => import("react/jsx-runtime").JSX.Element;
+    Tab: ({ children, index, className, isFirst, isLast, disabled, href, }: import("./BoxTab.types").BoxTabProps) => import("react/jsx-runtime").JSX.Element;
     Panel: ({ children, index }: import("./BoxTab.types").BoxTabPanelProps) => false | import("react/jsx-runtime").JSX.Element;
 };
 export default BoxTab;

package/dist/Components/Navigations/BoxTab/BoxTab.js

@@ -19,8 +19,8 @@ var BoxTab_parts = require('./BoxTab.parts.js');
  *   return (
  *     <BoxTab.Root>
  *       <BoxTab.Tabs>
- *         <BoxTab.Tab index={0}>첫 번째 탭</BoxTab.Tab>
- *         <BoxTab.Tab index={1}>두 번째 탭</BoxTab.Tab>
+ *         <BoxTab.Tab index={0} href="/">첫 번째 탭</BoxTab.Tab>
+ *         <BoxTab.Tab index={1} href="/">두 번째 탭</BoxTab.Tab>
  *       </BoxTab.Tabs>
  *       <BoxTab.Panel index={0}>첫 번째 패널 내용</BoxTab.Panel>
  *       <BoxTab.Panel index={1}>두 번째 패널 내용</BoxTab.Panel>

package/dist/Components/Navigations/BoxTab/BoxTab.parts.d.ts

@@ -56,7 +56,7 @@ declare const Tabs: ({ children, className }: ComponentProps<'div'>) => import("
  * </BoxTab.Tab>
  * ```
  */
-declare const Tab: ({ children, index, className, isFirst, isLast, disabled, }: BoxTabProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tab: ({ children, index, className, isFirst, isLast, disabled, href, }: BoxTabProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * 탭 패널 컴포넌트입니다.
  * 해당 인덱스의 탭이 선택되었을 때만 내용을 표시합니다.

package/dist/Components/Navigations/BoxTab/BoxTab.parts.js

@@ -4,6 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var tailwindMerge = require('tailwind-merge');
+var Link = require('next/link');
 var Typography = require('../../Base/Typography/Typography.js');
 var Box = require('../../Base/Layouts/Box/Box.js');
 require('../../Base/Layouts/FullBleed/FullBleed.js');
@@ -36,11 +37,15 @@ const BoxTabContext = react.createContext({
  */ const Root = ({ children, currentActiveTab = 0, onChange })=>{
     const [activeTab, setActiveTab] = react.useState(currentActiveTab);
     const handleTabClick = (index)=>{
+        if (index === activeTab) return;
         onChange === null || onChange === void 0 ? void 0 : onChange(index);
         setActiveTab(index);
     };
     react.useEffect(()=>{
-        setActiveTab(currentActiveTab);
+        if (currentActiveTab !== activeTab) {
+            setActiveTab(currentActiveTab);
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         currentActiveTab
     ]);
@@ -105,25 +110,35 @@ const BoxTabContext = react.createContext({
  *   탭 1
  * </BoxTab.Tab>
  * ```
- */ const Tab = ({ children, index, className, isFirst, isLast, disabled = false })=>{
+ */ const Tab = ({ children, index, className, isFirst, isLast, disabled = false, href })=>{
     const { handleTabClick, activeTab } = react.useContext(BoxTabContext);
     const isSelected = index === activeTab;
-    return jsxRuntime.jsx(Box, {
+    const sharedProps = {
         tabIndex: 0,
-        "data-testid": `design-system-boxTab--item-${index}`,
+        'data-testid': `design-system-boxTab--item-${index}`,
         className: tailwindMerge.twMerge('group flex w-full cursor-pointer items-center border border-w-gray-200 bg-w-white px-6 py-4 hover:bg-w-gray-10', 'relative', '-ml-px', isSelected && 'z-[1] border-primary bg-primary-10 hover:bg-primary-10', isFirst && 'ml-0 rounded-l-xl', isLast && 'rounded-r-xl', className),
         onClick: ()=>{
             !disabled && handleTabClick(index);
-        },
-        children: jsxRuntime.jsx(Box, {
-            className: tailwindMerge.twMerge('relative flex w-full flex-row items-center justify-center font-normal text-w-gray-600', isSelected && 'font-medium text-primary'),
-            children: jsxRuntime.jsx(Typography, {
-                variant: "body1",
-                className: "relative",
-                children: children
-            })
+        }
+    };
+    const content = jsxRuntime.jsx(Box, {
+        className: tailwindMerge.twMerge('relative flex w-full flex-row items-center justify-center font-normal text-w-gray-600', isSelected && 'font-medium text-primary'),
+        children: jsxRuntime.jsx(Typography, {
+            variant: "body1",
+            className: "relative",
+            children: children
         })
     });
+    if (href) {
+        return jsxRuntime.jsx(Link, Object.assign({
+            href: href
+        }, sharedProps, {
+            children: content
+        }));
+    }
+    return jsxRuntime.jsx(Box, Object.assign({}, sharedProps, {
+        children: content
+    }));
 };
 /**
  * 탭 패널 컴포넌트입니다.

package/dist/Components/Navigations/BoxTab/BoxTab.types.d.ts

@@ -9,6 +9,7 @@ export interface BoxTabProps extends PropsWithChildren {
     className?: string;
     isFirst?: boolean;
     isLast?: boolean;
+    href?: string;
 }
 export interface BoxTabPanelProps extends PropsWithChildren {
     index: number;

package/dist/Components/Navigations/TextTab/TextTab.d.ts

@@ -15,7 +15,7 @@
  *     <TextTab.Root defaultValue="tab1">
  *       <TextTab.Tabs>
  *         <TextTab.Tab value="tab1">첫 번째 탭</TextTab.Tab>
- *         <TextTab.Tab value="tab2">두 번째 탭</TextTab.Tab>
+ *         <TextTab.Tab value="tab2" href="/">두 번째 탭</TextTab.Tab>
  *       </TextTab.Tabs>
  *
  *       <TextTab.Panel value="tab1">
@@ -31,7 +31,7 @@
 declare const TextTab: {
     Root: ({ children, currentActiveTab, isFit, hasPadding, isFull, barColor, onChange, }: import("./TextTab.types").TextTabRootProps) => import("react/jsx-runtime").JSX.Element;
     Tabs: ({ children, className }: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
-    Tab: ({ children, index, className, disabled, badgeNumber, iconName, }: import("./TextTab.types").TextTabProps) => import("react/jsx-runtime").JSX.Element;
+    Tab: ({ children, index, className, disabled, badgeNumber, iconName, href, }: import("./TextTab.types").TextTabProps) => import("react/jsx-runtime").JSX.Element;
     Panel: ({ children, index }: import("./TextTab.types").TextTabPanelProps) => false | import("react/jsx-runtime").JSX.Element;
 };
 export default TextTab;

package/dist/Components/Navigations/TextTab/TextTab.js

@@ -19,7 +19,7 @@ var TextTab_parts = require('./TextTab.parts.js');
  *     <TextTab.Root defaultValue="tab1">
  *       <TextTab.Tabs>
  *         <TextTab.Tab value="tab1">첫 번째 탭</TextTab.Tab>
- *         <TextTab.Tab value="tab2">두 번째 탭</TextTab.Tab>
+ *         <TextTab.Tab value="tab2" href="/">두 번째 탭</TextTab.Tab>
  *       </TextTab.Tabs>
  *
  *       <TextTab.Panel value="tab1">

package/dist/Components/Navigations/TextTab/TextTab.parts.d.ts

@@ -59,7 +59,7 @@ declare const Tabs: ({ children, className }: ComponentProps<'div'>) => import("
  *   홈
  * </TextTab.Tab>
  */
-declare const Tab: ({ children, index, className, disabled, badgeNumber, iconName, }: TextTabProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tab: ({ children, index, className, disabled, badgeNumber, iconName, href, }: TextTabProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * 탭 패널 컴포넌트입니다.
  * 해당 탭이 선택되었을 때만 내용을 표시합니다.

package/dist/Components/Navigations/TextTab/TextTab.parts.js

@@ -4,6 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var tailwindMerge = require('tailwind-merge');
+var Link = require('next/link');
 var Typography = require('../../Base/Typography/Typography.js');
 var Box = require('../../Base/Layouts/Box/Box.js');
 require('../../Base/Layouts/FullBleed/FullBleed.js');
@@ -46,11 +47,15 @@ const TextTabContext = react.createContext({
  */ const Root = ({ children, currentActiveTab = 0, isFit = true, hasPadding = false, isFull = false, barColor = 'bg-w-gray-900', onChange })=>{
     const [activeTab, setActiveTab] = react.useState(currentActiveTab);
     const handleTabClick = (index)=>{
+        if (index === activeTab) return;
         onChange === null || onChange === void 0 ? void 0 : onChange(index);
         setActiveTab(index);
     };
     react.useEffect(()=>{
-        setActiveTab(currentActiveTab);
+        if (currentActiveTab !== activeTab) {
+            setActiveTab(currentActiveTab);
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         currentActiveTab
     ]);
@@ -83,41 +88,57 @@ const TextTabContext = react.createContext({
     const { activeTab, hasPadding, isFull, barColor } = react.useContext(TextTabContext);
     const tabRefs = react.useRef([]);
     const underbarRef = react.useRef(null);
+    const containerRef = react.useRef(null);
     const childrenArray = react.Children.toArray(children);
+    const [isScrolling, setIsScrolling] = react.useState(false);
+    // 터치 이벤트 핸들러
+    const handleTouchStart = ()=>{
+        setIsScrolling(true);
+    };
+    const handleTouchEnd = ()=>{
+        setIsScrolling(false);
+    };
     react.useEffect(()=>{
-        if (!tabRefs.current[activeTab] || !underbarRef.current) return;
+        if (!tabRefs.current[activeTab] || !underbarRef.current || isScrolling) return;
         const activeTabElement = tabRefs.current[activeTab];
         const underbarElement = underbarRef.current;
-        const containerElement = underbarElement.parentElement;
+        const containerElement = containerRef.current;
         if (activeTabElement && underbarElement && containerElement) {
             const { offsetLeft, offsetWidth } = activeTabElement;
             const { scrollLeft, clientWidth } = containerElement;
             underbarElement.style.width = `${offsetWidth}px`;
             underbarElement.style.transform = `translateX(${offsetLeft}px)`;
-            requestAnimationFrame(()=>{
-                const isVisible = scrollLeft <= offsetLeft && scrollLeft + clientWidth >= offsetLeft + offsetWidth;
-                if (!isVisible) {
+            const isVisible = scrollLeft <= offsetLeft && scrollLeft + clientWidth >= offsetLeft + offsetWidth;
+            if (!isVisible) {
+                const scrollTimeout = setTimeout(()=>{
                     activeTabElement.scrollIntoView({
                         behavior: 'smooth',
                         block: 'nearest',
                         inline: 'center'
                     });
-                }
-            });
+                }, 0);
+                return ()=>clearTimeout(scrollTimeout);
+            }
         }
     }, [
-        activeTab
+        activeTab,
+        isScrolling
     ]);
     return jsxRuntime.jsxs(Box, {
-        className: tailwindMerge.twJoin('relative block w-full items-start overflow-x-scroll border-b border-w-gray-200 scrollbar-hide', hasPadding && 'px-9', className),
+        ref: containerRef,
+        className: tailwindMerge.twJoin('relative block w-full touch-pan-x items-start overflow-x-scroll border-b border-w-gray-200 scrollbar-hide', hasPadding && 'px-9', className),
         "data-testid": "design-system-textTab--container",
+        onTouchStart: handleTouchStart,
+        onTouchEnd: handleTouchEnd,
         children: [
             jsxRuntime.jsx(Box, {
                 className: tailwindMerge.twMerge('inline-flex w-max gap-10', isFull && 'w-full gap-0'),
                 children: childrenArray.map((child, index)=>{
                     return jsxRuntime.jsx(Box, {
                         className: tailwindMerge.twMerge(isFull && 'w-full'),
-                        ref: (el)=>tabRefs.current[index] = el,
+                        ref: (el)=>{
+                            tabRefs.current[index] = el;
+                        },
                         children: child
                     }, index);
                 })
@@ -150,40 +171,50 @@ const TextTabContext = react.createContext({
  * >
  *   홈
  * </TextTab.Tab>
- */ const Tab = ({ children, index, className, disabled = false, badgeNumber, iconName })=>{
+ */ const Tab = ({ children, index, className, disabled = false, badgeNumber, iconName, href })=>{
     const { isFit, handleTabClick, activeTab, isFull } = react.useContext(TextTabContext);
     const isSelected = index === activeTab;
-    return jsxRuntime.jsx(Box, {
+    const sharedProps = {
         tabIndex: 0,
-        "data-testid": `design-system-textTab--item-${index}`,
+        'data-testid': `design-system-textTab--item-${index}`,
         className: tailwindMerge.twMerge('group flex w-max cursor-pointer items-center rounded-xl hover:font-medium', disabled && 'cursor-not-allowed', isFull && `w-full`, className),
         onClick: ()=>{
             !disabled && handleTabClick(index);
-        },
-        children: jsxRuntime.jsxs(Box, {
-            className: tailwindMerge.twMerge('relative flex w-full flex-row items-center justify-center gap-2 py-4 font-normal text-w-gray-600 group-hover:text-w-gray-900', !isFit && 'px-[33.5px]', isFull && 'w-full px-0', isSelected && 'font-medium text-w-gray-900'),
-            children: [
-                iconName && jsxRuntime.jsx(Box, {
-                    className: "flex size-4 flex-shrink-0 items-center justify-center",
-                    children: jsxRuntime.jsx(SystemIcon, {
-                        name: iconName,
-                        className: tailwindMerge.twMerge('size-4 text-w-gray-600 group-hover:text-w-gray-900', isSelected && 'text-w-gray-900')
-                    })
-                }),
-                jsxRuntime.jsx(Typography, {
-                    variant: "body1",
-                    className: "relative",
-                    children: children
-                }),
-                badgeNumber !== undefined && jsxRuntime.jsx(CountBadge, {
-                    text: badgeNumber,
-                    showZero: true,
-                    className: "relative",
-                    variant: "gray"
+        }
+    };
+    const content = jsxRuntime.jsxs(Box, {
+        className: tailwindMerge.twMerge('relative flex w-full flex-row items-center justify-center gap-2 py-4 font-normal text-w-gray-600 group-hover:text-w-gray-900', !isFit && 'px-[33.5px]', isFull && 'w-full px-0', isSelected && 'font-medium text-w-gray-900'),
+        children: [
+            iconName && jsxRuntime.jsx(Box, {
+                className: "flex size-4 flex-shrink-0 items-center justify-center",
+                children: jsxRuntime.jsx(SystemIcon, {
+                    name: iconName,
+                    className: tailwindMerge.twMerge('size-4 text-w-gray-600 group-hover:text-w-gray-900', isSelected && 'text-w-gray-900')
                 })
-            ]
-        })
+            }),
+            jsxRuntime.jsx(Typography, {
+                variant: "body1",
+                className: "relative",
+                children: children
+            }),
+            badgeNumber !== undefined && jsxRuntime.jsx(CountBadge, {
+                text: badgeNumber,
+                showZero: true,
+                className: "relative",
+                variant: "gray"
+            })
+        ]
     });
+    if (href) {
+        return jsxRuntime.jsx(Link, Object.assign({
+            href: href
+        }, sharedProps, {
+            children: content
+        }));
+    }
+    return jsxRuntime.jsx(Box, Object.assign({}, sharedProps, {
+        children: content
+    }));
 };
 /**
  * 탭 패널 컴포넌트입니다.

package/dist/Components/Navigations/TextTab/TextTab.types.d.ts

@@ -14,6 +14,7 @@ export interface TextTabProps extends PropsWithChildren {
     className?: string;
     badgeNumber?: string | number;
     iconName?: SystemIconName;
+    href?: string;
 }
 export interface TextTabPanelProps extends PropsWithChildren {
     index: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishket/design-system",
-  "version": "1.11.2",
+  "version": "1.12.0",
   "description": "Wishket Design System",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",