From 4d2864d8a0aba9b86fb17650e3e988e637b8dee7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=98=88=EB=B9=88?= <yebin060310@gmail.com>
Date: Tue, 8 Aug 2023 13:50:17 +0900
Subject: [PATCH 01/16] Add page

---
 .../src/app/about/searchLocation/page.tsx     | 25 +++++++++++++++++++
 .../components/About/SearchLocation/index.tsx | 11 ++++++++
 .../components/About/SearchLocation/style.ts  | 11 ++++++++
 apps/client/src/components/index.ts           |  1 +
 4 files changed, 48 insertions(+)
 create mode 100644 apps/client/src/app/about/searchLocation/page.tsx
 create mode 100644 apps/client/src/components/About/SearchLocation/index.tsx
 create mode 100644 apps/client/src/components/About/SearchLocation/style.ts

diff --git a/apps/client/src/app/about/searchLocation/page.tsx b/apps/client/src/app/about/searchLocation/page.tsx
new file mode 100644
index 000000000..98785c5da
--- /dev/null
+++ b/apps/client/src/app/about/searchLocation/page.tsx
@@ -0,0 +1,25 @@
+import { SearchLocation, 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',
+  },
+};
+
+export default function SearchLocationPage() {
+  return (
+    <>
+      <Header segment='about' />
+      <SearchLocation />
+      <Footer />
+    </>
+  );
+}
diff --git a/apps/client/src/components/About/SearchLocation/index.tsx b/apps/client/src/components/About/SearchLocation/index.tsx
new file mode 100644
index 000000000..03dc9fd89
--- /dev/null
+++ b/apps/client/src/components/About/SearchLocation/index.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import * as S from './style';
+
+const SearchLocation = () => (
+  <S.SearchLocation>
+    <S.ContentBox />
+  </S.SearchLocation>
+);
+
+export default SearchLocation;
diff --git a/apps/client/src/components/About/SearchLocation/style.ts b/apps/client/src/components/About/SearchLocation/style.ts
new file mode 100644
index 000000000..ff0087ff7
--- /dev/null
+++ b/apps/client/src/components/About/SearchLocation/style.ts
@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+export const SearchLocation = styled.div`
+  width: 100vw;
+  height: 100vh;
+`;
+export const ContentBox = styled.div`
+  width: 1240px;
+  height: 716px;
+  background-color: pink;
+`;
diff --git a/apps/client/src/components/index.ts b/apps/client/src/components/index.ts
index 9bf35fb5a..102b76be3 100644
--- a/apps/client/src/components/index.ts
+++ b/apps/client/src/components/index.ts
@@ -27,6 +27,7 @@ export { default as PostDetailHead } from './PostPage/PostDetailHead';
 export { default as PromotionVideo } from './PromotionVideo';
 export { default as ReturnToList } from './PostPage/ReturnToList';
 export { default as Scroll } from './Scroll';
+export { default as SearchLocation } from './About/SearchLocation';
 export { default as Section1 } from './About/Section1';
 export { default as Section2 } from './About/Section2';
 export { default as Section3 } from './About/Section3';

From 8ea484e757d619c90510b92c777d3288cadfc4f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=98=88=EB=B9=88?= <yebin060310@gmail.com>
Date: Tue, 8 Aug 2023 14:05:02 +0900
Subject: [PATCH 02/16] Add svg

---
 apps/client/src/assets/index.ts               |  2 +
 .../src/assets/svg/icon/ContactIcon.tsx       | 19 ++++++++++
 apps/client/src/assets/svg/icon/MarkIcon.tsx  | 26 +++++++++++++
 .../components/About/SearchLocation/index.tsx | 10 ++++-
 .../components/About/SearchLocation/style.ts  | 37 +++++++++++++++++++
 5 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 apps/client/src/assets/svg/icon/ContactIcon.tsx
 create mode 100644 apps/client/src/assets/svg/icon/MarkIcon.tsx

diff --git a/apps/client/src/assets/index.ts b/apps/client/src/assets/index.ts
index dc7954da9..51634c84b 100644
--- a/apps/client/src/assets/index.ts
+++ b/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,6 +11,7 @@ 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 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';
diff --git a/apps/client/src/assets/svg/icon/ContactIcon.tsx b/apps/client/src/assets/svg/icon/ContactIcon.tsx
new file mode 100644
index 000000000..7ce3ae803
--- /dev/null
+++ b/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'
+      stroke-width='2'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+    />
+  </svg>
+);
+
+export default ContactIcon;
diff --git a/apps/client/src/assets/svg/icon/MarkIcon.tsx b/apps/client/src/assets/svg/icon/MarkIcon.tsx
new file mode 100644
index 000000000..34f71e4e0
--- /dev/null
+++ b/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'
+      stroke-width='1.5'
+      stroke-linecap='round'
+      stroke-linejoin='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'
+      stroke-width='2'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+    />
+  </svg>
+);
+
+export default MarkIcon;
diff --git a/apps/client/src/components/About/SearchLocation/index.tsx b/apps/client/src/components/About/SearchLocation/index.tsx
index 03dc9fd89..2f1d3a13b 100644
--- a/apps/client/src/components/About/SearchLocation/index.tsx
+++ b/apps/client/src/components/About/SearchLocation/index.tsx
@@ -4,7 +4,15 @@ import * as S from './style';
 
 const SearchLocation = () => (
   <S.SearchLocation>
-    <S.ContentBox />
+    <S.ContentBox>
+      <S.Title>🔍 찾아오시는 길</S.Title>
+      <S.Line />
+      <S.Map />
+      <S.MapContentBox>
+        <S.AddressAndConatctBox />
+        <S.OntheWayBox />
+      </S.MapContentBox>
+    </S.ContentBox>
   </S.SearchLocation>
 );
 
diff --git a/apps/client/src/components/About/SearchLocation/style.ts b/apps/client/src/components/About/SearchLocation/style.ts
index ff0087ff7..acbede07a 100644
--- a/apps/client/src/components/About/SearchLocation/style.ts
+++ b/apps/client/src/components/About/SearchLocation/style.ts
@@ -3,9 +3,46 @@ import styled from '@emotion/styled';
 export const SearchLocation = styled.div`
   width: 100vw;
   height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 export const ContentBox = styled.div`
   width: 1240px;
   height: 716px;
   background-color: pink;
+  display: flex;
+  align-items: left;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+export const Title = styled.div`
+  color: ${({ theme }) => theme.color.black};
+  font-size: 34px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 50px;
+`;
+export const Line = styled.div`
+  width: 1240px;
+  height: 1px;
+  background: ${({ theme }) => theme.color.gray['050']};
+`;
+export const Map = styled.div`
+  width: 1240px;
+  height: 400px;
+  flex-shrink: 0;
+  background-color: lightgray;
+`;
+export const MapContentBox = styled.div`
+  width: 1203px;
+  height: 162px;
+  flex-shrink: 0;
+  background-color: lightgray;
+`;
+export const AddressAndConatctBox = styled.div`
+  background-color: gray;
+`;
+export const OntheWayBox = styled.div`
+  background-color: gray;
 `;

From 32840b512967d3c08d6a659fd4c88b0ab27fa87a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=98=88=EB=B9=88?= <yebin060310@gmail.com>
Date: Tue, 8 Aug 2023 14:14:43 +0900
Subject: [PATCH 03/16] Add svg

---
 apps/client/src/assets/index.ts               |  2 ++
 apps/client/src/assets/svg/icon/MapIcon.tsx   | 19 +++++++++++++++++++
 .../client/src/assets/svg/icon/SubwayIcon.tsx | 19 +++++++++++++++++++
 .../components/About/SearchLocation/style.ts  |  4 ++++
 4 files changed, 44 insertions(+)
 create mode 100644 apps/client/src/assets/svg/icon/MapIcon.tsx
 create mode 100644 apps/client/src/assets/svg/icon/SubwayIcon.tsx

diff --git a/apps/client/src/assets/index.ts b/apps/client/src/assets/index.ts
index 51634c84b..d1898b376 100644
--- a/apps/client/src/assets/index.ts
+++ b/apps/client/src/assets/index.ts
@@ -11,9 +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';
diff --git a/apps/client/src/assets/svg/icon/MapIcon.tsx b/apps/client/src/assets/svg/icon/MapIcon.tsx
new file mode 100644
index 000000000..2727a78cf
--- /dev/null
+++ b/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'
+      stroke-width='2'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+    />
+  </svg>
+);
+
+export default MapIcon;
diff --git a/apps/client/src/assets/svg/icon/SubwayIcon.tsx b/apps/client/src/assets/svg/icon/SubwayIcon.tsx
new file mode 100644
index 000000000..2727a78cf
--- /dev/null
+++ b/apps/client/src/assets/svg/icon/SubwayIcon.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'
+      stroke-width='2'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+    />
+  </svg>
+);
+
+export default MapIcon;
diff --git a/apps/client/src/components/About/SearchLocation/style.ts b/apps/client/src/components/About/SearchLocation/style.ts
index acbede07a..8d1f2d61c 100644
--- a/apps/client/src/components/About/SearchLocation/style.ts
+++ b/apps/client/src/components/About/SearchLocation/style.ts
@@ -46,3 +46,7 @@ export const AddressAndConatctBox = styled.div`
 export const OntheWayBox = styled.div`
   background-color: gray;
 `;
+export const Address = styled.div``;
+export const Contact = styled.div``;
+export const Walk = styled.div``;
+export const Subway = styled.div``;

From e831c34ab4f2ddc0d708083d539245033e4dd0f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=98=88=EB=B9=88?= <yebin060310@gmail.com>
Date: Wed, 9 Aug 2023 12:45:09 +0900
Subject: [PATCH 04/16] Update style

---
 .../src/assets/svg/icon/ContactIcon.tsx       |   6 +-
 apps/client/src/assets/svg/icon/MapIcon.tsx   |   6 +-
 apps/client/src/assets/svg/icon/MarkIcon.tsx  |  12 +-
 .../client/src/assets/svg/icon/SubwayIcon.tsx |  43 +++++--
 .../About/SearchLocation/Map/index.tsx        |  55 +++++++++
 .../components/About/SearchLocation/index.tsx |  46 ++++++-
 .../components/About/SearchLocation/style.ts  | 112 ++++++++++++++----
 7 files changed, 234 insertions(+), 46 deletions(-)
 create mode 100644 apps/client/src/components/About/SearchLocation/Map/index.tsx

diff --git a/apps/client/src/assets/svg/icon/ContactIcon.tsx b/apps/client/src/assets/svg/icon/ContactIcon.tsx
index 7ce3ae803..b065faed5 100644
--- a/apps/client/src/assets/svg/icon/ContactIcon.tsx
+++ b/apps/client/src/assets/svg/icon/ContactIcon.tsx
@@ -9,9 +9,9 @@ const ContactIcon = () => (
     <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'
-      stroke-width='2'
-      stroke-linecap='round'
-      stroke-linejoin='round'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
     />
   </svg>
 );
diff --git a/apps/client/src/assets/svg/icon/MapIcon.tsx b/apps/client/src/assets/svg/icon/MapIcon.tsx
index 2727a78cf..23a201887 100644
--- a/apps/client/src/assets/svg/icon/MapIcon.tsx
+++ b/apps/client/src/assets/svg/icon/MapIcon.tsx
@@ -9,9 +9,9 @@ const MapIcon = () => (
     <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'
-      stroke-width='2'
-      stroke-linecap='round'
-      stroke-linejoin='round'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
     />
   </svg>
 );
diff --git a/apps/client/src/assets/svg/icon/MarkIcon.tsx b/apps/client/src/assets/svg/icon/MarkIcon.tsx
index 34f71e4e0..b0caf5ec0 100644
--- a/apps/client/src/assets/svg/icon/MarkIcon.tsx
+++ b/apps/client/src/assets/svg/icon/MarkIcon.tsx
@@ -9,16 +9,16 @@ const MarkIcon = () => (
     <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'
-      stroke-width='1.5'
-      stroke-linecap='round'
-      stroke-linejoin='round'
+      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'
-      stroke-width='2'
-      stroke-linecap='round'
-      stroke-linejoin='round'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
     />
   </svg>
 );
diff --git a/apps/client/src/assets/svg/icon/SubwayIcon.tsx b/apps/client/src/assets/svg/icon/SubwayIcon.tsx
index 2727a78cf..5969d2a71 100644
--- a/apps/client/src/assets/svg/icon/SubwayIcon.tsx
+++ b/apps/client/src/assets/svg/icon/SubwayIcon.tsx
@@ -1,17 +1,44 @@
 const MapIcon = () => (
   <svg
-    width='28'
-    height='28'
-    viewBox='0 0 28 28'
+    width='22'
+    height='22'
+    viewBox='0 0 22 22'
     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'
+    <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'
-      stroke-width='2'
-      stroke-linecap='round'
-      stroke-linejoin='round'
+      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>
 );
diff --git a/apps/client/src/components/About/SearchLocation/Map/index.tsx b/apps/client/src/components/About/SearchLocation/Map/index.tsx
new file mode 100644
index 000000000..b9afa0569
--- /dev/null
+++ b/apps/client/src/components/About/SearchLocation/Map/index.tsx
@@ -0,0 +1,55 @@
+import { useEffect } from 'react';
+
+import styled from '@emotion/styled';
+
+interface MapProps {
+  latitude: number;
+  longitude: number;
+}
+
+declare global {
+  interface Window {
+    kakao: any;
+  }
+}
+
+function Map({ latitude, longitude }: MapProps) {
+  useEffect(() => {
+    const mapScript = document.createElement('script');
+
+    mapScript.async = true;
+    mapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAOMAP_APPKEY}&autoload=false`;
+
+    document.head.appendChild(mapScript);
+
+    const onLoadKakaoMap = () => {
+      window.kakao.maps.load(() => {
+        const container = document.getElementById('map');
+        const options = {
+          center: new window.kakao.maps.LatLng(latitude, longitude),
+        };
+        const map = new window.kakao.maps.Map(container, options);
+        const markerPosition = new window.kakao.maps.LatLng(
+          latitude,
+          longitude
+        );
+        const marker = new window.kakao.maps.Marker({
+          position: markerPosition,
+        });
+        marker.setMap(map);
+      });
+    };
+    mapScript.addEventListener('load', onLoadKakaoMap);
+
+    return () => mapScript.removeEventListener('load', onLoadKakaoMap);
+  }, [latitude, longitude]);
+
+  return <MapContainer id='map' />;
+}
+
+const MapContainer = styled.div`
+  margin: 32px 0px;
+  aspect-ratio: 320 / 220;
+`;
+
+export default Map;
diff --git a/apps/client/src/components/About/SearchLocation/index.tsx b/apps/client/src/components/About/SearchLocation/index.tsx
index 2f1d3a13b..8ad55618e 100644
--- a/apps/client/src/components/About/SearchLocation/index.tsx
+++ b/apps/client/src/components/About/SearchLocation/index.tsx
@@ -1,5 +1,8 @@
 'use client';
 
+import * as I from 'client/assets';
+
+import Map from './Map';
 import * as S from './style';
 
 const SearchLocation = () => (
@@ -7,10 +10,47 @@ const SearchLocation = () => (
     <S.ContentBox>
       <S.Title>🔍 찾아오시는 길</S.Title>
       <S.Line />
-      <S.Map />
+      <Map latitude={35.14280841629563} longitude={126.80069811685026} />
       <S.MapContentBox>
-        <S.AddressAndConatctBox />
-        <S.OntheWayBox />
+        <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.SearchLocation>
diff --git a/apps/client/src/components/About/SearchLocation/style.ts b/apps/client/src/components/About/SearchLocation/style.ts
index 8d1f2d61c..bcf9a27ea 100644
--- a/apps/client/src/components/About/SearchLocation/style.ts
+++ b/apps/client/src/components/About/SearchLocation/style.ts
@@ -2,15 +2,14 @@ import styled from '@emotion/styled';
 
 export const SearchLocation = styled.div`
   width: 100vw;
-  height: 100vh;
+  height: 80vh;
   display: flex;
   align-items: center;
   justify-content: center;
 `;
 export const ContentBox = styled.div`
-  width: 1240px;
-  height: 716px;
-  background-color: pink;
+  width: 77.5rem;
+  height: 44.75rem;
   display: flex;
   align-items: left;
   flex-direction: column;
@@ -18,35 +17,102 @@ export const ContentBox = styled.div`
 `;
 export const Title = styled.div`
   color: ${({ theme }) => theme.color.black};
-  font-size: 34px;
+  font-size: 2.125rem;
   font-style: normal;
   font-weight: 600;
-  line-height: 50px;
+  line-height: 3.125rem;
 `;
 export const Line = styled.div`
-  width: 1240px;
-  height: 1px;
+  width: 77.5rem;
+  height: 0.0625rem;
+  margin-top: 1.75rem;
   background: ${({ theme }) => theme.color.gray['050']};
 `;
 export const Map = styled.div`
-  width: 1240px;
-  height: 400px;
-  flex-shrink: 0;
-  background-color: lightgray;
+  width: 77.5rem;
+  height: 25rem;
+  background: ${({ theme }) => theme.color.gray['050']};
 `;
 export const MapContentBox = styled.div`
-  width: 1203px;
-  height: 162px;
-  flex-shrink: 0;
-  background-color: lightgray;
+  width: 75.1875rem;
+  height: 10.125rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 `;
-export const AddressAndConatctBox = styled.div`
-  background-color: gray;
+export const AddressAndContactBox = styled.div`
+  width: 26rem;
+  height: 10.125rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 `;
 export const OntheWayBox = styled.div`
-  background-color: gray;
+  width: 35.0625rem;
+  height: 4rem;
+  display: flex;
+  justify-content: space-between;
+  margin-right: 2.3125rem;
+`;
+export const Address = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+`;
+export const Subtitle = styled.div`
+  color: ${({ theme }) => theme.color.primary.navy};
+
+  font-size: 1.25rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1.8125rem;
+`;
+export const Desc = styled.div`
+  color: ${({ theme }) => theme.color.gray['080']};
+
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5rem;
+`;
+export const Contact = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+`;
+export const IconBox = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+`;
+export const DescBox = styled.div`
+  height: 3.5625rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+export const Walk = styled.div`
+  display: flex;
+  gap: 1.25rem;
+`;
+export const Subway = styled.div`
+  display: flex;
+  gap: 1.25rem;
+`;
+export const Circle = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 4rem;
+  height: 4rem;
+  background: ${({ theme }) => theme.color.primary.navy};
+  border-radius: 100%;
+`;
+
+export const Divide = styled.div`
+  width: 0.25rem;
+  height: 10rem;
+  background: ${({ theme }) => theme.color.gray['030']};
 `;
-export const Address = styled.div``;
-export const Contact = styled.div``;
-export const Walk = styled.div``;
-export const Subway = styled.div``;

From a82f988b765920865dc447a6e75a6ebf1e71cd56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=98=88=EB=B9=88?= <yebin060310@gmail.com>
Date: Wed, 9 Aug 2023 13:03:41 +0900
Subject: [PATCH 05/16] Add markerclick event

---
 .../components/About/SearchLocation/Map/index.tsx    | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/apps/client/src/components/About/SearchLocation/Map/index.tsx b/apps/client/src/components/About/SearchLocation/Map/index.tsx
index b9afa0569..aadc3bb52 100644
--- a/apps/client/src/components/About/SearchLocation/Map/index.tsx
+++ b/apps/client/src/components/About/SearchLocation/Map/index.tsx
@@ -29,6 +29,7 @@ function Map({ latitude, longitude }: MapProps) {
           center: new window.kakao.maps.LatLng(latitude, longitude),
         };
         const map = new window.kakao.maps.Map(container, options);
+
         const markerPosition = new window.kakao.maps.LatLng(
           latitude,
           longitude
@@ -36,6 +37,17 @@ function Map({ latitude, longitude }: MapProps) {
         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);
       });
     };

From e1328e79db507c7c73f5d47b7e3527eba22c52c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=98=88=EB=B9=88?= <yebin060310@gmail.com>
Date: Wed, 9 Aug 2023 16:53:10 +0900
Subject: [PATCH 06/16] Add linking

---
 apps/client/src/components/Footer/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/client/src/components/Footer/index.tsx b/apps/client/src/components/Footer/index.tsx
index 932e66104..79db408bd 100644
--- a/apps/client/src/components/Footer/index.tsx
+++ b/apps/client/src/components/Footer/index.tsx
@@ -25,7 +25,7 @@ const Footer = () => {
               <Link href='#'>개인정보처리방침</Link>
               <Link href='#'>영상정보처리기기운영·관리방침</Link>
               <Link href='#'>저작권신고 및 보호규정</Link>
-              <Link href='#'>찾아오시는 길</Link>
+              <Link href='/about/searchLocation'>찾아오시는 길</Link>
             </S.LinkWrapper>
           </S.SiteInfo>
           <S.SchoolInfo>

From 450196628cbf9959a762f0a43a6ed68fbc116679 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=98=88=EB=B9=88?= <yebin060310@gmail.com>
Date: Wed, 9 Aug 2023 16:54:13 +0900
Subject: [PATCH 07/16] Update px -> rem

---
 apps/client/src/components/About/SearchLocation/Map/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/client/src/components/About/SearchLocation/Map/index.tsx b/apps/client/src/components/About/SearchLocation/Map/index.tsx
index aadc3bb52..254ae8d41 100644
--- a/apps/client/src/components/About/SearchLocation/Map/index.tsx
+++ b/apps/client/src/components/About/SearchLocation/Map/index.tsx
@@ -60,7 +60,7 @@ function Map({ latitude, longitude }: MapProps) {
 }
 
 const MapContainer = styled.div`
-  margin: 32px 0px;
+  margin: 2rem 0rem;
   aspect-ratio: 320 / 220;
 `;
 

From 1aa34f912e887b109e933b911393928e1e0a4124 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=98=88=EB=B9=88?= <yebin060310@gmail.com>
Date: Wed, 9 Aug 2023 16:56:07 +0900
Subject: [PATCH 08/16] Add space

---
 .../components/About/SearchLocation/style.ts    | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/components/About/SearchLocation/style.ts b/apps/client/src/components/About/SearchLocation/style.ts
index bcf9a27ea..750c3b457 100644
--- a/apps/client/src/components/About/SearchLocation/style.ts
+++ b/apps/client/src/components/About/SearchLocation/style.ts
@@ -7,6 +7,7 @@ export const SearchLocation = styled.div`
   align-items: center;
   justify-content: center;
 `;
+
 export const ContentBox = styled.div`
   width: 77.5rem;
   height: 44.75rem;
@@ -15,6 +16,7 @@ export const ContentBox = styled.div`
   flex-direction: column;
   justify-content: space-between;
 `;
+
 export const Title = styled.div`
   color: ${({ theme }) => theme.color.black};
   font-size: 2.125rem;
@@ -22,17 +24,20 @@ export const Title = styled.div`
   font-weight: 600;
   line-height: 3.125rem;
 `;
+
 export const Line = styled.div`
   width: 77.5rem;
   height: 0.0625rem;
   margin-top: 1.75rem;
   background: ${({ theme }) => theme.color.gray['050']};
 `;
+
 export const Map = styled.div`
   width: 77.5rem;
   height: 25rem;
   background: ${({ theme }) => theme.color.gray['050']};
 `;
+
 export const MapContentBox = styled.div`
   width: 75.1875rem;
   height: 10.125rem;
@@ -40,6 +45,7 @@ export const MapContentBox = styled.div`
   justify-content: space-between;
   align-items: center;
 `;
+
 export const AddressAndContactBox = styled.div`
   width: 26rem;
   height: 10.125rem;
@@ -47,6 +53,7 @@ export const AddressAndContactBox = styled.div`
   flex-direction: column;
   justify-content: space-between;
 `;
+
 export const OntheWayBox = styled.div`
   width: 35.0625rem;
   height: 4rem;
@@ -54,23 +61,24 @@ export const OntheWayBox = styled.div`
   justify-content: space-between;
   margin-right: 2.3125rem;
 `;
+
 export const Address = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.5rem;
 `;
+
 export const Subtitle = styled.div`
   color: ${({ theme }) => theme.color.primary.navy};
-
   font-size: 1.25rem;
   font-style: normal;
   font-weight: 700;
   line-height: 1.8125rem;
 `;
+
 export const Desc = styled.div`
   color: ${({ theme }) => theme.color.gray['080']};
-
   font-size: 1rem;
   font-style: normal;
   font-weight: 400;
@@ -82,25 +90,30 @@ export const Contact = styled.div`
   align-items: flex-start;
   gap: 0.5rem;
 `;
+
 export const IconBox = styled.div`
   display: flex;
   align-items: center;
   gap: 0.5rem;
 `;
+
 export const DescBox = styled.div`
   height: 3.5625rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 `;
+
 export const Walk = styled.div`
   display: flex;
   gap: 1.25rem;
 `;
+
 export const Subway = styled.div`
   display: flex;
   gap: 1.25rem;
 `;
+
 export const Circle = styled.div`
   display: flex;
   align-items: center;

From 60bee8f2904f84da818d0fa0f94645ec4e5c43b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=98=88=EB=B9=88?= <yebin060310@gmail.com>
Date: Thu, 10 Aug 2023 16:38:25 +0900
Subject: [PATCH 09/16] Update style

---
 apps/client/src/components/About/SearchLocation/style.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/apps/client/src/components/About/SearchLocation/style.ts b/apps/client/src/components/About/SearchLocation/style.ts
index 750c3b457..35e1ab24a 100644
--- a/apps/client/src/components/About/SearchLocation/style.ts
+++ b/apps/client/src/components/About/SearchLocation/style.ts
@@ -12,7 +12,6 @@ export const ContentBox = styled.div`
   width: 77.5rem;
   height: 44.75rem;
   display: flex;
-  align-items: left;
   flex-direction: column;
   justify-content: space-between;
 `;
@@ -65,16 +64,13 @@ export const OntheWayBox = styled.div`
 export const Address = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
   gap: 0.5rem;
 `;
 
 export const Subtitle = styled.div`
+  ${({ theme }) => theme.typo.h4};
   color: ${({ theme }) => theme.color.primary.navy};
-  font-size: 1.25rem;
-  font-style: normal;
   font-weight: 700;
-  line-height: 1.8125rem;
 `;
 
 export const Desc = styled.div`
@@ -87,7 +83,6 @@ export const Desc = styled.div`
 export const Contact = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
   gap: 0.5rem;
 `;
 

From 215a733d840d983c9b7cb04fda912af33fbc357b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=98=88=EB=B9=88?= <yebin060310@gmail.com>
Date: Sat, 12 Aug 2023 21:36:46 +0900
Subject: [PATCH 10/16] Update SearchLocation -> location

---
 .../src/app/about/{searchLocation => location}/page.tsx   | 6 +++---
 .../About/{SearchLocation => Location}/Map/index.tsx      | 0
 .../About/{SearchLocation => Location}/index.tsx          | 8 ++++----
 .../About/{SearchLocation => Location}/style.ts           | 2 +-
 apps/client/src/components/index.ts                       | 2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)
 rename apps/client/src/app/about/{searchLocation => location}/page.tsx (79%)
 rename apps/client/src/components/About/{SearchLocation => Location}/Map/index.tsx (100%)
 rename apps/client/src/components/About/{SearchLocation => Location}/index.tsx (93%)
 rename apps/client/src/components/About/{SearchLocation => Location}/style.ts (98%)

diff --git a/apps/client/src/app/about/searchLocation/page.tsx b/apps/client/src/app/about/location/page.tsx
similarity index 79%
rename from apps/client/src/app/about/searchLocation/page.tsx
rename to apps/client/src/app/about/location/page.tsx
index 98785c5da..2e755c133 100644
--- a/apps/client/src/app/about/searchLocation/page.tsx
+++ b/apps/client/src/app/about/location/page.tsx
@@ -1,4 +1,4 @@
-import { SearchLocation, Header, Footer } from 'client/components';
+import { Location, Header, Footer } from 'client/components';
 
 import type { Metadata } from 'next';
 
@@ -14,11 +14,11 @@ export const metadata: Metadata = {
   },
 };
 
-export default function SearchLocationPage() {
+export default function locationPage() {
   return (
     <>
       <Header segment='about' />
-      <SearchLocation />
+      <Location />
       <Footer />
     </>
   );
diff --git a/apps/client/src/components/About/SearchLocation/Map/index.tsx b/apps/client/src/components/About/Location/Map/index.tsx
similarity index 100%
rename from apps/client/src/components/About/SearchLocation/Map/index.tsx
rename to apps/client/src/components/About/Location/Map/index.tsx
diff --git a/apps/client/src/components/About/SearchLocation/index.tsx b/apps/client/src/components/About/Location/index.tsx
similarity index 93%
rename from apps/client/src/components/About/SearchLocation/index.tsx
rename to apps/client/src/components/About/Location/index.tsx
index 8ad55618e..d2c7c64f0 100644
--- a/apps/client/src/components/About/SearchLocation/index.tsx
+++ b/apps/client/src/components/About/Location/index.tsx
@@ -5,8 +5,8 @@ import * as I from 'client/assets';
 import Map from './Map';
 import * as S from './style';
 
-const SearchLocation = () => (
-  <S.SearchLocation>
+const Location = () => (
+  <S.Location>
     <S.ContentBox>
       <S.Title>🔍 찾아오시는 길</S.Title>
       <S.Line />
@@ -53,7 +53,7 @@ const SearchLocation = () => (
         </S.OntheWayBox>
       </S.MapContentBox>
     </S.ContentBox>
-  </S.SearchLocation>
+  </S.Location>
 );
 
-export default SearchLocation;
+export default Location;
diff --git a/apps/client/src/components/About/SearchLocation/style.ts b/apps/client/src/components/About/Location/style.ts
similarity index 98%
rename from apps/client/src/components/About/SearchLocation/style.ts
rename to apps/client/src/components/About/Location/style.ts
index 35e1ab24a..72558c6b2 100644
--- a/apps/client/src/components/About/SearchLocation/style.ts
+++ b/apps/client/src/components/About/Location/style.ts
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-export const SearchLocation = styled.div`
+export const Location = styled.div`
   width: 100vw;
   height: 80vh;
   display: flex;
diff --git a/apps/client/src/components/index.ts b/apps/client/src/components/index.ts
index 102b76be3..77211c600 100644
--- a/apps/client/src/components/index.ts
+++ b/apps/client/src/components/index.ts
@@ -12,6 +12,7 @@ export { default as Header } from './Header';
 export { default as IdealTalent } from './About/Section7/IdealTalent';
 export { default as LinkToHelloGSM } from './LinkToHelloGSM';
 export { default as ListPageContent } from './ListPageContent';
+export { default as Location } from './About/Location';
 export { default as MainPageContent } from './MainPage/Content';
 export { default as MainPageHeader } from './MainPage/Header';
 export { default as MainPageNewsletterList } from './MainPage/NewsletterList';
@@ -27,7 +28,6 @@ export { default as PostDetailHead } from './PostPage/PostDetailHead';
 export { default as PromotionVideo } from './PromotionVideo';
 export { default as ReturnToList } from './PostPage/ReturnToList';
 export { default as Scroll } from './Scroll';
-export { default as SearchLocation } from './About/SearchLocation';
 export { default as Section1 } from './About/Section1';
 export { default as Section2 } from './About/Section2';
 export { default as Section3 } from './About/Section3';

From c1e8df043584ff6be00aee24459ea3c91fd3ed6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=98=88=EB=B9=88?= <yebin060310@gmail.com>
Date: Sat, 12 Aug 2023 21:39:02 +0900
Subject: [PATCH 11/16] Update footer linking

---
 apps/client/src/components/Footer/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/client/src/components/Footer/index.tsx b/apps/client/src/components/Footer/index.tsx
index f9a818241..51685e858 100644
--- a/apps/client/src/components/Footer/index.tsx
+++ b/apps/client/src/components/Footer/index.tsx
@@ -25,7 +25,7 @@ const Footer = () => {
               <Link href='#'>개인정보처리방침</Link>
               <Link href='#'>영상정보처리기기운영·관리방침</Link>
               <Link href='#'>저작권신고 및 보호규정</Link>
-              <Link href='/about/searchLocation'>찾아오시는 길</Link>
+              <Link href='/about/location'>찾아오시는 길</Link>
               <a href='https://admin.official.hellogsm.kr/'>관리자</a>
             </S.LinkWrapper>
           </S.SiteInfo>

From 4c0109351e4e7190d43a5e954d68dabfa8e50d87 Mon Sep 17 00:00:00 2001
From: hyeongrok7874 <khr5k0228@gmail.com>
Date: Tue, 15 Aug 2023 23:23:36 +0900
Subject: [PATCH 12/16] Split coordinate

---
 apps/client/src/components/About/Location/index.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/components/About/Location/index.tsx b/apps/client/src/components/About/Location/index.tsx
index d2c7c64f0..ecf32f590 100644
--- a/apps/client/src/components/About/Location/index.tsx
+++ b/apps/client/src/components/About/Location/index.tsx
@@ -5,12 +5,17 @@ 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 latitude={35.14280841629563} longitude={126.80069811685026} />
+      <Map {...schoolCoordinate} />
       <S.MapContentBox>
         <S.AddressAndContactBox>
           <S.Address>

From 198c03928c1dd4638d70dad8675f45be27211562 Mon Sep 17 00:00:00 2001
From: hyeongrok7874 <khr5k0228@gmail.com>
Date: Wed, 16 Aug 2023 12:05:12 +0900
Subject: [PATCH 13/16] Update onLoad Logic

---
 .../components/About/Location/Map/index.tsx   | 68 +++++++++----------
 1 file changed, 33 insertions(+), 35 deletions(-)

diff --git a/apps/client/src/components/About/Location/Map/index.tsx b/apps/client/src/components/About/Location/Map/index.tsx
index 254ae8d41..7b39de0cd 100644
--- a/apps/client/src/components/About/Location/Map/index.tsx
+++ b/apps/client/src/components/About/Location/Map/index.tsx
@@ -1,4 +1,6 @@
-import { useEffect } from 'react';
+import { useRef } from 'react';
+
+import Script from 'next/script';
 
 import styled from '@emotion/styled';
 
@@ -14,49 +16,45 @@ declare global {
 }
 
 function Map({ latitude, longitude }: MapProps) {
-  useEffect(() => {
-    const mapScript = document.createElement('script');
-
-    mapScript.async = true;
-    mapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAOMAP_APPKEY}&autoload=false`;
+  const containerRef = useRef<HTMLDivElement>(null);
 
-    document.head.appendChild(mapScript);
+  const onLoadKakaoMap = () => {
+    window.kakao.maps.load(() => {
+      const options = {
+        center: new window.kakao.maps.LatLng(latitude, longitude),
+      };
 
-    const onLoadKakaoMap = () => {
-      window.kakao.maps.load(() => {
-        const container = document.getElementById('map');
-        const options = {
-          center: new window.kakao.maps.LatLng(latitude, longitude),
-        };
-        const map = new window.kakao.maps.Map(container, options);
+      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 markerPosition = new window.kakao.maps.LatLng(latitude, longitude);
 
-        const infowindow = new window.kakao.maps.InfoWindow({
-          content:
-            '<div style="width: 250px; padding: 10px;">광주 소프트웨어마이스터고등학교</div>',
-          removable: true,
-        });
+      const marker = new window.kakao.maps.Marker({
+        position: markerPosition,
+      });
 
-        window.kakao.maps.event.addListener(marker, 'click', function () {
-          infowindow.open(map, marker);
-        });
+      const infoWindow = new window.kakao.maps.InfoWindow({
+        content:
+          '<div style="width: 250px; padding: 10px;">광주소프트웨어마이스터고등학교</div>',
+        removable: true,
+      });
 
-        marker.setMap(map);
+      window.kakao.maps.event.addListener(marker, 'click', function () {
+        infoWindow.open(map, marker);
       });
-    };
-    mapScript.addEventListener('load', onLoadKakaoMap);
 
-    return () => mapScript.removeEventListener('load', onLoadKakaoMap);
-  }, [latitude, longitude]);
+      marker.setMap(map);
+    });
+  };
 
-  return <MapContainer id='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`

From 25eacd6d2fb466e2e2cfda09c3edb0aa3f80a42f Mon Sep 17 00:00:00 2001
From: hyeongrok7874 <khr5k0228@gmail.com>
Date: Wed, 16 Aug 2023 12:07:48 +0900
Subject: [PATCH 14/16] Update LocationPage metadata

---
 apps/client/src/app/about/location/page.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/app/about/location/page.tsx b/apps/client/src/app/about/location/page.tsx
index 2e755c133..8b759630b 100644
--- a/apps/client/src/app/about/location/page.tsx
+++ b/apps/client/src/app/about/location/page.tsx
@@ -4,17 +4,17 @@ import type { Metadata } from 'next';
 
 export const metadata: Metadata = {
   description:
-    '광주소프트웨어마이스터고등학교 공식 홈페이지 학교 소개 페이지입니다.',
-  title: { absolute: '학교 소개' },
+    '광주소프트웨어마이스터고등학교 공식 홈페이지 찾아오시는 길 페이지입니다.',
+  title: { absolute: '찾아오시는 길' },
   openGraph: {
-    title: '학교 소개',
+    title: '찾아오시는 길',
     description:
       '광주소프트웨어마이스터고등학교 공식 홈페이지 학교 소개 페이지입니다.',
     url: 'https://official.hellogsm.kr/about',
   },
 };
 
-export default function locationPage() {
+export default function LocationPage() {
   return (
     <>
       <Header segment='about' />

From 76f6409d98f39ddaf0a4fc2084204475f566b92a Mon Sep 17 00:00:00 2001
From: hyeongrok7874 <khr5k0228@gmail.com>
Date: Wed, 16 Aug 2023 12:44:30 +0900
Subject: [PATCH 15/16] Update LocationPage metadata

---
 apps/client/src/app/about/location/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/client/src/app/about/location/page.tsx b/apps/client/src/app/about/location/page.tsx
index 8b759630b..20f08ef9f 100644
--- a/apps/client/src/app/about/location/page.tsx
+++ b/apps/client/src/app/about/location/page.tsx
@@ -10,7 +10,7 @@ export const metadata: Metadata = {
     title: '찾아오시는 길',
     description:
       '광주소프트웨어마이스터고등학교 공식 홈페이지 학교 소개 페이지입니다.',
-    url: 'https://official.hellogsm.kr/about',
+    url: 'https://official.hellogsm.kr/about/location',
   },
 };
 

From 5358dd0aea4776c128cbb2c3c23a993f10a73bbc Mon Sep 17 00:00:00 2001
From: hyeongrok7874 <khr5k0228@gmail.com>
Date: Thu, 17 Aug 2023 08:39:29 +0900
Subject: [PATCH 16/16] Update LocationPage metadata

---
 apps/client/src/app/about/location/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/client/src/app/about/location/page.tsx b/apps/client/src/app/about/location/page.tsx
index 20f08ef9f..cbed0a6a0 100644
--- a/apps/client/src/app/about/location/page.tsx
+++ b/apps/client/src/app/about/location/page.tsx
@@ -9,7 +9,7 @@ export const metadata: Metadata = {
   openGraph: {
     title: '찾아오시는 길',
     description:
-      '광주소프트웨어마이스터고등학교 공식 홈페이지 학교 소개 페이지입니다.',
+      '광주소프트웨어마이스터고등학교 공식 홈페이지 찾아오시는 길 페이지입니다.',
     url: 'https://official.hellogsm.kr/about/location',
   },
 };