Merge pull request #104 from themoment-team/feature/logo

Feature/logo

src/components/Map/Map.tsx

@@ -5,6 +5,7 @@ import useMarker from 'hooks/use-marker';
 import { SideBar } from 'components/SideBar';
 import { MarkerList } from 'components/MarkerList';
 import { Launcher } from 'components/Launcher';
+import defaultMapConfig from 'shared/DefaultMapConfig';
 
 interface MapProps {
   cookies: {
@@ -20,8 +21,8 @@ export const MapComponent: React.FC<MapProps> = ({ cookies }) => {
     <>
       <Map
         center={{
-          lat: 36.658563176254795,
-          lng: 127.86119616960151,
+          lat: defaultMapConfig.lat,
+          lng: defaultMapConfig.lng,
         }}
         style={{
           position: 'fixed',
@@ -32,7 +33,7 @@ export const MapComponent: React.FC<MapProps> = ({ cookies }) => {
           right: '2.2rem',
         }}
         onCreate={setMap}
-        level={12}
+        level={defaultMapConfig.level}
       >
         <MarkerList markers={markers} />
         <SideBar cookies={cookies} />

src/components/MobileMap/MobileMap.tsx

@@ -4,6 +4,7 @@ import { MobileWrapper } from './Mobile.styles';
 import { Map } from 'react-kakao-maps-sdk';
 import useMarker from 'hooks/use-marker';
 import { MarkerList } from 'components/MarkerList';
+import defaultMapConfig from 'shared/DefaultMapConfig';
 
 interface MobileMapProps {
   cookies: {
@@ -19,15 +20,15 @@ export const MobileMapComponent: React.FC<MobileMapProps> = ({ cookies }) => {
     <MobileWrapper>
       <Map
         center={{
-          lat: 36.658563176254795,
-          lng: 127.86119616960151,
+          lat: defaultMapConfig.lat,
+          lng: defaultMapConfig.lng,
         }}
         style={{
           width: '100vw',
           height: '100vh',
         }}
         onCreate={setMap}
-        level={12}
+        level={defaultMapConfig.level}
       >
         <MarkerList markers={markers} />
         <BottomSheetComponent cookies={cookies} />

src/components/common/Header/Header.tsx

@@ -12,6 +12,8 @@ import * as S from './Header.styles';
 import { handleAuth, handleLogout } from './container';
 import { AxiosError } from 'axios';
 import Link from 'next/link';
+import { useMap } from 'react-kakao-maps-sdk';
+import defaultMapConfig from 'shared/DefaultMapConfig';
 
 interface HeaderProps {
   userRules: UserRule;
@@ -24,6 +26,8 @@ export const HeaderComponent: React.FC<HeaderProps> = ({
   menuVisible,
   setMenuVisible,
 }) => {
+  const map = useMap();
+
   const handleMenuClick = () => {
     axiosClient
       .get(workerUrl.getMeWorker())
@@ -42,10 +46,20 @@ export const HeaderComponent: React.FC<HeaderProps> = ({
       });
   };
 
+  const clickLogo = () => {
+    const moveCoord = new kakao.maps.LatLng(
+      defaultMapConfig.lat,
+      defaultMapConfig.lng,
+    );
+
+    map.setLevel(defaultMapConfig.level);
+    map.panTo(moveCoord);
+  };
+
   return (
     <S.Header>
       <Link href="/" passHref>
-        <a>
+        <a onClick={clickLogo}>
           <Logo logoColor="blue" />
         </a>
       </Link>

src/shared/DefaultMapConfig.ts

@@ -0,0 +1,7 @@
+const defaultMapConfig = {
+  lat: 36.658563176254795,
+  lng: 127.86119616960151,
+  level: 12,
+};
+
+export default defaultMapConfig;