Merge pull request #111 from Kernel360/page-map

페이지 UI: 지도 페이지

public/mockServiceWorker.js

@@ -284,4 +284,4 @@ async function respondWithMock(response) {
   })
 
   return mockedResponse
-}
+}

src/app/map/page.module.scss

@@ -0,0 +1,19 @@
+$padding: 24px;
+
+.mainLayout {
+    position: relative;
+
+    & nav {
+        z-index: 10;
+        padding: 0 $padding;
+    }
+
+    .searchWrapper {
+        position: absolute;
+        z-index: 10;
+        top: 57px;
+        box-sizing: border-box;
+        width: 100%;
+        padding: 0 $padding;
+    }
+}

src/app/map/page.tsx

@@ -1,8 +1,22 @@
-import BottomNav from '@/components/shared/bottom-nav/BottomNav';
+import classNames from 'classnames/bind';
+
+import KakaoMap from '@components/map/KakaoMap';
+import BottomNav from '@shared/bottom-nav/BottomNav';
+import Header from '@shared/header/Header';
+import SearchBar from '@shared/search-bar/SearchBar';
+
+import styles from './page.module.scss';
+
+const cx = classNames.bind(styles);
 
 function MapPage() {
   return (
-    <div>
+    <div className={cx('mainLayout')}>
+      <Header isTransparent isDisplayLogo={false} />
+      <div className={cx('searchWrapper')}>
+        <SearchBar isWhite />
+      </div>
+      <KakaoMap />
       <BottomNav />
     </div>
   );

src/components/map/KakaoMap.tsx

@@ -0,0 +1,47 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+'use client';
+
+import { useState } from 'react';
+
+import Script from 'next/script';
+
+declare global {
+  interface Window {
+    kakao: any
+  }
+}
+
+function KakaoMap() {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const [_, setMap] = useState(null);
+  const loadKakaoMap = () => {
+    window.kakao.maps.load(() => {
+      const mapContainer = document.getElementById('map');
+      const mapOption = {
+        center: new window.kakao.maps.LatLng(37.514417066172385, 127.06132898292525),
+        level: 3,
+      };
+      const map = new window.kakao.maps.Map(mapContainer, mapOption);
+      setMap(map);
+    });
+  };
+  return (
+    <>
+      <Script
+        strategy="afterInteractive"
+        type="text/javascript"
+        src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_APP_JS_KEY}&autoload=false`}
+        onReady={loadKakaoMap}
+      />
+      <div id="map" style={{ width: '100vw', height: '100vh' }} />
+    </>
+  );
+}
+
+export default KakaoMap;

src/components/shared/search-bar/SearchBar.module.scss

@@ -8,6 +8,10 @@
     gap: 11.5px;
     background-color: var(--tertiary-200);
 
+    &.white {
+        background-color: var(--white);
+    }
+
     input {
         flex-grow: 1;
         height: 100%;

src/components/shared/search-bar/SearchBar.stories.tsx

@@ -7,10 +7,10 @@ const meta = {
   component: SearchBar,
   tags: ['autodocs'],
   args: {
-    isMainPage: false,
+    isWhite: false,
   },
   argTypes: {
-    isMainPage: { control: 'boolean' },
+    isWhite: { control: 'boolean' },
   },
 }satisfies Meta<typeof SearchBar>;
 
@@ -19,12 +19,18 @@ type Story = StoryObj<typeof meta>;
 
 export const MainPage:Story = {
   args: {
-    isMainPage: true,
+    isWhite: false,
   },
 };
 
 export const SearchPage:Story = {
   args: {
-    isMainPage: false,
+    isWhite: false,
+  },
+};
+
+export const MapPage:Story = {
+  args: {
+    isWhite: true,
   },
 };

src/components/shared/search-bar/SearchBar.tsx

@@ -12,7 +12,7 @@ import styles from './SearchBar.module.scss';
 
 const cx = classNames.bind(styles);
 
-function SearchBar() {
+function SearchBar({ isWhite = false }:{ isWhite?:boolean }) {
   const [keyword, setKeyword] = useState<string>('');
 
   const handleSearch = () => {
@@ -22,7 +22,7 @@ function SearchBar() {
 
   return (
     <form
-      className={cx('container')}
+      className={cx('container', { white: isWhite })}
       onSubmit={(e) => {
         e.preventDefault();
         handleSearch();

src/stories/Page.stories.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
 import type { Meta, StoryObj } from '@storybook/react';
 
 // eslint-disable-next-line import/no-extraneous-dependencies

yarn.lock

@@ -11746,4 +11746,4 @@ yocto-queue@^0.1.0:
 yocto-queue@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
-  integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
+  integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==