Merge pull request #201 from prgrms-web-devcourse-final-project/feat/#…

…199 Feat/#199 로딩 시 min-height 추가 및 smooth 삭제
prgrms-web-devcourse-final-project · Dec 9, 2024 · b0e4235 · b0e4235
2 parents 1a1ecad + 8a378d1
commit b0e4235
Show file tree

Hide file tree

Showing 18 changed files with 35 additions and 20 deletions.
diff --git a/src/components/ScrollToTopButton/index.tsx b/src/components/ScrollToTopButton/index.tsx
@@ -5,7 +5,7 @@ const ScrollToTopButton = () => {
   const scrollToTop = () => {
     window.scrollTo({
       top: 0,
-      behavior: 'smooth',
+      // behavior: 'smooth',
     });
     console.log('페이지 상단으로 이동');
   };

diff --git a/src/components/TeamSelectSection/index.tsx b/src/components/TeamSelectSection/index.tsx
@@ -27,7 +27,7 @@ const TeamSelectSection = ({
     const selectedRef = teamRefs.current.get(selectedTeam)
     if (selectedRef) {
       selectedRef.scrollIntoView({
-        behavior: 'smooth',
+        // behavior: 'smooth',
         block: 'nearest',
         inline: 'center',
       })

diff --git a/src/hooks/useTopRef.ts b/src/hooks/useTopRef.ts
@@ -5,7 +5,7 @@ export const useTopRef = () => {
 
   const handleUpButtonClick = () => {
     topRef.current?.scrollIntoView({
-      behavior: 'smooth',
+      // behavior: 'smooth',
     })
   }
 

diff --git a/src/pages/GoodsListPage/style.ts b/src/pages/GoodsListPage/style.ts
@@ -42,7 +42,8 @@ export const GoodsCardWrap = styled.div`
   align-items: flex-start;
   flex-wrap: wrap;
   gap: 30px 20px;
-
+  min-height: 34em;
+  
   & > a {
     display: block;
     width: calc(50% - 10px);

diff --git a/src/pages/MainPage/GoodsCardSection/index.tsx b/src/pages/MainPage/GoodsCardSection/index.tsx
@@ -36,11 +36,7 @@ const GoodsCardSection = ({ selectedTeam }: GoodsCardSectionProps) => {
   const teamName = kboTeamList[selectedTeam]?.team || 'KBO'
 
   if (isLoading) {
-    return (
-      <GoodsCardContainer>
-        <p>로딩 중...</p>
-      </GoodsCardContainer>
-    )
+    return <GoodsCardContainer></GoodsCardContainer>
   }
 
   if (isError || goodsCards.length === 0) {

diff --git a/src/pages/MainPage/GoodsCardSection/style.ts b/src/pages/MainPage/GoodsCardSection/style.ts
@@ -2,7 +2,7 @@ import styled from 'styled-components'
 import { theme } from '@styles/theme'
 
 export const GoodsCardContainer = styled.div`
-
+  min-height: 32em;
   padding: 0 1.25em;
   border-bottom: 1px solid ${theme.fontColor.cwhite};
 

diff --git a/src/pages/MainPage/MatchUpSection/index.tsx b/src/pages/MainPage/MatchUpSection/index.tsx
@@ -16,6 +16,7 @@ import {
   Weather,
   MatchUpContainer,
   PaginationContainer,
+  LoadingContainer,
 } from './style'
 import { kboTeamInfo, kboTeamList } from '@constants/kboInfo'
 
@@ -45,9 +46,8 @@ const MatchUpSection = ({ selectedTeam }: MatchUpSectionProps) => {
   })
 
   if (isLoading) {
-    return <div>로딩 중...</div>
+    return <LoadingContainer></LoadingContainer>
   }
-
   if (matches.length === 0) {
     return (
       <ErrorContainer>{`${kboTeamList[selectedTeam]?.team}의 매치업 데이터가 없습니다.`}</ErrorContainer>

diff --git a/src/pages/MainPage/MatchUpSection/style.ts b/src/pages/MainPage/MatchUpSection/style.ts
@@ -91,3 +91,7 @@ export const Weather = styled.div`
   font-size: ${theme.fontSize.medium};
   color: ${theme.fontColor.white};
 `;
+
+export const LoadingContainer = styled.div`
+  min-height: 11em;
+`;
diff --git a/src/pages/MainPage/MateCardSection/index.tsx b/src/pages/MainPage/MateCardSection/index.tsx
@@ -30,7 +30,7 @@ const MateCardSection = ({ selectedTeam }: MateCardSectionProps) => {
   const teamName = kboTeamList[selectedTeam]?.team || 'KBO'
 
   if (isLoading) {
-    return <div>로딩 중...</div>
+    return <MateCardContainer></MateCardContainer>
   }
 
   if (mateCards.length === 0) {

diff --git a/src/pages/MainPage/MateCardSection/style.ts b/src/pages/MainPage/MateCardSection/style.ts
@@ -7,6 +7,8 @@ export const MoreSection = styled.div`
   border-bottom: 1px solid ${theme.fontColor.cwhite};
 `
 export const MateCardContainer = styled.div`
+  min-height: 27em;
+
   h3 {
     padding: 1em 1.25em;
   }

diff --git a/src/pages/MainPage/RankingSection/index.tsx b/src/pages/MainPage/RankingSection/index.tsx
@@ -51,7 +51,7 @@ const RankingSection = () => {
   })
 
   if (isLoading) {
-    return <RankingContainer>로딩 중...</RankingContainer>
+    return <RankingContainer></RankingContainer>
   }
 
   if (isError) {

diff --git a/src/pages/MainPage/RankingSection/style.ts b/src/pages/MainPage/RankingSection/style.ts
@@ -3,7 +3,7 @@ import { theme } from '@styles/theme'
 
 export const RankingContainer = styled.div`
   width: 100%;
-
+  min-height: 25em;
 
   h3 {
     padding: 0.5em 1.25em;

diff --git a/src/pages/MainPage/ResultSection/ResultList/index.tsx b/src/pages/MainPage/ResultSection/ResultList/index.tsx
@@ -4,6 +4,7 @@ import {
   RivalTeam,
   ResultListTitle,
   ErrorContainer,
+  LoadingContainer
 } from './style'
 import { kboTeamInfo, kboTeamList } from '@constants/kboInfo'
 import fetchApi from '@apis/ky'
@@ -42,7 +43,9 @@ const ResultList = ({ teamKey }: ResultListProps) => {
   })
 
   if (isLoading) {
-    return <p>로딩 중...</p>
+    return (
+      <LoadingContainer></LoadingContainer>
+    )
   }
 
   if (isError || !gameResults.length) {

diff --git a/src/pages/MainPage/ResultSection/ResultList/style.ts b/src/pages/MainPage/ResultSection/ResultList/style.ts
@@ -18,7 +18,6 @@ export const ResultListTable = styled.table`
   color: ${theme.fontColor.black};
   margin-bottom: 1.25em;
 
-
   thead {
     display: none;
   }
@@ -103,3 +102,6 @@ export const RivalTeam = styled.div`
     font-weight: bold;
   }
 `
+export const LoadingContainer = styled.div`
+  min-height: 25em;
+`
diff --git a/src/pages/MainPage/ResultSection/ResultSummary/index.tsx b/src/pages/MainPage/ResultSection/ResultSummary/index.tsx
@@ -35,7 +35,8 @@ const ResultSummary = ({ selectedTeam }: ResultSummaryProps) => {
     enabled: !!teamId,
   })
 
-  if (isLoading) return <div>로딩 중...</div>
+  if (isLoading)
+    return <ResultSummaryContainer $teamId={teamId}></ResultSummaryContainer>
   if (error instanceof Error) return <div>오류: {error.message}</div>
 
   if (!data) return <div>순위 요약 데이터를 불러오지 못했습니다.</div>

diff --git a/src/pages/MainPage/ResultSection/ResultSummary/style.ts b/src/pages/MainPage/ResultSection/ResultSummary/style.ts
@@ -7,6 +7,7 @@ interface ResultSummaryContainerProps {
 }
 
 export const ResultSummaryContainer = styled.div<ResultSummaryContainerProps>`
+  min-height: 2em;
   display: flex;
   justify-content: space-between;
   align-items: center;

diff --git a/src/pages/MateListPage/index.tsx b/src/pages/MateListPage/index.tsx
@@ -5,6 +5,7 @@ import {
   FilterSelectOptionWrap,
   FilterWrap,
   TeamSelectWrap,
+  FilteredMateList
 } from './style'
 
 import PillButton from '@components/PillButton'
@@ -120,15 +121,15 @@ const MateListPage = () => {
           )}
         </FilterSelectOptionWrap>
       </FilterWrap>
-      <div>
+      <FilteredMateList>
         {mateList.map((mate) => (
           <MainMateCard
             key={mate.postId}
             card={mate}
           />
         ))}
         <div ref={ref} />
-      </div>
+      </FilteredMateList>
 
       <FloatButton
         path={ROUTE_PATH.MATE_POSTING}

diff --git a/src/pages/MateListPage/style.ts b/src/pages/MateListPage/style.ts
@@ -67,3 +67,7 @@ export const FilterModalLabel = styled.p`
 export const FilterButtonWrap = styled.div`
   margin-top: 0.75em;
 `
+
+export const FilteredMateList = styled.div`
+  min-height: 34em;
+`