카카오 지도 연결하기

지도 컴포넌트 생성

// map.tsx

import React, { useEffect } from "react";

declare global {
  interface Window {
    kakao: any;
  }
}
const MapComponent: React.FC = () => {
  useEffect(() => {
    const container = document.getElementById("map");
    const options = {
      center: new window.kakao.maps.LatLng(33.450701, 126.570667),
      level: 3,
    };

    const map = new window.kakao.maps.Map(container, options);
  }, []);

  return (
    <div>
      <div id="map" style={{ width: "700px", height: "50vh" }}></div>
      <script
        type="text/javascript"
        src="//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.REACT_APP_KAKAO_MAP_KEY}"
      ></script>
    </div>
  );
};

export default MapComponent;

지도페이지

//place.tsx

import React from "react";
import styled from "styled-components";
import MapComponent from "./Map";

const TotalStyled = styled.section`
  /* border: 10px solid black; */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f7f7f7;
`;
const PlaceContainer = styled.div`
  border: 5px solid black;
  width: 100vw;
  height: 100vh;
  max-width: 1250px;
  margin-top: 150px; //호버됬을때가 150이래서 일단 150으로 설정함.
  display: flex;
  flex-direction: column;
`;
//상단검색부분
const SearchPartStyled = styled.div`
  border: 3px solid black;
  flex-grow: 1.5;
  display: flex;
  justify-content: center;
  align-items: flex-end;
`;
//지도+리스트부분 전체묶은거
const MapBodyStyled = styled.div`
  border: 5px solid red;
  display: flex;
  flex-direction: row;
  flex-grow: 7.5;
`;
//왼쪽지도부분
const MapPartStyled = styled.div`
  border: 3px solid blue;
  flex-grow: 7;
`;
//오른쪽리스트부분
const ListPartStyled = styled.div`
  border: 3px solid black;
  flex-grow: 3;
`;
const MapBottomStyled = styled.div`
  border: 3px solid black;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const Place = () => {
  return (
    <>
      <TotalStyled>
        <PlaceContainer>
          <SearchPartStyled>
            <input type="text" placeholder="매장을 검색하세요"></input>
            <button>조회</button>
          </SearchPartStyled>
          <MapBodyStyled>
            <MapPartStyled>
              지도부분
              <MapComponent />
            </MapPartStyled>
            <ListPartStyled>리스트부분</ListPartStyled>
          </MapBodyStyled>
          <MapBottomStyled>
            <button>선택</button>
          </MapBottomStyled>
        </PlaceContainer>
      </TotalStyled>
    </>
  );
};

export default Place;

전체에 페이지 연결

//app.tsx

import styled from "styled-components";
import { Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import Cart from "./pages/Cart";
import Login from "./pages/Login/Login";
import SignupInput from "./pages/Signup/SignupInput";
import Likepage from "./pages/Mypage/likepage";
import Orderpage from "./pages/Mypage/orderpage";
import Changeinfopage from "./pages/Mypage/changeinfo";
import Payment from "./pages/Payment/Payment";
import Place from "./pages/Place";
import PaymentConfirm from "./pages/Payment/PaymentConfirm";
import Alcohol from "./pages/Alcohol";
import AlcoholDetail from "./pages/AlcoholDetail";
import Layout from "./layout/index";
import HelpCenter from "./pages/HelpCenter";
import SignupSelection from "./pages/Signup/SignupSelection";
import SignupTerm from "./pages/Signup/SignupTerm";
import FindEmail from "./pages/Login/FindEmail";
import FindPassword from "./pages/Login/FindPassword";
const BodyContainer = styled.div`
  min-height: 100vh;
  ${({ theme }) => theme.common.flexCol};
`;

const App = () => {
  return (
    <BodyContainer>
      <Layout>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/alcohol" element={<Alcohol />} />
          <Route path="/alcohol/detail/:id" element={<AlcoholDetail />} />
          <Route path="/cart/" element={<Cart />} />
          <Route path="/login" element={<Login />} />
          <Route path="/signup/term" element={<SignupTerm />} />
          <Route path="/mypage/likepage" element={<Likepage />} />
          <Route path="/mypage/orderpage" element={<Orderpage />} />
          <Route path="/mypage/changeinfo" element={<Changeinfopage />} />
          <Route path="/payment" element={<Payment />} />
          <Route path="/payment/confirm" element={<PaymentConfirm />} />
          <Route path="/place" element={<Place />} />
          <Route path="/helpcenter" element={<HelpCenter />} />
          <Route path="/signup" element={<SignupSelection />} />
          <Route path="/signup/input" element={<SignupInput />} />
          <Route path="/findemail/" element={<FindEmail />} />
          <Route path="/findpassword" element={<FindPassword />} />
        </Routes>
      </Layout>
    </BodyContainer>
  );
};

export default App;

---

카카오 지도 연결에 필요한 기능 포함

index.html에 이거 추가하기

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAO_MAP_KEY%"></script>

 

.env파일에 key값 발급받아서 추가하기 (밑의 key값은 예시)

REACT_APP_API_URL=" https://3d50-124-111-225-247.ngrok-free.app"
REACT_APP_KAKAO_MAP_KEY="123456789"

---

//index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAO_MAP_KEY%"></script>
    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

---

추가적으로 이걸 설치했다

npm install dotenv