Merge pull request #167 from Boggle-Boggle/develop

Develop -> Staging

Author: devkyoung2

AGENTS.md

@@ -8,6 +8,16 @@ The current codebase consists of legacy code from an older version of bbaegok th
 
 - All responses must be written in Korean.
 - All plans must be written in Korean.
+- Always perform work in the smallest possible unit.
+- Do not modify many files at once.
+- If multiple files need to be modified, split the work into multiple steps.
+- After each step is completed, request user confirmation before proceeding to the next step.
+- Do not proceed to the next step without explicit user approval.
+
+## Figma API Usage Rules
+
+- The Figma API has rate limits, so repeated requests for the same resource must be cached and reused.
+- Figma API requests must always be minimized.
 
 ## Tech Stack
 
@@ -359,7 +369,7 @@ return (
 **Code inside a file containing components should be ordered as follows:**
 
 1. Imports
-2. Interface and type definitions
+2. type definitions
 3. Component-specific constants (consider future i18n support)
 4. Component
 5. Sub-components

src/components/BookCase/index.tsx

@@ -258,11 +258,11 @@ export const BookCase = () => {
   return (
     <div
       style={{ boxShadow: outerBoxShadow, height: outerHeight }}
-      className="w-[21.438rem] rounded-[32px] border border-neutral-20 bg-neutral-0 p-5"
+      className="w-full rounded-[32px] border border-neutral-20 bg-neutral-0 p-5"
     >
       <div
         style={{ boxShadow: innerBoxShadow, height: innerHeight, background: innerBackground }}
-        className="flex w-[18.938rem] flex-col justify-start rounded-xl py-4"
+        className="flex w-full flex-col justify-start rounded-xl py-4"
       >
         {allBooks.map((shelfBooks, idx) => {
           const shelfSpacingClass = idx === allBooks.length - 1 ? '' : 'pb-4';

src/components/Header/Header.stories.tsx

@@ -0,0 +1,70 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { MemoryRouter } from 'react-router-dom';
+
+import { Header } from './index';
+import Search from '../icons/Search';
+
+const meta: Meta<typeof Header> = {
+  title: 'Components/Header',
+  component: Header,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+  argTypes: {
+    title: { control: 'text' },
+    leftBtn: { control: false },
+    rightBtn: { control: false },
+    withBack: { control: 'boolean' },
+    withSpacer: { control: 'boolean' },
+    transparent: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Header>;
+
+export const Default: Story = {
+  args: {
+    title: '페이지 타이틀',
+    withSpacer: false,
+  },
+};
+
+export const Transparent: Story = {
+  args: {
+    ...Default.args,
+    transparent: true,
+  },
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+};
+
+export const WithBack: Story = {
+  args: {
+    ...Default.args,
+    withBack: true,
+  },
+};
+
+export const WithRightButton: Story = {
+  args: {
+    ...Default.args,
+    rightBtn: (
+      <button className="px-4" aria-label="label" type="button">
+        <Search />
+      </button>
+    ),
+  },
+};

src/components/Header/index.tsx

@@ -9,7 +9,7 @@ type HeaderProps = {
   transparent?: boolean;
 };
 
-const Header = ({
+export const Header = ({
   title,
   leftBtn,
   rightBtn,
@@ -20,20 +20,18 @@ const Header = ({
   const transparentClass = transparent ? 'bg-transparent' : 'bg-neutral-0';
   return (
     <>
-      <div
-        className={`fixed z-header grid h-header w-full max-w-mobile grid-cols-[1fr_auto_1fr] items-center pt-safe-top ${transparentClass}`}
-      >
-        <div className="flex justify-start">
-          {withBack && <BackButton />}
-          {leftBtn}
+      <div className={`fixed z-header w-full max-w-mobile pt-safe-top ${transparentClass}`}>
+        <div className="grid h-header grid-cols-[1fr_auto_1fr] items-center">
+          <div className="flex justify-start">
+            {withBack && <BackButton />}
+            {leftBtn}
+          </div>
+          <h1 className="truncate px-2 text-center text-body1">{title}</h1>
+          <div className="flex justify-end">{rightBtn}</div>
         </div>
-        <h1 className="truncate px-2 text-center text-body1">{title}</h1>
-        <div className="flex justify-end">{rightBtn}</div>
       </div>
 
       {withSpacer && <div className="mt-safe-top h-header" />}
     </>
   );
 };
-
-export default Header;

src/pages/Main/index.tsx

@@ -1,14 +1,20 @@
 import { BookCase } from 'components/BookCase';
-import Header from 'components/Header';
+import { Searchbar } from 'components/Searchbar';
 
+const MSG_TITLE_SEARCH_PLACEHOLDER = '책 제목을 입력해주세요';
 const Main = () => {
   return (
-    <>
-      <Header withSpacer={false} title="타이틀" rightBtn={<button aria-label="기간선택" type="button" />} />
-      <div className="flex h-dvh flex-col items-center justify-center overflow-scroll">
+    <div className="relative h-dvh overflow-scroll bg-secondary pt-safe-top">
+      <div className="relative z-10 h-full px-mobile">
+        <Searchbar value="" onChange={() => {}} onSubmit={() => {}} placeholder={MSG_TITLE_SEARCH_PLACEHOLDER} />
+        <p className="mt-4 text-title1">2025년 전체 책장</p>
+        <p className="mb-[1.375rem] text-body1 text-neutral-60">45권 채웠습니다</p>
         <BookCase />
       </div>
-    </>
+
+      <div className="absolute inset-0 bg-neutral-0 mix-blend-soft-light" />
+      <div className="absolute bottom-0 h-48 w-full bg-[linear-gradient(180deg,_#A6D68E_0%,_rgba(255,255,255,0)_100%)]" />
+    </div>
   );
 };
 

src/router.tsx

@@ -20,7 +20,7 @@ const WithoutBottomNavLayout = lazy(() => import('pages/Layout/WithoutBottomNavL
 // const Note = lazy(() => import('pages/Note'));
 const PrivateRoute = lazy(() => import('pages/PrivateRoute'));
 // const Record = lazy(() => import('pages/Record'));
-const Search = lazy(() => import('pages/Search'));
+// const Search = lazy(() => import('pages/Search'));
 // const SignUp = lazy(() => import('pages/SignUp'));
 
 const router = createBrowserRouter([
@@ -35,8 +35,8 @@ const router = createBrowserRouter([
           {
             element: <WithBottomNavLayout />,
             children: [
-              // { path: '/', element: <Main /> },
-              { path: '/', element: <Search /> },
+              { path: '/', element: <Main /> },
+              // { path: '/', element: <Search /> },
               // { path: 'library', element: <Library /> },
               // { path: 'myPage', element: <MyPage /> },
               // { path: 'detail/:detailId', element: <BookDetail /> },