feat(mobile): 시간선택 View Layout을 구현합니다. (#48)

apps/mobile/app/layout.tsx

@@ -1,3 +1,4 @@
+import "../styles/globals.css";
 import "./globals.css";
 import type { Metadata } from "next";
 

apps/mobile/app/page.tsx

@@ -1,5 +1,3 @@
-import "../styles/globals.css";
-
 export default function Home() {
   return <div>dd</div>;
 }

apps/mobile/app/select-time/layout.tsx

@@ -0,0 +1,14 @@
+import SelectTimeHeader from "../../components/SelectTimeHeader";
+
+export default function Layout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <>
+      <SelectTimeHeader />
+      {children}
+    </>
+  );
+}

apps/mobile/app/select-time/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>셀렉트타임</div>;
+}

apps/mobile/components/SelectTimeHeader.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { MobileIconDonate, MobileIconSharing, MobileIconTeam, MobileLogo } from "@setaday/icon";
+import Link from "next/link";
+import React from "react";
+
+function SelectTimeHeader() {
+  const handleClickDonateButton = () => {
+    // 기부하기 버튼 클릭 시
+  };
+
+  const handleClickTeamButton = () => {
+    // 팀 버튼 클릭 시
+  };
+
+  const handleClickSharingButton = () => {
+    // 공유하기 버튼 클릭 시
+  };
+
+  return (
+    <header className="border-gray-1 flex h-[5.2rem] items-center justify-between border-b-2 px-[2rem]">
+      <Link href="/">
+        <MobileLogo />
+      </Link>
+      <div className="flex gap-[0.8rem]">
+        <button onClick={handleClickDonateButton}>
+          <MobileIconDonate />
+        </button>
+        <button onClick={handleClickTeamButton}>
+          <MobileIconTeam />
+        </button>
+        <button onClick={handleClickSharingButton}>
+          <MobileIconSharing />
+        </button>
+      </div>
+    </header>
+  );
+}
+
+export default SelectTimeHeader;

apps/mobile/package.json

@@ -10,6 +10,8 @@
     "build:css": "tailwindcss -i ./styles/globals.css -o ./dist/output.css --minify"
   },
   "dependencies": {
+    "@setaday/design-token": "workspace:*",
+    "@setaday/icon": "workspace:*",
     "@setaday/ui": "workspace:*",
     "next": "15.0.0-rc.0",
     "react": "19.0.0-rc-f994737d14-20240522",

apps/mobile/styles/globals.css

@@ -142,7 +142,7 @@
   #root,
   body,
   html {
-    @apply m-0 mx-auto min-h-[100dvh] max-w-[43rem] bg-[#f5f5f5];
+    @apply m-0 mx-auto min-h-[100dvh] w-[100vw] max-w-[43rem];
     -ms-overflow-style: none;
     scrollbar-width: none;
   }

apps/mobile/tailwind.config.ts

@@ -1,8 +1,13 @@
+import { color, font } from "@setaday/design-token";
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      colors: color,
+      fontSize: font,
+    },
   },
   plugins: [],
 };