Fix: GardGrid 3개 -> 4개

yulpumta-clone-team · Mar 5, 2023 · f2390e7 · f2390e7
1 parent c2ec450
commit f2390e7
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 7 deletions.
diff --git a/webapp/src/components/CardsGrid/CardsGrid.style.js b/webapp/src/components/CardsGrid/CardsGrid.style.js
@@ -4,8 +4,9 @@ export const Cards = styled.ul`
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 40px 20px;
-  width: 100%;
+  width: 1580px;
   height: 100%;
+  margin: 0 auto;
 `;
 
 export const Empty = styled.div`

diff --git a/webapp/src/components/CardsGrid/index.jsx b/webapp/src/components/CardsGrid/index.jsx
@@ -39,7 +39,7 @@ export default function CardsGrid({
   if (cards.length === 0 && isLoading)
     return (
       <S.Cards>
-        <SimpleListComponent Component={CardLoader} idx={3} />
+        <SimpleListComponent Component={CardLoader} idx={4} />
         {children}
       </S.Cards>
     );

diff --git a/webapp/src/hoc/WithInfiniteScroll.jsx b/webapp/src/hoc/WithInfiniteScroll.jsx
@@ -6,6 +6,7 @@ import UpperButton from 'components/Common/UpperButton';
 import Callback from 'pages/Callback';
 import CardsGrid from 'components/CardsGrid';
 import CardLoader from 'components/Common/Loader/CardLoader';
+import SimpleListComponent from './SimpleListComponent';
 
 WithInfiniteScroll.propTypes = {
   CardComponent: PropTypes.func.isRequired,
@@ -100,7 +101,9 @@ export default function WithInfiniteScroll({
           isLoading={isLoading}
         >
           <RefContainer isShow={refDisplay} ref={loadMoreRef}>
-            {cardList.length !== 0 && isLoading && !error.isError && <CardLoader />}
+            {cardList.length !== 0 && isLoading && !error.isError && (
+              <SimpleListComponent Component={CardLoader} idx={1} />
+            )}
           </RefContainer>
         </CardsGrid>
       )}
@@ -111,5 +114,4 @@ export default function WithInfiniteScroll({
 
 const RefContainer = styled.div`
   display: ${({ isShow }) => isShow};
-  padding: 12px 0;
 `;
diff --git a/webapp/src/layouts/layout.style.js b/webapp/src/layouts/layout.style.js
@@ -9,13 +9,15 @@ export const Header = styled.header`
 `;
 
 export const Main = styled.main`
-  max-width: 1180px;
+  max-width: 1700px;
   margin: 0 auto;
   padding-top: 30px;
+  display: flex;
+  justify-content: center;
 `;
 
 export const Full = styled.main`
-  max-width: 1180px;
+  max-width: 1700px;
   height: 100vh;
   margin: 0 auto;
   ${({ theme: { mixin } }) => mixin.flexCenter({})}

diff --git a/webapp/src/pages/Callback/callback.style.js b/webapp/src/pages/Callback/callback.style.js
@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components/macro';
 
 export const Container = styled.div`
-  max-width: 1180px;
+  width: 100%;
   height: 100vh;
   ${({ theme: { mixin } }) => mixin.flexCenter({})}
   gap: 24px;