diff --git a/frontend/src/components/main/MainLiveSection.tsx b/frontend/src/components/main/MainLiveSection.tsx index 4eace827..736d789b 100644 --- a/frontend/src/components/main/MainLiveSection.tsx +++ b/frontend/src/components/main/MainLiveSection.tsx @@ -16,7 +16,7 @@ const MainLiveSection = ({ title }: MainLiveSectionProps) => { const { data: liveData } = useRecentLive(); const { info, appendInfo } = liveData; - const displayedData = textStatus === VIDEO_VIEW.FOLD ? [...info, ...appendInfo] : info; + const displayedData = [...info, ...appendInfo]; 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 index cafe5fd5..f43ea7ba 100644 --- a/frontend/src/components/main/MainReplaySection.tsx +++ b/frontend/src/components/main/MainReplaySection.tsx @@ -16,7 +16,7 @@ const MainReplaySection = ({ title }: MainReplaySectionProps) => { const { data: replayData } = useRecentReplay(); const { info, appendInfo } = replayData; - const displayedData = textStatus === VIDEO_VIEW.FOLD ? [...info, ...appendInfo] : info; + const displayedData = [...info, ...appendInfo]; const handleTextChange = () => { setTextStatus(textStatus === VIDEO_VIEW.MORE_VIEW ? VIDEO_VIEW.FOLD : VIDEO_VIEW.MORE_VIEW); @@ -66,7 +66,8 @@ const MainSectionContentList = styled.div<{ $textStatus: string }>` grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); overflow: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'hidden' : 'visible')}; - max-height: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'calc(2 * (320px + 30px) - 30px)' : 'none')}; + max-height: ${({ $textStatus }) => + $textStatus === VIDEO_VIEW.MORE_VIEW ? 'calc(2 * (320px + 30px) - 30px)' : 'none'}; > div { max-width: 100%; @@ -74,11 +75,13 @@ const MainSectionContentList = styled.div<{ $textStatus: string }>` @media (max-width: 1700px) { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); - max-height: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'calc(2 * (320px + 30px) - 30px)' : 'none')}; + max-height: ${({ $textStatus }) => + $textStatus === VIDEO_VIEW.MORE_VIEW ? 'calc(2 * (320px + 30px) - 30px)' : 'none'}; } @media (max-width: 1500px) { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - max-height: ${({ $textStatus }) => ($textStatus === VIDEO_VIEW.MORE_VIEW ? 'calc(2 * (300px + 30px) - 30px)' : 'none')}; + max-height: ${({ $textStatus }) => + $textStatus === VIDEO_VIEW.MORE_VIEW ? 'calc(2 * (300px + 30px) - 30px)' : 'none'}; } `;