22
33import React , { forwardRef } from 'react' ;
44import FrameSection from './FrameSection' ;
5+ import { GoogleMap , Marker , useJsApiLoader } from "@react-google-maps/api" ;
56
67const FrameViewport = forwardRef ( function FrameViewport ( { onScroll} , ref ) {
78 return ( < div
8- ref = { ref }
9- onScroll = { onScroll }
10- className = "
9+ ref = { ref }
10+ onScroll = { onScroll }
11+ className = "
1112 relative
1213 h-full w-full
13- overflow-y-auto no-scrollbar
14- snap-y snap-mandatory
14+ overflow-y-auto no-scrollbar snap-y snap-mandatory font-pretendard text-cwhite
1515 "
16- >
17- < FrameSection > < p > 1st </ p > </ FrameSection >
18- < FrameSection > < p > 2nd </ p > </ FrameSection >
19- < FrameSection > < p > 3rd </ p > </ FrameSection >
20- < FrameSection > < p > 4th </ p > </ FrameSection >
21- </ div > ) ;
16+ >
17+ < FrameSection > < FirstSection / ></ FrameSection >
18+ < FrameSection > < SecondSection / ></ FrameSection >
19+ < FrameSection > < ThirdSection / ></ FrameSection >
20+ < FrameSection > < FourthSection / ></ FrameSection >
21+ </ div > ) ;
2222} ) ;
2323
24- export default FrameViewport ;
24+ export default FrameViewport ;
25+
26+ function FirstSection ( ) {
27+ return ( < div className = "flex flex-col justify-center pt-16" >
28+ { /* 로고 */ }
29+ < div className = "flex items-center font-ocra tracking-tight text-6xl self-center font-bold" >
30+ < span className = "text-cred" > G</ span >
31+ < span className = "text-cgreen" > D</ span >
32+ < span className = "text-cyellow" > G</ span >
33+ < span className = "text-cblue" > o</ span >
34+ < span className = "text-cred mr-2" > C</ span >
35+ < span className = "text-cwhite ml-1" > INHA</ span >
36+ </ div >
37+ < div className = "mt-8 flex text-8xl self-center font-bold" > 제 1회 홈커밍 데이</ div >
38+ < p className = "mt-20 pl-80" > < strong > GDGoC HomeComing : Networking with INCHEON</ strong > 은
39+ < br />
40+ 오후 1시 입장을 시작으로, < strong > 1부 프로젝트 성과 발표회</ strong > 와 < strong > 시상</ strong > ,
41+ < br />
42+ 이후 < strong > 특강 세션과 Cross-Chapter 오프닝</ strong > 을 거쳐
43+ < br />
44+ < strong > 팀별 경쟁 게임·퀴즈·네트워킹 프로그램</ strong > 으로 이어지는 구성입니다.
45+ < br />
46+ 행사는 < strong > 13:00–19:00</ strong > 까지 진행되며,
47+ < br />
48+ 마지막에는 < strong > 전체 교류를 마무리하는 네트워킹 및 뒤풀이 이동</ strong > 으로 마무리됩니다.</ p >
49+ </ div > ) ;
50+ }
51+
52+ function SecondSection ( ) {
53+ return ( < div className = "flex flex-col text-center" >
54+ < div className = "flex items-center text-6xl self-center font-bold" >
55+ 2025년 12월 20일 (토)
56+ </ div >
57+ < div className = "mt-8 flex items-center text-5xl self-center font-bold left-1/3" >
58+ 1부
59+ </ div >
60+
61+ </ div > )
62+ }
63+
64+ function ThirdSection ( ) {
65+ return ( < div className = "flex flex-col text-center" >
66+ < div className = "flex items-center text-6xl self-center font-bold" >
67+ 2025년 12월 20일 (토)
68+ </ div >
69+ < div className = "mt-8 flex items-center text-5xl self-center font-bold left-1/3" >
70+ 2부
71+ </ div >
72+
73+ </ div > )
74+ }
75+
76+ function FourthSection ( ) {
77+ return ( < div className = "flex flex-col text-center" >
78+ < div className = "flex items-center text-6xl self-center font-bold" >
79+ 신한 스퀘어 브릿지 인천
80+ </ div >
81+ < div className = "mt-8 flex items-center text-2xl self-center font-medium" >
82+ (인천광역시 연수구 컨벤시아대로 204 인스타2)
83+ </ div >
84+
85+ < HomecomingMap />
86+ </ div > )
87+
88+ }
89+
90+
91+ function HomecomingMap ( ) {
92+ const { isLoaded, loadError} = useJsApiLoader ( {
93+ googleMapsApiKey : process . env . NEXT_PUBLIC_GOOGLE_MAPS_API_KEY , id : 'homecoming-map-script' ,
94+ } ) ;
95+
96+ const center = { lat : 37.388493 , lng : 126.639989 } ;
97+
98+ if ( loadError ) {
99+ return ( < div
100+ 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]" >
101+ 지도를 불러오는 중 오류가 발생했습니다.
102+ </ div > ) ;
103+ }
104+
105+ if ( ! isLoaded ) {
106+ return ( < div
107+ 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]" >
108+ 지도를 불러오는 중입니다...
109+ </ div > ) ;
110+ }
111+
112+ return ( < div className = "mt-16 rounded-2xl w-[1000px] h-[400px] overflow-hidden self-center" >
113+ < GoogleMap
114+ mapContainerClassName = "w-full h-full"
115+ center = { center }
116+ zoom = { 17 }
117+ options = { { disableDefaultUI : true , clickableIcons : false } }
118+ >
119+ < Marker position = { center } />
120+ </ GoogleMap >
121+ </ div > ) ;
122+ }
0 commit comments