Merge pull request #95 from Stack-Knowledge/feature/missionCarousel

[Client] missionCarousel Responsive

Author: TaerangLee

packages/common/src/assets/svg/VectorIcon.tsx

@@ -5,8 +5,8 @@ interface VectorIconProps {
 const VectorIcon: React.FC<VectorIconProps> = ({ direction }) => (
   <svg
     xmlns='http://www.w3.org/2000/svg'
-    width='80'
-    height='80'
+    width='5rem'
+    height='5rem'
     viewBox='0 0 80 80'
     fill='none'
     transform={`${direction === 'right' ? 'rotate(-180)' : ''}`}

packages/common/src/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useWindowResizeEffect } from './useWindowResizeEffect';

packages/common/src/hooks/useWindowResizeEffect.ts

@@ -1,9 +1,11 @@
+'use client';
+
 import { useEffect } from 'react';
 
-import { useWidthState } from 'stores';
+import { useWidthState } from 'common/stores';
 
 const useWindowResizeEffect = () => {
-  const { setWidth } = useWidthState();
+  const { width, setWidth } = useWidthState();
 
   const handleResize = () => {
     setWidth(window.innerWidth);
@@ -16,6 +18,8 @@ const useWindowResizeEffect = () => {
       window.removeEventListener('resize', handleResize);
     };
   }, []);
+
+  return width;
 };
 
 export default useWindowResizeEffect;

packages/common/src/index.ts

@@ -3,3 +3,5 @@ export * from './styles';
 export * from './utils';
 export * from './assets';
 export * from './PageContainer';
+export * from './hooks';
+export * from './stores';

projects/client/src/PageContainer/MissionListPage/index.tsx

@@ -10,7 +10,9 @@ const MissionListPage = () => {
 
   return (
     <S.PageWrapper>
-      <S.ScoringText>문제</S.ScoringText>
+      <S.ScoringTextContainer>
+        <S.ScoringText>문제</S.ScoringText>
+      </S.ScoringTextContainer>
       {data?.length > 0 ? <MissionCarousel /> : <h1>문제가 없습니다...</h1>}
     </S.PageWrapper>
   );

projects/client/src/PageContainer/MissionListPage/style.ts

@@ -9,6 +9,15 @@ export const PageWrapper = styled.div`
   padding-bottom: 10.625rem;
 `;
 
+export const ScoringTextContainer = styled.div`
+  @media ${({ theme }) => theme.breakPoint[1024]} {
+    width: calc(100vw - 20rem);
+  }
+  @media (max-width: 750px) {
+    width: calc(100vw - 18.5rem);
+  }
+`;
+
 export const ScoringText = styled.h2`
   ${({ theme }) => theme.typo.h2}
   color: ${({ theme }) => theme.color.black};

projects/client/src/components/MissionCarousel/index.tsx

@@ -13,31 +13,55 @@ import { useEffect, useState } from 'react';
 
 import { MissionListItemType } from 'types';
 
+import { useWindowResizeEffect } from 'common';
+
 const MissionCarousel = () => {
   const [pageIndex, setPageIndex] = useState<number>(0);
   const [missionList, setMissionList] = useState<MissionListItemType[][]>();
 
+  const width = useWindowResizeEffect();
+
   const { data } = useGetMissionList();
   const { push } = useRouter();
 
+  const [count, setCount] = useState<number>(10);
+
   const onCardClick = (missionId: string) => {
     push(`/mission/resolve/${missionId}`);
   };
 
+  const widthHandle = () => {
+    if (852 <= width && width <= 1920) {
+      setCount(10);
+    } else if (610 <= width && width < 852) {
+      setCount(8);
+    } else if (525 <= width && width < 610) {
+      setCount(6);
+    } else if (281 <= width && width < 525) {
+      setCount(4);
+    } else {
+      setCount(2);
+    }
+  };
+
+  useEffect(() => {
+    widthHandle();
+  }, [width]);
+
   useEffect(() => {
     const newMissionList: MissionListItemType[][] = [];
     let temp: MissionListItemType[] = [];
     data?.forEach((item, index) => {
       temp.push(item);
-      if ((index + 1) % 10 === 0) {
+      if ((index + 1) % count === 0) {
         newMissionList.push(temp);
         temp = [];
       }
     });
     if (data)
       newMissionList.push(data.slice(newMissionList.length * 10, data.length));
     setMissionList(newMissionList);
-  }, [data]);
+  }, [data, width]);
 
   const moveLeft = () => {
     if (pageIndex > 0) setPageIndex((prev) => prev - 1);
@@ -59,7 +83,7 @@ const MissionCarousel = () => {
           <S.PointerWrapper onClick={moveLeft}>
             <VectorIcon direction='left' />
           </S.PointerWrapper>
-          <S.ContentWrapper>
+          <S.ContentWrapper taskCard={count / 2}>
             {missionList[pageIndex]?.map((item, index) => (
               <TaskCard
                 onClick={() => onCardClick(item.id)}

projects/client/src/components/MissionCarousel/style.ts

@@ -6,11 +6,18 @@ export const CarouselWrapper = styled.div`
   gap: 3rem;
 `;
 
-export const ContentWrapper = styled.div`
+export const ContentWrapper = styled.div<{ taskCard?: number }>`
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(${(props) => props.taskCard}, 1fr);
   grid-template-rows: repeat(2, 1fr);
   gap: 4.125rem 3rem;
+
+  @media ${({ theme }) => theme.breakPoint[1024]} {
+    width: calc(100vw - 20rem);
+  }
+  @media (max-width: 750px) {
+    width: calc(100vw - 18.5rem);
+  }
 `;
 
 export const PointerWrapper = styled.div`