Skip to content

Commit 3be77f2

Browse files
CSE-ShacoCSE-Shaco
authored
Merge pull request #231 from GDGoCINHA/develop
merge dev
2 parents 66cfc8b + 2b49db9 commit 3be77f2

File tree

2 files changed

+278
-273
lines changed

2 files changed

+278
-273
lines changed

‎src/app/homecoming/component/HomecomingPage.jsx‎

Lines changed: 274 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,274 @@
1+
'use client';
2+
3+
import {useState} from 'react';
4+
import {GoogleMap, Marker, useJsApiLoader} from '@react-google-maps/api';
5+
import Image from 'next/image';
6+
import {useSearchParams} from "next/navigation";
7+
8+
export default function HomecomingPage() {
9+
const [showInvitation, setShowInvitation] = useState(false);
10+
11+
return (<main className="relative flex min-h-screen justify-center overflow-hidden">
12+
{/* 🔥 모바일/태블릿: 화면에 딱 고정되는 배경 (fixed) */}
13+
<div
14+
className="
15+
fixed inset-0 -z-10
16+
h-screen
17+
bg-[url('/images/homecoming/bg.png')]
18+
bg-cover bg-center bg-no-repeat
19+
md:hidden
20+
"
21+
/>
22+
23+
{/* 💻 PC: 내용 높이만큼 아래로 늘어나는 배경 */}
24+
<div
25+
className="
26+
hidden md:block
27+
absolute inset-0 -z-10
28+
bg-[url('/images/homecoming/bg.png')]
29+
bg-cover bg-center bg-no-repeat
30+
"
31+
/>
32+
33+
{/* 1920px 기준 캔버스 */}
34+
<div className="relative w-full max-w-[1920px]">
35+
36+
{/* 실제 콘텐츠 */}
37+
<div className="relative z-10 mx-auto flex w-full max-w-[1200px] flex-col px-4 py-10 md:py-16">
38+
{showInvitation ? (<Invitation onBack={() => setShowInvitation(false)}/>) : (
39+
<Hero onOpenInvitation={() => setShowInvitation(true)}/>)}
40+
</div>
41+
</div>
42+
</main>);
43+
}
44+
45+
/* ===============================
46+
Hero 컴포넌트
47+
================================ */
48+
function Hero({onOpenInvitation}) {
49+
const searchParams = useSearchParams();
50+
51+
// 예: /homecoming?from=GOAT+멤버
52+
const rawText = searchParams.get('from'); // 없으면 null
53+
const testText = rawText ? (decodeURIComponent(rawText) + " ") : ''; // 기본값 처리
54+
55+
return (<div className="flex flex-1 flex-col items-center gap-8 text-center">
56+
<Image
57+
src="/images/homecoming/main_img.png"
58+
width={329}
59+
height={235}
60+
alt="GDGoC INHA Homecoming Day Illustration"
61+
priority
62+
className="w-full max-w-2xl mt-[calc(50vh-235px)] md:mt-[100px] md:max-w-[790px]"
63+
/>
64+
65+
<h1 className="text-xl font-extrabold leading-tight text-neutral-900 md:text-3xl">
66+
GDGoC INHA{" "}
67+
<br className="block md:hidden"/>
68+
제1회 홈커밍데이에
69+
<br/>
70+
{testText && (<>{testText}</>)}
71+
여러분을 초대합니다!
72+
</h1>
73+
74+
<button
75+
type="button"
76+
onClick={onOpenInvitation}
77+
className="mt-2 rounded-full bg-white px-10 py-3 text-base font-semibold text-neutral-900 shadow-md transition hover:bg-neutral-50 hover:shadow-lg"
78+
>
79+
초대장 펼쳐보기
80+
</button>
81+
</div>);
82+
}
83+
84+
/* ===============================
85+
Invitation 컴포넌트
86+
================================ */
87+
function Invitation({onBack}) {
88+
return (<div className="flex w-full justify-center px-3 md:px-0">
89+
{/* 초대장 카드 */}
90+
<div
91+
className="w-full max-w-[1100px] rounded-3xl bg-white/90 shadow-xl backdrop-blur-sm px-5 py-7 md:px-10 md:py-10 text-neutral-900">
92+
93+
{/* 상단 라벨 + 뒤로가기 */}
94+
<div className="mb-4 flex items-center justify-between">
95+
<span className="text-[11px] md:text-xs font-medium text-neutral-500 tracking-[0.18em] uppercase">
96+
Invitation
97+
</span>
98+
{onBack && (<button
99+
type="button"
100+
onClick={onBack}
101+
className="inline-flex items-center gap-1 rounded-full bg-neutral-900/5 px-3 py-1.5 text-[11px] font-medium text-neutral-800 hover:bg-neutral-900/10"
102+
>
103+
← 메인으로
104+
</button>)}
105+
</div>
106+
107+
{/* 1. 소개 */}
108+
<section className="mb-8 md:mb-10 text-center">
109+
<h1 className="text-2xl md:text-3xl lg:text-4xl font-extrabold">
110+
GDGoC INHA{" "}
111+
<br className="block md:hidden"/>
112+
제1회 홈커밍 데이
113+
</h1>
114+
<p className="mt-2 text-[11px] md:text-xs tracking-wide text-neutral-500">
115+
GDGoC INHA Homecoming Day 2025
116+
</p>
117+
118+
<div
119+
className="
120+
mt-6 space-y-3
121+
text-[13px] md:text-sm leading-relaxed text-neutral-900/90
122+
max-w-[720px] mx-auto md:max-w-full
123+
text-left
124+
"
125+
>
126+
127+
<p>
128+
GDGoC INHA가 처음으로 선보이는{" "}
129+
<strong>제1회 홈커밍 데이(Homecoming Day)</strong>가 열립니다!
130+
</p>
131+
132+
<p>
133+
이번 행사는 현역 부원과 OB, 그리고 GDG 커뮤니티에 관심 있는 모든 분들이 한자리에 모여{" "}
134+
<span className="font-semibold">
135+
프로젝트 성과 공유 · 기술 교류 · 커뮤니티 네트워킹
136+
</span>
137+
을 함께 나누는 뜻깊은 자리입니다.
138+
</p>
139+
140+
141+
<p>
142+
한 해 동안의 활동을 돌아보고, 앞으로 GDGoC INHA가 만들어갈 방향을 함께 이야기하며{" "}
143+
커뮤니티의 가치를 더욱 확장하는 의미 있는 시간을 준비했습니다.
144+
</p>
145+
</div>
146+
</section>
147+
148+
{/* 2~3. 일시/장소 + 프로그램 (PC에서 2열 배치) */}
149+
<section className="mb-8 md:mb-10 md:grid md:grid-cols-2 md:gap-8 text-left">
150+
{/* 왼쪽 컬럼: 일시 + 장소 */}
151+
<div
152+
className="space-y-5 md:pr-6 border-b md:border-b-0 md:border-r border-neutral-200 pb-6 md:pb-0">
153+
{/* 일시 */}
154+
<div>
155+
<h2 className="text-sm md:text-base font-bold text-neutral-900 mb-1.5">
156+
일시
157+
</h2>
158+
<p className="text-xs md:text-sm font-medium text-neutral-900">
159+
2025년 12월 20일 (토)
160+
</p>
161+
</div>
162+
163+
{/* 장소 */}
164+
<div>
165+
<h2 className="text-sm md:text-base font-bold text-neutral-900 mb-1.5">
166+
장소
167+
</h2>
168+
<p className="text-xs md:text-sm font-medium text-neutral-900 leading-relaxed">
169+
신한 스퀘어 브릿지 인천
170+
<br/>
171+
(인천 연수구 컨벤시아대로 204 인스타2)
172+
</p>
173+
</div>
174+
175+
<div>
176+
<h2 className="text-sm md:text-base font-semibold text-neutral-900 mb-3">
177+
참가 신청
178+
</h2>
179+
180+
<a
181+
href="https://docs.google.com/forms/d/e/1FAIpQLSddHWTKvn3noWvLJX_LuW7dhGsAgXl8miD0cOpdqhviByvVFw/viewform"
182+
target="_blank"
183+
rel="noopener noreferrer"
184+
className="inline-flex items-center gap-1 rounded-full bg-neutral-900/5 px-3 py-1.5 text-xs font-medium text-neutral-800 hover:bg-neutral-900/10"
185+
>
186+
신청 링크 바로 가기
187+
<span aria-hidden>→</span>
188+
</a>
189+
</div>
190+
</div>
191+
192+
{/* 오른쪽 컬럼: 프로그램 안내 */}
193+
<div className="mt-6 md:mt-0 md:col-span-1">
194+
<h2 className="text-sm md:text-base font-bold text-neutral-900 mb-3">
195+
프로그램 안내
196+
</h2>
197+
<div className="space-y-5 text-xs md:text-sm text-neutral-900 relative">
198+
<div>
199+
<p className="font-semibold mb-1">
200+
1부(13:00~) GOAT Final Day
201+
</p>
202+
<ul className="list-disc list-inside space-y-1 text-neutral-800">
203+
<li>
204+
팀 프로젝트 데모 시연 및 피칭 발표 (라운드 형식)
205+
</li>
206+
</ul>
207+
</div>
208+
209+
<div>
210+
<p className="font-semibold mb-1">
211+
2부(16:00~) Networking Session
212+
</p>
213+
<ul className="list-disc list-inside space-y-1 text-neutral-800">
214+
<li>오프닝 특강 - GDGoC Korea Organizer 김대현님 </li>
215+
<li>GDGoC INHA 연간 활동 소개 및 커뮤니티 정리</li>
216+
<li>OB 및 초청 연사 소개</li>
217+
<li>팀 기반 네트워킹 게임 진행</li>
218+
<li>자유로운 네트워킹</li>
219+
</ul>
220+
</div>
221+
222+
<div>
223+
<p className="font-semibold mb-1">
224+
뒷풀이 (19:00~)
225+
</p>
226+
</div>
227+
</div>
228+
</div>
229+
</section>
230+
231+
{/* 4. 지도 (찾아오는 길) */}
232+
<section>
233+
<h2 className="text-sm md:text-base font-semibold text-neutral-900 mb-3">
234+
찾아오는 길
235+
</h2>
236+
<HomecomingMap/>
237+
</section>
238+
</div>
239+
</div>);
240+
}
241+
242+
function HomecomingMap() {
243+
const {isLoaded, loadError} = useJsApiLoader({
244+
googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY, id: 'homecoming-map-script',
245+
});
246+
247+
const center = {lat: 37.388493, lng: 126.639989};
248+
249+
if (loadError) {
250+
return (<div
251+
className="rounded-2xl border border-red-300 bg-red-50 text-red-700 text-xs md:text-sm flex items-center justify-center h-[220px] md:h-[320px] lg:h-[420px]">
252+
지도를 불러오는 중 오류가 발생했습니다.
253+
</div>);
254+
}
255+
256+
if (!isLoaded) {
257+
return (<div
258+
className="rounded-2xl border border-neutral-200 bg-neutral-100 text-neutral-500 text-xs md:text-sm flex items-center justify-center h-[220px] md:h-[320px] lg:h-[420px]">
259+
지도를 불러오는 중입니다...
260+
</div>);
261+
}
262+
263+
return (<div
264+
className="rounded-2xl overflow-hidden border border-neutral-200 bg-neutral-100 h-[220px] md:h-[320px] lg:h-[420px]">
265+
<GoogleMap
266+
mapContainerClassName="w-full h-full"
267+
center={center}
268+
zoom={17}
269+
options={{disableDefaultUI: true, clickableIcons: false}}
270+
>
271+
<Marker position={center}/>
272+
</GoogleMap>
273+
</div>);
274+
}

0 commit comments

Comments
 (0)