Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

지도 관련 세팅 작업 #67

Merged
merged 8 commits into from
Nov 3, 2023
Merged

지도 관련 세팅 작업 #67

merged 8 commits into from
Nov 3, 2023

Conversation

jgjgill
Copy link
Contributor

@jgjgill jgjgill commented Nov 2, 2023 •
edited
Loading

구현 내용

지도 관련 세팅 작업을 진행했습니다.
pr 미리보기 배포에서는 주소가 랜덤으로 생성되어 카카오 도메인에 추가할 수 없네요..
해당 부분은 pr 환경에서는 어쩔 수 없을 것 같습니다.

지도를 확인하려면 배포 환경인 develop 브랜치에서 확인할 수 있을 것 같습니다.

지도 관련 구현된 기능

  • 지도 컴포넌트
  • 현재 좌표 위치에 따른 지도 생성
  • 현재 좌표 마크 및 클릭시 이벤트 발생 (currentPosition, onClickCurrentPosition)
  • 주변 마크 배열 및 클릭시 이벤트 생성 (positions, onClickPosition)

사용 방법

사용 방법은 다음과 같습니다.

<KakaoMap
  onClickCurrentPosition={() => console.log('현재 위치 클릭')}
  onClickPosition={() => console.log('marker')}
  positions={[
    { lat: 33.450705, lng: 126.56956, title: '카카오' },
    { lat: 33.450936, lng: 126.569477, title: '생태연못' },
  ]}
/>

지도 커스텀 훅

지도와 관련해서 3가지 훅이 구성되어 있습니다.

  • useGetMap: 지도 생성 관련 훅입니다.
  • useGetCurrentMarker: 현재 좌표 마커 생성 관련 훅입니다.
  • useGetMarker: 주변 좌표 마커 배열 생성 관련 훅입니다.

지도와 관련해서 필요해보이는 기능은 언제든지 말씀해주세요..! 추가하도록 하겠습니다!

스크린샷

2023-11-03.12.57.06.mov

참고 사항

지도 api를 불러올 때 window.kakao를 불러오는 코드, 즉 useEffect가 실행되기 전에 Script가 완료가 되어야 하는데요.
이와 관련해서 다음과 같이 코드가 구성되었습니다.

<html lang="ko">
  <head>
    <Script
      type="text/javascript"
      src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.KAKAO_MAP_KEY}&autoload=false&libraries=services`}
      strategy="beforeInteractive"
    />
  </head>
  ...

에러를 해결하기 위해 참고한 문서들은 다음과 같습니다.

Team-PalPalHae-Dealight-FE/app/layout.tsx

Line 1 in e66ee0c

/* eslint-disable @next/next/no-before-interactive-script-outside-document */

궁금한 점

이슈 번호

@jgjgill jgjgill added the 기능 새로운 기능을 개발합니다. label Nov 2, 2023
@jgjgill jgjgill self-assigned this Nov 2, 2023
@jgjgill jgjgill linked an issue Nov 2, 2023 that may be closed by this pull request
지도 관련 세팅 작업 #56
Closed
6 tasks
@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 2, 2023

🚀storybook: https://65363948038ba056aabfd656-akpvnngkbo.chromatic.com/

@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 2, 2023

🚀preview: https://dealight-pwt8ydctb-jgjgill.vercel.app

Lim-JiSeon
Lim-JiSeon approved these changes Nov 3, 2023
View reviewed changes
Copy link
Contributor

@Lim-JiSeon Lim-JiSeon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다.
디자인적으로 지도 위 마커를 어떻게 표시할 것인지 또는 이벤트는 줄 건지 준다면 어떤 식으로 줄건지 정한 부분이 없었는데 마커를 클릭하면 해당 업체 상세 페이지로 이동하는것도 괜찮지 않을까 하는 생각이 조금 드네요. 현재 위치 마커만 파란색으로 하고 그 외 마커들은 노라색으로 한다거나? 등등 이 부분은 추후 새롭게 상의해서 결정해도 좋을 것 같아요 :)

app/page.tsx Outdated
{ lat: 33.450705, lng: 126.56956, title: '카카오' },
{ lat: 33.450936, lng: 126.569477, title: '생태연못' },
]}
/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이런 식으로 사용하면 되겠네요. 예시 들어주셔서 감사합니다.
시작 페이지에서는 지도를 사용하지 않으니 customer/home으로 옮기거나 pr content에 사용 예시로 옮기면 어떨까요?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵 머지할 때 이동시키겠습니다..! 🙇‍♂️

@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 3, 2023

🚀storybook: https://65363948038ba056aabfd656-bcefwzmetf.chromatic.com/

@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 3, 2023

🚀preview: https://dealight-l4q0c1bet-jgjgill.vercel.app

@jgjgill jgjgill merged commit fb6af58 into develop Nov 3, 2023
4 checks passed
@jgjgill jgjgill deleted the 56-지도-관련-세팅-작업 branch November 3, 2023 08:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Lim-JiSeon Lim-JiSeon Lim-JiSeon approved these changes

Assignees

@jgjgill jgjgill

Labels
기능 새로운 기능을 개발합니다.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

지도 관련 세팅 작업
2 participants
@jgjgill @Lim-JiSeon