Release v-1.3.0

README.md

@@ -1,6 +1,6 @@
 # ✨ GDG-ON-CAMPUS-KNU 홈페이지가 제작되었어요!
 
-<img src="https://github.com/user-attachments/assets/226ba1ab-2ab1-41d9-ade7-45ff4e0d0702" />
+<img src="https://github.com/user-attachments/assets/31d3c83d-61e3-44ce-a410-11bf171cb632" />
 
 ### 홈페이지 : https://gdsc-knu.com/
 
@@ -9,24 +9,44 @@
 기존에 GDG-ON-CAMPUS-KNU 지원 서류를 Google Form으로 제출받고, Memeber Info를
 별도로 관리하였습니다. <br /> 또한 GDG-ON-CAMPUS-KNU 활동시 팀원들의 프로젝트나
 일정 관리의 경우 Notion에서 별도로 관리하였는데 이러한 모든 기능들을 하나의
-홈페이지에서 관리할 수 있도록 **"GDSC-KNU 만의 홈페이지를 만들어보자!"** 라는
+홈페이지에서 관리할 수 있도록 **"GDGoC-KNU 만의 홈페이지를 만들어보자!"** 라는
 생각으로 기획하여 만들게 되었습니다.
 
 ## 🥰 홈페이지에서 이용가능한 기능들이에요!
 
 ### GDG-ON-CAMPUS-KNU
 
+<img width="350" alt="image" src="https://github.com/user-attachments/assets/9aa4a843-e164-4f6e-96f3-dc574fbfde92">
+
 - 간단한 소개 및 운영진 (Lead, Core) 소개
 - 지원서류 작성하기
-- 일정 관리
 
-### Team Blog
+### Tech Blog Page
 
-- 프로젝트 진행 시 팀 블로그 작성하기
+- 직렬별(프론트엔드 / 백엔드 / 안드로이드 / AI / 디자이너)개발 블로그
 - 직렬별(프론트엔드 / 백엔드 / 안드로이드 / AI / 디자이너)로 블로그 글 검색하기
 
+### Team Page
+
+<p>
+<img width="350" alt="image" src="https://github.com/user-attachments/assets/87903cbb-66cb-4ae0-8d39-db6314b60c86">
+<img width="350" alt="image" src="https://github.com/user-attachments/assets/0ac33935-d6a3-4829-9226-84d04029e479">
+</p>
+
+- 팀원 목록 확인
+- GDGoC KNU 전반적인 행사 일정 확인
+- 달력 일정 내 회의록 ( 빠른 시일내에 찾아볼 수 있도록 할께요! )
+- 해당 팀 글 목록 확인 ( 빠른 시일내에 찾아볼 수 있도록 할께요! )
+
 ### Admin Page (운영진만 접근가능해요!)
 
+<p>
+<img width="200" alt="image" src="https://github.com/user-attachments/assets/47116124-7c43-4a79-94c9-d0fd5881e1f3">
+<img width="200" alt="image" src="https://github.com/user-attachments/assets/a6375cf8-a1f4-4ea8-afb3-dfcfba2977e9">
+<img width="200" alt="image" src="https://github.com/user-attachments/assets/9e8854b3-c5c5-4ece-b5dd-61868003bf5c">
+<img width="200" alt="image" src="https://github.com/user-attachments/assets/9c8bd8e2-895f-4f57-b619-b2f525b6796b">
+</p>
+
 - 지원서류 관리하기
 - Member 상태 관리
 - Member Team 관리

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/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',
+  },
+];

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>