[1팀 신희원] Chapter 2-1. 클린코드와 리팩토링#38
Open
Amelia-Shin wants to merge 46 commits intohanghae-plus:mainfrom
Open
Conversation
This reverts commit 57de67f.
- 사용하지 않는 함수 정리: updateStockInfo, getTotalStock, getLowStockItems 제거 - 사용하지 않는 변수 정리: idx, stockMsg, lowStockItems, totalCount 제거
- ShoppingCartApp 클래스를 도입하여 전역 변수를 캡슐화하고 상품 초기화 로직을 메서드로 분리 - 상품 관련 상수 및 할인, 포인트 계산 로직을 별도의 모듈로 분리하여 관리 - 장바구니 데이터 및 서비스 클래스를 추가하여 장바구니 아이템 관리 기능을 개선 - UI 컴포넌트를 추가하여 사용자 인터페이스를 구성하고 이벤트 바인딩 로직을 분리
This reverts commit eed3b8c.
- Tailwind CSS 스타일링이 적용된 메인 App 컴포넌트 추가 - Product, Cart, Discount 타입을 위한 TypeScript 인터페이스 생성 - 상태 관리를 위한 useCart 훅 구현 - 기본 CSS 애니메이션 및 호버 효과 추가
- ProductSelector 컴포넌트 추가 - useProducts 훅으로 상품 데이터 관리 - 상품 선택 상태 관리 기능 추가 - 상품 데이터 구조 정의
- useCart 훅의 전역 상태 공유 문제 해결 - CartContext 도입으로 컴포넌트 간 상태 동기화 - Product 타입 정의 수정으로 타입 에러 해결 - 디버깅 로그 추가로 문제 추적 가능 - 전체 장바구니 플로우 정상 동작 확인
- TuesdayBanner: 화요일 특별 할인 배너 컴포넌트 추가 - OrderSummary: 주문 요약을 별도 컴포넌트로 분리하여 재사용성 향상 - discount.ts: 할인 계산 유틸리티 함수들 구현 * 개별 상품 할인 (10개 이상 구매) * 대량 구매 할인 (30개 이상) * 화요일 특별 할인 (10%) * 복합 할인 적용 로직 - App.tsx: 컴포넌트 구조 개선 및 할인 기능 통합
- CartContext에 getDiscountBreakdown() 함수 추가 - 개별 상품 할인, 전체 수량 할인, 화요일 할인 정보 표시 - 할인 유형별 색상 구분 (초록/파랑/노랑) - 할인 금액이 0인 경우 표시하지 않도록 조건부 렌더링
- 번개세일: 30초마다 무작위 상품 20% 할인 - 추천할인: 60초마다 다른 상품 5% 할인 - SUPER SALE: 동시 적용 시 25% 할인 - 포인트 시스템: 화요일/세트/풀세트 보너스 추가 - UI 개선: 할인 아이콘 및 상태 표시
- 할인 상태 표시 (⚡SALE, ��추천, ⚡💝 중복 할인) - 품절 상태 표시 및 disabled 처리 - 가격 비교 표시 (원래 가격 → 할인된 가격) - 재고 부족 경고 메시지 (5개 미만) - 전체 재고 50개 미만 시 select 테두리 색상 변경 - Product 타입에 lightningSale, recommendationSale 속성 추가
- 상품명에 할인 아이콘 표시 - 가격에 원래 가격과 할인된 가격 비교 표시 - 할인 상태에 따른 색상 구분 (보라/빨강/파랑)
- CartContext에 할인 상태 관리 로직 추가하여 번개세일과 추천할인 시 상품 가격 자동 조정 - 포인트 계산 로직을 개선하여 화요일 2배, 세트/풀세트 보너스, 대량구매 보너스 구현 - discount.ts의 할인 계산 순서를 개선하여 개별 상품 → 전체 수량 → 특별 할인 → 화요일 순서로 적용
타이머 개선: 중복 실행 방지, 원본과 동일한 주기 설정 이벤트 처리: stopPropagation으로 버블링 방지
|
희원님 한 주 고생 많으셨습니다..!! AI를 활용해서 과제를 완료하신분들이 꽤 있는데 대단하신거같아요..! 저는 질문 잘하기 부분을 잘 하지 못해서 실패했던것 같습니다 ㅠㅠ |
| {/* 메인 컨텐츠 */} | ||
| <main className="max-w-7xl mx-auto px-4 py-8"> | ||
| {/* 화요일 할인 배너 */} | ||
| <TuesdayBanner /> |
There was a problem hiding this comment.
이런 느낌이면 요일 변경하기 좋을 듯 합니다
<EventBanner day={'Tuesday'} />
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
과제 체크포인트
배포링크
https://amelia-shin.github.io/front_6th_chapter2-1/
기본과제
심화과제
과제 셀프회고
과제를 하면서 내가 제일 신경 쓴 부분은 무엇인가요?
AI에게 질문 잘하기!
명확하게 설명하지 못하면 내가 원하는 코드를 제대로 구현해주지 않습니다.
질문할 때, 내가 뭘 원하고 AI가 어떻게 해줬으면 좋겠고 그 외 추가 조건이 있다면 자세하게 질문을 해줘야 제가 원하는 코드에 그나마 가까운 대답을 던져줬습니다.
과제를 다시 해보면 더 잘 할 수 있었겠다 아쉬운 점이 있다면 무엇인가요?
아쉬운 점이 너무 많습니다..
처음에는 변수 타입 지정부터 함수 분리 까지 AI를 잘 활용하고 질문&지적 하며 코드 적용을 잘 하고 있다 생각했는데, 점점 시간이 지나갈 수록 우선순위가 잘 안지켜지고 테스트통과에 통과가 목표가 되어, 우선 구조부터 잡고 나중에 리팩터링을 하자. 식으로 과제를 진행하게 되었습니다.
이번 과제가 끝나더라도, 추후 처음부터 다시 천천히 리팩토링을 진행하며 테스트 코드에 연연하지 않고 AI를 적절히 잘 활용하여 클린코드를 해보고싶습니다.
리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문 편하게 남겨주세요 :)
Q1. 줄바꿈 -> 변수타입/변수명 수정 -> 함수 분리 -> 이벤트 분리 -> DOM조작 분리(UI) 순으로 진행해보았는데요. 어떤 순서로 진행하는게 더 나았을지, 앞으로 코드 리팩토링 할 때 어떤 순서로 진행하면 좋을지 궁금합니다.