Feat(client): tree 레벨 컴포넌트 구현 (#54)

* feat: TreeStatusCard 구현

* style: TreeStatusCard 스타일 수정 및 클래스 이름 변경

* feat: 폰트 수정

* feat: 레벨 툴팁 아이콘 추가

* feat: LevelInfoCard 컴포넌트 추가 및 레벨 페이지에 통합

* feat: 색상 변경

* feat: 레벨 info 카드 썸네일

* feat: 로직 간소화

* chore: 주석 제거

* feat: 코드리뷰 반영

* refactor: 불필요한 함수 제거

* chore: 주석 제거

Author: jjangminii

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

@@ -1,5 +1,5 @@
 const Level = () => {
-  return <div>Level</div>;
+  return <div className="bg-secondary flex flex-col gap-[2rem] p-[1rem]"></div>;
 };
 
 export default Level;

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

@@ -0,0 +1,68 @@
+import { cn } from '@pinback/design-system/utils';
+import { Level } from '@pinback/design-system/ui';
+import { Icon, type IconName } from '@pinback/design-system/icons';
+import { TREE_LEVEL_TABLE, type TreeLevel } from '../utils/treeLevel';
+
+const LEVEL_TOOLTIP_ICON = {
+  1: 'tooltip_1',
+  2: 'tooltip_2',
+  3: 'tooltip_3',
+  4: 'tooltip_4',
+  5: 'tooltip_5',
+} as const satisfies Record<TreeLevel, IconName>;
+
+export default function LevelInfoCard() {
+  const rows = [...TREE_LEVEL_TABLE].reverse();
+
+  return (
+    <section
+      className={cn(
+        'bg-white-bg common-shadow w-[24.6rem] rounded-[1.2rem] px-[1.6rem] py-[2.4rem]'
+      )}
+      aria-label="지식나무 숲 레벨 안내"
+    >
+      <h2 className="sub2-sb text-font-black-1 mb-[1.2rem] flex items-center justify-center">
+        치삐의 지식나무 숲 레벨
+      </h2>
+
+      <ul>
+        {rows.map((row) => (
+          <li
+            key={row.level}
+            className="flex w-full items-center justify-between py-[1.2rem]"
+          >
+            <div className="flex w-full items-center gap-[1.2rem]">
+              <div className="bg-gray0 flex h-[4.6rem] w-[4.6rem] items-center justify-center rounded-[0.8rem]">
+                <Icon
+                  name={LEVEL_TOOLTIP_ICON[row.level]}
+                  width={46}
+                  height={46}
+                  className="rounded-[0.8rem]"
+                  aria-label={`${row.level} 썸네일 아이콘`}
+                />
+              </div>
+
+              <div className="ml-[0.8rem] flex flex-1 flex-col gap-[0.4rem]">
+                <div className="flex justify-between">
+                  <span className="sub5-sb text-font-black-1">{row.name}</span>
+                  <Level level={row.level} aria-label={`레벨 ${row.level}`} />
+                </div>
+
+                <span className="caption2-m text-font-gray-3">
+                  {row.rangeLabel}
+                </span>
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
+
+      <div className="bg-gray0 mt-[0.8rem] rounded-[0.4rem] px-[0.8rem] py-[1.2rem]">
+        <p className="caption2-m text-font-gray-3 flex items-center justify-center">
+          정보를 1분 동안 읽고 도토리를 모아보세요. 치삐를 행복하게 만들 수
+          있어요.
+        </p>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,38 @@
+import { Level, Progress } from '@pinback/design-system/ui';
+import { cn } from '@pinback/design-system/utils';
+import { getTreeLevel } from '../utils/treeLevel';
+
+export interface TreeStatusCardProps {
+  acorns: number;
+}
+
+export default function TreeStatusCard({ acorns }: TreeStatusCardProps) {
+  const info = getTreeLevel(acorns);
+
+  const barPercent = Math.min(100, info.level * 20);
+
+  return (
+    <div
+      className={cn('bg-white-bg w-[32.3rem] rounded-[1.2rem] p-[1.2rem]')}
+      role="group"
+      aria-label={`${info.name} 진행 카드`}
+    >
+      <div className="flex items-baseline">
+        <span className="head1 text-main500">{barPercent}%</span>
+      </div>
+
+      <div className="mt-[0.8rem] flex items-center gap-[0.4rem]">
+        <span className="sub4-sb text-font-gray-2">{info.name}</span>
+        <Level level={info.level} />
+      </div>
+
+      <div className="mt-[1.6rem]">
+        <Progress
+          value={barPercent}
+          variant="tree"
+          aria-label={`${info.name} 레벨 진행률`}
+        />
+      </div>
+    </div>
+  );
+}

apps/client/src/pages/level/utils/treeLevel.ts

@@ -0,0 +1,50 @@
+type TreeLevelRowShape = {
+  level: number;
+  name: string;
+  min: number;
+  max?: number;
+  rangeLabel: string;
+};
+
+export const TREE_LEVEL_TABLE = [
+  { level: 1, name: '잊힌 기록의 숲', min: 0, max: 0, rangeLabel: '0개' },
+  { level: 2, name: '햇살의 터전', min: 1, max: 2, rangeLabel: '1–2개' },
+  { level: 3, name: '기록의 오솔길', min: 3, max: 4, rangeLabel: '3–4개' },
+  { level: 4, name: '지식 나무 언덕', min: 5, max: 6, rangeLabel: '5–6개' },
+  { level: 5, name: '도토리 만개 숲', min: 7, rangeLabel: '7개 이상' },
+] as const satisfies readonly TreeLevelRowShape[];
+
+export type TreeLevel = (typeof TREE_LEVEL_TABLE)[number]['level'];
+export type TreeLevelRow = TreeLevelRowShape;
+
+export type TreeLevelResult = TreeLevelRow & {
+  progressToNext: number;
+  nextMin?: number;
+  remainingToNext?: number;
+};
+
+function findLevelRow(count: number, rows: readonly TreeLevelRow[]) {
+  const idx = rows.findIndex(
+    (r) => count >= r.min && (r.max === undefined || count <= r.max)
+  );
+  const i = idx === -1 ? 0 : idx;
+  return { row: rows[i], next: rows[i + 1] as TreeLevelRow | undefined };
+}
+
+function calcProgress(count: number, row: TreeLevelRow, next?: TreeLevelRow) {
+  if (!next)
+    return {
+      progressToNext: 1 as const,
+      nextMin: undefined,
+      remainingToNext: undefined,
+    };
+  const span = Math.max(1, next.min - row.min);
+  const progressToNext = Math.min(1, (count - row.min) / span);
+  const remainingToNext = Math.max(0, next.min - count);
+  return { progressToNext, nextMin: next.min, remainingToNext };
+}
+
+export function getTreeLevel(acorns: number): TreeLevelResult {
+  const { row, next } = findLevelRow(acorns, TREE_LEVEL_TABLE);
+  return { ...row, ...calcProgress(acorns, row, next) };
+}

packages/design-system/src/icons/iconNames.ts

@@ -11,5 +11,10 @@ export const iconNames = [
   'ic_details_disable',
   'ic_info',
   'ic_plus',
+  'tooltip_1',
+  'tooltip_2',
+  'tooltip_3',
+  'tooltip_4',
+  'tooltip_5',
 ] as const;
 export type IconName = (typeof iconNames)[number];

packages/design-system/src/icons/index.ts

@@ -1 +1,2 @@
 export { Icon } from './components/icon';
+export type { IconName } from './iconNames';