[NUMBLE] 쿠팡클론코딩 챌린지 3주차 회고

💻 과제

이번 과제는 쿠팡의 상품페이지를 직접 구현해보는 미션이었다.

1. 상품 정보 영역
2. 다른 상품 영역
3. 상품 상세 영역
4. SEO를 위한 메타태그 추가(MetaTag Component 추가)
5. next api routes를 이용한 BFF를 활용하여 데이터 가공

💡 해결방법

BFF

제공된 데이터를 실제 페이지에 적용하기 힘든 부분이 존재 ex) html tag로 이루어진 데이터 등

→ 4개의 제공된 엔드포인트에 맞추어 api route를 만들어 데이터를 가공

ProductService와 useRequest

• 1회 차에서 받았던 피드백을 적극 수용하여 구현
• requestService에 axios의 추상화하여 각각 Service에서 상속함
• useQuery를 useRequest로 분리하여 사용

공용 컴포넌트 추출

• 공통으로 사용되는 로직을 분리하여 공용 컴포넌트로 추출하여 재사용성을 높임

Button.tsx

type TShape =
  | "default"
  | "circle"
  | "rounded"
  | "icon"
  | "reverse"
  | "transparent";
type TType = "button" | "submit" | "reset";
type TColor = "default" | "primary";
type TSize = "small" | "default" | "large" | "extraSmall";

interface Props<T extends ElementType = "button"> {
  as?: T;
  children: ReactNode;
  shape?: TShape;
  type?: TType;
  color?: TColor;
  size?: TSize;
  bold?: boolean;
  width?: number;
}

const Button = <T extends ElementType = "button">({
  as,
  children,
  type,
  shape = "default",
  color = "default",
  size = "default",
  bold,
  width,
  ...props
}: Props<T> & ComponentPropsWithoutRef<T>) => {
  const Component = as || "button";

  const styles = css`
    display: flex;
    gap: 2px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.3);
    width: ${width ? width + "px" : "100%"};
    ${bold && "font-weight: bold;"}
    ${getShape(shape)}
    ${getSize(size)}
    ${getColor(color, shape)}
  `;

  return (
    <Component {...props} css={styles} shape={shape} color={color}>
      {children}
    </Component>
  );
};

상품 이미지 확대 기능

• 실제 쿠팡 페이지에 상품 이미지에 마우스 오버 시 확대된 사진을 볼 수 있음.
• MouseMove와 MouseLeave 이벤트를 이용하여 커서 위치를 받아 확대된 이미지를 생성하도록 구현

🤔 아쉬웠던 점

1. 필수 표기 정보 표를 시간이 없어 공용 컴포넌트로 분리하지 못하였다. 이후 이 부분은 Table Component로 분리하여 다른 곳에서도 재사용할 수 있도록 개선해야 할 것 같다.
2. Tab Component 가 다른 비즈니스 로직 없이 선택만 되는 탭만 생성하는데 탭을 선택할때 자동스크롤이나 내용이 바뀌는 비즈니스로직 추가가 필요하다.

🙋 마치며

생각보다 챌린지가 어려웠지만 단단한 설계에 대해 많은 고민을 할 수 있었던 시간이었다.

회사와 병행하는 것이 굉장히 힘들었지만 그만큼 많이 성장할 수 있었던 거 같다.

3주 푹 쉬고 남은 4,5,6주 차도 열심히 하자!