Skip to content

feat: 알바폼 상세 페이지 kakao map 연동 #128

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

Merged
yyezzzy merged 3 commits into from
Dec 12, 2024
Merged

feat: 알바폼 상세 페이지 kakao map 연동 #128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c642615
chore: SelectProgressModal 모달 버튼 css 수정
cccwon2 Dec 12, 2024
ce94216
Merge branch 'dev' into feat/kakaomap
cccwon2 Dec 12, 2024
e1ce8cf
feat: 알바폼 상세 페이지 kakao map 지도 연동
cccwon2 Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 48 additions & 8 deletions src/app/(pages)/alba/[formId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,27 +8,52 @@ import FormDetails from "../components/FormDetail";
import RecruitInformation from "../components/RecruitInfomation";
import ApplicationStatus from "../components/ApplicationStatus";
import { useFormDetail } from "@/hooks/queries/form/detail/useFormDetail";
import { Map, MapMarker, useKakaoLoader } from "react-kakao-maps-sdk";
import Script from "next/script";

interface Coords {
lat: number;
lng: number;
}

export default function AlbaFormDetailPage() {
const { formId } = useParams(); // useParams로 formId 추출
const { formId } = useParams();
const [formIdState, setFormIdState] = useState<number>(0);
const { user } = useUser();
const isOwner = user?.role === "OWNER";

// 카카오맵 관련 상태
const [coords, setCoords] = useState<Coords>({ lat: 37.5665, lng: 126.978 });
const [loading, error] = useKakaoLoader({
appkey: process.env.NEXT_PUBLIC_KAKAO_APP_KEY as string,
libraries: ["services"],
});

useEffect(() => {
// formId가 문자열로 전달되므로 숫자로 변환하여 상태에 저장
if (formId) {
setFormIdState(Number(formId)); // formId를 숫자로 변환하여 상태에 저장
setFormIdState(Number(formId));
}
}, [formId]);

// formId가 설정되면 useFormDetail 호출
const { albaFormDetailData, isLoading, error } = useFormDetail({ formId: formIdState });
const { albaFormDetailData, isLoading, error: formError } = useFormDetail({ formId: formIdState });

if (isLoading) return <div>Loading...</div>;
// 주소로 좌표 검색
useEffect(() => {
if (!albaFormDetailData?.location) return;

if (error) return <div>Error: 데이터를 불러오는데 문제가 발생했습니다.</div>;
if (typeof window === "undefined" || !window.kakao?.maps?.services) return;

const geocoder = new window.kakao.maps.services.Geocoder();
geocoder.addressSearch(albaFormDetailData.location, (result: any[], status: string) => {
if (status === window.kakao.maps.services.Status.OK && result.length > 0) {
const { x, y } = result[0];
setCoords({ lat: parseFloat(y), lng: parseFloat(x) });
}
});
}, [albaFormDetailData?.location]);

if (isLoading) return <div>Loading...</div>;
if (formError) return <div>Error: 데이터를 불러오는데 문제가 발생했습니다.</div>;
if (!albaFormDetailData) return <div>데이터가 없습니다.</div>;

return (
Expand All @@ -40,9 +65,24 @@ export default function AlbaFormDetailPage() {
<div className="w-full space-y-10 sm:w-[600px] md:w-[770px]">
<FormHeader albaFormDetailData={albaFormDetailData} />
<FormDetails albaFormDetailData={albaFormDetailData} />

{/* 카카오맵 스크립트 */}
<Script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js" strategy="afterInteractive" />

{/* 지도 영역 */}
<div className="h-[200px] bg-black-100 sm:h-[300px] md:h-[400px]">카카오지도</div>
<div className="h-[280px] md:h-[320px]">
{error && <div className="text-red-500">Map load error: {String(error)}</div>}
{loading && <div className="flex h-full items-center justify-center">Loading map...</div>}
{!loading && !error && (
<Map center={coords} style={{ width: "100%", height: "100%" }} level={3}>
<MapMarker position={coords}>
<div className="p-2">{albaFormDetailData.title}</div>
</MapMarker>
</Map>
)}
</div>
</div>

{/* 오른쪽 영역 */}
<div className="flex w-full flex-col space-y-12 sm:w-[400px] md:w-[640px]">
<RecruitInformation albaFormDetailData={albaFormDetailData} />
Expand Down
91 changes: 49 additions & 42 deletions src/app/components/modal/modals/confirm/SelectProgressModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,50 +57,57 @@ const SelectProgressModal = ({ id, isOpen, onClose, className }: ConfirmFormModa
};

return (
<div className={cn("h-[454px] w-[375px] rounded-3xl bg-white p-4 shadow-lg md:h-[566px] md:w-[440px]", className)}>
<form onSubmit={handleSubmit} className="flex h-full flex-col items-center">
<div className="text-center">
<h2 className="mb-2 text-lg font-bold md:mb-3 md:text-2xl">진행상태 선택</h2>
<p className="text-muted-foreground mb-6 text-sm md:mb-8 md:text-base">현재 진행상태를 알려주세요.</p>
</div>
<div className="h-auto w-full md:h-[264px] md:w-[360px]">
<RadioGroup value={selectedValue} onValueChange={handleValueChange} className="space-y-3">
{radioOptions.map((option) => (
<RadioBtn
key={option.id}
label={option.label}
name="progress-status"
value={option.value}
id={option.id}
position={positionOptions.POSITION_RIGHT}
className="text-sm md:text-base"
<>
<div className="bg-black fixed inset-0 z-50 bg-opacity-50" onClick={onClose} />
<div
className={cn("h-[454px] w-[375px] rounded-3xl bg-white p-4 shadow-lg md:h-[566px] md:w-[440px]", className)}
>
<form onSubmit={handleSubmit} className="flex h-full flex-col items-center">
<div className="text-center">
<h2 className="mb-2 text-lg font-bold md:mb-3 md:text-2xl">진행상태 선택</h2>
<p className="text-muted-foreground mb-6 text-sm md:mb-8 md:text-base">현재 진행상태를 알려주세요.</p>
</div>
<div className="h-auto w-full md:h-[264px] md:w-[360px]">
<RadioGroup value={selectedValue} onValueChange={handleValueChange} className="space-y-3">
{radioOptions.map((option) => (
<RadioBtn
key={option.id}
label={option.label}
name="progress-status"
value={option.value}
id={option.id}
position={positionOptions.POSITION_RIGHT}
className="text-sm md:text-base"
disabled={isSubmitting}
/>
))}
</RadioGroup>
</div>
<div className="mt-auto w-full md:w-[360px]">
<div className="grid grid-cols-2 gap-4">
<Button
type="button"
onClick={handleCancel}
color="gray"
disabled={isSubmitting}
width="sm"
className="h-[48px] text-base font-medium md:h-[62px] md:text-lg"
>
취소
</Button>
<Button
type="submit"
disabled={isSubmitting}
/>
))}
</RadioGroup>
</div>
<div className="mt-auto w-full md:w-[360px]">
<div className="grid grid-cols-2 gap-4">
<Button
type="button"
onClick={handleCancel}
color="gray"
disabled={isSubmitting}
className="h-[58px] w-full text-sm font-medium hover:bg-grayscale-200 md:h-[72px] md:text-base"
>
취소
</Button>
<Button
type="submit"
disabled={isSubmitting}
className="h-[58px] w-full text-sm font-medium md:h-[72px] md:text-base"
>
{isSubmitting ? "변경 중..." : "선택하기"}
</Button>
width="sm"
className="h-[48px] text-base font-medium hover:border-primary-orange-50 hover:bg-primary-orange-100 hover:text-white md:h-[62px] md:text-lg"
>
{isSubmitting ? "변경 중..." : "선택하기"}
</Button>
</div>
</div>
</div>
</form>
</div>
</form>
</div>
</>
);
};

Expand Down
Loading