Skip to content

Commit 3eb572a

Browse files
RuthgyeulRuthgyeul
authored
Merge pull request #88 from GDGoCINHA/develop
Push to Production
2 parents 04f5ea0 + 1866794 commit 3eb572a

File tree

17 files changed

+1092
-343
lines changed

17 files changed

+1092
-343
lines changed

‎package-lock.json‎

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,20 @@
1010
"export": "next export"
1111
},
1212
"dependencies": {
13+
"@heroicons/react": "^2.2.0",
1314
"@heroui/scroll-shadow": "^2.3.6",
1415
"@heroui/system": "^2.4.7",
1516
"@heroui/theme": "^2.4.6",
1617
"@nextui-org/react": "^2.6.11",
17-
"axios": "^1.7.9",
1818
"@splidejs/react-splide": "^0.7.12",
1919
"@splidejs/splide": "^4.1.4",
2020
"@splidejs/splide-extension-auto-scroll": "^0.5.3",
2121
"@studio-freight/lenis": "^1.0.42",
22+
"axios": "^1.7.9",
2223
"framer-motion": "^11.16.1",
2324
"gsap": "^3.12.7",
2425
"hangul-js": "^0.2.6",
26+
"lucide-react": "^0.507.0",
2527
"next": "15.0.2",
2628
"react": "^18.2.0",
2729
"react-dom": "^18.2.0",

‎public/src/images/songdo_conf.jpg‎

120 KB
Loading

‎src/app/main/Header.jsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
import gdgocIcon from '@public/src/images/GDGoC_icon.png';
3+
import Image from 'next/image';
4+
import { Navbar, NavbarBrand, NavbarContent, NavbarItem, Link } from "@nextui-org/react";
5+
import { Heart, User } from "lucide-react";
6+
import { useAuthenticatedApi } from '@/hooks/useAuthenticatedApi.js';
7+
8+
export default function Header() {
9+
10+
const { apiclient, handLeLogout }= useAuthenticatedApi();
11+
return (
12+
<Navbar className=" pl-[32px] min-h-[105px]" maxWidth="full">
13+
<NavbarBrand className="flex flex-row gap-x-[16px] cursor-pointer flex-grow-0 basis-auto">
14+
<Image className='w-[62px] h-[28px]' src={gdgocIcon} alt='gdgocIcon' />
15+
<div className='text-white text-[16px] pt-[3px]'>
16+
<strong>GDGoC</strong> Inha univ.
17+
</div>
18+
</NavbarBrand>
19+
20+
<NavbarContent className="hidden sm:flex gap-16 ml-[70px]" justify="start">
21+
<NavbarItem>
22+
<Link color="foreground" className="text-white" href="#">
23+
공지사항
24+
</Link>
25+
</NavbarItem>
26+
<NavbarItem>
27+
<Link color="foreground" className="text-white" href="#">
28+
스터디
29+
</Link>
30+
</NavbarItem>
31+
<NavbarItem>
32+
<Link color="foreground" className="text-white" href="#">
33+
프로젝트
34+
</Link>
35+
</NavbarItem>
36+
<NavbarItem>
37+
<Link color="foreground" className="text-white" href="#">
38+
멤버
39+
</Link>
40+
</NavbarItem>
41+
</NavbarContent>
42+
43+
<NavbarContent justify="end" className='mr-5 gap-x-11'>
44+
<NavbarItem>
45+
<Heart className="w-9 h-9 text-white cursor-pointer" />
46+
</NavbarItem>
47+
<NavbarItem>
48+
<User className="w-9 h-9 text-white cursor-pointer" onClick={handLeLogout} />
49+
</NavbarItem>
50+
</NavbarContent>
51+
</Navbar>
52+
);
53+
}

‎src/app/main/components/CardCarousel.jsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { useEffect, useRef } from 'react';
2+
import { Splide } from '@splidejs/splide';
3+
import '@splidejs/splide/css';
4+
5+
export default function CardCarousel({ id, title, children }) {
6+
const splideRef = useRef(null);
7+
8+
useEffect(() => {
9+
if (splideRef.current) {
10+
const cardSplide = new Splide(splideRef.current, {
11+
type: 'slide',
12+
perPage: 3,
13+
gap: '3rem',
14+
arrows: true,
15+
pagination: false,
16+
drag: true,
17+
snap: true,
18+
});
19+
20+
cardSplide.mount();
21+
22+
return () => {
23+
cardSplide.destroy();
24+
};
25+
}
26+
}, []);
27+
28+
return (
29+
<>
30+
<p className='text-white text-3xl font-bold mt-16 mb-10'>{title}</p>
31+
<div id={id} className="splide" ref={splideRef}>
32+
<div className="splide__track">
33+
<div className="splide__list">
34+
{children}
35+
</div>
36+
</div>
37+
</div>
38+
</>
39+
);
40+
}

‎src/app/main/components/EventCard.jsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import Image from 'next/image';
2+
import {Button} from "@nextui-org/react";
3+
4+
export default function EventCard({ logo, title, statusLabel, statusColor, eventType, eventTypeColor, description, details, isHidden }) {
5+
return (
6+
<div id="card" className='flex flex-col rounded-3xl bg-[#303030] w-[400px] h-[550px] px-6 pt-14 relative'>
7+
<div className='flex flex-row gap-x-2 mb-5'>
8+
<Image src={logo} hidden={isHidden} width={38} height={38} alt='logoimg' />
9+
<p className='text-white text-3xl font-bold'>{title}</p>
10+
</div>
11+
<div className='flex flex-row gap-x-5 mb-5'>
12+
<div className={`flex rounded-3xl w-[115px] h-[35px] bg-[${statusColor}] text-black font-bold text-xl text-center justify-center items-center`}>
13+
{statusLabel}
14+
</div>
15+
<div className={`flex rounded-3xl w-[115px] h-[35px] bg-[${eventTypeColor}] text-black font-bold text-xl text-center justify-center items-center`}>
16+
{eventType}
17+
</div>
18+
</div>
19+
<p className='text-white text-xl font-bold mb-6'>{description}</p>
20+
<div className='flex flex-col w-full px-4 py-7 bg-[#151515] rounded-3xl text-white text-base'>
21+
<div className='flex flex-row gap-x-5 mb-2'>
22+
<p className='flex-none'><strong>목적</strong></p>
23+
<p>{details.purpose}</p>
24+
</div>
25+
<div className='flex flex-row gap-x-5 mb-2'>
26+
<p className='flex-none'><strong>일정</strong></p>
27+
<p>{details.schedule}</p>
28+
</div>
29+
<div className='flex flex-row gap-x-5 mb-2'>
30+
<p className='flex-none'><strong>대상</strong></p>
31+
<p dangerouslySetInnerHTML={{ __html: details.target.replace(/\n/g, '<br/>') }} />
32+
</div>
33+
</div>
34+
<div className='flex w-full mt-5 mb-1 justify-end absolute bottom-3 right-6'>
35+
<Button className='bg-transparent border-1 w-28 h-6 rounded-3xl text-white font-bold text-base text-center justify-center items-center'>자세히 보기</Button>
36+
</div>
37+
</div>
38+
);
39+
}

‎src/app/main/components/FAQ.jsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react';
2+
import { Accordion, AccordionItem } from "@nextui-org/react";
3+
4+
export default function FAQ() {
5+
const faqItems = [
6+
{
7+
key: "1",
8+
color: "#EA4335",
9+
question: "GDGoC는 어떤 동아리인가요?",
10+
answer: `2010년대부터 Google은 자사의 개발 언어와 기술들을 좋아하는 개발자, 비개발자들을 연결하여 커뮤니티를 만들고 커뮤니티 구성원들을 기반으로 더 많은 사람들이 연결되어 구글의 기술 생태계에 참여할 수 있길 바라왔습니다. 그렇게 한국을 포함한 전 세계 구글 본사에 구글 개발자 생태계 팀이 창설되었습니다. \n\n이후 Amazon, Microsoft, Apple 등의 빅테크 기업들도 줄지어 커뮤니티 생태계 구축에 힘쓰기 시작했습니다. 선두주자였던 Google 커뮤니티들은 현재까지도 전 세계에서 가장 큰 커뮤니티를 형성하고 활발하게 사람들을 연결하고 있습니다.`
11+
},
12+
{
13+
key: "2",
14+
color: "#34A853",
15+
question: "프로그래밍 기초 지식이 전혀 없는 상태에서도 회원 가입이 가능한가요?",
16+
answer: `2010년대부터 Google은 자사의 개발 언어와 기술들을 좋아하는 개발자, 비개발자들을 연결하여 커뮤니티를 만들고 커뮤니티 구성원들을 기반으로 더 많은 사람들이 연결되어 구글의 기술 생태계에 참여할 수 있길 바라왔습니다. 그렇게 한국을 포함한 전 세계 구글 본사에 구글 개발자 생태계 팀이 창설되었습니다. \n\n이후 Amazon, Microsoft, Apple 등의 빅테크 기업들도 줄지어 커뮤니티 생태계 구축에 힘쓰기 시작했습니다. 선두주자였던 Google 커뮤니티들은 현재까지도 전 세계에서 가장 큰 커뮤니티를 형성하고 활발하게 사람들을 연결하고 있습니다.`
17+
},
18+
{
19+
key: "3",
20+
color: "#4285F4",
21+
question: "면접이나 지원 조건이 있을까요?",
22+
answer: `2010년대부터 Google은 자사의 개발 언어와 기술들을 좋아하는 개발자, 비개발자들을 연결하여 커뮤니티를 만들고 커뮤니티 구성원들을 기반으로 더 많은 사람들이 연결되어 구글의 기술 생태계에 참여할 수 있길 바라왔습니다. 그렇게 한국을 포함한 전 세계 구글 본사에 구글 개발자 생태계 팀이 창설되었습니다. \n\n이후 Amazon, Microsoft, Apple 등의 빅테크 기업들도 줄지어 커뮤니티 생태계 구축에 힘쓰기 시작했습니다. 선두주자였던 Google 커뮤니티들은 현재까지도 전 세계에서 가장 큰 커뮤니티를 형성하고 활발하게 사람들을 연결하고 있습니다.`
23+
},
24+
{
25+
key: "4",
26+
color: "#F9AB00",
27+
question: "뭔가 질문 하나 더.. ex.성비질문... ",
28+
answer: `2010년대부터 Google은 자사의 개발 언어와 기술들을 좋아하는 개발자, 비개발자들을 연결하여 커뮤니티를 만들고 커뮤니티 구성원들을 기반으로 더 많은 사람들이 연결되어 구글의 기술 생태계에 참여할 수 있길 바라왔습니다. 그렇게 한국을 포함한 전 세계 구글 본사에 구글 개발자 생태계 팀이 창설되었습니다. \n\n이후 Amazon, Microsoft, Apple 등의 빅테크 기업들도 줄지어 커뮤니티 생태계 구축에 힘쓰기 시작했습니다. 선두주자였던 Google 커뮤니티들은 현재까지도 전 세계에서 가장 큰 커뮤니티를 형성하고 활발하게 사람들을 연결하고 있습니다.`
29+
}
30+
];
31+
32+
return (
33+
<>
34+
<p className='text-white text-3xl font-bold mt-32 mb-10'>자주 묻는 질문</p>
35+
<Accordion className="w-full rounded-3xl">
36+
{faqItems.map((item) => (
37+
<AccordionItem
38+
key={item.key}
39+
classNames={{
40+
trigger: 'bg-[#303030] text-white rounded-3xl px-5 py-3 text-xl font-bold'
41+
}}
42+
className='mb-5'
43+
aria-label={`FAQ ${item.key}`}
44+
startContent={<p className={`text-[${item.color}]`}>Q</p>}
45+
title={item.question}
46+
>
47+
<p className='text-white text-base mx-12 mt-5 mb-5'>{item.answer.split('\n\n').map((paragraph, i) => (
48+
<React.Fragment key={i}>
49+
{paragraph}
50+
{i < item.answer.split('\n\n').length - 1 && (
51+
<>
52+
<br /><br />
53+
</>
54+
)}
55+
</React.Fragment>
56+
))}</p>
57+
</AccordionItem>
58+
))}
59+
</Accordion>
60+
</>
61+
);
62+
}

‎src/app/main/components/MainCarousel.jsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { useEffect, useRef } from 'react';
2+
import { Splide } from '@splidejs/splide';
3+
import '@splidejs/splide/css';
4+
import Image from 'next/image';
5+
import Link from 'next/link';
6+
7+
export default function MainCarousel({ slides }) {
8+
const splideRef = useRef(null);
9+
10+
useEffect(() => {
11+
if (splideRef.current) {
12+
const mainSplide = new Splide(splideRef.current, {
13+
type: 'loop',
14+
perPage: 1,
15+
autoplay: true,
16+
interval: 5000, // 5초
17+
pauseOnHover: false,
18+
arrows: false,
19+
pagination: true,
20+
});
21+
22+
mainSplide.mount();
23+
24+
return () => {
25+
mainSplide.destroy();
26+
};
27+
}
28+
}, []);
29+
30+
return (
31+
<div id="main-carousel" className="splide" ref={splideRef}>
32+
<div className="splide__track">
33+
<div className="splide__list">
34+
{slides.map((slide, index) => (
35+
<div className="splide__slide" key={index}>
36+
<div className="h-[616px] flex items-center justify-center rounded-lg relative overflow-hidden">
37+
<div className="absolute inset-0 bg-black/50">
38+
<Image className='w-full h-full object-cover blur-lg opacity-50' src={slide.background} alt='event background' />
39+
</div>
40+
<div className="z-10 flex flex-row w-full h-full">
41+
<div className='flex justify-center items-center w-1/2'>
42+
<Image src={slide.poster} width={375} height={500} alt='event poster' />
43+
</div>
44+
<div className='flex justify-center items-start w-1/2 flex-col'>
45+
<div className="justify-start items-start flex flex-col gap-y-5">
46+
<div className='flex flex-row gap-x-5'>
47+
<div className='border-3 border-[#E94335] rounded-3xl px-9 py-1 text-[#E94335] font-bold text-xl'>
48+
{slide.tag1}
49+
</div>
50+
<div className='border-3 border-[#34A853] rounded-3xl px-9 py-1 text-[#34A853] font-bold text-xl'>
51+
{slide.tag2}
52+
</div>
53+
</div>
54+
<p className='text-white text-xl font-bold'>{slide.title}</p>
55+
<p className='text-white text-base'>{slide.description}</p>
56+
<Link href={slide.link} className='text-white text-base underline'>더 알아보기</Link>
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
</div>
62+
))}
63+
</div>
64+
</div>
65+
</div>
66+
);
67+
}

0 commit comments

Comments
 (0)