fix: 더보기 버튼 오류 수정

boostcampwm-2024 · Dec 3, 2024 · 39c2b9c · 39c2b9c
1 parent 933d109
commit 39c2b9c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git a/frontend/src/components/main/MainLiveSection.tsx b/frontend/src/components/main/MainLiveSection.tsx
@@ -23,10 +23,14 @@ const MainLiveSection = ({ title }: MainLiveSectionProps) => {
     const updateRenderCount = () => {
       const width = window.innerWidth;
 
-      if (width <= 1095) setRenderCount(4);
-      else if (width <= 1434) setRenderCount(6);
-      else if (width <= 1770) setRenderCount(8);
-      else setRenderCount(10);
+      if (textStatus === VIDEO_VIEW.FOLD) {
+        setRenderCount(allData.length);
+      } else {
+        if (width <= 1095) setRenderCount(4);
+        else if (width <= 1434) setRenderCount(6);
+        else if (width <= 1770) setRenderCount(8);
+        else setRenderCount(10);
+      }
     };
 
     updateRenderCount();
@@ -36,7 +40,7 @@ const MainLiveSection = ({ title }: MainLiveSectionProps) => {
     return () => {
       window.removeEventListener('resize', updateRenderCount);
     };
-  }, []);
+  }, [textStatus]);
 
   const handleTextChange = () => {
     setTextStatus(textStatus === VIDEO_VIEW.MORE_VIEW ? VIDEO_VIEW.FOLD : VIDEO_VIEW.MORE_VIEW);

diff --git a/frontend/src/components/main/MainReplaySection.tsx b/frontend/src/components/main/MainReplaySection.tsx
@@ -23,10 +23,14 @@ const MainReplaySection = ({ title }: MainReplaySectionProps) => {
     const updateRenderCount = () => {
       const width = window.innerWidth;
 
-      if (width <= 1095) setRenderCount(4);
-      else if (width <= 1434) setRenderCount(6);
-      else if (width <= 1770) setRenderCount(8);
-      else setRenderCount(10);
+      if (textStatus === VIDEO_VIEW.FOLD) {
+        setRenderCount(allData.length);
+      } else {
+        if (width <= 1095) setRenderCount(4);
+        else if (width <= 1434) setRenderCount(6);
+        else if (width <= 1770) setRenderCount(8);
+        else setRenderCount(10);
+      }
     };
 
     updateRenderCount();
@@ -36,7 +40,7 @@ const MainReplaySection = ({ title }: MainReplaySectionProps) => {
     return () => {
       window.removeEventListener('resize', updateRenderCount);
     };
-  }, []);
+  }, [textStatus]);
 
   const handleTextChange = () => {
     setTextStatus(textStatus === VIDEO_VIEW.MORE_VIEW ? VIDEO_VIEW.FOLD : VIDEO_VIEW.MORE_VIEW);
@@ -91,4 +95,4 @@ const MainSectionContentList = styled.div<{ $textStatus: string }>`
   > div {
     max-width: 100%;
   }
-`;
+`;