Merge pull request #51 from geulDa/feat/#49/main-board

✨Feat: main페이지 board판

Author: jjangminii

public/assets/background_.svg

@@ -0,0 +1,18 @@
+import { Header } from '@/shared/components';
+
+import Boardgame from '@/pages/main/components/board/Boardgame';
+import router from 'next/router';
+
+const Board = () => {
+  return (
+    <div className='relative w-full h-[100vh] bg-[#46d1cd] overflow-auto'>
+      <Header title='지도' onClick={() => router.back()} />
+
+      <main className='relative pt-[11.8rem]'>
+        <Boardgame />
+      </main>
+    </div>
+  );
+};
+
+export default Board;

public/assets/bannerMain.svg

@@ -0,0 +1,43 @@
+'use client';
+import Image from 'next/image';
+import { boardData } from '@/shared/constants/main/boardData';
+
+const Boardgame = () => {
+  return (
+    <div className='relative w-full  h-full bg-[#46d1cd] overflow-hidden'>
+      <Image
+        src='/assets/background_.svg'
+        alt='board background'
+        width={402}
+        height={755}
+        className='w-full h-full object-cover'
+        priority
+      />
+
+      <div
+        className='
+          absolute top-0 left-0
+          w-full h-full
+          grid grid-cols-4 grid-rows-8 gap-0
+          px-[2rem] pb-[1.7rem]
+        '
+      >
+        {boardData.map((row, r) =>
+          row.map((cell, c) => {
+            const key = `cell-${r}-${c}`;
+
+            if (!cell.active) {
+              return <div key={key} className='bg-transparent' />;
+            }
+
+            return (
+              <div key={key} onClick={() => console.log(cell.label)}></div>
+            );
+          }),
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Boardgame;

src/pages/main/Board.tsx

@@ -12,19 +12,22 @@ const Stamp = ({ index, acquired, className }: StampProps) => {
     return (
       <div
         className={cn(
-          'flex items-center justify-center w-[3rem] h-[3rem]',
+          'flex items-center justify-center w-[2.8rem] h-[2.8rem]',
           className,
         )}
         aria-label={`${index + 1}번째 스탬프 획득`}
       >
-        <Icon name='Stamp' size={30} color='pink-400' aria-hidden />
+        <Icon name='Stamp' size={28} color='pink-400' aria-hidden />
       </div>
     );
   }
 
   return (
     <div
-      className={cn('rounded-full bg-pink-100 w-[3rem] h-[3rem]', className)}
+      className={cn(
+        'rounded-full bg-pink-100 w-[2.8rem] h-[2.8rem]',
+        className,
+      )}
       aria-label={`${index + 1}번째 스탬프 미획득`}
     />
   );

src/pages/main/components/.gitkeep

@@ -2,18 +2,24 @@ import { cn } from '@/shared/lib';
 import StampBoard from './components/stampBoard/StampBoard';
 import { ControlBar } from '@/shared/components';
 import Image from 'next/image';
+import router from 'next/router';
+import { BottomNav } from '@/shared/components/tab/BottomNav';
 
 export default function MainPage() {
   return (
-    <div className={cn('px-[2.4rem] bg-white flex flex-col gap-[1rem]')}>
+    <div
+      className={cn(
+        'px-[2.4rem] bg-white flex flex-col gap-[1rem] h-full pt-[1.3rem] pb-[12rem]',
+      )}
+    >
       <ControlBar
         isLoggedIn={false}
         onLogin={() => {}}
         userName='글다'
-        className='fixed top-[0.6rem] left-0 right-0 z-50 px-[2rem]'
+        className='fixed top-[1rem] left-0 right-0 z-50 px-[2rem]'
       />
 
-      <main className='w-full pt-[6.2rem] flex flex-col gap-4 overflow-auto'>
+      <main className='w-full pt-[6.3rem] flex flex-col gap-4 overflow-auto'>
         <section>
           <Image
             src='/assets/bannerMain.svg'
@@ -26,7 +32,7 @@ export default function MainPage() {
 
         <section
           onClick={() => {
-            /* TODO: 페이지 이동 */
+            router.push('/main/Board');
           }}
         >
           <Image
@@ -38,8 +44,9 @@ export default function MainPage() {
           />
         </section>
 
-        <StampBoard count={3} total={8} />
+        <StampBoard count={3} total={10} />
       </main>
+      <BottomNav />
     </div>
   );
 }

src/pages/main/components/board/Boardgame.tsx

@@ -23,15 +23,15 @@ export const BottomNav = () => {
 
   return (
     <nav
-      className="
-        fixed bottom-[2rem] left-[2.4rem]
+      className='
+        fixed bottom-[5.3rem] left-[2.4rem]
         w-[calc(100%-4.8rem)]
         flex justify-between items-center
         py-[1rem]
         rounded-[37.07px]
         bg-mint-50 border border-mint-300
-      "
-      aria-label="Bottom navigation"
+      '
+      aria-label='Bottom navigation'
     >
       {NAV_ITEMS.map((item) => {
         const isActive =
@@ -42,8 +42,8 @@ export const BottomNav = () => {
           <Link
             key={item.id}
             href={item.href}
-            aria-current={isActive ? 'page' : undefined} 
-            className="flex-1 flex justify-center"
+            aria-current={isActive ? 'page' : undefined}
+            className='flex-1 flex justify-center'
           >
             <TabItem label={item.label} icon={item.icon} isActive={isActive} />
           </Link>

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

@@ -0,0 +1,41 @@
+const boardData = [
+  [{ active: false }, { active: false }, { active: false }, { active: false }],
+  [
+    { active: true, label: '김수환관' },
+    { active: true, label: '부천 아트벙커' },
+    { active: true, label: '한국 만화박물관' },
+    { active: false },
+  ],
+  [
+    { active: false },
+    { active: false },
+    { active: false },
+    { active: true, label: '상동 호수 공원' },
+  ],
+  [
+    { active: false },
+    { active: true, label: '부천역' },
+    { active: true, label: '다솔관' },
+    { active: true, label: '부천 자유 시장' },
+  ],
+  [
+    { active: false },
+    { active: true, label: '중앙도서관' },
+    { active: false },
+    { active: false },
+  ],
+  [
+    { active: false },
+    { active: false },
+    { active: true, label: '역곡공원' },
+    { active: false },
+  ],
+  [
+    { active: false },
+    { active: false },
+    { active: false },
+    { active: true, label: '부천 식물원' },
+  ],
+  [{ active: false }, { active: false }, { active: false }, { active: false }],
+];
+export { boardData };