Feat(client): sidebar 구현

apps/client/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "class-variance-authority": "^0.7.1",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-router-dom": "^7.8.2"

apps/client/src/layout/Layout.tsx

@@ -1,11 +1,13 @@
 import { Outlet } from 'react-router-dom';
+import { Sidebar } from '../shared/components/sidebar/Sidebar';
 
 const Layout = () => {
   return (
     <>
       {/* TODO: 필요시 레이아웃 추가 */}
       {/* TODO: 사이드바 추가 */}
 
+      <Sidebar />
       <Outlet />
     </>
   );

apps/client/src/pages/level/Level.tsx

@@ -3,7 +3,7 @@ import { cn } from '@pinback/design-system/utils';
 import LevelScene from '@pages/level/components/LevelScene';
 import LevelInfoCard from '@pages/level/components/LevelInfoCard';
 import TreeStatusCard from '@pages/level/components/TreeStatusCard';
-import { getTreeLevel } from '@pages/level/utils/treeLevel';
+import { getTreeLevel } from '@shared/utils/treeLevel';
 import { TreeLevel } from '@pages/level/types/treeLevelType';
 import { Badge } from '@pinback/design-system/ui';
 

apps/client/src/pages/level/components/TreeStatusCard.tsx

@@ -1,6 +1,6 @@
 import { Level, Progress } from '@pinback/design-system/ui';
 import { cn } from '@pinback/design-system/utils';
-import { getTreeLevel } from '@pages/level/utils/treeLevel';
+import { getTreeLevel } from '@shared/utils/treeLevel';
 
 export interface TreeStatusCardProps {
   acorns: number;

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

@@ -0,0 +1,68 @@
+import { useState, useId } from 'react';
+import { cn } from '@pinback/design-system/utils';
+import SideItem from './SideItem';
+import { IconToken } from './types/IconTokenType';
+
+interface AccordionItemProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+  icon: IconToken;
+  label: string;
+  children: React.ReactNode;
+  active: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  trailing?: boolean;
+  className?: string;
+  onClick: () => void;
+}
+
+export default function AccordionItem({
+  icon,
+  label,
+  children,
+  active,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  trailing = true,
+  className,
+  onClick,
+}: AccordionItemProps) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isOpen = open ?? internalOpen;
+
+  const panelId = useId();
+
+  const toggle = () => {
+    const next = !isOpen;
+    onOpenChange?.(next);
+    if (open === undefined) setInternalOpen(next);
+  };
+
+  return (
+    <div className={cn(className)}>
+      <SideItem
+        icon={icon}
+        label={label}
+        active={active}
+        trailing={trailing}
+        open={isOpen}
+        onTrailingClick={toggle}
+        onClick={onClick}
+      />
+
+      <div
+        id={panelId}
+        className={cn(
+          'grid overflow-hidden transition-[grid-template-rows]',
+          isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
+        )}
+      >
+        <div className="min-h-0 gap-[0.2rem] bg-none py-[0.4rem]">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,61 @@
+import { Icon } from '@pinback/design-system/icons';
+import { cn } from '@pinback/design-system/utils';
+
+interface CategoryItemProps {
+  id: number;
+  label: string;
+  active: boolean;
+  className?: string;
+  onClick: (id: number) => void;
+  onOptionsClick?: (id: number, anchorEl: HTMLElement) => void;
+}
+
+export default function CategoryItem({
+  id,
+  label,
+  active = false,
+  className,
+  onClick,
+  onOptionsClick,
+}: CategoryItemProps) {
+  return (
+    <div
+      className={cn(
+        'flex h-[3.6rem] w-full items-center justify-between rounded-[0.4rem] px-[1.2rem]',
+        active ? 'bg-main0' : 'bg-white-bg',
+        'transition-colors',
+        className
+      )}
+    >
+      <button
+        type="button"
+        aria-pressed={active}
+        onClick={() => onClick(id)}
+        className={cn(
+          'body4-r flex-1 text-left',
+          active ? 'text-main600' : 'text-font-gray-2'
+        )}
+      >
+        {label}
+      </button>
+
+      <button
+        type="button"
+        aria-haspopup="menu"
+        aria-label="카테고리 옵션"
+        className="ml-2"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onOptionsClick?.(id, e.currentTarget);
+        }}
+      >
+        <Icon
+          name={active ? 'ic_details_category' : 'ic_details_disable'}
+          aria-hidden
+          className="h-[1.8rem] w-[1.8rem]"
+        />
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,27 @@
+import { Icon } from '@pinback/design-system/icons';
+import { cn } from '@pinback/design-system/utils';
+
+interface CreateItemProps {
+  onClick: () => void;
+}
+//TODO: onClick 이벤트 추가
+
+export default function CreateItem({ onClick }: CreateItemProps) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        'bg-white-bg flex h-[3.6rem] w-full gap-[0.8rem] rounded-[0.4rem] p-[0.8rem]',
+        'items-center transition-colors'
+      )}
+      onClick={onClick}
+    >
+      <Icon
+        name={'ic_plus'}
+        aria-hidden
+        className={cn('h-[1.6rem] w-[1.6rem]')}
+      />
+      <p className={'body4-r text-main500'}>카테고리 추가</p>
+    </button>
+  );
+}

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

@@ -0,0 +1,61 @@
+import { Icon } from '@pinback/design-system/icons';
+import { Level, Progress } from '@pinback/design-system/ui';
+import { cn } from '@pinback/design-system/utils';
+import { getTreeLevel } from '@shared/utils/treeLevel';
+
+interface MyLevelItemProps {
+  acorns: number;
+  className?: string;
+  isActive: boolean;
+  onClick: () => void;
+}
+
+export default function MyLevelItem({
+  acorns,
+  onClick,
+  isActive: active,
+}: MyLevelItemProps) {
+  const info = getTreeLevel(acorns);
+
+  const barPercent = Math.min(100, info.level * 20);
+
+  return (
+    <div
+      onClick={onClick}
+      className={cn(
+        'h-[6.2rem] w-full rounded-[0.4rem] border p-[0.8rem] transition-colors',
+        'flex flex-row justify-between gap-[0.8rem]',
+        'bg-white-bg border-transparent',
+        'hover:bg-main0 hover:border-main400',
+        active && 'bg-main0 border-main400'
+      )}
+    >
+      <div
+        className="flex size-[4.6rem] items-center justify-center"
+        aria-hidden
+      >
+        <Icon
+          name="chippi_profile"
+          width={46}
+          height={46}
+          className="rounded-[0.4rem]"
+        />
+      </div>
+
+      <div className="flex w-full flex-col justify-between">
+        <div className="flex items-center justify-between gap-2">
+          <span className="sub5-sb text-font-gray-2">{info.name}</span>
+          <Level level={info.level} />
+        </div>
+
+        <div className="w-full py-[0.7rem]">
+          <Progress
+            value={barPercent}
+            variant="profile"
+            aria-label={`${info.name} 레벨 진행률`}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,45 @@
+import { createPortal } from 'react-dom';
+import OptionsMenuButton from '@shared/components/optionsMenuButton/OptionsMenuButton';
+
+interface OptionsMenuPortalProps {
+  open: boolean;
+  style?: React.CSSProperties | null;
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  categoryId: number | null;
+  getCategoryName: (id: number | null) => string;
+  onEdit: (id: number, name: string) => void;
+  onDelete: (id: number, name: string) => void;
+  onClose: () => void;
+}
+
+export default function OptionsMenuPortal({
+  open,
+  style,
+  containerRef,
+  categoryId,
+  getCategoryName,
+  onEdit,
+  onDelete,
+  onClose,
+}: OptionsMenuPortalProps) {
+  if (!open || !style) return null;
+
+  const id = categoryId;
+  const name = getCategoryName(categoryId);
+
+  return createPortal(
+    <div ref={containerRef} style={{ ...style, zIndex: 10000 }}>
+      <OptionsMenuButton
+        onEdit={() => {
+          if (id != null) onEdit(id, name);
+          onClose();
+        }}
+        onDelete={() => {
+          if (id != null) onDelete(id, name);
+          onClose();
+        }}
+      />
+    </div>,
+    document.body
+  );
+}

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

@@ -0,0 +1,65 @@
+import { createPortal } from 'react-dom';
+import { Popup } from '@pinback/design-system/ui';
+import type { PopupState } from '@shared/hooks/useCategoryPopups';
+
+interface Props {
+  popup: PopupState;
+  onClose: () => void;
+  onCreateConfirm?: () => void;
+  onEditConfirm?: (id: number, draft?: string) => void;
+  onDeleteConfirm?: (id: number) => void;
+}
+
+export default function PopupPortal({
+  popup,
+  onClose,
+  onCreateConfirm,
+  onEditConfirm,
+  onDeleteConfirm,
+}: Props) {
+  if (!popup) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-[11000]">
+      <div className="absolute inset-0 bg-black/60" onClick={onClose} />
+      <div className="absolute inset-0 grid place-items-center p-4">
+        {popup.kind === 'create' && (
+          <Popup
+            type="input"
+            title="카테고리 추가하기"
+            left="취소"
+            right="추가"
+            placeholder="카테고리 제목을 입력해주세요"
+            onLeftClick={onClose}
+            onRightClick={() => onCreateConfirm?.()}
+          />
+        )}
+
+        {popup.kind === 'edit' && (
+          <Popup
+            type="input"
+            title="카테고리 수정하기"
+            left="취소"
+            right="확인"
+            placeholder={popup.name}
+            onLeftClick={onClose}
+            onRightClick={() => onEditConfirm?.(popup.id)}
+          />
+        )}
+
+        {popup.kind === 'delete' && (
+          <Popup
+            type="subtext"
+            title="정말 삭제하시겠어요?"
+            subtext="저장된 내용이 모두 삭제됩니다."
+            left="취소"
+            right="삭제"
+            onLeftClick={onClose}
+            onRightClick={() => onDeleteConfirm?.(popup.id)}
+          />
+        )}
+      </div>
+    </div>,
+    document.body
+  );
+}