뷰포인트 기반 lazy loading 로직 수정, GA 커스텀 이벤트 등록 및 채용공고 업데이트 (#171)

* feat: 뷰포인트 기반 레이지로딩 구현

* Design: 세부 CSS 수정

* fix: 뷰포인트별 레이지로딩 구현

* Design: 날짜 원 수정

* Fix: 지원일자 조정 및 데이터 값 수정

* Design: CSS 수정

* Docs: 일정 등록

* Design: Apply Page CSS 수정

* Feat: GA Event 등록

* Fix: 페이지별 권한 설정 및 알람 설정

* feat: 커스텀 이벤트 추가

* Chore: 코드 주석처리

* Fix: 모듈화 수정

* Fix: build 수정 및 메타데이터 수정

src/components/common/View/LazyLoad.tsx

@@ -1,34 +1,31 @@
-import { Suspense, ComponentType, useEffect, useRef, useState } from 'react';
+import { Suspense, useEffect, useRef, useState } from 'react';
 
 import { LoadingView } from './LoadingView';
 
 type LazyLoadProps = {
-  component: React.LazyExoticComponent<ComponentType<any>>;
-  props?: Record<string, any>;
+  children: React.ReactNode;
 };
 
-const LazyLoad = ({ component: LazyComponent, props }: LazyLoadProps) => {
+const LazyLoad = ({ children }: LazyLoadProps) => {
   const [isVisible, setIsVisible] = useState(false);
   const observerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    // Observer가 이미 설정된 경우 추가 로직을 막습니다.
     if (isVisible) return;
 
     const observer = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
             setIsVisible(true);
-            // console.log('isVisible');
-            observer.disconnect(); // 한 번만 로드하도록 observer 해제
+            observer.disconnect();
           }
         });
       },
       {
         root: null,
         rootMargin: '0px',
-        threshold: 0.3, // 뷰포트 30% 이상 노출 시 로드
+        threshold: 0.3,
       }
     );
 
@@ -44,9 +41,7 @@ const LazyLoad = ({ component: LazyComponent, props }: LazyLoadProps) => {
   return (
     <div ref={observerRef}>
       {isVisible ? (
-        <Suspense fallback={<LoadingView />}>
-          <LazyComponent {...props} />
-        </Suspense>
+        <Suspense fallback={<LoadingView />}>{children}</Suspense>
       ) : (
         <LoadingView />
       )}

src/components/common/title/PageTitle.tsx

@@ -9,13 +9,11 @@ import Title from '../typography/Title';
 const MainTitlelayout = styled.div`
   width: 100%;
   max-width: 1024px;
+  margin-top: 50px;
 
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-
-  margin-top: 50px;
-  margin-left: 60px;
 `;
 
 const MobileMainTitlelayout = styled.div`

src/hooks/useScrollTracker.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import { handleScroll } from '@gdg/utils/anlytics';
+import { handleIntroduceScroll } from '@gdg/utils/anlytics';
 
 // 유틸리티 함수 경로
 
@@ -13,7 +13,7 @@ const useScrollTracker = () => {
       const scrolledPercentage = (scrollPosition / scrollHeight) * 100;
 
       if (scrolledPercentage >= 50) {
-        handleScroll();
+        handleIntroduceScroll();
       }
     };
 

src/pages/apply/ApplyPage.tsx

@@ -11,11 +11,10 @@ import { ApplyMetaData } from '@gdg/router/components/MetaData';
 import { DisplayLayout } from '@gdg/styles/LayoutStyle';
 
 const ApplyLayout = styled(DisplayLayout)`
-  height: 100%;
-  margin-top: 50px;
+  height: calc(100vh - 100px);
   display: flex;
-  flex-direction: row;
-  justify-content: center;
+  flex-direction: column;
+  /* justify-content: center; */
   position: relative;
 `;
 
@@ -24,7 +23,7 @@ const ApplyPage = () => {
 
   useEffect(() => {
     const today = dayjs();
-    const deadline = dayjs('2024-09-06 04:00');
+    const deadline = dayjs('2024-12-27 23:59:59');
     setShowForm(today.isBefore(deadline));
   }, []);
 

src/pages/apply/components/ApplyDocs.ts

@@ -34,21 +34,20 @@ export const BackendData = {
   english: 'Backend Developer',
   explain:
     '웹이나 앱의 보이지 않는 서버를 담당합니다. 사용자가 웹이나 앱과 상호작용할 때 필요한 서버, 데이터베이스, 애플리케이션 로직을 개발하고 유지보수합니다.',
-  duedate: '2024.09.05',
+  duedate: '2024.12.27',
   link: 'form',
   recruit: [
     '개발에 관심있고 열정 있으신 분',
     '프로젝트 경험을 쌓고 싶으신 분',
     '자기 주도적 학습이 가능하신분',
     '백엔드에 관련해서 무엇이든 공부해본 경험이 있으신 분',
     '경북대학교 1학년 ~ 4학년(학과 무관)',
-    '중간에 포기하지 않고 끝까지 완주할 수 있는 분',
   ],
   prefer: [
-    '백엔드 개발 경험이 있으신 분',
+    '개인시간 충분히 할애할 수 있는 사람',
     'Spring Boot 등의 프레임워크를 사용해본 경험이 있으신 분',
-    'Git을 사용해본 경험이 있으신 분',
-    '개발 협업 경험이 있으신 분',
+    '팀프로젝트 경험에서 의견 충돌이나 성실히 임하지 않는 경우 등의 갈등 상황 해결 잘할수있는 사람',
+    '한달 이상의 프로젝트 경험이 적어도 1개 이상 있는 사람',
   ],
   event: [
     '격주마다 온라인 세미나 참여할 수 있어요.',
@@ -62,20 +61,19 @@ export const AIData = {
   english: 'AI Developer',
   explain:
     '인공지능 시스템을 설계하는 엔지니어입니다. 인공지능 기술을 활용하여 업무를 자동화하거나 인사이트를 도출하는 등 각종 문제를 해결합니다.',
-  duedate: '2024.09.05',
+  duedate: '2024.12.27',
   link: 'form',
   recruit: [
     '개발에 관심있고 열정 있으신 분',
     '프로젝트 경험을 쌓고 싶으신 분',
-    '자기 주도적 학습이 가능하신분',
-    'tensorflow, pytorch 사용해본 경험이 있으신 분',
     '경북대학교 1학년 ~ 4학년(학과 무관)',
-    '중간에 포기하지 않고 끝까지 완주할 수 있는 분',
+    'pytorch 다룰줄 알고 모델 설계 및 학습 경험 있는 사람',
   ],
   prefer: [
+    '개인시간 충분히 할애할 수 있는 사람',
     '직접 모델을 설계하고 학습시켜본 경험이 있으신 분',
     '각종 AI 경진대회 수상 경험이 있으신 분',
-    'Git을 사용해본 경험이 있으신 분',
+    '컴퓨터 Vision 분야 학습 경험 있는 사람',
   ],
   event: [
     '격주마다 온라인 세미나 참여할 수 있어요.',
@@ -108,7 +106,7 @@ export const AndroidData = {
   ],
   event: [
     '격주마다 온라인 세미나 참여할 수 있어요.',
-    'GDSC KOR나 GDG on Campus KNU가 기획 및 운영하는 이벤트에 참여할 수 있어요.',
+    'GDG KOR나 GDG on Campus KNU가 기획 및 운영하는 이벤트에 참여할 수 있어요.',
     'GDG on Campus KNU에서 진행하는 프로젝트에 참여할 수 있어요.',
   ],
 };
@@ -118,21 +116,15 @@ export const DesignerData = {
   english: 'Designer',
   explain:
     '사용자 조사, 정보 구조 설계, 와이어 프레임 및 프로토타입 제작 등의 작업을 담당합니다. 디자이너는 사용자의 니즈와 목표를 이해하고, 해당 제품 또는 서비스가 사용자에게 제공하는 가치를 극대화하기 위해 최적의 경험을 설계합니다.',
-  duedate: '2024.09.05',
+  duedate: '2024.12.27',
   link: 'form',
   recruit: [
-    '디자인에 관심있고 열정 있으신 분',
     '프로젝트 경험을 쌓고 싶으신 분',
-    '자기 주도적 학습이 가능하신분',
     'Figma, Photoshop, XD 툴을 사용해본 경험이 있으신 분',
     '경북대학교 1학년 ~ 4학년(학과 무관)',
     '중간에 포기하지 않고 끝까지 완주할 수 있는 분',
   ],
-  prefer: [
-    '웹앱 디자인 경험이 있으신 분',
-    'UI/UX에 대한 이해가 있으신 분',
-    '개발자 분들과 협업 경험이 있으신 분',
-  ],
+  prefer: ['디자인에 관심있고 열정 있으신 분'],
   event: [
     '격주마다 온라인 세미나 참여할 수 있어요.',
     'GDSC KOR나 GDG on Campus KNU가 기획 및 운영하는 이벤트에 참여할 수 있어요.',

src/pages/apply/components/ApplyEx.tsx

@@ -4,10 +4,10 @@ import { useParams, useNavigate } from 'react-router-dom';
 
 import CommonBtn from '@gdg/components/common/button/CommonBtn';
 import {
-  FrontendData,
+  // FrontendData,
   BackendData,
   AIData,
-  AndroidData,
+  // AndroidData,
   DesignerData,
 } from '@gdg/pages/apply/components/ApplyDocs';
 import ApplyQualify from '@gdg/pages/apply/components/ApplyQualify';
@@ -63,14 +63,14 @@ const ApplyEx = () => {
 
   const getData = (tech: string): ApplyExInterface | null => {
     switch (tech) {
-      case 'frontend':
-        return FrontendData;
+      // case 'frontend':
+      //   return FrontendData;
       case 'backend':
         return BackendData;
       case 'ai':
         return AIData;
-      case 'android':
-        return AndroidData;
+      // case 'android':
+      //   return AndroidData;
       case 'designer':
         return DesignerData;
       default:

src/pages/apply/components/ApplyForm.tsx

@@ -26,9 +26,9 @@ import {
   InputWrapper,
 } from '@gdg/pages/apply/components/ApplyForm.style';
 import {
-  FrontendData,
+  // FrontendData,
   BackendData,
-  AndroidData,
+  // AndroidData,
   AIData,
   DesignerData,
 } from '@gdg/pages/apply/components/ApplyFormDocs';
@@ -44,18 +44,21 @@ import {
   ApplyFormQuestionInterface,
 } from '@gdg/types/ApplyInterface';
 import { ApplyFormSchema } from '@gdg/utils/ApplyFormScehma.util';
-import { handleFormSubmit } from '@gdg/utils/anlytics';
+import {
+  handleFinalFormSubmit,
+  handleTemperalFormSave,
+} from '@gdg/utils/anlytics';
 
 const getTrack = (tech: string): string => {
   switch (tech.toLowerCase()) {
-    case 'frontend':
-      return 'FRONT_END';
+    // case 'frontend':
+    //   return 'FRONT_END';
     case 'backend':
       return 'BACK_END';
     case 'ai':
       return 'AI';
-    case 'android':
-      return 'ANDROID';
+    // case 'android':
+    //   return 'ANDROID';
     case 'designer':
       return 'DESIGNER';
     default:
@@ -94,14 +97,14 @@ const ApplyForm = () => {
 
   const getData = (tech: string): ApplyFormQuestionInterface | null => {
     switch (tech) {
-      case 'frontend':
-        return FrontendData;
+      // case 'frontend':
+      //   return FrontendData;
       case 'backend':
         return BackendData;
       case 'ai':
         return AIData;
-      case 'android':
-        return AndroidData;
+      // case 'android':
+      //   return AndroidData;
       case 'designer':
         return DesignerData;
       default:
@@ -137,12 +140,12 @@ const ApplyForm = () => {
           })) || [],
       };
       if (submitType === 'submit') {
-        handleFormSubmit('Final Submit');
+        handleFinalFormSubmit('Final Submit');
         submitApplication(finalFormData);
         // console.log(finalFormData);
       } else if (submitType === 'save') {
         // console.log(saveFormData);
-        handleFormSubmit('Save Submit');
+        handleTemperalFormSave('Save Submit');
         submitApplication(saveFormData);
       }
     }
@@ -186,7 +189,7 @@ const ApplyForm = () => {
               id='links'
               width='100%'
               margin='0px 15px 0px 0px'
-              title='깃허브 링크 (디자이너 분들은 포트폴리오 링크 올려주세요 없으면 안 올려주셔도 됩니다!)'
+              title='깃허브 or 포트폴리오 링크 (없으면 안 올려주셔도 됩니다!)'
               placeholder='깃허브(포트폴리오) 링크를 입력해주세요'
               type='text'
               register={register('links')}

src/pages/apply/components/ApplyFormDocs.ts

@@ -22,39 +22,39 @@ export const BackendData = {
   korean: '백엔드 개발자',
   english: 'Backend Developer',
   Question1: {
-    main: '본인이 지금까지 공부해왔던 경험과 앞으로의 공부 방향성에 대해 말씀해 주세요.',
+    main: '지원하게 된 동기가 무엇인가요? 커뮤니티를 참여하여 이루고 싶은 것을 구체적으로 솔직하게 작성해주세요.',
   },
   Question2: {
-    main: '지원하게 된 동기가 무엇인가요?',
-    sub: '본인의 경험을 기반으로 어필할 수 있는 내용에 대해 자유롭게 기재해주세요.',
+    main: '다른 백엔드 개발자와 비교했을 때 자신이 가진 탁월함에 대해 작성해 주세요.',
+    sub: '프로젝트 외의 경험도 상관없습니다. 구체적으로 솔직하게 작성해주세요.',
   },
   Question3: {
-    main: '본인이 협업에서 겪었던 힘들었던 문제 상황을 적어주세요',
-    sub: '본인이 겪었던 문제 상황과 어떻게 해결한 방법에 대해 적어주세요.',
+    main: '팀/단체로 활동(대내외 프로젝트, 동아리, 대외활동 등)하는 과정에서 어려움에 직면했던 경험은 무엇인가요?',
+    sub: '그러한 한계에 부딪혔을 때 스스로 극복하고자 노력한 방식과 함께 자세히 작성해 주세요. (프로젝트 외의 경험도 상관없습니다.)',
   },
   Question4: {
-    main: '본인이 협업해본 경험에 대해 적어주세요.',
-    sub: '협업에서 본인이 어떤 부분을 맡았는지, 느낀점과 깨달은 점을 적어주세요. (없으면 안 적어주셔도 상관없습니다.)',
+    main: '개발자로서 빠르게 성장하는 본인만의 노하우나 생각을 작성해 주세요.',
+    sub: '자신의 공부방법이나 생각을 구체적으로 작성해 주세요. ',
   },
 };
 
 export const AIData = {
   korean: '인공지능 개발자',
   english: 'AI Developer',
   Question1: {
-    main: '본인이 생각하기에 좋은 개발자란 무엇인가요?',
+    main: '지원하게 된 동기가 무엇인가요? 커뮤니티를 참여하여 이루고 싶은 것을 구체적으로 솔직하게 작성해주세요.',
   },
   Question2: {
-    main: '지원하게 된 동기가 무엇인가요?',
-    sub: '본인의 경험을 기반으로 어필할 수 있는 내용에 대해 자유롭게 기재해주세요.',
+    main: '다른 AI 개발자와 비교했을 때 자신이 가진 탁월함에 대해 작성해 주세요.',
+    sub: '프로젝트 외의 경험도 상관없습니다. 구체적으로 솔직하게 작성해주세요.',
   },
   Question3: {
-    main: '본인이 겪었던 힘들었던 문제 상황을 적어주세요',
-    sub: '프로젝트 말고도 본인이 겪었던 문제 상황과 어떻게 해결한 방법에 대해 적어주세요.',
+    main: '팀/단체로 활동(대내외 프로젝트, 동아리, 대외활동 등)하는 과정에서 어려움에 직면했던 경험은 무엇인가요?',
+    sub: '그러한 한계에 부딪혔을 때 스스로 극복하고자 노력한 방식과 함께 자세히 작성해 주세요. (프로젝트 외의 경험도 상관없습니다.)',
   },
   Question4: {
-    main: '본인이 협업해본 경험에 대해 적어주세요.',
-    sub: '협업에서 본인이 어떤 부분을 맡았는지, 느낀점과 깨달은 점을 적어주세요. (없으면 안 적어주셔도 상관없습니다.)',
+    main: '개발자로서 빠르게 성장하는 본인만의 노하우나 생각을 작성해 주세요.',
+    sub: '자신의 공부방법이나 생각을 구체적으로 작성해 주세요. ',
   },
 };
 
@@ -89,8 +89,8 @@ export const DesignerData = {
     sub: '본인의 경험을 기반으로 어필할 수 있는 내용에 대해 자유롭게 기재해주세요.',
   },
   Question3: {
-    main: '본인이 겪었던 힘들었던 문제 상황을 적어주세요',
-    sub: '프로젝트 말고도 본인이 겪었던 문제 상황과 어떻게 해결한 방법에 대해 적어주세요.',
+    main: '팀/단체로 활동(대내외 프로젝트, 동아리, 대외활동 등)하는 과정에서 어려움에 직면했던 경험은 무엇인가요?',
+    sub: '그러한 한계에 부딪혔을 때 스스로 극복하고자 노력한 방식과 함께 자세히 작성해 주세요. (프로젝트 외의 경험도 상관없습니다.)',
   },
   Question4: {
     main: 'GDG on Campus KNU에서 디자이너로서 어떤 것을 얻어가고 싶으신가요?',