diff --git a/public/favicon-black.ico b/public/favicon-black.ico new file mode 100644 index 0000000..b5b46a1 Binary files /dev/null and b/public/favicon-black.ico differ diff --git a/public/favicon-light.ico b/public/favicon-light.ico new file mode 100644 index 0000000..c7a1803 Binary files /dev/null and b/public/favicon-light.ico differ diff --git a/public/images/member_banner_up.png b/public/images/member_banner_up.png new file mode 100644 index 0000000..558435a Binary files /dev/null and b/public/images/member_banner_up.png differ diff --git a/public/images/member_header.png b/public/images/member_header.png new file mode 100644 index 0000000..6fa1e5a Binary files /dev/null and b/public/images/member_header.png differ diff --git a/public/images/members/lead.png b/public/images/members/lead.png index 510c879..f0f44bd 100644 Binary files a/public/images/members/lead.png and b/public/images/members/lead.png differ diff --git a/src/app/favicon.ico b/src/app/favicon.ico deleted file mode 100644 index 718d6fe..0000000 Binary files a/src/app/favicon.ico and /dev/null differ diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 896ebef..4c16f60 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -11,7 +11,11 @@ export const metadata = { template: '%s | GDSC DGU', default: 'GDSC DGU', }, + description: 'Google Developer Student Clubs 동국대학교', + icons: { + icon: '/favicon-black.ico', + }, }; export default function RootLayout({ diff --git a/src/app/member/page.tsx b/src/app/member/page.tsx index fbfc452..338060d 100644 --- a/src/app/member/page.tsx +++ b/src/app/member/page.tsx @@ -9,7 +9,7 @@ export const metadata = { const MemberPage = () => { return ( -
+
{/* -----------------------------------------------*/} {/* -------------------- 배너 --------------------*/} {/* -----------------------------------------------*/} diff --git a/src/components/member/animated/animatedBanner.tsx b/src/components/member/animated/animatedBanner.tsx new file mode 100644 index 0000000..d5ce109 --- /dev/null +++ b/src/components/member/animated/animatedBanner.tsx @@ -0,0 +1,26 @@ +import { ReactNode } from 'react'; +import { motion } from 'framer-motion'; + +interface AnimatedContainerProps { + children: ReactNode; + initialY?: number; // 초기 Y 위치는 선택적으로 설정할 수 있음 +} + +const AnimatedBanner: React.FC = ({ + children, + initialY = 0, // 기본값으로 0을 사용하여 Y 변화 없음을 기본 설정 +}) => { + return ( + + {children} + + ); +}; + +export default AnimatedBanner; diff --git a/src/components/member/generation/GenerationPage.tsx b/src/components/member/generation/GenerationPage.tsx index c0cde02..b3f3a3d 100644 --- a/src/components/member/generation/GenerationPage.tsx +++ b/src/components/member/generation/GenerationPage.tsx @@ -1,48 +1,63 @@ 'use client'; +import { useState } from 'react'; +import { motion } from 'framer-motion'; +import TimeLine from '@/components/member/timeline/TimeLine'; import LeadIntro from '@/components/member/introduce/LeadIntro'; import MemberIntro from '@/components/member/introduce/MemberIntro'; -import TimeLine from '@/components/member/timeline/TimeLine'; -import { useState } from 'react'; import RecruitHeader from '@/components/recruit/header/RecruitHeader'; const GenerationPage = () => { const [selectedTimelineIndex, setSelectedTimelineIndex] = useState(1); + // 애니메이션 variants + const itemVariants = { + hidden: { y: 20, opacity: 0 }, + visible: { + y: 0, + opacity: 1, + transition: { duration: 0.5 }, + }, + }; + return ( -
- {/* -----------------------------------------------*/} - {/* -------------------- 타임라인 --------------------*/} - {/* -----------------------------------------------*/} - +
+ + + {selectedTimelineIndex === 2 ? ( -
- {/* -----------------------------------------------*/} - {/* -------------------- 모집 페이지 --------------------*/} - {/* -----------------------------------------------*/} + -
+ ) : (
- {/* -----------------------------------------------*/} - {/* -------------------- 리드 소개 --------------------*/} - {/* -----------------------------------------------*/} - - {/* -----------------------------------------------*/} - {/* -------------------- DevRel --------------------*/} - {/* -----------------------------------------------*/} + + + + - {/* -----------------------------------------------*/} - {/* -------------------- Web/App --------------------*/} - {/* -----------------------------------------------*/} + - {/* -----------------------------------------------*/} - {/* -------------------- Server/Cloud --------------------*/} - {/* -----------------------------------------------*/} + - {/* -----------------------------------------------*/} - {/* -------------------- Al/ML --------------------*/} - {/* -----------------------------------------------*/} +
)} diff --git a/src/components/member/header/MemberHeader.tsx b/src/components/member/header/MemberHeader.tsx index c371948..b87f784 100644 --- a/src/components/member/header/MemberHeader.tsx +++ b/src/components/member/header/MemberHeader.tsx @@ -1,6 +1,8 @@ -import BannerSvg from 'public/svg/member_header.svg'; -import BannerPng from 'public/images/member_banner.png'; +'use client'; +import BannerHead from 'public/images/member_header.png'; +import BannerPng from 'public/images/member_banner_up.png'; import Image from 'next/image'; +import { motion } from 'framer-motion'; /** * @description @@ -16,30 +18,41 @@ import Image from 'next/image'; const MemberHeader = () => { return (
-
- -
-
-
+
+ GDSC 사이트 멤버 페이지 배너 텍스트 이미지 +
+ + +
BannerPng
-
+
); }; diff --git a/src/components/member/introduce/LeadIntro.tsx b/src/components/member/introduce/LeadIntro.tsx index 14f979d..ac827e3 100644 --- a/src/components/member/introduce/LeadIntro.tsx +++ b/src/components/member/introduce/LeadIntro.tsx @@ -1,43 +1,47 @@ import Image from 'next/image'; +import { LEAD } from '@/constants/member/lead'; +import React from 'react'; const LeadIntro = () => { - return ( -
- -
-
+ return (
- lead -
+
+
+
+
+ DGU GDSC Lead 사진 +
+
-
-
Lead
-
-
서희찬
-
컴퓨터공학과
-
-
-
-
- 안녕하세요! GDSC DGU Lead 서희찬입니다. -
- GDSC DGU는 많은 학우분들과 함께 성장하고 싶습니다. - 많은 관심 부탁드립니다! 감사합니다. +
+
Lead
+
+
{LEAD.name}
+
{LEAD.department}
+
+
+
+ {LEAD.description.split('\n').map((line, index) => ( + + {line} +
+ + ))} +
+
-
-
- -
- ); + ); }; -export default LeadIntro; \ No newline at end of file +export default LeadIntro; diff --git a/src/components/member/introduce/MemberIntro.tsx b/src/components/member/introduce/MemberIntro.tsx index 2451df4..a21c626 100644 --- a/src/components/member/introduce/MemberIntro.tsx +++ b/src/components/member/introduce/MemberIntro.tsx @@ -1,8 +1,10 @@ +'user client'; import ProfileBox from '@/components/member/profilebox/ProfileBox'; import { DEVREL_MEMBERS } from '@/constants/member/devRel'; import { WEBAPP_MEMBERS } from '@/constants/member/webApp'; import { AIML_MEMBERS } from '@/constants/member/AIML'; import { SERVER_MEMBERS } from '@/constants/member/serverCloud'; +import { motion } from 'framer-motion'; /** * @description @@ -13,6 +15,7 @@ import { SERVER_MEMBERS } from '@/constants/member/serverCloud'; * @returns {JSX.Element} 각 팀 멤버의 프로필을 나타내는 ProfileBox 컴포넌트가 포함된 시각적 인터페이스 * @since 2024.04.18 */ + const MemberIntro = ({ title }: { title: string }) => { interface Member { id: number; @@ -30,24 +33,46 @@ const MemberIntro = ({ title }: { title: string }) => { else if (title === 'AI/ML') memberType = AIML_MEMBERS; else if (title === 'DevRel') memberType = DEVREL_MEMBERS; + // 애니메이션 variants + const itemVariants = { + hidden: { y: 20, opacity: 0 }, + visible: { + y: 0, + opacity: 1, + transition: { duration: 0.5 }, + }, + }; + return (
-
-
-
{title}
-
+
+
+
{title}
+
-
-
+
+
{memberType && memberType.map((member, index) => ( -
-
+ ))}
@@ -55,4 +80,5 @@ const MemberIntro = ({ title }: { title: string }) => {
); }; + export default MemberIntro; diff --git a/src/components/member/profilebox/ProfileBox.tsx b/src/components/member/profilebox/ProfileBox.tsx index ccab8c7..84fa46e 100644 --- a/src/components/member/profilebox/ProfileBox.tsx +++ b/src/components/member/profilebox/ProfileBox.tsx @@ -1,27 +1,36 @@ import Image from 'next/image'; const ProfileBox = ({ member }: { member: any }) => { + const formatDescription = (description: string) => { + if (description.length > 81) { + return description.substring(0, 78) + '...'; // 첫 78자에 말줄임표 추가 + } + return description.padEnd(81, ' '); // 81자 미만이면 공백으로 채움 + }; + return ( -
-
-
+
+
+
{member.name}
-
{member.name}
-
{member.role}
+
{member.name}
+
{member.role}
-
{member.department}
+
{member.department}
-
{member.description}
+
+ {formatDescription(member.description)} +
); diff --git a/src/components/member/timeline/TimeLine.tsx b/src/components/member/timeline/TimeLine.tsx index b0056e9..ab043c3 100644 --- a/src/components/member/timeline/TimeLine.tsx +++ b/src/components/member/timeline/TimeLine.tsx @@ -29,6 +29,7 @@ const TimeLine = ({ const scrollContainer = useRef(null); + //컬러 시스템 적용 불가 const getCircleColor = (index: any) => { if (index === selected) return '#FB8C00'; if (index < selected) return '#FFCC80'; @@ -42,8 +43,8 @@ const TimeLine = ({ return (
-
-
+
+
{TIME_LINE.map((item, index) => (
diff --git a/src/constants/member/devRel.ts b/src/constants/member/devRel.ts index 89ed245..1302256 100644 --- a/src/constants/member/devRel.ts +++ b/src/constants/member/devRel.ts @@ -5,7 +5,7 @@ export const DEVREL_MEMBERS = [ role: 'Core', department: '학과', description: - 'GDSC DGU는 많은 학우분들과 함께 성장하고 싶습니다.많은 관심 부탁드립니다! 감사합니다.', + '안녕하세요! GDSC DGU 23-24 Lead 뇽뇽뇽입니다. 다양한 분야에 넓게 발을 걸치고, 그중 하나에 깊게 파고드는 사람이 되고 싶습니다.', image: '/images/members/lead.png', }, { @@ -14,7 +14,7 @@ export const DEVREL_MEMBERS = [ role: 'Core', department: '학과', description: - 'GDSC DGU는 많은 학우분들과 함께 성장하고 싶습니다.많은 관심 부탁드립니다! 감사합니다.', + '안녕하세요! GDSC DGU 23-24 Lead 뇽뇽뇽입니다. 다양한 분야에 넓게 발을 걸치고, 그중 하나에 깊게 파고드는 사람이 되고 싶습니다.', image: '/images/members/lead.png', }, { @@ -23,7 +23,7 @@ export const DEVREL_MEMBERS = [ role: 'Core', department: '학과', description: - 'GDSC DGU는 많은 학우분들과 함께 성장하고 싶습니다.많은 관심 부탁드립니다! 감사합니다.', + '안녕하세요! GDSC DGU 23-24 Lead 뇽냐링입니다. 다양한 분야에 넓게 발을 걸치고, 그중 하나에 깊게 파고드는 사람이 되고 싶습니다.', image: '/images/members/lead.png', }, ]; diff --git a/src/constants/member/lead.ts b/src/constants/member/lead.ts new file mode 100644 index 0000000..23b5187 --- /dev/null +++ b/src/constants/member/lead.ts @@ -0,0 +1,8 @@ +export const LEAD = { + id: 1, + name: '서희찬', + department: '컴퓨터공학과', + description: + '안녕하세요! GDSC DGU Lead 서희찬입니다. \n GDSC DGU는 많은 학우분들과 함께 성장하고 싶습니다. 많은 관심 부탁드립니다! 감사합니다.', + image: '/images/members/lead.png', +}; diff --git a/tailwind.config.ts b/tailwind.config.ts index 7a5c3d0..cace25d 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,7 +1,6 @@ import type { Config } from 'tailwindcss'; const config: Config = { - content: [ './src/pages/**/*.{js,ts,jsx,tsx,mdx}', './src/components/**/*.{js,ts,jsx,tsx,mdx}', @@ -12,6 +11,13 @@ const config: Config = { screens: { desktop: '769px', tablet: '521px', + bigTablet: '960px', + mainDesktop: '1200px', + xxl: { min: '1920px' }, + xl: { min: '1200px', max: '1919px' }, + lg: { min: '960px', max: '1199px' }, + md: { min: '768px', max: '959px' }, + sm: { max: '767px' }, }, colors: { mono_50: '#F7F8FA', @@ -35,12 +41,14 @@ const config: Config = { animation: { fadeIn: 'fadeIn 1s forwards', }, - spacing: { - '4.75': '19px' // 19px를 나타내는 키를 추가합니다. - }, - width: { - '70rem': '70rem', // '70rem'이라는 key로 70rem 너비를 설정 - }, + spacing: { + '4.75': '19px', // 19px를 나타내는 키를 추가합니다. + }, + width: { + '70rem': '70rem', + '5/8': '62.5%', + '100/125': '80%', + }, }, }, plugins: [],