GCVD-2024 · anonymousRecords · Oct 29, 2024 · Oct 14, 2024 · Oct 15, 2024 · Oct 15, 2024
diff --git a/index.html b/index.html
@@ -1,14 +1,37 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, maximum-scale=1.0, 
     user-scalable=0"
     />
-    <title>Digging Club</title>
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://www.gcvd2024.com/" />
+    <meta property="og:title" content="Digging Club : 2024 가천대 시각디자인학과 졸업전시" />
+    <meta property="og:image" content="/thumbnail.png" />
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-M851F89D1P"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+
+      gtag('config', 'G-M851F89D1P');
+    </script>
+    <title>Digging Club : 2024 가천대 시각디자인학과 졸업전시</title>
+    <meta
+      name="description"
+      content="2024 가천대학교 시각디자인과 졸업전시 Digging Club에 오신 것을 환영합니다. 학생들이 열정과 전문성을 갖고 준비한 작품들을 만나보세요."
+    />
+    <meta
+      name="keywords"
+      content="2024, 가천대학교, 시각디자인학과, 졸업전시, Digging Club, 디자인 전시"
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/about/MainTitle/about_background.png b/public/about/MainTitle/about_background.png
diff --git a/public/about/MainTitle/main_bg.png b/public/about/MainTitle/main_bg.png
diff --git a/public/thumbnail.png b/public/thumbnail.png
diff --git a/src/assets/img/works_background.png b/src/assets/img/works_background.png
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
@@ -8,6 +8,7 @@ function Layout({ children }: { children: React.ReactNode }) {
   const location = useLocation();
   const isMobile = useIsMobile();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
 
   const toggleDrawer = () => setIsDrawerOpen(!isDrawerOpen);
 
@@ -31,12 +32,23 @@ function Layout({ children }: { children: React.ReactNode }) {
     };
   }, [isDrawerOpen]);
 
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 50);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
   return (
     <LayoutWrapper>
       {isMobile && isWorkDetailRoute ? (
         <></>
       ) : (
-        <Nav isMobile={isMobile}>
+        <Nav isFixed={location.pathname !== '/'} isMobile={isMobile} isScrolled={isScrolled}>
           {isMobile ? (
             <>
               <HamburgerButton onClick={toggleDrawer} src="/svg/hamburger.svg" />
@@ -82,7 +94,9 @@ const LayoutWrapper = styled.div`
 `;
 
 interface NavProps {
+  isFixed: boolean;
   isMobile: boolean;
+  isScrolled: boolean;
 }
 
 const Nav = styled.nav<NavProps>`
@@ -91,6 +105,12 @@ const Nav = styled.nav<NavProps>`
   justify-content: ${({ isMobile }) => (isMobile ? 'flex-start' : 'center')};
   align-items: center;
   padding-left: 16px;
+  position: ${({ isFixed }) => (isFixed ? 'fixed' : 'static')};
+  top: 0;
+  width: 100%;
+  background-color: ${({ isScrolled }) => (isScrolled ? 'transparent' : '#121212')};
+  transition: background-color 0.3s ease;
+  z-index: 1000;
 `;
 
 interface NavLinkContainerProps {
@@ -106,6 +126,7 @@ const NavLinkContainer = styled.div<NavLinkContainerProps>`
 interface NavLinkProps {
   isActive: boolean;
 }
+
 const NavLink = styled(Link)<NavLinkProps>`
   font-size: 20px;
   font-weight: 900;
@@ -126,7 +147,7 @@ const Drawer = styled.div<{ isOpen: boolean }>`
   left: ${({ isOpen }) => (isOpen ? '0' : '-250px')};
   width: 150px;
   height: 100%;
-  background-color: #000000;
+  background-color: #121212;
   transition: left 0.3s ease-in-out;
   z-index: 10000000;
 `;

diff --git a/src/constants/constants.ts b/src/constants/constants.ts
@@ -49,5 +49,12 @@ export const WORDS = [
 
 // CategoriesSection.tsx
 export const CATEGORIES = ['ALL', 'UX', 'BRAND', 'GRAPHIC', 'ILLUST', 'MEDIA'] as const;
-export const DETAIL_RESPONSE_CATEGORIES = ['ALL', 'UXUI', 'BX', 'GRAPHIC', 'ILLUSTRATION', 'MEDIA'] as const;
-export const WORK_CATEGORIES = ['ALL', 'UX/UI', 'BRAND', 'GRAPHIC', 'ILLUST', 'MEDIA'] as const;
+export const DETAIL_RESPONSE_CATEGORIES = [
+  'ALL',
+  'UXUI',
+  'BX',
+  'GRAPHIC',
+  'ILLUSTRATION',
+  'MEDIA',
+] as const;
+export const WORK_CATEGORIES = ['ALL', 'UXUI', 'BRANDING', 'GRAPHIC', 'ILLUST', 'MEDIA'] as const;
diff --git a/src/hooks/queries/useGetWorkList.tsx b/src/hooks/queries/useGetWorkList.tsx
@@ -24,14 +24,14 @@ const getWorkList = async (category: string, currentPage: number) => {
 };
 
 export const useGetWorkList = ({ category, currentPage }: WorkListRequestType) => {
-      let mappedCategory = (() => {
-        switch (category) {
-          case 'UX/UI':
-            return 'UX';
-          default:
-            return category;
-        }
-      })();
+  let mappedCategory = (() => {
+    switch (category) {
+      case 'UXUI':
+        return 'UX';
+      default:
+        return category;
+    }
+  })();
   const { data, hasNextPage, fetchNextPage, isFetchingNextPage } = useInfiniteQuery({
     queryKey: WORK_KEYS.list(mappedCategory, currentPage),
     queryFn: ({ pageParam = currentPage }) => getWorkList(mappedCategory, pageParam),

diff --git a/src/pages/About/About.tsx b/src/pages/About/About.tsx
@@ -22,7 +22,7 @@ function About() {
   return (
     <>
       <Helmet>
-        <title>Digging Club - About</title>
+        <title>Digging Club : 2024 가천대 시각디자인학과 졸업전시</title>
       </Helmet>
       <AboutPage>
         <ScrollToTopButton
@@ -50,5 +50,5 @@ export default About;
 
 const AboutPage = styled.div`
   position: relative;
-  background-color: black;
+  background-color: #121212;
 `;
diff --git a/src/pages/About/components/ConceptExperiencing/ConceptExperiencing.tsx b/src/pages/About/components/ConceptExperiencing/ConceptExperiencing.tsx
@@ -91,6 +91,6 @@ const Title = styled.h1<{ isMobile: boolean }>`
 const Description = styled.p<{ isMobile: boolean }>`
   font-size: ${(props) => (props.isMobile ? '12px' : '16px')};
   font-weight: 500;
-  line-height: 140%;
+  line-height: 200%;
   text-align: left;
 `;
diff --git a/src/pages/About/components/ConceptImmersing/ConceptImmersing.tsx b/src/pages/About/components/ConceptImmersing/ConceptImmersing.tsx
@@ -12,37 +12,37 @@ export default function ConceptImmersing() {
       <BlackholeCircle />
 
       <Description className="immersing_title" isMobile={isMobile}>
-        Immersing은 어떤 활동이나 주제에 완전히 빠져들어 
+        Immersing은 어떤 활동이나 주제에 완전히 빠져들어
         {isMobile ? <br /> : ' '}
         집중하는 것을 의미한다.
-        <div style={{height: '16px'}}/> 
+        <div style={{ height: '16px' }} />
         Digging이 어떤 것을 알아가고 발견하는 과정이라면,
         <br />
         Immersing은 그 과정에서 얻은 것을 잊고
         {isMobile ? <br /> : ' '}
         완전히 경험하며 새로운 시각과 경험을 얻는 것이다.
-        <div style={{height: '16px'}}/> 
+        <div style={{ height: '16px' }} />
         우리는 몰입을 통해 더 창의적이고 깊이 있는 결과를 얻어낼 수 있다.
       </Description>
     </ImmersingWrapper>
   );
 }
 
 const ImmersingWrapper = styled.div<{ isMobile: boolean }>`
-  height: ${props => props.isMobile ? 'auto' : '3000px'};
-  min-height: ${props => props.isMobile ? '100vh' : 'auto'};
+  height: ${(props) => (props.isMobile ? 'auto' : '3000px')};
+  min-height: ${(props) => (props.isMobile ? '100vh' : 'auto')};
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
-  gap: ${props => props.isMobile ? '20px' : '30px'};
-  padding: ${props => props.isMobile ? '40px 20px' : '0'};
+  gap: ${(props) => (props.isMobile ? '20px' : '30px')};
+  padding: ${(props) => (props.isMobile ? '40px 20px' : '0')};
 `;
 
 const Description = styled.p<{ isMobile: boolean }>`
-  font-size: ${props => props.isMobile ? '12px' : '16px'};
+  font-size: ${(props) => (props.isMobile ? '12px' : '16px')};
   font-weight: 500;
-  line-height: 140%;
-  max-width: ${props => props.isMobile ? '100%' : '80%'};
-`;
+  line-height: 200%;
+  max-width: ${(props) => (props.isMobile ? '100%' : '80%')};
+`;
diff --git a/src/pages/About/components/ConceptImmersing/components/BlackholeCircle.tsx b/src/pages/About/components/ConceptImmersing/components/BlackholeCircle.tsx
@@ -50,7 +50,7 @@ export default function BlackholeCircle() {
     let animationFrameId: number;
 
     const animate = () => {
-      ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
+      ctx.fillStyle = 'rgba(18, 18, 18, 1)';
       ctx.fillRect(0, 0, canvas.width, canvas.height);
       ctx.arc(centerX, centerY, circleRadius, 0, Math.PI * 2);
 

diff --git a/src/pages/About/components/ConceptReflecting/ConceptReflecting.tsx b/src/pages/About/components/ConceptReflecting/ConceptReflecting.tsx
@@ -13,17 +13,15 @@ function ConceptReflecting() {
         <Marquee marqueeText="Reflecting. 반추하다" />
 
         <Description className="reflecting_title" isMobile={isMobile}>
-          Reflecting은 특정한 경험이나 지식에 대해 깊이 생각하고 
-          {isMobile ? <br /> : ' '}
-          그 의미를 되새기는 과정을 의미한다.
-          {isMobile ? <div style={{height: '16px'}}/>  : <br/>}
+          Reflecting은 특정한 경험이나 지식에 대해 깊이 생각하고
+          {isMobile ? <br /> : ' '}그 의미를 되새기는 과정을 의미한다.
+          {isMobile ? <div style={{ height: '16px' }} /> : <br />}
           Digging을 통해 얻게 된 정보나 경험을 Reflecting함으로써,
           {isMobile ? <br /> : ' '}
-          그것이 우리의 삶에 어떤 의미를
-          가지는지,
+          그것이 우리의 삶에 어떤 의미를 가지는지,
           <br />
           어떤 교훈을 줄 수 있는지 고민하게 된다.
-          {isMobile ? <div style={{height: '16px'}}/>  : ''}
+          {isMobile ? <div style={{ height: '16px' }} /> : ''}
           이러한 반추의 과정에서 우리는
           {isMobile ? <br /> : ' '}
           더 깊이 있는 통찰과 이해를 얻는다.
@@ -56,6 +54,6 @@ const Description = styled.p<{ isMobile: boolean }>`
   margin-top: ${(props) => (props.isMobile ? '30px' : '46px')};
   font-size: ${(props) => (props.isMobile ? '12px' : '16px')};
   font-weight: 500;
-  line-height: 140%;
+  line-height: 200%;
   text-align: left;
 `;
diff --git a/src/pages/About/components/ConceptReflecting/components/Marquee.tsx b/src/pages/About/components/ConceptReflecting/components/Marquee.tsx
@@ -55,7 +55,7 @@ const MarqueeBlur = styled.div`
   inset: 0;
   display: grid;
   place-items: center;
-  background-color: black;
+  background-color: #121212;
   background-image: linear-gradient(to right, rgba(0, 180, 219, 1), 1rem, transparent 50%),
     linear-gradient(to left, rgba(0, 180, 219, 1), 1rem, transparent 50%);
   filter: contrast(15);

diff --git a/src/pages/About/components/ConceptSavoring/ConceptSavoring.tsx b/src/pages/About/components/ConceptSavoring/ConceptSavoring.tsx
@@ -83,6 +83,6 @@ const Description = styled.p<{ isMobile: boolean }>`
   text-align: center;
   font-size: ${(props) => (props.isMobile ? '12px' : '16px')};
   font-weight: 500;
-  line-height: 140%;
+  line-height: 200%;
   letter-spacing: ${(props) => (props.isMobile ? '-0.56px' : '-0.64px')};
 `;
diff --git a/src/pages/About/components/Designers/Designers.tsx b/src/pages/About/components/Designers/Designers.tsx
@@ -4,7 +4,6 @@ import { useIsMobile } from '../../../../hooks/useIsMobile';
 
 const designers = [
   '이다현',
-  '권현아',
   '안준범',
   '송영민',
   '정시온',
@@ -62,7 +61,7 @@ const designers = [
   '조예찬',
   '이지민',
   '오치영',
-  '채승우'
+  '채승우',
 ];
 export default function Designers() {
   const containerRef = useRef<HTMLDivElement>(null);

diff --git a/src/pages/About/components/ExhibitionInfo/ExhibitionInfo.tsx b/src/pages/About/components/ExhibitionInfo/ExhibitionInfo.tsx
@@ -8,9 +8,9 @@ interface InfoItem {
 }
 
 const infoItems: InfoItem[] = [
-  { label: '', content: '가천대학교 시각디자인학과 졸업전시 2025' },
-  { label: '기간', content: '2024. 10. - 2024. 10.' },
-  { label: '시간', content: '10:00 - 18:00' },
+  { label: '', content: '2024 가천대학교 시각디자인학과 졸업전시' },
+  { label: '기간', content: '2024. 10. 17. - 2024. 10. 29.' },
+  { label: '시간', content: '10:00 - 20:00' },
   { label: '장소', content: '가천대학교 비전타워 B1' },
 ];
 

diff --git a/src/pages/About/components/ExhibitionIntroduction/ExhibitionIntroduction.tsx b/src/pages/About/components/ExhibitionIntroduction/ExhibitionIntroduction.tsx
@@ -48,7 +48,7 @@ const Paragraph = styled.p<{ isMobile: boolean }>`
   margin-bottom: ${(props) => (props.isMobile ? '16px' : '60px')};
   font-size: ${(props) => (props.isMobile ? '12px' : '16px')};
   font-weight: 500;
-  line-height: 140%;
+  line-height: 200%;
 `;
 
 const Highlight = styled.span<{ isMobile: boolean }>`

diff --git a/src/pages/About/components/ExhibitionMeaning/ExhibitionMeaning.tsx b/src/pages/About/components/ExhibitionMeaning/ExhibitionMeaning.tsx
@@ -19,7 +19,7 @@ export default function ExhibitionMeaning() {
           {isMobile ? <br /> : ' '}
           디자인 아이덴티티를 드러내고 있다.
           <br />
-          우리가 지나온 길을 상징하여여 구성하고
+          우리가 지나온 길을 상징화하여 구성하고
           {isMobile ? <br /> : ' '}
           앞으로 나아갈 길을 상상해 볼 수 있다.
           <br />
@@ -45,20 +45,20 @@ const Title = styled.h1<{ isMobile: boolean }>`
   margin-bottom: ${(props) => (props.isMobile ? '50px' : '100px')};
   font-size: ${(props) => (props.isMobile ? '28px' : '40px')};
   font-weight: 900;
-  line-height: 140%;
+  line-height: 200%;
   letter-spacing: ${(props) => (props.isMobile ? '-0.56px' : '-0.8px')};
 `;
 
 const Paragraph = styled.p<{ isMobile: boolean }>`
   margin-bottom: ${(props) => (props.isMobile ? '40px' : '60px')};
   font-size: ${(props) => (props.isMobile ? '12px' : '16px')};
   font-weight: 500;
-  line-height: 140%;
+  line-height: 200%;
 `;
 
 const Highlight = styled.span<{ isMobile: boolean }>`
   color: #00b4db;
   font-weight: 700;
   font-size: ${(props) => (props.isMobile ? '12px' : '16px')};
-  line-height: 140%;
+  line-height: 200%;
 `;
diff --git a/src/pages/About/components/GraduationCommittee/GraduationCommittee.tsx b/src/pages/About/components/GraduationCommittee/GraduationCommittee.tsx
@@ -5,8 +5,8 @@ import { useIsMobile } from '../../../../hooks/useIsMobile';
 const roles = [
   { title: '위원장', members: ['홍정우'] },
   { title: '웹', members: ['이가영', '이한별', '김도연'] },
-  { title: '편집', members: ['조예진', '정다연'] },
-  { title: '홍보', members: ['나선주'] },
+  { title: '홍보', members: ['조예진', '정다연'] },
+  { title: '편집', members: ['나선주'] },
   { title: '회계', members: ['이경택'] },
 ];
 
@@ -20,7 +20,7 @@ export default function GraduationCommittee(): React.ReactElement {
     <CommitteeWrapper ref={containerRef} isMobile={isMobile}>
       <section>
         <Title className="commitee_title" isMobile={isMobile}>
-          2025
+          2024
           <br />
           졸업 준비 위원회
         </Title>
@@ -101,5 +101,6 @@ const RoleTitle = styled.h3<{ isMobile: boolean }>`
 const Member = styled.div<{ isMobile: boolean }>`
   font-size: ${(props) => (props.isMobile ? '14px' : '16px')};
   font-weight: 500;
+  line-height: 200%;
   margin-bottom: ${(props) => (props.isMobile ? '10px' : '0')};
 `;