Merge pull request #97 from Stack-Knowledge/hotfix/responsive

[Hotfix] Update responsive

Author: TaerangLee

packages/common/src/components/MainContents/style.ts

@@ -16,7 +16,7 @@ export const MissionText = styled.h4`
   color: ${({ theme }) => theme.color.black};
   font-weight: 600;
   margin: 4.0625rem 0 1.25rem;
-  width: 80rem;
+  width: 100%;
 `;
 
 export const ContentWrapper = styled.div`

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

@@ -11,17 +11,22 @@ export const PageWrapper = styled.div`
 
 export const ScoringTextContainer = styled.div`
   @media ${({ theme }) => theme.breakPoint[1024]} {
-    width: calc(100vw - 20rem);
+    width: calc(100vw - 12.5rem);
   }
-  @media (max-width: 750px) {
-    width: calc(100vw - 18.5rem);
+
+  @media ${({ theme }) => theme.breakPoint[600]} {
+    width: calc(100vw - 3rem);
   }
 `;
 
 export const ScoringText = styled.h2`
   ${({ theme }) => theme.typo.h2}
   color: ${({ theme }) => theme.color.black};
   font-weight: 600;
-  width: 82rem;
+  width: 80rem;
   margin: 3.75rem 0 1.75rem;
+
+  @media (max-width: 1240px) {
+    width: calc(100vw - 12.5rem);
+  }
 `;

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

@@ -30,37 +30,36 @@ const MissionCarousel = () => {
     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);
-    }
+  const resetCount = async () => {
+    let cnt: number;
+    if (width > 1480) cnt = 10;
+    else if (width > 1020) cnt = 8;
+    else if (width > 515) cnt = 6;
+    else if (width > 380) cnt = 4;
+    else cnt = 2;
+    await setCount(cnt);
+    return cnt;
   };
 
-  useEffect(() => {
-    widthHandle();
-  }, [width]);
+  const setArray = async () => {
+    const cnt = await resetCount();
 
-  useEffect(() => {
     const newMissionList: MissionListItemType[][] = [];
     let temp: MissionListItemType[] = [];
     data?.forEach((item, index) => {
       temp.push(item);
-      if ((index + 1) % count === 0) {
+      if ((index + 1) % cnt === 0) {
         newMissionList.push(temp);
         temp = [];
       }
     });
     if (data)
-      newMissionList.push(data.slice(newMissionList.length * 10, data.length));
+      newMissionList.push(data.slice(newMissionList.length * cnt, data.length));
     setMissionList(newMissionList);
+  };
+
+  useEffect(() => {
+    setArray();
   }, [data, width]);
 
   const moveLeft = () => {

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

@@ -10,14 +10,8 @@ export const ContentWrapper = styled.div<{ taskCard?: number }>`
   display: grid;
   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);
-  }
+  gap: 4.125rem 2.5rem;
+  width: fit-content;
 `;
 
 export const PointerWrapper = styled.div`