-
Notifications
You must be signed in to change notification settings - Fork 1
[feat] #11 추천 결과 페이지: 지도 마커 및 경로 표시/ 랜딩 페이지: 반응형 스타일 적용 #13
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.
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
Merged
Merged
Changes from all commits
Commits
Show all changes
23 commits
Select commit
Hold shift + click to select a range
fba1833
design: 반응형 모서리 radius 수정
hyeonjiroh cfd1372
feat: 추천 패널과 지도 모두 조작 가능하도록 구현
hyeonjiroh 3dd87d8
chore: 이미지 도메인 추가
hyeonjiroh f3da947
design: PC 화면에서 추천 패널 크기 지정
hyeonjiroh d4406b4
feat: 지도에 마커 및 경로 표시 테스트
hyeonjiroh 221d4dc
feat: 사용자가 선택한 거주 의향 지역을 도착 지점으로 지정 및 마커 표시 & 시작 지점과 중간 지점의 중간 지점을 초기…
hyeonjiroh 89708a4
design: 지도가 사이드 패널의 공간을 제외하고 꽉 채울 수 있도록 변경
hyeonjiroh 60e094d
feat: 추천 장소 커스텀 마커 생성
hyeonjiroh 9faeb64
feat: 경로 임시 표시
hyeonjiroh 3b3e0e8
design: 네비게이션 바 로고 변경
hyeonjiroh 88d0c93
design: 플로팅 버튼 디자인 변경 및 반응형 스타일 적용
hyeonjiroh b207a48
refactor: prop 전달 방식 변경
hyeonjiroh ca14d78
feat: 추천 장소 마커 표시
hyeonjiroh f6eca5d
design: 시작 및 도착 마커 변경
hyeonjiroh 9353291
refactor: 추천 장소 마커 기본 이미지 변경
hyeonjiroh ea15d7c
feat: 추천 장소 마커 클릭 시 해당 추천 장소 경유하는 경로 표시
hyeonjiroh ece9977
style: 패널 내용 넘칠 시 잘리는 문제 해결
hyeonjiroh 433061a
feat: 추천 장소 클릭 시 해당 추천 장소가 지도의 중심에 위치하도록 변경
hyeonjiroh 9ad0b32
design: 플로팅 버튼 배치 변경
hyeonjiroh eddfcbc
design: 로고, 배경 변경 및 반응형 스타일 적용
hyeonjiroh 88894ff
design: 로고, 배경 변경 및 반응형 스타일 적용
hyeonjiroh 725e644
remove: 사용하지 않는 이미지 파일 삭제
hyeonjiroh e274d94
design: svg 이미지 대신 lucide 아이콘 사용
hyeonjiroh File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
File renamed without changes
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
45 changes: 45 additions & 0 deletions
45
src/app/recommend/_components/MapView/RecommendationMarker.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { CustomOverlayMap, MapMarker } from "react-kakao-maps-sdk"; | ||
| import { RecommendationResponse } from "@/lib/type"; | ||
| import Image from "next/image"; | ||
| import Temp from "@/assets/icons/temp.jpg"; | ||
|
|
||
| interface RecommendationMarkerProps extends RecommendationResponse { | ||
| onClick?: () => void; | ||
| } | ||
|
|
||
| export default function RecommendationMarker({ | ||
| image, | ||
| coordinate, | ||
| onClick, | ||
| }: RecommendationMarkerProps) { | ||
| if (!coordinate) return null; | ||
|
|
||
| const coord = { lat: coordinate.latitude, lng: coordinate.longitude }; | ||
|
|
||
| return ( | ||
| <> | ||
| <MapMarker | ||
| position={coord} | ||
| image={{ | ||
| src: "/icons/marker_recommendation.svg", | ||
| size: { | ||
| width: 51, | ||
| height: 63, | ||
| }, | ||
| }} | ||
| /> | ||
| <CustomOverlayMap position={coord} yAnchor={1.25}> | ||
| <div className="size-[43px]" onClick={onClick}> | ||
| <div className="relative m-auto size-9"> | ||
| <Image | ||
| src={image || Temp} | ||
| fill | ||
| className="rounded-full object-cover" | ||
| alt="" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </CustomOverlayMap> | ||
| </> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,90 @@ | ||
| "use client"; | ||
|
|
||
| import { Map, MapMarker, useKakaoLoader } from "react-kakao-maps-sdk"; | ||
| import { Map, MapMarker, Polyline, useKakaoLoader } from "react-kakao-maps-sdk"; | ||
| import { RecommendationResponse } from "@/lib/type"; | ||
| import { COORDINATE } from "@/constants/spaceData"; | ||
| import { Coordinate, getMidpoint } from "@/utils/getMidpoint"; | ||
| import { getDestination } from "@/utils/getDestination"; | ||
| import RecommendationMarker from "./RecommendationMarker"; | ||
| import { useState } from "react"; | ||
|
|
||
| export default function MapView() { | ||
| export default function MapView({ | ||
| spaceData, | ||
| }: { | ||
| spaceData: RecommendationResponse[]; | ||
| }) { | ||
| const [loading, error] = useKakaoLoader({ | ||
| appkey: process.env.NEXT_PUBLIC_APPKEY!, | ||
| }); | ||
| const [selectedSpace, setSelectedSpace] = useState<Coordinate | null>(null); | ||
|
|
||
| if (loading) return <div>Loading</div>; | ||
| if (error) return <div>Error</div>; | ||
|
|
||
| const origin = COORDINATE.SAEMANGEUM; | ||
| const destination = getDestination(); | ||
| const midpoint = getMidpoint(origin, destination); | ||
|
|
||
| return ( | ||
| <Map | ||
| level={3} | ||
| center={{ lat: 33.5563, lng: 126.79581 }} | ||
| style={{ width: "100%", height: "360px" }} | ||
| level={10} | ||
| center={selectedSpace ? selectedSpace : midpoint} | ||
| style={{ width: "100%", height: "100%" }} | ||
| > | ||
| <MapMarker position={{ lat: 33.55635, lng: 126.795841 }}> | ||
| <div style={{ color: "#000" }}>Hello World!</div> | ||
| </MapMarker> | ||
| {/* 추천 지점 마커 */} | ||
| {spaceData.map((space, index) => ( | ||
| <RecommendationMarker | ||
| key={index} | ||
| {...space} | ||
| onClick={() => { | ||
| if (space.coordinate) { | ||
| setSelectedSpace({ | ||
| lat: space.coordinate.latitude, | ||
| lng: space.coordinate.longitude, | ||
| }); | ||
| } | ||
| }} | ||
| /> | ||
| ))} | ||
|
|
||
| {/* 시작 지점 마커 */} | ||
| <MapMarker | ||
| position={origin} | ||
| image={{ | ||
| src: "/icons/marker_origin.svg", | ||
| size: { | ||
| width: 42, | ||
| height: 55, | ||
| }, | ||
| }} | ||
| /> | ||
|
|
||
| {/* 도착 지점 마커 */} | ||
| <MapMarker | ||
| position={destination} | ||
| image={{ | ||
| src: "/icons/marker_destination.svg", | ||
| size: { | ||
| width: 42, | ||
| height: 55, | ||
| }, | ||
| }} | ||
| /> | ||
|
|
||
| {/* 경로 */} | ||
| <Polyline | ||
| path={[ | ||
| [ | ||
| origin, | ||
| ...(selectedSpace ? [selectedSpace] : [midpoint]), | ||
| destination, | ||
| ], | ||
| ]} | ||
| strokeWeight={5} | ||
| strokeColor={"#F84B5F"} | ||
| strokeOpacity={0.8} | ||
| strokeStyle={"solid"} | ||
| /> | ||
| </Map> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
현지님 나중에 풀리퀘 마크다운 프레임 참조해도 될까요. 가독성이 아주 조하요
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
넵 편하게 사용하세요!