CHORE(merge): merge from develop
- Initial setup and all features from develop branch - Includes: auth, deploy, docker, style fixes - K3S deployment configuration
This commit is contained in:
19
nextjs/app/(subpages)/(about)/directions/layout.tsx
Normal file
19
nextjs/app/(subpages)/(about)/directions/layout.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import { Metadata } from 'next';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: '오시는 길',
|
||||
description: '제자들교회 오시는 길 안내입니다. 주소: 인천광역시 서구 고산후로 95번길 32 명진프라자 3층 본당 / 4층 교육관',
|
||||
openGraph: {
|
||||
title: '오시는 길 | 제자들교회',
|
||||
description: '제자들교회 오시는 길 - 인천광역시 서구 고산후로 95번길 32',
|
||||
},
|
||||
};
|
||||
|
||||
export default function DirectionsLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
125
nextjs/app/(subpages)/(about)/directions/page.tsx
Normal file
125
nextjs/app/(subpages)/(about)/directions/page.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { MapPin } from 'lucide-react';
|
||||
import { useKakaoLoader, Map, MapMarker, CustomOverlayMap } from 'react-kakao-maps-sdk';
|
||||
|
||||
// 제자들교회 좌표 (인천광역시 서구 고산후로 95번길 32)
|
||||
const CHURCH_LOCATION = {
|
||||
lat: 37.592754772,
|
||||
lng: 126.695602263,
|
||||
name: '제자들교회',
|
||||
};
|
||||
|
||||
export default function DirectionsPage() {
|
||||
const [isOpen, setIsOpen] = useState(true);
|
||||
const kakaoMapKey = process.env.NEXT_PUBLIC_KAKAO_MAP_KEY || '';
|
||||
|
||||
const [loading, error] = useKakaoLoader({
|
||||
appkey: kakaoMapKey,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="bg-white w-full">
|
||||
<div className="max-w-7xl mx-auto space-y-8 smalltablet:space-y-12 px-4 py-6 smalltablet:py-10">
|
||||
{/* 지도 영역 */}
|
||||
<div className="w-full h-64 smalltablet:h-96 pc:h-[480px] rounded-xl overflow-hidden shadow-lg">
|
||||
{loading ? (
|
||||
<div className="w-full h-full flex items-center justify-center bg-gray-100 rounded-xl">
|
||||
<p className="text-gray-500">지도를 불러오는 중...</p>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="w-full h-full flex items-center justify-center bg-gray-100 rounded-xl">
|
||||
<p className="text-red-500">지도를 불러오는 중 오류가 발생했습니다.</p>
|
||||
</div>
|
||||
) : (
|
||||
<Map
|
||||
center={{ lat: CHURCH_LOCATION.lat, lng: CHURCH_LOCATION.lng }}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
level={2}
|
||||
>
|
||||
<MapMarker
|
||||
position={{ lat: CHURCH_LOCATION.lat, lng: CHURCH_LOCATION.lng }}
|
||||
clickable={true}
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
/>
|
||||
{isOpen && (
|
||||
<CustomOverlayMap
|
||||
position={{ lat: CHURCH_LOCATION.lat, lng: CHURCH_LOCATION.lng }}
|
||||
yAnchor={2.3}
|
||||
>
|
||||
<div className="bg-white px-3 py-2 rounded-lg shadow-lg border border-gray-200">
|
||||
<div className="text-sm font-bold text-gray-900">
|
||||
{CHURCH_LOCATION.name}
|
||||
</div>
|
||||
</div>
|
||||
</CustomOverlayMap>
|
||||
)}
|
||||
</Map>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 교회 정보 카드 */}
|
||||
<div className="flex flex-col smalltablet:flex-row smalltablet:justify-between smalltablet:items-center gap-4 smalltablet:gap-0 pb-6 px-2 smalltablet:px-4 border-b border-gray-400">
|
||||
<h2 className="text-2xl smalltablet:text-3xl pc:text-4xl font-bold text-gray-900">제자들교회 - 인천</h2>
|
||||
<div className="flex flex-col smalltablet:flex-row gap-3 smalltablet:gap-8 pc:gap-12">
|
||||
|
||||
<div className="flex items-center gap-2 smalltablet:gap-3 text-sm smalltablet:text-base pc:text-xl font-bold">
|
||||
<span className="inline-flex items-center justify-center w-6 h-6 smalltablet:w-8 smalltablet:h-8 rounded-full bg-blue-50 text-blue-600">
|
||||
<MapPin className="w-4 h-4" />
|
||||
</span>
|
||||
<span className="text-gray-800">주소 : 인천광역시 서구 고산후로 95번길 32 명진프라자 3층 본당 / 4층 교육관</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <div className="pb-8 space-y-8 md:space-y-10">
|
||||
<div className="flex flex-col gap-4 md:gap-6 md:flex-row md:items-center">
|
||||
<div className="flex flex-row md:flex-col justify-start md:justify-center items-center gap-3 md:w-32 lg:w-40 md:border-r md:border-gray-500 md:mr-4 pb-4 md:pb-0 border-b md:border-b-0 border-gray-300">
|
||||
<Bus className="w-12 h-12 md:w-14 md:h-14 lg:w-16 lg:h-16 text-gray-700" />
|
||||
<p className="text-sm md:text-base font-semibold text-gray-700">버스 이용 시</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 md:space-y-3 text-gray-700 flex-1">
|
||||
<p className="text-sm md:text-base lg:text-lg">제자들교회 앞 정류장 : 102, 550, 720, 마을3</p>
|
||||
<p className="text-sm md:text-base lg:text-lg">
|
||||
제자들교회 사거리 정류장 : 급행11, 간선21, 환승5
|
||||
</p>
|
||||
<p className="text-sm md:text-base lg:text-lg mb-4 md:mb-8">
|
||||
중앙시장 환승센터 하차 후 도보 5분 — 교회까지 직진 후 우회전
|
||||
</p>
|
||||
<p className="text-blue-600 font-bold text-sm md:text-base">광역버스 이용 시</p>
|
||||
<p className="text-gray-700 text-sm md:text-base">
|
||||
인천종합터미널에서 8800번 광역버스를 타고 제자들교회 앞 정류장에서 하차하세요. 하차 후 교회까지 도보 3분입니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-200" />
|
||||
|
||||
<div className="flex flex-col gap-4 md:gap-6 md:flex-row md:items-center">
|
||||
<div className="flex flex-row md:flex-col justify-start md:justify-center items-center gap-3 md:w-32 lg:w-40 md:border-r md:border-gray-500 md:mr-4 pb-4 md:pb-0 border-b md:border-b-0 border-gray-300">
|
||||
<Train className="w-12 h-12 md:w-14 md:h-14 lg:w-16 lg:h-16 text-gray-700" />
|
||||
<p className="text-sm md:text-base font-semibold text-gray-700">지하철 이용 시</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 md:space-y-3 text-gray-700 flex-1">
|
||||
<p className="text-sm md:text-base lg:text-lg">인천 1호선 `제자들역` 3번 출구 도보 7분</p>
|
||||
<p className="text-sm md:text-base lg:text-lg">
|
||||
3번 출구로 나와 첫 번째 사거리에서 좌회전한 뒤 300m 직진하면 교회가 보입니다.
|
||||
</p>
|
||||
<p className="text-sm md:text-base lg:text-lg mb-4 md:mb-8">
|
||||
공항철도 `신제자역` 하차 후 2번 출구 → 마을버스 3번 환승 → 제자들교회 앞 정류장 하차
|
||||
</p>
|
||||
<p className="text-blue-600 font-bold text-sm md:text-base">KTX 연계 이용 시</p>
|
||||
<p className="text-gray-700 text-sm md:text-base">
|
||||
광명역에서 공항철도 환승 후 `신제자역`까지 이동한 뒤, 2번 출구 마을버스 3번을 이용하면 약 40분 소요됩니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user