9주차 - 나루/이유진 워크북 과제 제출

[YuJin020303]

✅ n주차 워크북 완료 🎉

워크북을 완료한 챌린저분들, 수고 많으셨습니다!
이곳에 학습 진행 중 트러블슈팅(문제 해결 경험), 커밋별 설명, 그리고 소감을 자유롭게 남겨주세요.
서로의 경험을 공유하며 성장해봐요! 🚀

---

🛠️ 트러블슈팅 (Troubleshooting)

- 학습 중 겪었던 문제와 해결 과정을 기록해주세요!
- 다른 챌린저들에게 도움을 줄 수 있도록 해결 방법도 함께 남겨주시면 좋아요.
- 아래에 본인이 수정해서 작성하시면 됩니다. 없으면 안적어주셔도 됩니다 ~ 

문제

특정 함수에서 값이 예상대로 출력되지 않음  

원인 분석

리스트의 인덱스를 잘못 사용하여 out of range 오류 발생  

해결 방법

리스트 길이를 고려하여 범위를 조정함  

---

📌 커밋별 설명 (Commit Log)

• 진행한 작업을 커밋 단위로 간략하게 정리해주세요!
• 어떤 기능을 추가했는지, 어떤 수정을 했는지 한눈에 확인할 수 있도록 작성하면 좋아요.

[커밋 이름](커밋 주소) : 설명 적기 ~~
+ 이미지도 첨부해주시면 좋아요 ~

[shinhyunwooo]

전체적으로 깔끔하게 잘 작성해주셨습니다. cartSlice.ts 코드에서 초기 상태에서 amount, total을 cartItems 기반으로 바로 계산하면 초기 렌더링 시 자동 계산되게 작성하는 방법으로도 고민해보면 좋을 거 같습니다. 수고하셨습니다!

[onebone]

9주차 워크북 고생하셨습니다! 전반적으로 잘 작성해주신 것 같습니다 👍 Props drilling과 이를 해결하기 위한 상태 관리 라이브러리를 잘 학습해주신 것 같아요. 미션3의 Zustand만 도전해보신 것 같은데, Redux Toolkit도 꽤 많이 사용되는 라이브러리라서 한 번 연습해보시는 걸 추천드립니다! 그리고 Navbar에서 calculateTotals를 useEffect로 호출해주고 있는데 decrease, increase에서 함께 호출해주면 UI 종속성이 줄어들 수도 있을 것 같네요~!

9주차 워크북 고생 많으셨고 기말고사 끝나고 마지막 남은 10주차 워크북도 화이팅입니다 💪

[YuJin020303]

get으로 increase, decrease에 calculateTotals를 호출하여 UI 종속성을 줄였습니다.

      increase: (id: string): void => {
        set((state) => {
          const item = state.cartItems.find((lp) => lp.id === id);

          if (item) {
            item.amount++;
          }
        });
        get().actions.calculateTotals();
      },
      
            decrease: (id: string): void => {
        set((state) => {
            const item = state.cartItems.find((lp) => lp.id === id);
            
            if (item) {
                item.amount--;
                if (item.amount < 1) {
                    state.cartItems = state.cartItems.filter((lp) => lp.id !== id);
                }
            }
        });
        get().actions.calculateTotals();
      },
      
      import { useCartInfo } from "../hooks/useCartStore";

export const Navbar = () => {
  const { amount } = useCartInfo();

  return (
    <nav className="fixed top-0 left-0 w-full bg-gray-800 text-white py-3 px-4 flex items-center justify-between z-50">
      <h1 className="font-bold text-2xl tracking-tight">Naru's Store</h1>
      <div className="flex gap-2 items-center">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 54 54"
          fill="none"
          className="size-8"
        >
          <path
            d="M38.25 40.5C35.7525 40.5 33.75 42.5025 33.75 45C33.75 46.1935 34.2241 47.3381 35.068 48.182C35.9119 49.0259 37.0565 49.5 38.25 49.5C39.4435 49.5 40.5881 49.0259 41.432 48.182C42.2759 47.3381 42.75 46.1935 42.75 45C42.75 43.8065 42.2759 42.6619 41.432 41.818C40.5881 40.9741 39.4435 40.5 38.25 40.5ZM2.25 4.5V9H6.75L14.85 26.0775L11.79 31.59C11.4525 32.22 11.25 32.9625 11.25 33.75C11.25 34.9435 11.7241 36.0881 12.568 36.932C13.4119 37.7759 14.5565 38.25 15.75 38.25H42.75V33.75H16.695C16.5458 33.75 16.4027 33.6907 16.2973 33.5852C16.1918 33.4798 16.1325 33.3367 16.1325 33.1875C16.1325 33.075 16.155 32.985 16.2 32.9175L18.225 29.25H34.9875C36.675 29.25 38.16 28.305 38.925 26.9325L46.98 12.375C47.1375 12.015 47.25 11.6325 47.25 11.25C47.25 10.6533 47.0129 10.081 46.591 9.65901C46.169 9.23705 45.5967 9 45 9H11.7225L9.6075 4.5M15.75 40.5C13.2525 40.5 11.25 42.5025 11.25 45C11.25 46.1935 11.7241 47.3381 12.568 48.182C13.4119 49.0259 14.5565 49.5 15.75 49.5C16.9435 49.5 18.0881 49.0259 18.932 48.182C19.7759 47.3381 20.25 46.1935 20.25 45C20.25 43.8065 19.7759 42.6619 18.932 41.818C18.0881 40.9741 16.9435 40.5 15.75 40.5Z"
            fill="white"
          />
        </svg>
        <h1 className="font-semibold text-lg">{amount}</h1>
      </div>
    </nav>
  );
};