CSID-DGU · hyeona01 · Nov 5, 2024 · Nov 5, 2024 · Nov 5, 2024 · Nov 5, 2024
diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
diff --git a/src/frontend/package.json b/src/frontend/package.json
@@ -8,12 +8,13 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.119",
+    "@types/node": "^22.8.7",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "axios": "^1.7.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-kakao-maps-sdk": "^1.1.27",
     "react-router-dom": "^6.27.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",

diff --git a/src/frontend/public/index.html b/src/frontend/public/index.html
@@ -25,6 +25,11 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+
+    <script
+      type="text/javascript"
+      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAO_APP_KEY%"
+    ></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/frontend/src/apis/index.ts b/src/frontend/src/apis/index.ts
@@ -12,10 +12,15 @@ import axios, { AxiosInstance } from "axios";
  * 이 함수는 요청 인터셉터를 설정하여 각 API 요청에 인증 토큰을 추가합니다.
  * 클라이언트 사이드에서만 토큰을 추가하며, 서버 사이드 렌더링 시에는 토큰을 추가하지 않습니다.
  */
-
 function setInterceptors(instance: AxiosInstance, type: string) {
   instance.interceptors.request.use(
     (config) => {
+      if (type === "kakao") {
+        if (typeof window !== "undefined" && config.headers) {
+          config.headers.Authorization = `KakaoAK ${process.env.REACT_APP_KAKAO_APP_KEY}`;
+        }
+        return config;
+      }
       if (typeof window !== "undefined" && config.headers) {
         config.headers.Authorization = `Bearer ${getAccessToken()}`;
       }
@@ -41,7 +46,10 @@ function setInterceptors(instance: AxiosInstance, type: string) {
  */
 function createInstance(type: string) {
   const instance = axios.create({
-    baseURL: process.env.NEXT_PUBLIC_API_KEY,
+    baseURL:
+      type === "kakao"
+        ? process.env.REACT_APP_KAKAO_APP_KEY
+        : process.env.REACT_APP_API_URL,
   });
   return setInterceptors(instance, type);
 }
@@ -59,7 +67,7 @@ function createInstance(type: string) {
 // Todo: .env 파일에서 환경변수로 api 주소를 가져오고 있지만, 서버 주소가 나오면 env 파일 없이도 사용 가능하게 수정해야 함.
 function createInstanceWithoutAuth() {
   const instance = axios.create({
-    baseURL: process.env.NEXT_PUBLIC_API_KEY,
+    baseURL: process.env.REACT_APP_API_URL,
   });
   return instance;
 }
@@ -75,3 +83,9 @@ export const api = createInstance("server");
  * @const {AxiosInstance}
  */
 export const apiWithoutAuth = createInstanceWithoutAuth();
+
+/**
+ * Kakao API 요청에 사용할 Axios 인스턴스
+ * @const {AxiosInstance}
+ */
+export const apiKaKao = createInstance("kakao");
diff --git a/src/frontend/src/assets/icons/FlagIcon.svg b/src/frontend/src/assets/icons/FlagIcon.svg
diff --git a/src/frontend/src/assets/icons/PopularIcon.svg b/src/frontend/src/assets/icons/PopularIcon.svg
diff --git a/src/frontend/src/assets/icons/ScrappedIcon.svg b/src/frontend/src/assets/icons/ScrappedIcon.svg
diff --git a/src/frontend/src/assets/icons/SearchIcon.svg b/src/frontend/src/assets/icons/SearchIcon.svg
diff --git a/src/frontend/src/assets/images/play.svg b/src/frontend/src/assets/images/play.svg
diff --git a/src/frontend/src/components/common/KakaoMap.tsx b/src/frontend/src/components/common/KakaoMap.tsx
@@ -0,0 +1,63 @@
+import { useEffect, useState } from "react";
+import { Map, MapMarker } from "react-kakao-maps-sdk";
+
+const KakaoMap = () => {
+  const [state, setState] = useState({
+    center: {
+      lat: 33.450701, // 초기 위치 설정 (임의의 위치)
+      lng: 126.570667,
+    },
+    errMsg: null as string | null, // string | null 타입으로 지정
+    isLoading: true,
+  });
+
+  useEffect(() => {
+    if (navigator.geolocation) {
+      // GeoLocation을 이용해서 현재 위치를 얻습니다
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          setState((prev) => ({
+            ...prev,
+            center: {
+              lat: position.coords.latitude, // 위도
+              lng: position.coords.longitude, // 경도
+            },
+            isLoading: false,
+          }));
+        },
+        (err) => {
+          setState((prev) => ({
+            ...prev,
+            errMsg: err.message, // 오류 메시지 설정
+            isLoading: false,
+          }));
+        }
+      );
+    } else {
+      // GeoLocation을 사용할 수 없는 경우 처리
+      setState((prev) => ({
+        ...prev,
+        errMsg: "geolocation을 사용할 수 없어요.",
+        isLoading: false,
+      }));
+    }
+  }, []);
+
+  return (
+    <Map
+      center={state.center}
+      style={{
+        position: "fixed",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100vh",
+      }}
+      level={3}
+    >
+      {!state.isLoading && <MapMarker position={state.center}></MapMarker>}
+    </Map>
+  );
+};
+
+export default KakaoMap;
diff --git a/src/frontend/src/components/common/Navbar.tsx b/src/frontend/src/components/common/Navbar.tsx
@@ -13,7 +13,7 @@ const Navbar = () => {
     location.pathname === path ? "#9993E5" : "black";
 
   return (
-    <div className="fixed bottom-0 w-screen flex justify-around py-4 shadow-navbarShadow">
+    <div className="z-50 bg-white fixed bottom-0 left-0 w-full flex justify-around py-4 shadow-navbarShadow">
       <div
         onClick={() => navigate("/")}
         className="flex flex-col items-center justify-center gap-1"

diff --git a/src/frontend/src/components/home/HomeCategory.tsx b/src/frontend/src/components/home/HomeCategory.tsx
@@ -0,0 +1,24 @@
+import { ReactComponent as FlagIcon } from "@/assets/icons/FlagIcon.svg";
+import { ReactComponent as PopularIcon } from "@/assets/icons/PopularIcon.svg";
+import { ReactComponent as ScrappedIcon } from "@/assets/icons/ScrappedIcon.svg";
+
+const HomeCategory = () => {
+  return (
+    <div className="z-10 p-2 text-[12px] flex gap-3 justify-start w-full">
+      <div className="flex gap-1 justify-center items-center p-2 rounded-[20px] bg-[#FBFAE2]">
+        <FlagIcon />
+        <button>나만의 추천 코스</button>
+      </div>
+      <div className="flex gap-1 justify-center items-center p-2 rounded-[20px] bg-[#EAF5FD]">
+        <PopularIcon />
+        <button>월별 인기 코스</button>
+      </div>
+      <div className="flex gap-1 justify-center items-center p-2 rounded-[20px] bg-[#FFECEC]">
+        <ScrappedIcon />
+        <button>즐겨찾기</button>
+      </div>
+    </div>
+  );
+};
+
+export default HomeCategory;
diff --git a/src/frontend/src/components/home/Searchbar.tsx b/src/frontend/src/components/home/Searchbar.tsx
@@ -0,0 +1,12 @@
+import { ReactComponent as SearchIcon } from "@/assets/icons/SearchIcon.svg";
+
+const Searchbar = () => {
+  return (
+    <div className="z-10 w-11/12 bg-white rounded-md m-4 p-3 shadow-searchbarShadow flex items-center gap-4">
+      <SearchIcon />
+      <input type="text" placeholder="장소를 입력해주세요" />
+    </div>
+  );
+};
+
+export default Searchbar;
diff --git a/src/frontend/src/index.tsx b/src/frontend/src/index.tsx
@@ -5,6 +5,19 @@ import router from "./router";
 import reportWebVitals from "./reportWebVitals";
 import { RouterProvider } from "react-router-dom";
 
+// Dynamically load Kakao Maps API script
+const loadKakaoMapScript = () => {
+  const script = document.createElement("script");
+  script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.REACT_APP_KAKAO_APP_KEY}`;
+  script.async = true;
+  script.onerror = () => {
+    console.error("Kakao Maps API failed to load.");
+  };
+  document.head.appendChild(script);
+};
+
+loadKakaoMapScript();
+
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
@@ -14,7 +27,4 @@ root.render(
   </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
diff --git a/src/frontend/src/pages/Home/HomePage.tsx b/src/frontend/src/pages/Home/HomePage.tsx
@@ -1,7 +1,17 @@
-import React from "react";
+import KakaoMap from "@/components/common/KakaoMap";
+import { ReactComponent as PlayIcon } from "@/assets/images/play.svg";
+import HomeCategory from "@/components/home/HomeCategory";
+import Searchbar from "@/components/home/Searchbar";
 
 const HomePage = () => {
-  return <div>HomePage</div>;
+  return (
+    <div className="flex flex-col justify-center items-center">
+      <Searchbar />
+      <HomeCategory />
+      <KakaoMap />
+      <PlayIcon className="fixed bottom-[20vh] z-50" />
+    </div>
+  );
 };
 
 export default HomePage;
diff --git a/src/frontend/src/components/.gitkeep → src/frontend/src/types/.gitkeep b/src/frontend/src/components/.gitkeep → src/frontend/src/types/.gitkeep
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
@@ -13,7 +13,8 @@ module.exports = {
         navbarGradient: "linear-gradient(180deg, #000 0%, #242142 100%)",
       },
       boxShadow:{
-        navbarShadow: '0px -2px 2px 0px rgba(83, 83, 83, 0.25)'
+        navbarShadow: '0px -2px 2px 0px rgba(83, 83, 83, 0.25)',
+        searchbarShadow: '0px 2px 5px 0px rgba(0, 0, 0, 0.25)'
       }
     },
   },