Feat(client): ParentTagList 컴포넌트 구현

apps/client/src/shared/components/layouts/sidebar/sidebar-menu-section/sidebar-menu-section.tsx

@@ -3,7 +3,8 @@ import { PATH } from '@router/path';
 import { IconName } from '@cds/icon';
 import { Modal, Tooltip } from '@cds/ui';
 
-import SidebarItem from '../sidebar-item/sidebar-item';
+import NavItem from '@shared/components/nav-item/nav-item';
+
 import { SidebarSelection } from '../type';
 
 import * as styles from '../sidebar.css';
@@ -54,11 +55,7 @@ const SidebarMenuSection = ({
       <Modal>
         <Modal.Trigger>
           <li key="search" className={styles.pannelItem}>
-            <SidebarItem
-              iconName="ic_search"
-              content="검색"
-              onClick={onExpand}
-            />
+            <NavItem iconName="ic_search" content="검색" onClick={onExpand} />
             <div className={styles.tooltip}>
               <Tooltip title="검색" />
             </div>
@@ -68,7 +65,7 @@ const SidebarMenuSection = ({
       </Modal>
       {MENU_ITEMS.map(({ id, iconName, text, path }) => (
         <li key={id} className={styles.pannelItem}>
-          <SidebarItem
+          <NavItem
             iconName={iconName}
             content={text}
             isSelected={selectedMenuPath === path}

apps/client/src/shared/components/layouts/sidebar/sidebar-tag-item/sidebar-tag-item.tsx

@@ -1,9 +1,8 @@
 import { TagNode } from '@shared/apis/tag/type';
+import NavItem from '@shared/components/nav-item/nav-item';
 import TreeLine from '@shared/components/tree-line/tree-line';
 import { TreeNode } from '@shared/utils/build-tree';
 
-import SidebarItem from '../sidebar-item/sidebar-item';
-
 interface SidebarTagItemProps {
   tag: TreeNode<TagNode>;
   selectedTagId: number | null;
@@ -19,7 +18,7 @@ const SidebarTagItem = ({
 
   return (
     <TreeLine.Item>
-      <SidebarItem
+      <NavItem
         iconName="ic_tag"
         content={tag.name}
         isSelected={selectedTagId === tag.tagId}

apps/client/src/shared/components/layouts/sidebar/sidebar-tag-section/sidebar-tag-section.tsx

@@ -1,9 +1,9 @@
 import { Tooltip } from '@cds/ui';
 
 import { useGetTag } from '@shared/apis/tag/queries';
+import NavItem from '@shared/components/nav-item/nav-item';
 import TreeLine from '@shared/components/tree-line/tree-line';
 
-import SidebarItem from '../sidebar-item/sidebar-item';
 import SidebarTagItem from '../sidebar-tag-item/sidebar-tag-item';
 import { SidebarSelection } from '../type';
 
@@ -48,7 +48,7 @@ const SidebarTagSection = ({
       ) : (
         <ul className={styles.pannelList}>
           <li className={styles.pannelItem}>
-            <SidebarItem
+            <NavItem
               iconName="ic_tag"
               isSelected={selection.type === 'tag'}
               onClick={onExpand}

apps/client/src/shared/components/layouts/sidebar/sidebar.tsx

@@ -4,8 +4,9 @@ import { useLocation, useNavigate, useSearchParams } from 'react-router';
 import { Icon } from '@cds/icon';
 import { Tooltip } from '@cds/ui';
 
+import NavItem from '@shared/components/nav-item/nav-item';
+
 import { useSidebar } from './sidebar-context';
-import SidebarItem from './sidebar-item/sidebar-item';
 import SidebarMenuSection from './sidebar-menu-section/sidebar-menu-section';
 import SidebarTagSection from './sidebar-tag-section/sidebar-tag-section';
 import { SidebarSelection } from './type';
@@ -89,7 +90,7 @@ const Sidebar = () => {
       <section className={styles.footerSection}>
         <ul className={styles.pannelList}>
           <li className={styles.pannelItem}>
-            <SidebarItem iconName="ic_profile" content="마이페이지" disabled />
+            <NavItem iconName="ic_profile" content="마이페이지" disabled />
             <div className={styles.tooltip}>
               <Tooltip title="마이페이지" />
             </div>

apps/client/src/shared/components/layouts/sidebar/sidebar-item/sidebar-item.css.ts → apps/client/src/shared/components/nav-item/nav-item.css.ts

@@ -1,4 +1,3 @@
-import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
 import { themeVars } from '@cds/ui';
@@ -31,10 +30,17 @@ export const container = recipe({
   },
 });
 
-export const text = style({
-  ...themeVars.fontStyles.body_m_16,
-  color: themeVars.color.grey700,
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
+export const text = recipe({
+  base: {
+    color: themeVars.color.grey700,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  variants: {
+    type: {
+      sm: themeVars.fontStyles.body_m_14,
+      lg: themeVars.fontStyles.body_m_16,
+    },
+  },
 });

apps/client/src/shared/components/layouts/sidebar/sidebar-item/sidebar-item.tsx → apps/client/src/shared/components/nav-item/nav-item.tsx

@@ -2,33 +2,37 @@ import { ButtonHTMLAttributes } from 'react';
 
 import { Icon, IconName } from '@cds/icon';
 
-import * as styles from './sidebar-item.css';
+import * as styles from './nav-item.css';
 
-interface SidebarItemProps extends Pick<
+interface NavItemProps extends Pick<
   ButtonHTMLAttributes<HTMLButtonElement>,
   'onClick' | 'disabled'
 > {
   iconName: IconName;
   content?: string;
   isSelected?: boolean;
+  type?: 'sm' | 'lg';
 }
 
-const SidebarItem = ({
+const NavItem = ({
   iconName,
   content,
   isSelected,
+  type = 'lg',
   ...props
-}: SidebarItemProps) => {
+}: NavItemProps) => {
   return (
     <button
       {...props}
       type="button"
       className={styles.container({ isSelected })}
     >
-      <Icon name={iconName} size={32} />
-      {content != null && <span className={styles.text}>{content}</span>}
+      <Icon name={iconName} size={type === 'lg' ? 32 : 24} />
+      {content != null && (
+        <span className={styles.text({ type })}>{content}</span>
+      )}
     </button>
   );
 };
 
-export default SidebarItem;
+export default NavItem;

apps/client/src/shared/components/parent-tag-list/parent-tag-list.css.ts

@@ -0,0 +1,20 @@
+import { style } from '@vanilla-extract/css';
+
+import { themeVars } from '@cds/ui';
+
+export const container = style({
+  position: 'relative',
+  height: '100%',
+  maxHeight: '25.6rem',
+  padding: '0.4rem 1.8rem 0.4rem 0',
+  borderRight: `1px solid ${themeVars.color.grey200}`,
+  overflowY: 'auto',
+  overflowX: 'hidden',
+});
+
+export const list = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.4rem',
+  width: '13.2rem',
+});

apps/client/src/shared/components/parent-tag-list/parent-tag-list.tsx

@@ -0,0 +1,36 @@
+import { TagNode } from '@shared/apis/tag/type';
+import NavItem from '@shared/components/nav-item/nav-item';
+
+import * as styles from './parent-tag-list.css';
+
+interface ParentTagListProps {
+  tags: TagNode[];
+  selectedTagId: number;
+  onSelect: (tagId: number) => void;
+}
+
+const ParentTagList = ({
+  tags,
+  selectedTagId,
+  onSelect,
+}: ParentTagListProps) => {
+  return (
+    <div className={styles.container}>
+      <ul className={styles.list}>
+        {tags.map(({ tagId, name }) => (
+          <li key={tagId}>
+            <NavItem
+              type="sm"
+              iconName="ic_tag"
+              content={name}
+              isSelected={selectedTagId === tagId}
+              onClick={() => onSelect(tagId)}
+            />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default ParentTagList;

packages/cds-ui/src/styles/global.css.ts

@@ -9,6 +9,9 @@ globalStyle('html, body', {
   padding: 0,
   fontSize: '62.5%',
   fontFamily: `'Pretendard Variable', sans-serif`,
+});
+
+globalStyle('*', {
   scrollbarWidth: 'thin',
   scrollbarColor: `${themeVars.color.grey300} transparent`,
   scrollBehavior: 'smooth',