[클린코드 리액트 3기 조용준] 커머스 미션

package.json

@@ -21,7 +21,7 @@
     "@tanstack/react-router": "^1.22.5",
     "axios": "^1.6.8",
     "clsx": "^2.1.0",
-    "myfirstpackage-payments": "^0.2.0",
+    "myfirstpackage-payments": "^0.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.13",

src/components/Carousel/Carousel.tsx

@@ -0,0 +1,120 @@
+import { ReactNode } from 'react';
+import ArrowLeft from 'src/assets/arrow-left.png';
+import { css } from '@styled-system/css';
+import { Button } from '../Button';
+
+type CarouselProps = {
+  items: ReactNode[];
+  selectedIndex: number;
+  onSelect: (index: number) => void;
+};
+
+export const Carousel = ({ items, selectedIndex, onSelect }: CarouselProps) => {
+  const totalItems = items.length;
+  const isFirstItem = selectedIndex === 0;
+  const isLastItem = selectedIndex === totalItems - 1;
+
+  const prev = () => {
+    const prevIndex = (selectedIndex - 1 + totalItems) % totalItems;
+    onSelect(prevIndex);
+    onSelect(prevIndex);
+  };
+
+  const next = () => {
+    const nextIndex = (selectedIndex + 1) % totalItems;
+    onSelect((selectedIndex + 1) % totalItems);
+    onSelect(nextIndex);
+  };
+
+  const getTranslateX = () => {
+    const itemWidth = 208;
+    const itemMargin = 10;
+    const lastItemIndex = totalItems - 1;
+    const isLastItem = items.length > 2 && selectedIndex === lastItemIndex;
+    const translateX = selectedIndex * (itemWidth + itemMargin) - (isLastItem ? 20 : 0);
+
+    return `translateX(calc(-${translateX}px))`;
+  };
+
+  return (
+    <section className={carouselStyle}>
+      {items.length !== 0 && (
+        <>
+          <Button
+            onClick={prev}
+            variant="ghost"
+            disabled={isFirstItem}
+            style={{
+              position: 'absolute',
+              left: '0',
+              top: '50%',
+              transform: 'translateY(-50%)',
+            }}
+          >
+            <img src={ArrowLeft} width="20px" height="20px" alt="이전 화면 아이콘" />
+          </Button>
+          <Button
+            onClick={next}
+            variant="ghost"
+            disabled={isLastItem}
+            style={{
+              position: 'absolute',
+              right: '0',
+              top: '50%',
+              transform: 'translateY(-50%)',
+            }}
+          >
+            <img
+              src={ArrowLeft}
+              className={css({
+                transform: 'rotate(180deg)',
+              })}
+              width="20px"
+              height="20px"
+              alt="다음 화면 아이콘"
+            />
+          </Button>
+        </>
+      )}
+      <div className={carouselItemsStyle}>
+        <div className={carouselItemsContainerStyle} style={{ transform: getTranslateX() }}>
+          {items.map((item, index) => {
+            const itemMarginLeft = index === 0 ? 0 : '10px';
+            return (
+              <div key={index} className={carouselItemStyle} style={{ marginLeft: itemMarginLeft }}>
+                {item}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+Carousel.displayName = 'Carousel';
+
+const carouselStyle = css({
+  position: 'relative',
+  width: '100%',
+  height: '130px',
+});
+
+const carouselItemsStyle = css({
+  position: 'absolute',
+  width: '228px',
+  top: '0',
+  left: '50%',
+  transform: 'translateX(-50%)',
+  overflow: 'hidden',
+});
+
+const carouselItemsContainerStyle = css({
+  display: 'flex',
+  transition: 'transform 0.3s',
+});
+
+const carouselItemStyle = css({
+  flexShrink: 0,
+  width: '208px',
+});

src/components/Carousel/index.ts

@@ -0,0 +1,5 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './Carousel';

src/components/Cart/CartOrderProduct.spec.tsx

@@ -18,7 +18,12 @@ describe('CartOrderProduct 컴포넌트', () => {
   const renderCartOrderProduct = () =>
     render(
       <QueryClientProvider client={queryClient}>
-        <CartOrderProduct value={{ ...cartItem }} />
+        <CartOrderProduct
+          type="cart"
+          product={cartItem.product}
+          checked={cartItem.checked}
+          quantity={cartItem.quantity}
+        />
       </QueryClientProvider>,
     );
 

src/components/Cart/CartOrderProduct.tsx

@@ -6,39 +6,42 @@ import { CART_MAX_QUANTITY_VALUE } from '@/constants';
 import { useAlert } from '@/hooks';
 import { useRemoveProductFromCartMutation } from '@/queries';
 import { useCartStore } from '@/store';
-import { Cart } from '@/types';
+import { Product } from '@/types';
 import { formatNumberWithCommas } from '@/utils';
 
 type CartProductProps = {
-  value: Cart;
+  type?: 'cart' | 'order';
+  product: Product;
+  quantity: number;
+  checked?: boolean;
 };
 
 type ProductImageProps = {
-  processedOrder: boolean;
   checked?: boolean;
   imageUrl: string;
+  visibleCheckbox: boolean;
   onCheckboxChange: () => void;
 };
 
 type ProductInfoProps = {
   name: string;
   price: string;
   quantity: number;
-  orderProcess: boolean;
   liked: boolean;
   productId: number;
+  visibleActions: boolean;
+  visibleQuantityCounter: boolean;
   onDeleteCartProduct: () => void;
   onQuantityChange: (quantity: number) => void;
 };
 
-export const CartOrderProduct = ({ value }: CartProductProps) => {
-  const { product, quantity, checked } = value;
+export const CartOrderProduct = ({ type = 'cart', product, quantity, checked }: CartProductProps) => {
   const alert = useAlert();
   const cartStore = useCartStore();
   const removeProductToCartMutation = useRemoveProductFromCartMutation();
 
   const productPrice = `${formatNumberWithCommas(product.price * quantity)}원`;
-  const processedOrder = checked === undefined;
+  const visibleExtras = type === 'cart';
 
   const handleCheckboxChange = () => {
     cartStore.toggleProductCheck(product.id);
@@ -63,28 +66,29 @@ export const CartOrderProduct = ({ value }: CartProductProps) => {
   return (
     <li className={cartProductListItemStyle}>
       <ProductImage
-        processedOrder={processedOrder}
         checked={checked}
         imageUrl={product.imageUrl}
+        visibleCheckbox={visibleExtras}
         onCheckboxChange={handleCheckboxChange}
       />
       <ProductInfo
         name={product.name}
         price={productPrice}
         quantity={quantity}
-        orderProcess={processedOrder}
         liked={Boolean(product.liked)}
         productId={product.id}
+        visibleActions={visibleExtras}
+        visibleQuantityCounter={visibleExtras}
         onDeleteCartProduct={handleDeleteCartProduct}
         onQuantityChange={handleQuantityChange}
       />
     </li>
   );
 };
 
-const ProductImage = ({ processedOrder, checked, imageUrl, onCheckboxChange }: ProductImageProps) => (
+const ProductImage = ({ visibleCheckbox, checked, imageUrl, onCheckboxChange }: ProductImageProps) => (
   <div className={productImageContainerStyle}>
-    {!processedOrder ? (
+    {visibleCheckbox ? (
       <Checkbox checked={checked} onChange={onCheckboxChange} className={productImageCheckboxStyle} />
     ) : null}
     <Image src={imageUrl} alt="주문 상품 이미지" className={productImageStyle} />
@@ -95,16 +99,17 @@ const ProductInfo = ({
   name,
   price,
   quantity,
-  orderProcess,
   liked,
   productId,
+  visibleActions,
+  visibleQuantityCounter,
   onDeleteCartProduct,
   onQuantityChange,
 }: ProductInfoProps) => (
   <div className={productInfoContainerStyle}>
     <Typography className={productNameStyle}>{name}</Typography>
     <div className={productInfoRightContainerStyle}>
-      {!orderProcess ? (
+      {visibleActions ? (
         <div className={productActionButtonsContainerStyle}>
           <LikeIconButton productId={productId} liked={liked} />
           <IconButton
@@ -119,16 +124,16 @@ const ProductInfo = ({
         <div className={productPriceContainerStyle}>
           <Typography className={productPriceStyle}>{price}</Typography>
         </div>
-        {orderProcess ? (
-          <Typography className={productQuantityStyle}>{quantity}개</Typography>
-        ) : (
+        {visibleQuantityCounter ? (
           <QuantityCounter
             value={quantity}
             min={1}
             max={CART_MAX_QUANTITY_VALUE}
             increment={() => onQuantityChange(quantity + 1)}
             decrement={() => onQuantityChange(quantity - 1)}
           />
+        ) : (
+          <Typography className={productQuantityStyle}>{quantity}개</Typography>
         )}
       </div>
     </div>

src/components/Cart/CartSummary.tsx

@@ -1,4 +1,4 @@
-import { memo, PropsWithChildren } from 'react';
+import { memo, MouseEventHandler, PropsWithChildren } from 'react';
 import { FaCirclePlus } from 'react-icons/fa6';
 import { css } from '@styled-system/css';
 import { flex } from '@styled-system/patterns';
@@ -13,6 +13,11 @@ type CartSummaryProps = {
   addCartProduct?: (product: Product) => void;
 };
 
+type CurationProductProps = {
+  imageUrl: string;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+};
+
 export const CartSummary = memo(
   ({
     children,
@@ -42,9 +47,13 @@ export const CartSummary = memo(
                   함께 담으면 좋을 상품 😎
                 </Typography>
                 <div className={productImageWrapperStyle}>
-                  {curationProducts.map((product) => (
-                    <CurationProduct key={product.id} product={product} addCartProduct={addCartProduct} />
-                  ))}
+                  {curationProducts.map((product) => {
+                    const addProductToCart = () => {
+                      addCartProduct?.(product);
+                    };
+
+                    return <CurationProduct key={product.id} imageUrl={product.imageUrl} onClick={addProductToCart} />;
+                  })}
                 </div>
               </>
             )}
@@ -68,17 +77,9 @@ export const CartSummary = memo(
 
 CartSummary.displayName = 'CartSummary';
 
-const CurationProduct = ({
-  product,
-  addCartProduct,
-}: { product: Product } & Pick<CartSummaryProps, 'addCartProduct'>) => (
-  <Button
-    key={product.id}
-    variant="ghost"
-    style={{ padding: 0, margin: 0, position: 'relative' }}
-    onClick={() => addCartProduct?.(product)}
-  >
-    <Image src={product.imageUrl} alt="상품 이미지" className={productImageStyle} />
+const CurationProduct = ({ imageUrl, onClick }: CurationProductProps) => (
+  <Button variant="ghost" style={{ padding: 0, margin: 0, position: 'relative' }} onClick={onClick}>
+    <Image src={imageUrl} alt="상품 이미지" className={productImageStyle} />
     <div
       className={css({
         position: 'absolute',

src/components/Checkbox/hooks/index.ts

@@ -0,0 +1,5 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './useCheckbox';

src/components/Checkbox/hooks/useCheckbox.ts

@@ -0,0 +1,19 @@
+import { useState, useCallback, ChangeEvent } from 'react';
+
+type UseCheckboxResult = {
+  checked: boolean;
+  change: (e: ChangeEvent<HTMLInputElement>) => void;
+};
+
+export const useCheckbox = (initialChecked = false): UseCheckboxResult => {
+  const [checked, setChecked] = useState(initialChecked);
+
+  const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setChecked(e.target.checked);
+  }, []);
+
+  return {
+    checked,
+    change: handleChange,
+  };
+};

src/components/Checkbox/index.ts

@@ -3,3 +3,4 @@
  */
 
 export * from './Checkbox';
+export * from './hooks/index';