Skip to content

Commit

Permalink
resolve conflict
Browse files Browse the repository at this point in the history
  • Loading branch information
Gukhee Jo committed Jul 26, 2024
2 parents 2d95546 + ba07147 commit ac6c877
Show file tree
Hide file tree
Showing 16 changed files with 523 additions and 3 deletions.
6 changes: 6 additions & 0 deletions .env.template
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,9 @@ KAKAO_REDIRECT_URI=
NAVER_CLIENT_ID=
NAVER_CLIENT_SECRET=
NAVER_REDIRECT_URI=

## KAKAO MAP
### @see https://developers.kakao.com/console/app/1102339/config/appKey
KAKAO_MAP_BASE_URL=
KAKAO_MAP_API_KEY=
DAUMCDN_POSTOCDE_URL=
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
"name": "invi",
"version": "0.1.0",
"private": true,
"type": "module",
"scripts": {
"dev": "next dev",
"build": "next build",
Expand Down Expand Up @@ -39,6 +40,7 @@
"@tanstack/react-form": "^0.26.1",
"@tanstack/react-query": "^5.50.1",
"@tanstack/zod-form-adapter": "^0.25.3",
"@types/uuid": "^10.0.0",
"arctic": "^2.0.0-next.4",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
Expand All @@ -53,6 +55,7 @@
"sonner": "^1.5.0",
"tailwind-merge": "^2.3.0",
"tailwindcss-animate": "^1.0.7",
"uuid": "^10.0.0",
"zod": "^3.23.8",
"zustand": "^4.5.4"
},
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
"use client";

import { useKakaoAddress } from "~/app/(playground)/playground/map/_components/KakaoAddressContext";

export default function AddressSearchButton() {
const { setCoordinate } = useKakaoAddress();

const handleClickButton = () => {
new window.daum.Postcode({
oncomplete: (addressData: any) => {
const geocoder = new window.kakao.maps.services.Geocoder();
geocoder.addressSearch(
addressData.address,
(result: any, status: any) => {
const currentPositions = new window.kakao.maps.LatLng(
result[0].y,
result[0].x,
);
setCoordinate(currentPositions.Ma, currentPositions.La);
},
);
},
}).open();
};

return (
<button
onClick={handleClickButton}
className={"bold rounded-xl border bg-blue-300 p-2 text-white"}
>
내 주소 찾기
</button>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
"use client";

import type { ReactNode } from "react";
import { createContext, useContext, useState } from "react";

export interface Coordinate {
latitude: number;
longitude: number;
}

interface KakaoAddressContextType {
coordinate: Coordinate;
setCoordinate: (latitude: number, longitude: number) => void;
}

const KakaoAddressContext = createContext<KakaoAddressContextType | undefined>(
undefined,
);

export function KakaoAddressProvider({ children }: { children: ReactNode }) {
const [coordinate, setCoordinateState] = useState<Coordinate>({
latitude: 37.566828,
longitude: 126.9786567,
});

const setCoordinate = (latitude: number, longitude: number) => {
setCoordinateState({ latitude, longitude });
};

return (
<KakaoAddressContext.Provider value={{ coordinate, setCoordinate }}>
{children}
</KakaoAddressContext.Provider>
);
}

export function useKakaoAddress() {
const context = useContext(KakaoAddressContext);
if (context === undefined) {
throw new Error(
"useKakaoAddress must be used within a KakaoAddressProvider",
);
}
return context;
}
78 changes: 78 additions & 0 deletions src/app/(playground)/playground/map/_components/KakaoMap/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
"use client";

import { useEffect, useRef } from "react";
import { useKakaoAddress } from "~/app/(playground)/playground/map/_components/KakaoAddressContext";

interface KakaoMapProps {
width: string;
height: string;
level?: number;
addCenterPin?: boolean;
latitude?: number;
longitude?: number;
}

export default function KakaoMap({
width,
height,
level = 3,
addCenterPin = false,
latitude,
longitude,
}: KakaoMapProps) {
const { coordinate } = useKakaoAddress();
const mapRef = useRef<HTMLDivElement | null>(null);
const mapInstanceRef = useRef<any>(null);
const markerRef = useRef<any>(null);

useEffect(() => {
if (!mapRef.current) return;

const initializeMap = () => {
const center = new window.kakao.maps.LatLng(
latitude ?? coordinate.latitude,
longitude ?? coordinate.longitude,
);

const mapInstance = new window.kakao.maps.Map(
mapRef.current as HTMLElement,
{
center,
level,
},
);

mapInstanceRef.current = mapInstance;

if (addCenterPin) {
const marker = new window.kakao.maps.Marker({ position: center });
marker.setMap(mapInstance);
markerRef.current = marker;
}
};

if (window.kakao && window.kakao.maps) {
window.kakao.maps.load(initializeMap);
}
}, []);

useEffect(() => {
if (mapInstanceRef.current) {
const newCenter = new window.kakao.maps.LatLng(
latitude ?? coordinate.latitude,
longitude ?? coordinate.longitude,
);
mapInstanceRef.current.setCenter(newCenter);

if (addCenterPin && markerRef.current) {
markerRef.current.setPosition(newCenter);
}
}
}, [coordinate]);

return (
<div style={{ width, height }}>
<div ref={mapRef} style={{ width: "100%", height: "100%" }} />
</div>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default function UtilsContainer() {}
Empty file.
24 changes: 24 additions & 0 deletions src/app/(playground)/playground/map/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import Script from "next/script";
import { env } from "~/lib/env";

export default function KaKaoMapPageLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<Script
strategy="beforeInteractive"
type="text/javascript"
src={`${env.DAUMCDN_POSTOCDE_URL}`}
/>
<Script
strategy="beforeInteractive"
type="text/javascript"
src={`${env.KAKAO_MAP_BASE_URL}?appkey=${env.KAKAO_MAP_API_KEY}&libraries=services&autoload=false`}
/>
{children}
</>
);
}
37 changes: 37 additions & 0 deletions src/app/(playground)/playground/map/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { AMain } from "~/app/(playground)/playground/inner-tools";
import AddressSearchButton from "~/app/(playground)/playground/map/_components/AddressSearchButton";
import { KakaoAddressProvider } from "~/app/(playground)/playground/map/_components/KakaoAddressContext";
import KakaoMap from "~/app/(playground)/playground/map/_components/KakaoMap";

export default function KaKaoMapPage() {
return (
<AMain>
<div>
<p>결과 페이지에서 보여줄 위도 경도 입력한 지도</p>
<KakaoAddressProvider>
<KakaoMap
height={"400px"}
width={"100%"}
addCenterPin={true}
latitude={37}
longitude={126.87}
/>
</KakaoAddressProvider>
</div>
<div>
<p>Provider Test 1</p>
<KakaoAddressProvider>
<KakaoMap height={"400px"} width={"100%"} addCenterPin={true} />
<AddressSearchButton />
</KakaoAddressProvider>
</div>
<div>
<p>Provider Test 2</p>
<KakaoAddressProvider>
<KakaoMap height={"400px"} width={"100%"} addCenterPin={true} />
<AddressSearchButton />
</KakaoAddressProvider>
</div>
</AMain>
);
}
2 changes: 1 addition & 1 deletion src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export default function Home() {
return <main className="">인비 🐝</main>;
return <main className="">인비 🐝🐝</main>;
}
1 change: 1 addition & 0 deletions src/lib/db/migrations/0004_lying_swordsman.sql
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
ALTER TABLE "invitation_response" ALTER COLUMN "id" SET DATA TYPE text;
Loading

0 comments on commit ac6c877

Please sign in to comment.