+ Deving에서 함께해요! +
-
+
);
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 105ebdb7..82c500e2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,264 +1,497 @@
+'use client';
+
+import Section1Image from '@/assets/images/section1.png';
+import Section2Image from '@/assets/images/section2.png';
+import { Button } from '@/components/ui/Button';
+import { motion } from 'framer-motion';
+import dynamic from 'next/dynamic';
import Image from 'next/image';
-import Link from 'next/link';
+import { useCallback, useEffect, useMemo, useState } from 'react';
-export default function Home() {
- const categories = [
- {
- title: '취미',
- description: '개발 관련 취미 활동을 함께할 동료를 찾아보세요.',
- icon: '🎨',
- color: 'bg-blue',
- },
- {
- title: '스터디',
- description: '함께 성장할 수 있는 개발 스터디를 시작하세요.',
- icon: '📚',
- color: 'bg-green',
- },
- {
- title: '모각코',
- description: '모여서 각자 코딩하며 집중력을 높여보세요.',
- icon: '💻',
- color: 'bg-red',
+import DevingLogo from '../assets/icon/devingLogo.svg';
+import GithubIcon from '../assets/icon/github_icon.svg';
+import LandingLogo from '../assets/icon/landing_logo.svg';
+import MediumCheckIcon from '../assets/icon/medium_check_icon.svg';
+import NotionIcon from '../assets/icon/notion_icon.svg';
+import SmallCheckIcon from '../assets/icon/small_check_Icon.svg';
+
+// 타입 정의 - 라이브러리에서 필요한 속성 정확하게 지정
+interface FullPageProps {
+ credits: {
+ enabled: boolean;
+ position?: 'left' | 'right';
+ label?: string;
+ };
+ scrollingSpeed: number;
+ navigation: boolean;
+ navigationPosition: string;
+ responsiveWidth?: number;
+ scrollOverflow: boolean;
+ licenseKey: string;
+ afterLoad: (destination: { index: number }) => void;
+ touchSensitivity: number;
+ bigSectionsDestination: 'top' | 'bottom' | null;
+ render: (props: { fullpageApi?: unknown }) => JSX.Element;
+}
+
+// 클라이언트 사이드에서만 ReactFullpage 로드
+const FullPage = dynamic(
+ () => import('@fullpage/react-fullpage').then((mod) => mod.default),
+ { ssr: false },
+);
+
+const FullPageWrapper = dynamic(
+ () => import('@fullpage/react-fullpage').then((mod) => mod.default.Wrapper),
+ { ssr: false },
+);
+
+// 애니메이션 설정을 객체로 분리하여 관리
+const animations = {
+ fadeInUp: {
+ hidden: { opacity: 0, y: 60 },
+ visible: {
+ opacity: 1,
+ y: 0,
+ transition: { duration: 0.6, ease: 'easeOut' },
},
- {
- title: '사이드 프로젝트',
- description: '실무 경험을 쌓을 수 있는 사이드 프로젝트를 찾아보세요.',
- icon: '🚀',
- color: 'bg-solid',
+ },
+ staggerContainer: {
+ hidden: { opacity: 0 },
+ visible: {
+ opacity: 1,
+ transition: {
+ staggerChildren: 0.3,
+ },
},
- ];
-
- const featuredGroups = [
- {
- title: 'Next.js 스터디 그룹',
- category: '스터디',
- members: 8,
- maxMembers: 10,
- location: '온라인',
- // imageUrl: '/api/placeholder/300/160',
+ },
+ popIn: {
+ hidden: { scale: 0.8, opacity: 0 },
+ visible: {
+ scale: 1,
+ opacity: 1,
+ transition: {
+ type: 'spring',
+ stiffness: 200,
+ damping: 10,
+ },
},
- {
- title: '주말 모각코 모임',
- category: '모각코',
- members: 12,
- maxMembers: 20,
- location: '서울 강남',
- // imageUrl: '/api/placeholder/300/160',
+ },
+ imageAnimation: {
+ hidden: { opacity: 0, scale: 0.9 },
+ visible: {
+ opacity: 1,
+ scale: 1,
+ transition: { duration: 0.7, ease: 'easeOut' },
},
- {
- title: 'AI 챗봇 프로젝트',
- category: '사이드 프로젝트',
- members: 4,
- maxMembers: 6,
- location: '온라인/오프라인',
- // imageUrl: '/api/placeholder/300/160',
+ },
+};
+
+// 언마운트 오류를 방지하기 위한 래퍼 컴포넌트
+const SafeFullPage: React.FC
-
-
+
+
-
-
-
-
-
+
+
+
+
+
+ 로딩 중...
+ Loading...
+
+ );
+ }
return (
-
- {/* 헤더바는 이미 준비되어 있음 */}
-
- {/* Hero Section */}
-
-
-
-
-
- {/* Featured Groups */}
-
-
-
-
-
-
- {/* Categories Section */}
- - 개발자를 위한 커뮤니티 -
-- 함께 성장하고 배울 개발자 친구들을 만나보세요. 취미 활동부터 - 사이드 프로젝트까지, 다양한 모임에 참여할 수 있습니다. -
-
-
-
+ {
+ return (
+
+
-
+ {/* 메인 히어로 섹션 */}
+
+
+
+ 개발자와 디자이너의 공간,
+
+ Deving에서 함께해요! +
+
+
+
+
+
- + Deving에서 함께해요! +
-
- 카테고리
-
- {categories.map((category, index) => (
-
-
-
- ))}
-
+ {/* 섹션 1: 성장하는 모임 */}
+
+
- {category.icon}
-
- {category.title}
-- {category.description} -
-
-
-
- 인기 모임
- - 더 보기 → - -
- {featuredGroups.map((group, index) => (
-
-
-
- {/* Bottom Banner */}
-
-
-
-
-
- {/* CTA Section */}
-
-
-
- {group.category}
-
-
-
- {group.title}
-- {group.location} -
-
-
- ))}
-
- 멤버 {group.members}/{group.maxMembers}
+
-
+ 
+
-
+
+
-
+ 모임 시작
+
+
+
+ D-
+
+
+ 7
+
+
+ 일
+
+
-
- 나만의 개발자 모임을 시작해보세요
-- 취미, 스터디, 모각코, 사이드 프로젝트 등 다양한 주제로 모임을 만들고 - 함께할 개발자들을 찾아보세요. -
- -
-
-
-
- {/* Footer */}
-
-
-
-
- {/* ✅ 이슈 제보 섹션 추가 ✅ */}
-
-
+
+
- DEVING과 함께 성장하세요
-- 개발자 커뮤니티에서 함께 성장할 동료를 찾아보세요. -
+ +
+
+ 코드만큼 성장하는 모임,
+
+ 지금 시작하세요! +
+
+ 스터디/모각코/사이드프로젝트/취미까지
+
+ 다양한 모임을 원하는 기술스택으로 필터링 해보세요! +
+
+ + 지금 시작하세요! +
+ 다양한 모임을 원하는 기술스택으로 필터링 해보세요! +
-
- 로그인
-
-
- 회원가입
-
+
+
-
+ {/* 섹션 2: 기능 소개 */}
+
+
+
+
+
+
-
+
+ 모임 스타일에 맞게
+
+ 모임을 개설할 수 있어요! +
+
+ 신청자 정보를 확인하고 승인할 수 있어요.
+
+ 모임 안에서 서로의 정보를 파악하고 교류를 시작하세요! +
+
+ + 모임을 개설할 수 있어요! +
+ 모임 안에서 서로의 정보를 파악하고 교류를 시작하세요! +
+ 
+
+
+
+
+
+ 모임 공개 여부
+
+
+ 비공개
+
+
+
+
+ {isMobile ? (
+
+ ) : (
+
+ )}
+
+
+
+ 모임 생성이 완료 되었습니다!
+
+
-
- - 사이트에서 문제가 발생했나요? -
-- 오류를 발견하셨다면 아래 버튼을 눌러 이슈를 제보해주세요. -
- - 🛠 이슈 제보하기 - -