Feature/#124 메인페이지 반응형 레이아웃 (#125)

* design: 반응형을 위한 font style 적용

#110

* feat: 사이드바의 CaregoryButton의 isTeam, isTeamMatch props의 기본값을 false로 주기.

#110

* chore: 반응형에 따라서 크기가 변경되도록 icon button size 재설정

#112

* refactor: 사이드바의 햄버거 크기 설정을 좀 더 보기 좋게 변경함.

#110

* design: side bar에서 width 속성 삭제

- width이 고정이 아닌, fit-content로 사용됨.
#110

* design: 사이드바 모바일 반응형 구현

#110

* design: 모바일 사이드바 열려있을때 내부 콘텐츠 밀리도록 수정
#110

* feat: 화면의 크기에 따른 반응형 조절 방식 변경

- 110

* design: 팀 랭킹페이지의 소개글 반응형 구현

#117

* refactor: 팀 랭킹 페이지의 페이지 소개글에서 사용되지 않는 css 삭제

#117

* design: 사이드바 초기상태 닫히도록 수정 및 배경색 추가
#110

* design: 팀 랭킹 페이지에서 페이지 소개글의 border 삭제

- 레이아웃 확인하기 위해서 추가했던 border 속성 삭제
- #117

* chore: react 컴포넌트 - swiper 설치

- #117

* design: 팀 랭킹페이지의 소개글 textStyles 값 변경

- 페이지에서 보기에 글씨가 너무 커보여서 바꾸었습니다.
- #117

* chore: 팀 카드의 props 추가 (idx)

- swiper에서 index로 slide를 넘겨주는데, pagination 과 연결시켜주기 위해 추가했습니다.
- #117

* design: 팀 랭킹페이지의 slide 부분 수정

- 기존에는 제가 작성한 slide 를 넣어는데요, swiper 라이브러리를 알게되어 변경했습니다.
- #117

* refactor: 주석 삭제

- #117

* fix: 사이드바 zindex 범위 조정

- 사이드 바 전체에 zIndex = 99로 설정하니, 뒤에 있는 요소들을 선택할 수가 없음.
- 그래서 화면의 width이 768px보다 작고 사이드바가 펼쳐졌을 때만, zIndex = 2로 설정.
- #110

* refactor: 사이드바 배경과, 사이드바 통합.

- #110

* feat: 팀 랭킹 페이지 반응형 구현

- #117

* design: 화면크기에 따른 글씨 크기 바꿔주기.

- 처음에 화면에 대입하지 않고 설정하여, 어색한 부분 다시 설정해주었습니다.
- #124

* design: 메인페이지의 로그인 버튼 화면 크기에 따라 크기 변화

- 변화하지 않고 있으니, 너무 띄는 것 같아서 조절해주었습니다.
- #124

* design: 메인페이지에서 작물의 크기가 화면의 크기에 따라 변화하도록 수정

- #124

* design: 메인페이지 반응형 반영

- 화면의 너비가 768px보다 작을 때는 작물이 사라지도록 했습니다.
- 반응형이도록 만든 textStyle을 text요소에 적용시켰습니다.
- #124

* design: 작물이 사라지게 하는 화면의 너비 변경

- 화면의 너비가 768px일 때 사라지는 줄 알았는데, 992px 일때 사라지고 있어서 수정했습니다.
- #124

* design: 가로 스크롤바 없애기

- overflow: scroll 로 설정하면 안의 내용에 상관없이 가로, 세로 스크롤바가 무조건 생성됩니다.
- overflow: auto 로 설정하면 안의 내용 크기에 따라 스크롤바가 생깁니다.
- #117

* design: swiper가 부모요소의 크기 넘지 않도록 설정

- #117

* fix: 화면의 세로 길이를 늘렸을 때, 윗부분 세션이 보이는 에러 수정

- #117

* design: 플랫폼 소개글 세로 중앙 정렬로 수정

- #124

---------

Co-authored-by: pipisebastian <yrt7998@pusan.ac.kr>

src/app/layout.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Flex, Box } from '@chakra-ui/react';
 
 import Sidebar from '@/components/Sidebar';

src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Grid, Text, Flex } from '@chakra-ui/react';
+import { Text, Flex } from '@chakra-ui/react';
 import { useRef } from 'react';
 
 import CropLine from '@/containers/main/CropLine';
@@ -18,23 +18,35 @@ const Page = () => {
   return (
     <MainSection ref={mainSectionRef}>
       <Flex key="title_with_login" pos="relative" justify="center" h="100vh" bgColor="green_dark">
-        <Grid key="title_with_login" gap="80" templateColumns="2fr 1fr" h="100%">
-          <Flex justify="center" direction="column" w="2xl" h="100%" textColor="white" fontWeight="bold">
-            <Text fontSize="100px">DOORE</Text>
-            <Text mb="2" fontSize="40px">
+        <Flex
+          key="title_with_login"
+          justify={{ base: 'center', md: 'space-between' }}
+          w="100%"
+          h="100%"
+          mx={{ base: '0', md: '5%', '2xl': '8%' }}
+        >
+          <Flex
+            justify="center"
+            direction="column"
+            w={{ base: '480px', lg: '680px', '2xl': '960px' }}
+            h="100%"
+            textColor="white"
+          >
+            <Text textStyle="title_xl">DOORE</Text>
+            <Text textStyle="title_md" mb="2" whiteSpace="nowrap">
               community for developer
             </Text>
-            <Text mb="14" fontSize="20px" fontWeight="semibold">
+            <Text textStyle="title_sm" mb="4">
               Investigators have raided the home of the teenage suspect behind the physical attack on ruling party
               lawmaker Bae Hyun-jin as police are trying to determine the exact motive of the...
             </Text>
             <GoogleLoginButton />
           </Flex>
-          <Flex columnGap="10" h="100%">
+          <Flex columnGap={{ base: '6', lg: '8', '2xl': '10' }} display={{ base: 'none', md: 'flex' }} h="100%">
             <CropLine />
             <CropLine reverse />
           </Flex>
-        </Grid>
+        </Flex>
         <ScrollDownButton onClick={() => mainSectionRef.current?.scrollNext()} />
       </Flex>
 

src/containers/main/CropLine/index.tsx

@@ -25,15 +25,15 @@ const CropLine = ({ reverse = false }: CropLineProps) => {
   }));
 
   return (
-    <Box pos="relative" overflow="hidden" w="24" h="100vh">
+    <Box pos="relative" overflow="hidden" w={{ base: '16', lg: '20', '2xl': '24' }} h="100%">
       <Flex className={reverse ? 'rev_rolling_crop' : 'rolling_crop'} pos="absolute" direction="column">
         {cropList.map((crop) => (
-          <Image key={crop.id} w="24" mb="10" alt="crop" src={crop.img} />
+          <Image key={crop.id} mb="10" alt="crop" src={crop.img} />
         ))}
       </Flex>
       <Flex className={reverse ? 'rev_rolling_crop_clone' : 'rolling_crop_clone'} pos="absolute" direction="column">
         {cropList.map((crop) => (
-          <Image key={crop.id} w="24" mb="10" alt="crop" src={crop.img} />
+          <Image key={crop.id} mb="10" alt="crop" src={crop.img} />
         ))}
       </Flex>
     </Box>

src/containers/main/GoogleLoginButton/index.tsx

@@ -10,7 +10,7 @@ const GoogleLoginButton = () => {
     <Button
       justifyContent="start"
       w="fit-content"
-      h="16"
+      h={{ base: '8', lg: '10', '2xl': '14' }}
       p="0"
       _hover={{ opacity: '0.8' }}
       _active={{ opacity: '0.8' }}

src/theme/foundations/textStyles.ts

@@ -26,7 +26,7 @@ const textStyles = {
     fontSize: { base: '8px', lg: '10px', '2xl': '12px' },
   },
   title_xl: {
-    fontSize: { base: '100px', lg: '120px', '2xl': '150px' },
+    fontSize: { base: '80px', lg: '100px', '2xl': '130px' },
     fontWeight: 'black',
   },
   title_bold_xl: {
@@ -38,11 +38,11 @@ const textStyles = {
     fontWeight: 'black',
   },
   title_md: {
-    fontSize: { base: '44px', lg: '48px', '2xl': '52px' },
+    fontSize: { base: '40px', lg: '48px', '2xl': '52px' },
     fontWeight: 'bold',
   },
   title_sm: {
-    fontSize: { base: '24px', lg: '28px', '2xl': '32px' },
+    fontSize: { base: '20px', lg: '28px', '2xl': '32px' },
     fontWeight: 'semibold',
   },
 };