Merge pull request #48 from geulDa/feat/#42/main-page-layout

Feat: main page layout 작업

Author: jjangminii

public/assets/bannerMain.svg

@@ -1,6 +1,4 @@
-import { ControlBar, Header, Tag } from '@/shared/components';
 import { Icon } from '@/shared/icons';
-import Progress from './main/components/stampBoard/Progress';
 import StampBoard from './main/components/stampBoard/StampBoard';
 
 export default function Home() {

public/assets/board.svg

@@ -1,3 +1,5 @@
+'use client';
+
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import { cn } from '@/shared/lib';
 
@@ -9,11 +11,7 @@ export interface ProgressProps
   value: number;
 }
 
-export default function Progress({
-  className,
-  value,
-  ...props
-}: ProgressProps) {
+const Progress = ({ className, value, ...props }: ProgressProps) => {
   const progressPercent = Math.max(0, Math.min(100, value));
 
   return (
@@ -39,4 +37,6 @@ export default function Progress({
       />
     </ProgressPrimitive.Root>
   );
-}
+};
+
+export default Progress;

src/pages/index.tsx

@@ -7,7 +7,7 @@ export interface StampProps {
   className?: string;
 }
 
-export default function Stamp({ index, acquired, className }: StampProps) {
+const Stamp = ({ index, acquired, className }: StampProps) => {
   if (acquired) {
     return (
       <div
@@ -28,4 +28,5 @@ export default function Stamp({ index, acquired, className }: StampProps) {
       aria-label={`${index + 1}번째 스탬프 미획득`}
     />
   );
-}
+};
+export default Stamp;

src/pages/main/components/stampBoard/Progress.tsx

@@ -8,11 +8,7 @@ export interface StampBoardProps {
   className?: string;
 }
 
-export default function StampBoard({
-  count,
-  total = 8,
-  className,
-}: StampBoardProps) {
+const StampBoard = ({ count, total = 8, className }: StampBoardProps) => {
   const clamped = Math.max(0, Math.min(total, count));
   const percent = (clamped / total) * 100;
 
@@ -33,15 +29,25 @@ export default function StampBoard({
         </span>
       </header>
 
-      <ul role='list' className='grid grid-cols-8' aria-label='스탬프 목록'>
-        {Array.from({ length: total }).map((_, i) => (
-          <li key={i} className='flex items-center justify-center'>
-            <Stamp index={i} acquired={i < clamped} />
-          </li>
-        ))}
+      <ul
+        role='list'
+        className='grid'
+        style={{ gridTemplateColumns: `repeat(${total}, minmax(0, 1fr))` }}
+        aria-label='스탬프 목록'
+      >
+        {Array.from({ length: total }).map((_, i) => {
+          const key = `stamp-${i}`;
+          return (
+            <li key={key} className='flex items-center justify-center'>
+              <Stamp index={i} acquired={i < clamped} />
+            </li>
+          );
+        })}
       </ul>
 
       <Progress value={percent} className='my-[0.6rem]' />
     </section>
   );
-}
+};
+
+export default StampBoard;

src/pages/main/components/stampBoard/Stamp.tsx

@@ -0,0 +1,45 @@
+import { cn } from '@/shared/lib';
+import StampBoard from './components/stampBoard/StampBoard';
+import { ControlBar } from '@/shared/components';
+import Image from 'next/image';
+
+export default function MainPage() {
+  return (
+    <div className={cn('px-[2.4rem] bg-white flex flex-col gap-[1rem]')}>
+      <ControlBar
+        isLoggedIn={false}
+        onLogin={() => {}}
+        userName='글다'
+        className='fixed top-[0.6rem] left-0 right-0 z-50 px-[2rem]'
+      />
+
+      <main className='w-full pt-[6.2rem] flex flex-col gap-4 overflow-auto'>
+        <section>
+          <Image
+            src='/assets/bannerMain.svg'
+            alt='...'
+            width={354}
+            height={79}
+            className='w-full h-auto object-cover block'
+          />
+        </section>
+
+        <section
+          onClick={() => {
+            /* TODO: 페이지 이동 */
+          }}
+        >
+          <Image
+            src='/assets/board.svg'
+            alt='보드판'
+            width={354}
+            height={426.36}
+            className='w-full h-auto object-cover block'
+          />
+        </section>
+
+        <StampBoard count={3} total={8} />
+      </main>
+    </div>
+  );
+}

src/pages/main/components/stampBoard/StampBoard.tsx

@@ -29,7 +29,7 @@ const ControlBar = ({
   const iconColor = isLoggedIn ? 'mint-600' : ('gray-400' as const);
 
   return (
-    <header className={cn('bg-none w-full h-[5.4rem]', className)} role='group'>
+    <header className={cn(' w-full h-[5.4rem] bg-white', className)}>
       <div className='h-full grid grid-cols-[auto_1fr_auto] items-center gap-[1.2rem]'>
         <div
           className='w-[7.8rem] h-[5.4rem] rounded-[0.6rem] bg-gray-200'