Merge pull request #55 from GCVD-2024/feat/#52-seo

[QA] 배경색 및 텍스트 수정
GCVD-2024 · Oct 27, 2024 · ecdaee0 · ecdaee0
2 parents d02bf24 + f75b5ff
commit ecdaee0
Show file tree

Hide file tree

Showing 22 changed files with 86 additions and 57 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="kor">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
 

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/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
@@ -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,38 @@ 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;
+  background-color: #121212;
   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/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
@@ -9,7 +9,7 @@ interface InfoItem {
 
 const infoItems: InfoItem[] = [
   { label: '', content: '2024 가천대학교 시각디자인학과 졸업전시' },
-  { label: '기간', content: '2024. 10.17. - 2024. 10.29.' },
+  { 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: ['이경택'] },
 ];
 
@@ -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')};
 `;
diff --git a/src/pages/About/components/MainTitle/MainTitle.tsx b/src/pages/About/components/MainTitle/MainTitle.tsx
@@ -15,7 +15,7 @@ interface InfoItem {
 
 const infoItems: InfoItem[] = [
   { label: '', content: '2024 가천대학교 시각디자인학과 졸업전시' },
-  { label: '기간', content: '2024. 10.17. - 2024. 10.29.' },
+  { label: '기간', content: '2024. 10. 17. - 2024. 10. 29.' },
   { label: '시간', content: '10:00 - 20:00' },
   { label: '장소', content: '가천대학교 비전타워 B1' },
 ];
@@ -43,7 +43,7 @@ export default function MainTitle() {
   return (
     <MainTitleWrapper isMobile={isMobile}>
       <BackgroundImage
-        src="/about/MainTitle/main-title-bg.svg"
+        src="/about/MainTitle/main_bg.png"
         alt="Main background"
         isMobile={isMobile}
       />
@@ -129,7 +129,7 @@ const OverlayContent = styled.div`
 
 const BackgroundImage = styled.img<{ isMobile: boolean }>`
   position: absolute;
-  top: 0;
+  top: 25rem;
   left: 0;
   width: 100%;
   height: 100%;

diff --git a/src/pages/Guest/Guest.tsx b/src/pages/Guest/Guest.tsx
@@ -211,7 +211,7 @@ const Title = styled.h1`
   font-weight: 900;
   color: ${({ theme }) => theme.colors.primaryBlue};
   line-height: normal;
-  padding: 1rem;
+  padding: 12rem 0 3rem 0;
 
   @media (max-width: 768px) {
     font-size: 28px;
@@ -222,7 +222,7 @@ const Title = styled.h1`
 const GuestPage = styled.main`
   width: 100vw;
   height: calc(100vh - 73px);
-  background: radial-gradient(41.45% 43.19% at 50% 50%, #00b4db 0%, #000 100%);
+  background: radial-gradient(41.45% 43.19% at 50% 50%, #00b4db 0%, #121212 100%);
   overflow-x: auto;
   display: flex;
   flex-direction: column;
@@ -248,7 +248,7 @@ const EntriesContainer = styled.div`
   position: relative;
   flex-wrap: wrap;
   justify-content: center;
-  padding: 20px;
+  padding: 0 2rem;
   margin-bottom: 4rem;
   overflow-x: scroll;
 

diff --git a/src/pages/Guest/components/GuestBookEntry.tsx b/src/pages/Guest/components/GuestBookEntry.tsx
@@ -55,7 +55,8 @@ const GuestBoxContent = styled.div`
   top: 41%;
   position: relative;
   transform: translateY(-50%);
-  margin-bottom: 16px;
+  height: 60px;
+  overflow-y: scroll;
 
   @media (max-width: 768px) {
     font-size: 12px;
@@ -66,7 +67,8 @@ const GuestBoxContent = styled.div`
 
 const GuestBoxFooter = styled.div`
   font-size: 12px;
-  top: 60%;
+  top: 42%;
+  padding: 2rem;
   position: relative;
   text-align: right;