[Client] 찾아오는길 페이지 제작

apps/client/src/app/about/location/page.tsx

@@ -0,0 +1,25 @@
+import { Location, Header, Footer } from 'client/components';
+
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  description:
+    '광주소프트웨어마이스터고등학교 공식 홈페이지 찾아오시는 길 페이지입니다.',
+  title: { absolute: '찾아오시는 길' },
+  openGraph: {
+    title: '찾아오시는 길',
+    description:
+      '광주소프트웨어마이스터고등학교 공식 홈페이지 찾아오시는 길 페이지입니다.',
+    url: 'https://official.hellogsm.kr/about/location',
+  },
+};
+
+export default function LocationPage() {
+  return (
+    <>
+      <Header segment='about' />
+      <Location />
+      <Footer />
+    </>
+  );
+}

apps/client/src/assets/index.ts

@@ -1,6 +1,7 @@
 export { default as ArrowIcon } from './svg/icon/ArrowIcon';
 export { default as ChevronIcon } from './svg/icon/ChevronIcon';
 export { default as CloseIcon } from './svg/icon/CloseIcon';
+export { default as ContactIcon } from './svg/icon/ContactIcon';
 export { default as DownChevronsIcon } from './about/section1/DownChevronsIcon';
 export { default as DreamIcon } from './about/section3/DreamIcon';
 export { default as FooterGSMLogo } from './svg/FooterGSMLogo';
@@ -10,8 +11,11 @@ export { default as HeaderGSMLogo } from './svg/HeaderGSMLogo';
 export { default as HomeScrollDownIcon } from './svg/icon/HomeScrollDownIcon';
 export { default as ImaginationIcon } from './about/section3/ImaginationIcon';
 export { default as LeftArrowIcon } from './about/section7/LeftArrowIcon';
+export { default as MapIcon } from './svg/icon/MapIcon';
+export { default as MarkIcon } from './svg/icon/MarkIcon';
 export { default as MouseIcon } from './about/section1/MouseIcon';
 export { default as NotFoundTitle } from './svg/NotFoundTitle';
 export { default as ReturnChevronIcon } from './svg/icon/ReturnChevronIcon';
 export { default as RightArrowIcon } from './about/section7/RightArrowIcon';
+export { default as SubwayIcon } from './svg/icon/SubwayIcon';
 export { default as UnderscoreIcon } from './svg/icon/UnderscoreIcon';

apps/client/src/assets/svg/icon/ContactIcon.tsx

@@ -0,0 +1,19 @@
+const ContactIcon = () => (
+  <svg
+    width='24'
+    height='25'
+    viewBox='0 0 24 25'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      d='M2.25 7.25C2.25 15.534 8.966 22.25 17.25 22.25H19.5C20.0967 22.25 20.669 22.0129 21.091 21.591C21.5129 21.169 21.75 20.5967 21.75 20V18.628C21.75 18.112 21.399 17.662 20.898 17.537L16.475 16.431C16.035 16.321 15.573 16.486 15.302 16.848L14.332 18.141C14.05 18.517 13.563 18.683 13.122 18.521C11.4849 17.9191 9.99815 16.9686 8.76478 15.7352C7.53141 14.5018 6.58087 13.0151 5.979 11.378C5.817 10.937 5.983 10.45 6.359 10.168L7.652 9.198C8.015 8.927 8.179 8.464 8.069 8.025L6.963 3.602C6.90214 3.35869 6.76172 3.1427 6.56405 2.98834C6.36638 2.83397 6.1228 2.75008 5.872 2.75H4.5C3.90326 2.75 3.33097 2.98705 2.90901 3.40901C2.48705 3.83097 2.25 4.40326 2.25 5V7.25Z'
+      stroke='#003365'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+);
+
+export default ContactIcon;

apps/client/src/assets/svg/icon/MapIcon.tsx

@@ -0,0 +1,19 @@
+const MapIcon = () => (
+  <svg
+    width='28'
+    height='28'
+    viewBox='0 0 28 28'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      d='M10.5 7.87575V17.5007M17.5 10.5007V20.1257M18.0868 24.2067L23.7743 21.3636C24.2188 21.1419 24.5 20.6869 24.5 20.1899V5.62408C24.5 4.64875 23.4733 4.01408 22.6007 4.45041L18.0868 6.70675C17.717 6.89225 17.2818 6.89225 16.9132 6.70675L11.0868 3.79475C10.9046 3.70367 10.7037 3.65625 10.5 3.65625C10.2963 3.65625 10.0954 3.70367 9.91317 3.79475L4.22567 6.63791C3.78 6.86075 3.5 7.31575 3.5 7.81158V22.3774C3.5 23.3527 4.52667 23.9874 5.39933 23.5511L9.91317 21.2947C10.283 21.1092 10.7182 21.1092 11.0868 21.2947L16.9132 24.2079C17.283 24.3922 17.7182 24.3922 18.0868 24.2079V24.2067Z'
+      stroke='white'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+);
+
+export default MapIcon;

apps/client/src/assets/svg/icon/MarkIcon.tsx

@@ -0,0 +1,26 @@
+const MarkIcon = () => (
+  <svg
+    width='24'
+    height='25'
+    viewBox='0 0 24 25'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      d='M15 11C15 11.7956 14.6839 12.5587 14.1213 13.1213C13.5587 13.6839 12.7956 14 12 14C11.2044 14 10.4413 13.6839 9.87868 13.1213C9.31607 12.5587 9 11.7956 9 11C9 10.2044 9.31607 9.44129 9.87868 8.87868C10.4413 8.31607 11.2044 8 12 8C12.7956 8 13.5587 8.31607 14.1213 8.87868C14.6839 9.44129 15 10.2044 15 11Z'
+      stroke='#003365'
+      strokeWidth='1.5'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+    <path
+      d='M19.5 11C19.5 18.142 12 22.25 12 22.25C12 22.25 4.5 18.142 4.5 11C4.5 9.01088 5.29018 7.10322 6.6967 5.6967C8.10322 4.29018 10.0109 3.5 12 3.5C13.9891 3.5 15.8968 4.29018 17.3033 5.6967C18.7098 7.10322 19.5 9.01088 19.5 11Z'
+      stroke='#003365'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+);
+
+export default MarkIcon;

apps/client/src/assets/svg/icon/SubwayIcon.tsx

@@ -0,0 +1,46 @@
+const MapIcon = () => (
+  <svg
+    width='22'
+    height='22'
+    viewBox='0 0 22 22'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <rect
+      x='1.3335'
+      y='1.33398'
+      width='19.3333'
+      height='16.6667'
+      rx='3'
+      stroke='white'
+      strokeWidth='2'
+    />
+    <line
+      x1='1.6665'
+      y1='6'
+      x2='20.3332'
+      y2='6'
+      stroke='white'
+      strokeWidth='2'
+    />
+    <line
+      x1='1.6665'
+      y1='10'
+      x2='20.3332'
+      y2='10'
+      stroke='white'
+      strokeWidth='2'
+    />
+    <circle cx='10.9998' cy='13.6673' r='1.33333' fill='white' />
+    <path
+      d='M6.3335 19H8.3335L7.00016 21.6667H4.3335L6.3335 19Z'
+      fill='white'
+    />
+    <path
+      d='M15.6665 19H13.6665L14.9998 21.6667H17.6665L15.6665 19Z'
+      fill='white'
+    />
+  </svg>
+);
+
+export default MapIcon;

apps/client/src/components/About/Location/Map/index.tsx

@@ -0,0 +1,65 @@
+import { useRef } from 'react';
+
+import Script from 'next/script';
+
+import styled from '@emotion/styled';
+
+interface MapProps {
+  latitude: number;
+  longitude: number;
+}
+
+declare global {
+  interface Window {
+    kakao: any;
+  }
+}
+
+function Map({ latitude, longitude }: MapProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const onLoadKakaoMap = () => {
+    window.kakao.maps.load(() => {
+      const options = {
+        center: new window.kakao.maps.LatLng(latitude, longitude),
+      };
+
+      const map = new window.kakao.maps.Map(containerRef.current, options);
+
+      const markerPosition = new window.kakao.maps.LatLng(latitude, longitude);
+
+      const marker = new window.kakao.maps.Marker({
+        position: markerPosition,
+      });
+
+      const infoWindow = new window.kakao.maps.InfoWindow({
+        content:
+          '<div style="width: 250px; padding: 10px;">광주소프트웨어마이스터고등학교</div>',
+        removable: true,
+      });
+
+      window.kakao.maps.event.addListener(marker, 'click', function () {
+        infoWindow.open(map, marker);
+      });
+
+      marker.setMap(map);
+    });
+  };
+
+  return (
+    <>
+      <Script
+        src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAOMAP_APPKEY}&autoload=false`}
+        onLoad={onLoadKakaoMap}
+      />
+      <MapContainer id='map' ref={containerRef} />
+    </>
+  );
+}
+
+const MapContainer = styled.div`
+  margin: 2rem 0rem;
+  aspect-ratio: 320 / 220;
+`;
+
+export default Map;

apps/client/src/components/About/Location/index.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import * as I from 'client/assets';
+
+import Map from './Map';
+import * as S from './style';
+
+const schoolCoordinate = {
+  latitude: 35.14273861528659,
+  longitude: 126.80073120716628,
+} as const;
+
+const Location = () => (
+  <S.Location>
+    <S.ContentBox>
+      <S.Title>🔍 찾아오시는 길</S.Title>
+      <S.Line />
+      <Map {...schoolCoordinate} />
+      <S.MapContentBox>
+        <S.AddressAndContactBox>
+          <S.Address>
+            <S.IconBox>
+              <I.MarkIcon />
+              <S.Subtitle>주소</S.Subtitle>
+            </S.IconBox>
+            <S.Desc>
+              광주광역시 광산구 상무대로 312 광주소프트웨어마이스터고등학교
+            </S.Desc>
+          </S.Address>
+          <S.Contact>
+            <S.IconBox>
+              <I.ContactIcon />
+              <S.Subtitle>연락처</S.Subtitle>
+            </S.IconBox>
+            <S.Desc>교무실 062)949-6800(08:30~16:30)</S.Desc>
+          </S.Contact>
+        </S.AddressAndContactBox>
+        <S.Divide />
+        <S.OntheWayBox>
+          <S.Walk>
+            <S.Circle>
+              <I.MapIcon />
+            </S.Circle>
+            <S.DescBox>
+              <S.Subtitle>도보 이용 시</S.Subtitle>
+              <S.Desc>도미노 피자 건물 건너편</S.Desc>
+            </S.DescBox>
+          </S.Walk>
+          <S.Subway>
+            <S.Circle>
+              <I.SubwayIcon />
+            </S.Circle>
+            <S.DescBox>
+              <S.Subtitle>지하철 이용 시</S.Subtitle>
+              <S.Desc>송정공원역 1번출구 220m 앞</S.Desc>
+            </S.DescBox>
+          </S.Subway>
+        </S.OntheWayBox>
+      </S.MapContentBox>
+    </S.ContentBox>
+  </S.Location>
+);
+
+export default Location;