Release v-1.3.0 (#173)

* 메인 화면 리드미 페이지 독스 기능 업데이트 (#164) * feat: GDSC => GDGoC 업데이트 * Docs: 메인 리드미 Docs 업데이트 * 로고 컨테스트 별 날짜 별로 로고 게시 (#169) * feat: code refactoring * Refac: MainNavigation refac * design: 로고 컨테스트 이미지 추가 * feat: navigation Logo 설정 * Design: Admin 로고 수정 * 뷰포인트 기반 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 수정 및 메타데이터 수정 * fix: 지원날짜 null로 올 경우 오늘 날짜로 들어가도록 처리 (#172) * Chore: 코드 주석처리 --------- Co-authored-by: CHAE_WON_SHIN <[email protected]>
GDG-on-Campus-KNU · Nov 30, 2024 · eaca4ac · eaca4ac
1 parent b4f1975
commit eaca4ac
Show file tree

Hide file tree

Showing 50 changed files with 646 additions and 555 deletions.
diff --git a/src/assets/NavigationLogo.svg b/src/assets/NavigationLogo.svg
diff --git a/src/assets/NavigationLogo768.svg b/src/assets/NavigationLogo768.svg
diff --git a/src/assets/defaultLogo/GDGoC.png b/src/assets/defaultLogo/GDGoC.png
diff --git a/src/assets/logo_contest/gdgoc_knu_doyeonkim.png b/src/assets/logo_contest/gdgoc_knu_doyeonkim.png
diff --git a/src/assets/logo_contest/gdgoc_knu_hayeon.png b/src/assets/logo_contest/gdgoc_knu_hayeon.png
diff --git a/src/assets/logo_contest/gdgoc_knu_seojisu.png b/src/assets/logo_contest/gdgoc_knu_seojisu.png
diff --git a/src/assets/logo_contest/gdgocknu_hyunminkim.png b/src/assets/logo_contest/gdgocknu_hyunminkim.png
diff --git a/src/assets/logo_contest/gdgocknu_kimjoohoon.png b/src/assets/logo_contest/gdgocknu_kimjoohoon.png
diff --git a/src/assets/logo_contest/gdgocknu_sonheeju.png b/src/assets/logo_contest/gdgocknu_sonheeju.png
diff --git a/src/assets/logo_contest/gdgocknu_yoonkyuwon.png b/src/assets/logo_contest/gdgocknu_yoonkyuwon.png
diff --git a/src/components/common/View/LazyLoad.tsx b/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 />
       )}

diff --git a/src/components/common/title/PageTitle.tsx b/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`

diff --git a/src/components/feature/footer/FooterLink.ts b/src/components/feature/footer/FooterLink.ts
@@ -0,0 +1,37 @@
+import CompanyLogo from '@gdg/assets/CompanyLogo.svg';
+import GithubLogo from '@gdg/assets/GithubLogo.svg';
+import InstagramLogo from '@gdg/assets/InstagramLogo.svg';
+import Phone from '@gdg/assets/Phone.svg';
+
+type FooterLink = {
+  icon: string;
+  title: string;
+  content: string;
+  href?: string;
+};
+
+export const footerLinks: FooterLink[] = [
+  {
+    icon: Phone,
+    title: '대표 연락처',
+    content: '010-4922-7687',
+  },
+  {
+    icon: GithubLogo,
+    title: 'GDG KNU 팀 깃허브',
+    content: 'Github 바로가기',
+    href: 'https://github.com/GDG-on-Campus-KNU',
+  },
+  {
+    icon: InstagramLogo,
+    title: '인스타그램',
+    content: '@gdgoc.knu 바로가기',
+    href: 'https://www.instagram.com/gdgoc.knu/',
+  },
+  {
+    icon: CompanyLogo,
+    title: '협력사',
+    content: '데이터융복합연구원 바로가기',
+    href: 'https://datainstitute.knu.ac.kr/contents/main.do',
+  },
+];
diff --git a/src/components/feature/footer/MainFooter.tsx b/src/components/feature/footer/MainFooter.tsx
@@ -1,7 +1,3 @@
-import CompanyLogo from '@gdg/assets/CompanyLogo.svg';
-import GithubLogo from '@gdg/assets/GithubLogo.svg';
-import InstagramLogo from '@gdg/assets/InstagramLogo.svg';
-import Phone from '@gdg/assets/Phone.svg';
 import Text from '@gdg/components/common/typography/Text';
 import {
   Footer,
@@ -12,6 +8,22 @@ import {
   TableData,
 } from '@gdg/styles/FooterLayoutStyle';
 
+import { footerLinks } from './FooterLink';
+
+const FooterRow = ({
+  items,
+  renderItem,
+}: {
+  items: typeof footerLinks;
+  renderItem: (item: (typeof footerLinks)[0]) => React.ReactNode;
+}) => (
+  <tr>
+    {items.map((item, i) => (
+      <TableData key={i}>{renderItem(item)}</TableData>
+    ))}
+  </tr>
+);
+
 const MainFooter = () => {
   return (
     <Footer>
@@ -24,82 +36,34 @@ const MainFooter = () => {
           </TextBorder>
           <Table>
             <tbody>
-              <tr>
-                <TableData>
-                  <img src={Phone} alt='Logo' />
-                </TableData>
-                <TableData>
-                  <img src={GithubLogo} alt='Logo' />
-                </TableData>
-                <TableData>
-                  <img src={InstagramLogo} alt='Logo' />
-                </TableData>
-                <TableData>
-                  <img src={CompanyLogo} alt='Logo' />
-                </TableData>
-              </tr>
-              <tr>
-                <TableData>
-                  <Text color='white' size='md'>
-                    대표 연락처
-                  </Text>
-                </TableData>
-                <TableData>
-                  <Text color='white' size='md'>
-                    GDG KNU 팀 깃허브
-                  </Text>
-                </TableData>
-                <TableData>
+              <FooterRow
+                items={footerLinks}
+                renderItem={({ icon }) => <img src={icon} alt='Logo' />}
+              />
+              <FooterRow
+                items={footerLinks}
+                renderItem={({ title }) => (
                   <Text color='white' size='md'>
-                    인스타그램
+                    {title}
                   </Text>
-                </TableData>
-                <TableData>
-                  <Text color='white' size='md'>
-                    협력사
-                  </Text>
-                </TableData>
-              </tr>
-              <tr>
-                <TableData>
-                  <Text color='white' size='xs'>
-                    010-4922-7687
-                  </Text>
-                </TableData>
-                <TableData>
-                  <a
-                    href='https://github.com/GDG-on-Campus-KNU'
-                    target='_blank'
-                    rel='noopener noreferrer'
-                  >
-                    <Text color='white' size='xs' whiteSpace='normal'>
-                      Github 바로가기
-                    </Text>
-                  </a>
-                </TableData>
-                <TableData>
-                  <a
-                    href='https://www.instagram.com/gdg.knu/'
-                    target='_blank'
-                    rel='noopener noreferrer'
-                  >
-                    <Text color='white' size='xs' whiteSpace='normal'>
-                      @gdg.knu 바로가기
-                    </Text>
-                  </a>
-                </TableData>
-                <TableData>
-                  <a
-                    href='https://datainstitute.knu.ac.kr/contents/main.do'
-                    target='_blank'
-                    rel='noopener noreferrer'
-                  >
+                )}
+              />
+              <FooterRow
+                items={footerLinks}
+                renderItem={({ content, href }) =>
+                  href ? (
+                    <a href={href} target='_blank' rel='noopener noreferrer'>
+                      <Text color='white' size='xs' whiteSpace='normal'>
+                        {content}
+                      </Text>
+                    </a>
+                  ) : (
                     <Text color='white' size='xs'>
-                      데이터융복합연구원 바로가기
+                      {content}
                     </Text>
-                  </a>
-                </TableData>
-              </tr>
+                  )
+                }
+              />
             </tbody>
           </Table>
         </Display>

diff --git a/src/components/feature/footer/MainFooterMobile.tsx b/src/components/feature/footer/MainFooterMobile.tsx
@@ -1,10 +1,6 @@
 import styled from '@emotion/styled';
 import { Link } from 'react-router-dom';
 
-import CompanyLogo from '@gdg/assets/CompanyLogo.svg';
-import GithubLogo from '@gdg/assets/GithubLogo.svg';
-import InstagramLogo from '@gdg/assets/InstagramLogo.svg';
-import Phone from '@gdg/assets/Phone.svg';
 import Text from '@gdg/components/common/typography/Text';
 import {
   Footer,
@@ -15,11 +11,40 @@ import {
   TableData,
 } from '@gdg/styles/FooterLayoutStyle';
 
+import { footerLinks } from './FooterLink';
+
 const MobileImg = styled.img`
   margin-right: 10px;
 `;
 
-const MobileFooterMobile = () => {
+const FooterCell = ({
+  icon,
+  content,
+  href,
+}: {
+  icon: string;
+  content: string;
+  href?: string;
+}) => (
+  <TableData>
+    <MobileImg src={icon} alt='Logo' />
+    {href ? (
+      <Link to={href}>
+        <Text color='white' size='xs'>
+          {content}
+        </Text>
+      </Link>
+    ) : (
+      <Text color='white' size='xs'>
+        {content}
+      </Text>
+    )}
+  </TableData>
+);
+
+const MainFooterMobile = () => {
+  const rows = [footerLinks.slice(0, 2), footerLinks.slice(2, 4)];
+
   return (
     <Footer>
       <DisplayFooter>
@@ -31,40 +56,18 @@ const MobileFooterMobile = () => {
           </TextBorder>
           <Table>
             <tbody>
-              <tr>
-                <TableData>
-                  <MobileImg src={Phone} alt='Logo' />
-                  <Text color='white' size='xs'>
-                    010-4922-7687
-                  </Text>
-                </TableData>
-                <TableData>
-                  <MobileImg src={GithubLogo} alt='Logo' />
-                  <Link to='https://github.com/GDSC-KNU'>
-                    <Text color='white' size='xs'>
-                      Github 바로가기
-                    </Text>
-                  </Link>
-                </TableData>
-              </tr>
-              <tr>
-                <TableData>
-                  <MobileImg src={InstagramLogo} alt='Logo' />
-                  <Link to='https://www.instagram.com/gdsc.knu/'>
-                    <Text color='white' size='xs'>
-                      Instagram 바로가기
-                    </Text>
-                  </Link>
-                </TableData>
-                <TableData>
-                  <MobileImg src={CompanyLogo} alt='Logo' />
-                  <Link to='https://datainstitute.knu.ac.kr/contents/main.do'>
-                    <Text color='white' size='xs'>
-                      데이터융복합연구원
-                    </Text>
-                  </Link>
-                </TableData>
-              </tr>
+              {rows.map((row, rowIndex) => (
+                <tr key={rowIndex}>
+                  {row.map((item, cellIndex) => (
+                    <FooterCell
+                      key={cellIndex}
+                      icon={item.icon}
+                      content={item.content}
+                      href={item.href}
+                    />
+                  ))}
+                </tr>
+              ))}
             </tbody>
           </Table>
         </Display>
@@ -73,4 +76,4 @@ const MobileFooterMobile = () => {
   );
 };
 
-export default MobileFooterMobile;
+export default MainFooterMobile;