[client] cart페이지 반응형 구현

apps/client/src/components/CheckProduct/index.tsx

@@ -3,6 +3,8 @@
 import { CheckBox, MinusIcon, PlusIcon, XIcon } from 'client/assets';
 import * as S from './style';
 import { useEffect, useState } from 'react';
+import { useStore } from 'client/stores';
+import { MobileWidth } from 'shared/constants';
 
 interface Props {
   productImg: string;
@@ -29,6 +31,12 @@ const CheckProduct: React.FC<Props> = ({
 }) => {
   const [priceCount, setPriceCount] = useState<number>(1);
   const [isClicked, setIsClicked] = useState<boolean>(false);
+  const { width } = useStore();
+  const [isMobile, setIsMobile] = useState<boolean>(false);
+
+  useEffect(() => {
+    setIsMobile(width <= MobileWidth);
+  }, [width]);
 
   useEffect(() => {
     setIsClicked(allClick);
@@ -54,7 +62,7 @@ const CheckProduct: React.FC<Props> = ({
     : productPrice.toLocaleString();
 
   return (
-    <S.Wrapper>
+    <S.Wrapper isMobile={isMobile}>
       <S.ProductInfoBox>
         <S.CheckBoxContainer onClick={handleCheckboxClick}>
           <CheckBox isClicked={isClicked} />
@@ -69,7 +77,7 @@ const CheckProduct: React.FC<Props> = ({
         </S.ProductMainInfo>
       </S.ProductInfoBox>
 
-      <S.PriceInfoBox>
+      <S.PriceInfoBox isMobile={isMobile}>
         <S.PriceCount>
           <S.CountBtn onClick={() => cntCalculator(false)}>
             <MinusIcon />
@@ -83,7 +91,7 @@ const CheckProduct: React.FC<Props> = ({
         </S.PriceCount>
 
         <S.DetailPriceInfo>
-          <S.PriceTextBox>
+          <S.PriceTextBox isMobile={isMobile}>
             {isSale ? (
               <>
                 <S.PriceText>{salePrice}원</S.PriceText>
@@ -93,7 +101,7 @@ const CheckProduct: React.FC<Props> = ({
               <S.PriceText>{productPrice.toLocaleString()}원</S.PriceText>
             )}
           </S.PriceTextBox>
-          <S.XButton onClick={onDelete}>
+          <S.XButton onClick={onDelete} isMobile={isMobile}>
             <XIcon />
           </S.XButton>
         </S.DetailPriceInfo>

apps/client/src/components/CheckProduct/style.ts

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
-export const Wrapper = styled.div`
-  display: flex;
+export const Wrapper = styled.div<{ isMobile: boolean }>`
+  display: ${({ isMobile }) => (isMobile ? 'inline-block' : 'flex')};
   width: 100%;
   justify-content: space-between;
   align-items: center;
@@ -51,10 +51,13 @@ export const ProductColor = styled.p`
   color: ${({ theme }) => theme.color.grey[500]};
 `;
 
-export const PriceInfoBox = styled.div`
+export const PriceInfoBox = styled.div<{ isMobile: boolean }>`
   display: flex;
   align-items: center;
-  gap: 3.75rem;
+  width: ${({ isMobile }) => (isMobile ? '100%' : 'none')};
+  padding-left: ${({ isMobile }) => (isMobile ? '2rem' : '0')};
+  justify-content: ${({ isMobile }) => (isMobile ? 'space-between' : 'none')};
+  gap: 60px;
 `;
 
 export const PriceCount = styled.div`
@@ -90,17 +93,17 @@ export const DetailPriceInfo = styled.div`
   gap: 1.5rem;
 `;
 
-export const XButton = styled.button`
-  display: flex;
+export const XButton = styled.button<{ isMobile: boolean }>`
+  display: ${({ isMobile }) => (isMobile ? 'none' : 'flex')};
   width: 1.5rem;
   height: 1.5rem;
   justify-content: center;
   align-items: center;
 `;
 
-export const PriceTextBox = styled.div`
+export const PriceTextBox = styled.div<{ isMobile: boolean }>`
   display: flex;
-  flex-direction: column;
+  flex-direction: ${({ isMobile }) => (isMobile ? 'row-reverse' : 'column')};
   align-items: flex-start;
   gap: 0.75rem;
 `;

apps/client/src/layouts/cart/index.tsx

@@ -1,56 +1,11 @@
 'use client';
 
-import * as S from './style';
-
-import { PCHeader } from 'shared';
-import { SelectShoppingCart, PaymentInfo } from 'client/components';
-
-import { useGetCartInfo } from 'shared/hooks';
+import { useGetLayoutByWidth } from 'client/hooks';
+import { CartMobileLayout } from 'client/mobileLayout';
+import { CartPCLayout } from 'client/pcLayout';
 
 const CartLayout = () => {
-  const { data: data } = useGetCartInfo();
-
-  const MokProduct =
-    data?.map((item) => {
-      return {
-        productImg: item.product.images[0].url,
-        productName: item.product.name,
-        productColor: item.option.name,
-        productPrice: item.product.price,
-        productPercent: item.product.discount * 100,
-        isSale: item.option.status === 'on_sale',
-      };
-    }) || [];
-
-  return (
-    <>
-      <PCHeader type={'client_clear'} />
-      <S.Wrapper>
-        <S.Container>
-          <S.LeftBox>
-            <SelectShoppingCart products={MokProduct} />
-          </S.LeftBox>
-          <S.RightBox>
-            <PaymentInfo
-              productPrice={''}
-              discountPrice={''}
-              deliveryPrice={''}
-              requiredPrice={''}
-              isFreeDelivery={false}
-            />
-            <S.TextBox>
-              <S.InfoText>
-                [주문완료] 상태일 경우에만 주문 취소 가능해요.
-              </S.InfoText>
-              <S.InfoText>
-                [마이페이지 {'>'} 주문내역]에서 취소하실 수 있어요.{' '}
-              </S.InfoText>
-            </S.TextBox>
-          </S.RightBox>
-        </S.Container>
-      </S.Wrapper>
-    </>
-  );
+  return useGetLayoutByWidth(<CartPCLayout />, <CartMobileLayout />);
 };
 
 export default CartLayout;

apps/client/src/mobileLayout/cart/index.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import * as S from './style';
+
+import { MobileHeader } from 'shared';
+import { SelectShoppingCart, PaymentInfo } from 'client/components';
+
+import { useGetCartInfo } from 'shared/hooks';
+
+const CartMobileLayout = () => {
+  const { data: data } = useGetCartInfo();
+
+  const MokProduct =
+    data?.map((item) => {
+      return {
+        productImg: item.product.images[0].url,
+        productName: item.product.name,
+        productColor: item.option.name,
+        productPrice: item.product.price,
+        productPercent: item.product.discount * 100,
+        isSale: item.option.status === 'on_sale',
+      };
+    }) || [];
+
+  return (
+    <>
+      <MobileHeader logo={'장바구니'} />
+      <S.Wrapper>
+        <S.Container length={MokProduct.length}>
+          <S.TopBox>
+            <SelectShoppingCart products={MokProduct} />
+          </S.TopBox>
+          <S.BottomBox>
+            <PaymentInfo
+              productPrice={''}
+              discountPrice={''}
+              deliveryPrice={''}
+              requiredPrice={''}
+              isFreeDelivery={false}
+            />
+            <S.TextBox>
+              <S.InfoText isTitle>
+                주문 내용을 확인했으며 서비스 약관 및 결제에 동의합니다.
+              </S.InfoText>
+              <S.InfoText>[필수] 정자결제대행 이용 동의</S.InfoText>
+              <S.InfoText>[필수] 개인정보 제 3자 제공 동의</S.InfoText>
+              <S.InfoText>
+                [필수] 만 14세 이상 이용자, 개인정보 수집 및 이용 동의
+              </S.InfoText>
+              <S.InfoText isTitle>
+                [마이페이지 {'>'} 주문내역]에서 취소하실 수 있어요.{' '}
+              </S.InfoText>
+              <S.InfoText>
+                낮은 확률로 상품이 품절일 가능성이 있어요, 이에 품절 시 빠르게
+                환불 처리를 도와드려요.
+                <br /> 결제하신 수단으로 취소 돼요.
+                <br /> 환불 받으신 날짜 기준으로 3~5일(주말 제외) 후 환불 처리
+                돼요.
+                <br /> 무통장 입금 환불의 경우, 예금정보가 일치해야 환불 처리가
+                가능하니 은행명, 예금주명을 정확히 기재 부탁드려요.
+              </S.InfoText>
+            </S.TextBox>
+          </S.BottomBox>
+        </S.Container>
+      </S.Wrapper>
+    </>
+  );
+};
+
+export default CartMobileLayout;

apps/client/src/mobileLayout/cart/style.ts

@@ -0,0 +1,47 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  width: 100%;
+  height: auto;
+  display: flex;
+  background-color: ${({ theme }) => theme.color.background};
+  justify-content: center;
+  align-items: center;
+`;
+
+export const Container = styled.div<{ length: number }>`
+  width: 90vw;
+  height: ${({ length }) => (length === 0 ? '100vh' : '100%')};
+  display: flex;
+  margin: 4.0625rem 0;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+`;
+
+export const TopBox = styled.div`
+  width: 100%;
+`;
+
+export const BottomBox = styled.div`
+  width: 100%;
+  height: 80%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1.25rem;
+  margin-top: 3.5rem;
+`;
+
+export const TextBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.25rem;
+`;
+
+export const InfoText = styled.span<{ isTitle?: boolean }>`
+  ${({ theme }) => theme.typo.label};
+  color: ${({ theme, isTitle }) =>
+    isTitle ? theme.color.grey[600] : theme.color.grey[500]};
+`;

apps/client/src/mobileLayout/index.ts

@@ -1,2 +1,3 @@
 export { default as LoginMobileLayout } from './login';
 export { default as ProductListMobileLayout } from './productList';
+export { default as CartMobileLayout } from './cart';

apps/client/src/pcLayout/cart/index.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import * as S from './style';
+
+import { PCHeader } from 'shared';
+import { SelectShoppingCart, PaymentInfo } from 'client/components';
+
+import { useGetCartInfo } from 'shared/hooks';
+
+const CartPCLayout = () => {
+  const { data: data } = useGetCartInfo();
+
+  const MokProduct =
+    data?.map((item) => {
+      return {
+        productImg: item.product.images[0].url,
+        productName: item.product.name,
+        productColor: item.option.name,
+        productPrice: item.product.price,
+        productPercent: item.product.discount * 100,
+        isSale: item.option.status === 'on_sale',
+      };
+    }) || [];
+
+  return (
+    <>
+      <PCHeader type={'client_clear'} />
+      <S.Wrapper>
+        <S.Container>
+          <S.LeftBox>
+            <SelectShoppingCart products={MokProduct} />
+          </S.LeftBox>
+          <S.RightBox>
+            <PaymentInfo
+              productPrice={''}
+              discountPrice={''}
+              deliveryPrice={''}
+              requiredPrice={''}
+              isFreeDelivery={false}
+            />
+            <S.TextBox>
+              <S.InfoText>
+                [주문완료] 상태일 경우에만 주문 취소 가능해요.
+              </S.InfoText>
+              <S.InfoText>
+                [마이페이지 {'>'} 주문내역]에서 취소하실 수 있어요.{' '}
+              </S.InfoText>
+            </S.TextBox>
+          </S.RightBox>
+        </S.Container>
+      </S.Wrapper>
+    </>
+  );
+};
+
+export default CartPCLayout;

apps/client/src/pcLayout/index.ts

@@ -1,2 +1,3 @@
 export { default as LoginPCLayout } from './login';
 export { default as ProductListPCLayout } from './productList';
+export { default as CartPCLayout } from './cart';