Feature/#117 팀 랭킹 페이지 반응형 레이아웃 (#122)

* 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: 가로 스크롤바 없애기 - overflow: scroll 로 설정하면 안의 내용에 상관없이 가로, 세로 스크롤바가 무조건 생성됩니다. - overflow: auto 로 설정하면 안의 내용 크기에 따라 스크롤바가 생깁니다. - #117 * design: swiper가 부모요소의 크기 넘지 않도록 설정 - #117 * fix: 화면의 세로 길이를 늘렸을 때, 윗부분 세션이 보이는 에러 수정 - #117 --------- Co-authored-by: pipisebastian <yrt7998@pusan.ac.kr>
BDD-CLUB · Mar 14, 2024 · 127885b · 127885b
1 parent 5795336
commit 127885b
Show file tree

Hide file tree

Showing 10 changed files with 124 additions and 256 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,7 +20,8 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.0.1",
-    "react-textarea-autosize": "^8.5.3"
+    "react-textarea-autosize": "^8.5.3",
+    "swiper": "^11.0.7"
   },
   "devDependencies": {
     "@swc-jotai/react-refresh": "^0.1.0",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -12,9 +12,17 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {
     <html lang="en" className={fonts.rubik.variable}>
       <body>
         <Providers>
-          <Flex pos="relative" minH="100vh">
+          <Flex w="100vw" maxW="100vw" minH="100vh">
             <Sidebar />
-            <Box flex="1">{children}</Box>
+            <Box flex="1">
+              <Box pos="relative" w="100%" h="100%">
+                <Box pos="absolute" w="inherit">
+                  <Box pos="relative" w="100%">
+                    {children}
+                  </Box>
+                </Box>
+              </Box>
+            </Box>
           </Flex>
         </Providers>
       </body>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Box, Grid, Text, Flex } from '@chakra-ui/react';
+import { Grid, Text, Flex } from '@chakra-ui/react';
 import { useRef } from 'react';
 
 import CropLine from '@/containers/main/CropLine';
@@ -38,11 +38,20 @@ const Page = () => {
         <ScrollDownButton onClick={() => mainSectionRef.current?.scrollNext()} />
       </Flex>
 
-      <Box key="main" pos="relative" h="100vh">
+      <Flex
+        key="main"
+        pos="relative"
+        align="center"
+        direction="column"
+        overflow="hidden"
+        w="100%"
+        h="100vh"
+        whiteSpace="nowrap"
+      >
         <TeamRankBG />
         <TeamRankDescription />
         <TeamRankSlider />
-      </Box>
+      </Flex>
     </MainSection>
   );
 };

diff --git a/src/containers/main/MainSection/index.tsx b/src/containers/main/MainSection/index.tsx
@@ -53,6 +53,16 @@ const MainSection = forwardRef(({ children }: MainSectionProps, ref: ForwardedRe
       document.addEventListener('mousemove', mouseMoveHandler);
       document.addEventListener('mouseup', mouseUpHandler, { once: true });
     };
+
+    const widthChange = () => {
+      const prevIndex = sectionsRef.current.currentIndex;
+      sectionsRef.current.currentIndex = prevIndex;
+      sectionsRef.current.sections[prevIndex]?.scrollIntoView({ block: 'end' });
+    };
+
+    window.addEventListener('resize', widthChange);
+    widthChange();
+
     window.scrollTo(0, 0);
     window.addEventListener(
       'wheel',
@@ -67,13 +77,15 @@ const MainSection = forwardRef(({ children }: MainSectionProps, ref: ForwardedRe
       { passive: false },
     );
     window.addEventListener('mousedown', mouseDown);
+
     return () => {
       window.removeEventListener('wheel', () => {});
+      window.removeEventListener('resize', widthChange);
     };
   }, []);
 
   return (
-    <Box ref={baseRef} overflow="scroll" w="100%" h="100vh">
+    <Box ref={baseRef} overflow="auto" w="100%" h="100vh">
       {children.map((child) => (
         <Box key={child?.key} ref={(el) => sectionsRef.current.sections.push(el)}>
           {child}

diff --git a/src/containers/main/TeamRankDescription/index.tsx b/src/containers/main/TeamRankDescription/index.tsx
@@ -1,23 +1,17 @@
-import { Box, Text } from '@chakra-ui/react';
+import { Flex, Text } from '@chakra-ui/react';
 
 const TeamRankDescription = () => {
   return (
-    <Box
-      w="100%"
-      h="fit-content"
-      p="70px 0px 30px 180px"
-      color="#fff"
-      fontFamily="Inter"
-      fontSize="80"
-      fontWeight="900"
-      fontStyle="normal"
-    >
-      <Text>
-        Check
-        <br />
-        Team Ranking !
-      </Text>
-    </Box>
+    <Flex justify={{ base: 'center', md: 'start' }} w="100%">
+      <Flex direction="column" my="2%" ml={{ base: '0%', md: '10%' }} color="white">
+        <Text textStyle="title_lg" display="inline">
+          Check
+        </Text>
+        <Text textStyle="title_lg" display="inline" whiteSpace="nowrap">
+          TEAM RANKING !
+        </Text>
+      </Flex>
+    </Flex>
   );
 };
 

diff --git a/src/containers/main/TeamRankSlider/index.tsx b/src/containers/main/TeamRankSlider/index.tsx
@@ -1,77 +1,56 @@
-import { Box, Grid, GridItem } from '@chakra-ui/react';
+'use client';
+
+import { Box, Flex } from '@chakra-ui/react';
 import { useState } from 'react';
+import { Swiper, SwiperSlide, SwiperClass } from 'swiper/react';
+
+import 'swiper/css';
 
-import TeamCard from '@/containers/main/TeamCard';
 import teamRankInfos from '@/mocks/TeamRanking';
 
 const TeamRankSlider = () => {
-  const [indexX, setIndexX] = useState<number>(0);
-  const [navigationIdx, setNavigationIdx] = useState<number>(0);
-
-  const clickNext = () => {
-    if (indexX > 5 && navigationIdx < teamRankInfos.length - 13) setNavigationIdx((prev) => prev + 1);
-    if (indexX < teamRankInfos.length - 1) setIndexX((prev) => prev + 1);
-  };
-
-  const clickPrev = () => {
-    if (indexX < teamRankInfos.length - 7 && navigationIdx > 0) setNavigationIdx((prev) => prev - 1);
-    if (indexX > 0) setIndexX((prev) => prev - 1);
-  };
-
-  const clickNav = (idx: number) => {
-    setIndexX(idx);
-    if (idx > 6 && idx < teamRankInfos.length - 6) setNavigationIdx(idx - 6);
-  };
+  const [swiperIndex, setSwiperIndex] = useState<number>(0);
+  const [swiper, setSwiper] = useState<SwiperClass>();
 
   return (
-    <Box pos="relative" w="100%" h="400">
-      <Box
-        pos="absolute"
-        left={`calc(50% - ${780 * indexX}px)`}
-        transform="translate(-50%, 0%)"
-        transition="left 1s ease-in-out 0s"
-      >
-        {teamRankInfos.map((info, _) => {
-          const leftScale = 780 * _;
-          return (
-            <Box key={info.id} pos="absolute" left={`calc(50% + ${leftScale}px)`} transform="translate(-50%, 0%)">
-              <TeamCard
-                rank={info.rank}
-                name={info.name}
-                description={info.description}
-                gardenInfos={info.gardenInfos}
-              />
-            </Box>
-          );
-        })}
-      </Box>
-      <Grid pos="absolute" columnGap="780" templateColumns="repeat(2, 1fr)" overflow="hidden" w="100%" h="100%">
-        <GridItem onClick={clickPrev} />
-        <GridItem onClick={clickNext} />
-      </Grid>
-      <Box pos="absolute" top="95%" left="50%" overflow="hidden" w="248px" h="15px" transform="translate(-50%, 0%)">
-        <Box pos="absolute" left={`calc(-${20 * navigationIdx}px)`} w="100%" h="100%">
-          {teamRankInfos.map((info, _) => {
-            const leftScale = 20 * _;
-            return (
+    <Flex align="center" direction="column" w="100%">
+      <Box w="100%">
+        <Swiper
+          centeredSlides
+          slidesPerView="auto"
+          spaceBetween={100}
+          onSwiper={(e) => setSwiper(e)}
+          onSlideChange={(e) => setSwiperIndex(e.activeIndex)}
+        >
+          {teamRankInfos.map((data) => (
+            <SwiperSlide key={data.id} style={{ width: 'fit-content' }}>
               <Box
-                key={info.id + 100}
-                pos="absolute"
-                left={`calc(${leftScale}px)`}
-                w="2"
-                h="2"
-                bg="#fff"
-                opacity={indexX === _ ? 1 : 0.3}
-                borderRadius="100%"
-                onClick={() => {
-                  clickNav(_);
-                }}
-              />
-            );
-          })}
-        </Box>
+                w={{ base: '450px', lg: '600px', '2xl': '720px' }}
+                h={{ base: '300px', lg: '360px', '2xl': '430px' }}
+                bg="white"
+              >
+                {/* TODO - 팀 카드 넣기 */}
+              </Box>
+            </SwiperSlide>
+          ))}
+        </Swiper>
       </Box>
-    </Box>
+
+      <Flex justify="center" w="100%" h="10" mt="8">
+        {teamRankInfos.map((data) => (
+          <Box
+            key={data.id}
+            w="3"
+            h="3"
+            mx="4"
+            bg={data.idx === swiperIndex ? 'white' : 'transparent'}
+            border="2px solid white"
+            borderRadius="100%"
+            onClick={() => swiper?.slideTo(data.idx)}
+          />
+        ))}
+      </Flex>
+    </Flex>
   );
 };