refactor: 이미지, 글꼴 크기 변경

nangkyeonglim · May 22, 2023 · b00e6fd · b00e6fd
1 parent 78b206e
commit b00e6fd
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 22 deletions.
diff --git a/src/components/ProductItem/ProductItem.styles.tsx b/src/components/ProductItem/ProductItem.styles.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 export const ProductItemWrapper = styled.div`
-  width: 400px;
+  width: 320px;
   padding: 47px;
 `;
 
@@ -37,11 +37,14 @@ export const ProductItemImage = styled.img`
   object-fit: cover;
 `;
 
-export const ProductItemTitle = styled.span``;
+export const ProductItemTitle = styled.span`
+  font-size: 14px;
+  margin-right: 10px;
+`;
 
 export const ProductItemPrice = styled.span`
   font-weight: 400;
-  font-size: 20px;
+  font-size: 16px;
   line-height: 27px;
 `;
 

diff --git a/src/pages/CartPage/CartPage.tsx b/src/pages/CartPage/CartPage.tsx
@@ -1,40 +1,31 @@
 import { styled } from 'styled-components';
 import CartPriceSummary from '../../components/CartPriceSummary/CartPriceSummary';
 import CartProductSummary from '../../components/CartProductSummary/CartProductSummary';
-import useGetData from '../../hooks/useGetData';
-import { CartItem } from '../../types';
-import { useSetRecoilState } from 'recoil';
-import { cartListAtom } from '../../stores/cartItemsStore';
-import { useEffect } from 'react';
 
 const CartPage = () => {
-  const { data: cartList, getData: getCartList } = useGetData<CartItem[]>('/cart-items');
-  const setCartList = useSetRecoilState(cartListAtom);
-
-  useEffect(() => {
-    getCartList();
-  }, [getCartList]);
-
-  useEffect(() => {
-    if (cartList) setCartList(cartList);
-  }, [cartList, setCartList]);
-
   return (
-    <>
+    <Wrapper>
       <Title>장바구니</Title>
       <Content>
         <CartProductSummary />
         <CartPriceSummary />
       </Content>
-    </>
+    </Wrapper>
   );
 };
 
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
 const Title = styled.h2`
+  flex: 0 0 128px;
   padding: 58px 0 29px 0;
   border-bottom: 4px solid #333333;
   font-weight: 700;
-  font-size: 32px;
+  font-size: 24px;
   line-height: 37px;
 
   text-align: center;
@@ -45,6 +36,7 @@ const Title = styled.h2`
 
 const Content = styled.div`
   display: flex;
+  flex: 1;
   justify-content: space-between;
   padding-top: 34px;
   gap: 100px;