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,58 @@
-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 './components/LevelScene';
+import LevelInfoCard from './components/LevelInfoCard';
+import TreeStatusCard from './components/TreeStatusCard';
+import { getTreeLevel, type TreeLevel } from './utils/treeLevel';
+import { Badge } from '@pinback/design-system/ui';
 
-export default Level;
+interface LevelPageProps {
+  acorns?: number;
+}
+
+export default function Level({ acorns = 3 }: LevelPageProps) {
+  const info = getTreeLevel(acorns);
+
+  return (
+    <div className={cn('bg-subcolor mx-auto w-full max-w-[96rem]')}>
+      <div className="relative 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>
+            {/* TODO: 오늘 모은 도토리 개수 배지 */}
+            <Badge text={'오늘 모은 도토리 개수'} countNum={acorns} />
+
+            <div className="flex">
+              <TreeStatusCard acorns={acorns} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,40 @@
+// components/LevelScene.tsx
+import * as React from 'react';
+import { cn } from '@pinback/design-system/utils';
+import { type TreeLevel } from '../utils/treeLevel';
+
+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 React.HTMLAttributes<HTMLDivElement> {
+  level: TreeLevel;
+}
+
+export default function LevelScene({
+  level,
+  className,
+  ...rest
+}: LevelSceneProps) {
+  const src = SCENE_BY_LEVEL[level];
+  return (
+    <div className={cn('relative w-full', className)} {...rest}>
+      <img
+        src={src}
+        alt={`지식나무 숲 Lv.${level}`}
+        className="h-auto w-full select-none rounded-[1.2rem] object-cover"
+        draggable={false}
+      />
+    </div>
+  );
+}

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;