style: 무한 스크롤 스피너 가운데 정렬

sopt-makers · Oct 28, 2023 · fd70426 · fd70426
1 parent 437ce00
commit fd70426
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/src/views/ProjectPage/components/project/ProjectCardList/index.tsx b/src/views/ProjectPage/components/project/ProjectCardList/index.tsx
@@ -12,19 +12,17 @@ export default function ProjectCardList({ projectList }: ProjectCardList) {
   const { data, isNextPage, ref } = useInfiniteScroll(projectList);
 
   return (
-    <>
+    <S.ProjectFeed>
       <S.CardList>
         {data.map((project) => (
           <ProjectCard key={project.id} project={project} />
         ))}
       </S.CardList>
       {isNextPage && (
-        <div ref={ref}>
-          <div>
-            <OvalSpinner />
-          </div>
-        </div>
+        <S.SpinnerWrapper ref={ref}>
+          <OvalSpinner />
+        </S.SpinnerWrapper>
       )}
-    </>
+    </S.ProjectFeed>
   );
 }
diff --git a/src/views/ProjectPage/components/project/ProjectCardList/style.ts b/src/views/ProjectPage/components/project/ProjectCardList/style.ts
@@ -1,5 +1,11 @@
 import styled from '@emotion/styled';
 
+export const ProjectFeed = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 50px;
+`;
+
 export const CardList = styled.div`
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
@@ -17,3 +23,9 @@ export const CardList = styled.div`
     width: 100%;
   }
 `;
+
+export const SpinnerWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+`;