[React] Product Purchage Card

과제 목표

1. function 컴포넌트를 활용해보자
2. UI는 화면에 재대로 나오도록 해보자
3. 기능구현은 할 수 있는 부분까지 최대한 해보자

과제 요구사항

• 모든 것을 완성해야 한다는 것이 아닙니다. 만들 수 있는 부분까지 수행하면 됩니다.
  기능 구현이 어려운 분들은 최소한 컴포넌트 UI가 화면에 표시되도록 도전해 봅시다.
• 컴포넌트 타입은 Function 또는 Class 중 선호하는 방법을 사용합니다.
• 컴포넌트 props, state를 구분해 효율적으로 구현합니다.
• 컴포넌트 상태가 변경되면 UI가 업데이트 되어야 합니다.
• WAI-ARIA 기술 사양을 검토해 웹 접근성을 준수합니다.

먼저 폴더구조는 아래와 같이 생성했고 컴포넌트 폴더를 어떤식으로 분류해서 나누는지 감이 오지않아서
시안에 따라 구분선 기준으로 나누고 진행하다가 재사용할 수 있는 Line, MiddleLine 폴더를 생성했다.

// App.jsx //
export default function App() {
  return (
    <section>
      <Product />
      <Delivery />
      <Counter />
      <Total />
      <PurchaseBtn />
    </section>
  );
}

// Counter.jsx //
export function Counter() {
  const [value, setValue] = useState(1);

  const minus = () => {
    if (value >= 1) setValue(value - 1);
  };

  const plus = () => {
    setValue(value + 1);
  };

  return (
    <>
      <div className="counter">
        <button onClick={minus}>-</button>
        <span className="value">{value}</span>
        <button onClick={plus}>+</button>
      </div>
      <MiddleLine />
    </>
  );
}

아래는 결과물인데 기능구현은 button 클릭하면 카운트가 되는 부분만 적용이 되었다.
아쉬웠던 부분인데 + 또는 - 를 하면 (총 수량 * 가격) 부분을 구현하다가 막혔던 점과
총 상품 금액 ?를 클릭하게 되면 툴팁이 뜨는 부분을 시간상으로 못한 점이 아쉬운 점이다.

보완할 점

1. 기능 구현 Total 부분과 툴팁 부분
2. 카운트 값이 0 이면 구매하기 버튼 비활성화
3. 컴포넌트 분리
4. props 활용

---

[ 3/3일 수정 및 보완사항 ]

• Total props 전달해서 개수에따른 가격 계산 ✅
• PurchaseBtn Count value값이 0이 되면 비활성화 ✅
• | => 구분선 css after로 수정해서 Line 폴더 삭제 ✅
• tooltip 다시보기 🔎

[ 3/4일 수정 및 보완사항 ]

• ?(물음표) button 클릭 후 tooltip 표시 ✅

• 웹 접근성에 대해서는 공부하고 보완할 예정 🔎

---

< 최종 결과물 >

링크 => https://react-ts-hbpc9h.stackblitz.io/