Feat(client): 레벨 페이지 레이아웃

apps/client/src/layout/Layout.tsx

@@ -1,15 +1,10 @@
 import { Outlet } from 'react-router-dom';
-import OptionsMenuButton from '@shared/components/optionsMenuButton/OptionsMenuButton';
 
 const Layout = () => {
   return (
     <>
       {/* TODO: 필요시 레이아웃 추가 */}
       {/* TODO: 사이드바 추가 */}
-      <OptionsMenuButton
-        onEdit={function (): void {}}
-        onDelete={function (): void {}}
-      ></OptionsMenuButton>
 
       <Outlet />
     </>

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

@@ -1,5 +1,54 @@
-const Level = () => {
-  return <div className="bg-secondary flex flex-col gap-[2rem] p-[1rem]"></div>;
-};
+import { Icon } from '@pinback/design-system/icons';
+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 { TreeLevel } from '@pages/level/types/treeLevelType';
+import { Badge } from '@pinback/design-system/ui';
 
-export default Level;
+export default function Level() {
+  const acorns = 1; // TODO: API 연결되면 교체
+  const info = getTreeLevel(acorns);
+
+  return (
+    <div className={cn('bg-subcolor mx-auto h-dvh w-full overflow-hidden')}>
+      <div className="relative h-full w-full overflow-hidden rounded-[1.2rem]">
+        <LevelScene level={info.level as TreeLevel} />
+
+        <div className="absolute inset-0">
+          <div className="flex flex-col items-start gap-[2rem] px-[8rem] py-[5.2rem]">
+            <div className="flex flex-row items-center gap-[0.8rem]">
+              <h1 className="head3 text-font-black-1">치삐의 지식나무 숲</h1>
+              <div className="relative items-center">
+                <button
+                  type="button"
+                  className="peer flex items-center justify-center p-[0.4rem]"
+                  aria-describedby="level-info-card"
+                >
+                  <Icon name="ic_info" width={20} height={20} />
+                </button>
+                <div
+                  id="level-info-card"
+                  className={cn(
+                    'pointer-events-none absolute left-0 top-[3rem] z-[20]',
+                    'opacity-0 transition-opacity duration-150',
+                    'peer-hover:pointer-events-auto peer-focus-visible:pointer-events-auto',
+                    'peer-hover:opacity-100 peer-focus-visible:opacity-100'
+                  )}
+                >
+                  <LevelInfoCard />
+                </div>
+              </div>
+            </div>
+
+            <Badge text="오늘 모은 도토리 개수" countNum={acorns} />
+            <div className="flex">
+              <TreeStatusCard acorns={acorns} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,7 +1,7 @@
 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';
+import { TREE_LEVEL_TABLE, TreeLevel } from '@pages/level/types/treeLevelType';
 
 const LEVEL_TOOLTIP_ICON = {
   1: 'tooltip_1',

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

@@ -0,0 +1,34 @@
+import { cn } from '@pinback/design-system/utils';
+import { TreeLevel } from '@pages/level/types/treeLevelType';
+import { HTMLAttributes } from 'react';
+
+import chippi_level1 from '../../../assets/chippi_level1.png';
+import chippi_level2 from '../../../assets/chippi_level2.png';
+import chippi_level3 from '../../../assets/chippi_level3.png';
+import chippi_level4 from '../../../assets/chippi_level4.png';
+import chippi_level5 from '../../../assets/chippi_level5.png';
+
+const SCENE_BY_LEVEL: Record<TreeLevel, string> = {
+  1: chippi_level1,
+  2: chippi_level2,
+  3: chippi_level3,
+  4: chippi_level4,
+  5: chippi_level5,
+} as const;
+
+interface LevelSceneProps extends HTMLAttributes<HTMLDivElement> {
+  level: TreeLevel;
+}
+
+export default function LevelScene({ level, className }: LevelSceneProps) {
+  const src = SCENE_BY_LEVEL[level];
+  return (
+    <div className={cn('absolute inset-0', className)} aria-hidden="true">
+      <img
+        src={src}
+        draggable={false}
+        className="pointer-events-none h-full w-full select-none rounded-[1.2rem] object-contain object-[right_bottom]"
+      />
+    </div>
+  );
+}

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 '../utils/treeLevel';
+import { getTreeLevel } from '@pages/level/utils/treeLevel';
 
 export interface TreeStatusCardProps {
   acorns: number;

apps/client/src/pages/level/types/treeLevelType.ts

@@ -0,0 +1,25 @@
+export 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;
+};

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

@@ -1,27 +1,8 @@
-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;
-};
+import {
+  TREE_LEVEL_TABLE,
+  TreeLevelResult,
+  TreeLevelRow,
+} from '@pages/level/types/treeLevelType';
 
 function findLevelRow(count: number, rows: readonly TreeLevelRow[]) {
   const idx = rows.findIndex(
@@ -48,3 +29,5 @@ export function getTreeLevel(acorns: number): TreeLevelResult {
   const { row, next } = findLevelRow(acorns, TREE_LEVEL_TABLE);
   return { ...row, ...calcProgress(acorns, row, next) };
 }
+
+export { TREE_LEVEL_TABLE };

packages/tailwind-config/shared-styles.css

@@ -180,7 +180,7 @@
   --color-gradient-end: #33d08f;
 
   /* Secondary Color */
-  --color-secondary: #f4f2ec;
+  --color-subcolor: #f4f2ec;
 
   /* Grayscale */
   --color-gray0: #f7f7fb;