Create Week09 Misson 0,1,2,3#77
Open
guieuna3-lab wants to merge 1 commit into
Open
Conversation
📝 Walkthrough개요네 개의 독립적인 Vite + React + TypeScript 프로젝트를 추가합니다. misson01은 Redux 기반 쇼핑카트, misson02는 Redux + 모달 확인 대화, misson03은 Zustand 기반 쇼핑카트 앱입니다. prac-1은 useReducer 패턴을 학습하는 연습 프로젝트입니다. 각 프로젝트는 완전한 개발 환경 설정, 타입 정의, 상태 관리, UI 컴포넌트, 그리고 엔트리포인트를 포함합니다. 변경 사항Redux 기반 쇼핑카트 (misson01 & misson02)
Zustand 기반 쇼핑카트 (misson03)
useReducer 학습 프로젝트 (prac-1)
예상 코드 리뷰 노력🎯 2 (Simple) | ⏱️ ~10 분 시 (Poem)
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 16
🧹 Nitpick comments (1)
Week09/hyunbin5921/misson03/src/constants/cartItems.ts (1)
1-100: ⚡ Quick win상수 데이터에 타입을 명시해 주세요.
현재
cartItems가 암묵적 추론에만 의존해서, 필드 누락/오타가 생겨도 추후까지 늦게 발견될 수 있습니다.CartItems타입을 붙이면 초기 데이터 품질을 바로 검증할 수 있습니다.타입 명시 예시
+import type { CartItems } from "../types/cart"; -const cartItems = [ +const cartItems: CartItems = [ { id: 'recB6qcHPxb62YJ75', title: 'Vancouver', singer: 'BIG Naughty (서동현)', price: 25000, img: 'https://image.bugsm.co.kr/album/images/500/40752/4075248.jpg', amount: 1, }, ... ];🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@Week09/hyunbin5921/misson03/src/constants/cartItems.ts` around lines 1 - 100, Create a typed model for the items and apply it to the exported constant: define an interface or type named CartItem with fields id:string, title:string, singer:string, price:number, img:string, amount:number (and optional fields if any can be missing), then annotate the array as const cartItems: CartItem[] (or readonly CartItem[] if immutability is desired) and keep export default cartItems so the initial data is validated against the CartItem shape at compile time.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@Week09/hyunbin5921/misson01/src/components/CartList.tsx`:
- Around line 12-15: The <ul> in CartList currently renders CartItem components
as direct children, which breaks semantics/accessibility; wrap each CartItem
inside an <li> so the list contains only <li> elements (update the JSX in the
CartList component where cartItems.map is used), e.g., map to <li
key={item.id}><CartItem lp={item} /></li> ensuring the key remains on the <li>
and CartItem receives its lp prop unchanged.
In `@Week09/hyunbin5921/misson01/src/components/Navbar.tsx`:
- Line 17: The header's onClick handler in Navbar.tsx (the h1 element with
className "text-2xl font-semibold cursor-pointer") triggers a full reload via
window.location.href = '/', which clears SPA state; remove that hard reload and
instead implement client-side navigation — either render a router Link (e.g.,
replace the h1 with a Link to="/") or use your router's programmatic navigation
(useNavigate / useRouter) inside a click handler to navigate to "/" without
reloading; alternatively simply remove the onClick if navigation isn't needed.
In `@Week09/hyunbin5921/misson01/src/slices/cartSlice.ts`:
- Around line 35-42: In the decrease reducer in cartSlice.ts (decrease: (state,
action) => { ... }), guard against negative/zero amounts by checking item.amount
before decrementing: if item.amount > 1 then decrement item.amount, otherwise
remove the item from state.cartItems (e.g., filter or splice by id) so items
never end up with amount 0 or negative; update the logic around the item
variable (found via state.cartItems.find(...)) accordingly.
In `@Week09/hyunbin5921/misson02/index.html`:
- Line 7: HTML 문서의 <title> 요소 내용이 "misson01"로 되어 있어 프로젝트명과 불일치합니다; index.html에서
<title> 태그 값을 "misson02"로 변경하여 탭 표시와 프로젝트 식별을 일치시키세요 (찾기 쉬운 식별자: <title> element
in the document head).
In `@Week09/hyunbin5921/misson02/package.json`:
- Line 2: The package.json "name" field is incorrect ("misson01"); update the
"name" property in package.json to "misson02" so the project identifier matches
the repository and build tooling, and ensure any places that reference
package.json's name (e.g., build scripts or CI that rely on package name) are
updated if needed.
In `@Week09/hyunbin5921/misson02/src/components/CartList.tsx`:
- Around line 26-30: The ul in the CartList component has non-li direct
children; wrap each mapped CartItem in an li so list semantics are preserved.
Modify the map in CartList (the cartItems.map(...) block) to render <li
key={item.id}> around <CartItem lp={item} /> (move the key to the li), or
alternatively update the CartItem component to render an li itself and ensure
the key is applied to that li; either approach will restore correct list
semantics and accessibility.
In `@Week09/hyunbin5921/misson02/src/components/Modal.tsx`:
- Around line 23-27: The modal lacks accessibility semantics—update the Modal
component so the modal container (the overlay div with className "fixed inset-0
bg-white/50 backdrop-blur-sm flex items-center justify-center") or the inner box
div ("bg-white p-6 rounded-md") includes role="dialog" and aria-modal="true",
give the title paragraph a unique id (e.g., modal-title) and add aria-labelledby
pointing to that id, and optionally add aria-describedby to reference any
descriptive text; also ensure any close button inside the Modal has an
accessible label (aria-label or visible text) so assistive tech can identify and
dismiss the dialog.
In `@Week09/hyunbin5921/misson02/src/slices/cartSlice.ts`:
- Around line 28-33: The decrease reducer currently subtracts 1 without checking
bounds which can make item.amount go negative; inside decrease (the reducer
handling PayloadAction<{ id: string }>) find the item in state.cartItems and
only decrement if item.amount > 1, otherwise either remove that item from
state.cartItems or leave item.amount at 1 (choose one consistent behavior for
the cart). Ensure you reference the same symbols: decrease, state.cartItems,
item.amount and action.payload.id when adding the guard and optional removal
logic.
In `@Week09/hyunbin5921/misson03/index.html`:
- Line 7: Update the HTML <title> element value currently set to "misson01" so
it matches this project ("misson03"); locate the <title> tag in index.html (the
element containing "misson01") and replace its text with "misson03" (and correct
spelling to "mission03" if desired) so the browser tab/bookmarks show the
correct project name.
In `@Week09/hyunbin5921/misson03/package.json`:
- Line 2: 패키지 메타데이터의 "name" 필드 값이 잘못되어 프로젝트 식별을 혼동시키고 있으므로 package.json의 "name":
"misson01" 항목을 올바른 프로젝트명 "misson03"으로 변경하세요; 관련 빌드/설정 스크립트에서 이 name 값을 참조하는 곳이
있는지(예: 패키지 매니저나 CI 스텝) 확인해 필요 시 동일한 이름으로 동기화하세요.
In `@Week09/hyunbin5921/misson03/src/components/CartItem.tsx`:
- Around line 36-50: The +/- buttons lack accessible labels; update the buttons
that call handleDecreaseCount and handleIncreaseCount to include descriptive
aria-labels (e.g., aria-label={`Decrease quantity of ${lp.name}`} and
aria-label={`Increase quantity of ${lp.name}`} or include another identifying lp
property if name isn't available), optionally include the current amount
(lp.amount) in the label for extra context so screen readers announce the item
being adjusted.
In `@Week09/hyunbin5921/misson03/src/components/Modal.tsx`:
- Around line 10-44: The modal JSX lacks accessibility attributes and keyboard
handling; update the Modal component to add role="dialog" and aria-modal="true"
on the modal container div, add an id on the title paragraph (e.g., modal-title)
and set aria-labelledby to that id, and ensure keyboard users can close the
modal by handling Escape (attach a keydown listener in the Modal component or
add an onKeyDown that calls close when key === 'Escape'); also ensure focus is
moved into the modal on open (e.g., focus the first button) and returned on
close so clearCart and close behavior remains unchanged.
In `@Week09/hyunbin5921/misson03/src/hooks/useCartStore.ts`:
- Around line 38-45: The decrease handler in useCartStore.ts allows an item's
amount to reach 0; update the decrease method (in the decrease: (id: string) =>
{ ... } block that touches state.cartItems and cartItem.amount) so it never
leaves a zero-quantity item in the store: locate the cartItem lookup inside
decrease and change the logic to either (a) if cartItem.amount <= 1 remove the
item from state.cartItems (e.g., set cartItems = state.cartItems.filter(i =>
i.id !== id)) otherwise decrement, or (b) clamp the amount to a minimum of 1
when decrementing (e.g., set amount = Math.max(1, cartItem.amount - 1)); pick
one behavior and apply it consistently so decrease cannot produce amount === 0.
In `@Week09/hyunbin5921/prac-1/src/App.css`:
- Line 20: Move the Tailwind import to the top of App.css by placing the `@import`
"tailwindcss"; statement before any other CSS rules (including the `#root`
selector and other existing rules) so the import is the very first line; update
App.css so `@import` "tailwindcss"; appears before all other content to resolve
the no-invalid-position-at-import-rule lint error and ensure Tailwind styles
load correctly.
In `@Week09/hyunbin5921/prac-1/src/index.css`:
- Around line 6-11: Stylelint 오류는 빈 줄 규칙과 키워드 케이스 불일치에서 발생하니, 아래처럼 고치세요: 불필요한 빈
줄을 제거하여 background-color(=`#242424`)와 font-synthesis 사이의 빈 줄을 없애고, 값 키워드의 케이스/형식을
통일하기 위해 color-scheme: light dark;와 text-rendering: optimizeLegibility;의 값 키워드를
스타일린트 규칙에 맞는 소문자/하이픈 표기(예: text-rendering: optimize-legibility; 또는 프로젝트의
value-keyword-case 규칙에 맞는 형태)로 변경하고 나머지 속성(font-synthesis, color 등)은 소문자 형태로
유지하세요.
In `@Week09/hyunbin5921/prac-1/src/useReducer/UseReducerCompany.tsx`:
- Around line 27-29: The RESET case in the reducer only resets department and
leaves error intact; update the reducer's case "RESET" branch in
UseReducerCompany.tsx so it returns a state that resets both department and
error (e.g., return {...state, department: 'Department를 입력하세요', error: ''})
ensuring the error field is cleared on RESET; locate the reducer function and
modify the case "RESET" return to include error alongside department.
---
Nitpick comments:
In `@Week09/hyunbin5921/misson03/src/constants/cartItems.ts`:
- Around line 1-100: Create a typed model for the items and apply it to the
exported constant: define an interface or type named CartItem with fields
id:string, title:string, singer:string, price:number, img:string, amount:number
(and optional fields if any can be missing), then annotate the array as const
cartItems: CartItem[] (or readonly CartItem[] if immutability is desired) and
keep export default cartItems so the initial data is validated against the
CartItem shape at compile time.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: edecd6f3-0a58-4dd8-826a-fcda6abd13c4
⛔ Files ignored due to path filters (12)
Week09/hyunbin5921/misson01/pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlWeek09/hyunbin5921/misson01/public/vite.svgis excluded by!**/*.svgWeek09/hyunbin5921/misson01/src/assets/react.svgis excluded by!**/*.svgWeek09/hyunbin5921/misson02/pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlWeek09/hyunbin5921/misson02/public/vite.svgis excluded by!**/*.svgWeek09/hyunbin5921/misson02/src/assets/react.svgis excluded by!**/*.svgWeek09/hyunbin5921/misson03/pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlWeek09/hyunbin5921/misson03/public/vite.svgis excluded by!**/*.svgWeek09/hyunbin5921/misson03/src/assets/react.svgis excluded by!**/*.svgWeek09/hyunbin5921/prac-1/pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlWeek09/hyunbin5921/prac-1/public/vite.svgis excluded by!**/*.svgWeek09/hyunbin5921/prac-1/src/assets/react.svgis excluded by!**/*.svg
📒 Files selected for processing (81)
Week09/hyunbin5921/misson01/.gitignoreWeek09/hyunbin5921/misson01/README.mdWeek09/hyunbin5921/misson01/eslint.config.jsWeek09/hyunbin5921/misson01/index.htmlWeek09/hyunbin5921/misson01/package.jsonWeek09/hyunbin5921/misson01/src/App.cssWeek09/hyunbin5921/misson01/src/App.tsxWeek09/hyunbin5921/misson01/src/components/CartItem.tsxWeek09/hyunbin5921/misson01/src/components/CartList.tsxWeek09/hyunbin5921/misson01/src/components/Navbar.tsxWeek09/hyunbin5921/misson01/src/components/PriceBox.tsxWeek09/hyunbin5921/misson01/src/constants/cartItems.tsWeek09/hyunbin5921/misson01/src/hooks/useCustomRedux.tsWeek09/hyunbin5921/misson01/src/index.cssWeek09/hyunbin5921/misson01/src/main.tsxWeek09/hyunbin5921/misson01/src/slices/cartSlice.tsWeek09/hyunbin5921/misson01/src/store/store.tsWeek09/hyunbin5921/misson01/src/types/cart.tsWeek09/hyunbin5921/misson01/tsconfig.app.jsonWeek09/hyunbin5921/misson01/tsconfig.jsonWeek09/hyunbin5921/misson01/tsconfig.node.jsonWeek09/hyunbin5921/misson01/vite.config.tsWeek09/hyunbin5921/misson02/.gitignoreWeek09/hyunbin5921/misson02/README.mdWeek09/hyunbin5921/misson02/eslint.config.jsWeek09/hyunbin5921/misson02/index.htmlWeek09/hyunbin5921/misson02/package.jsonWeek09/hyunbin5921/misson02/src/App.cssWeek09/hyunbin5921/misson02/src/App.tsxWeek09/hyunbin5921/misson02/src/components/CartItem.tsxWeek09/hyunbin5921/misson02/src/components/CartList.tsxWeek09/hyunbin5921/misson02/src/components/Modal.tsxWeek09/hyunbin5921/misson02/src/components/Navbar.tsxWeek09/hyunbin5921/misson02/src/constants/cartItems.tsWeek09/hyunbin5921/misson02/src/hooks/useCustomRedux.tsWeek09/hyunbin5921/misson02/src/index.cssWeek09/hyunbin5921/misson02/src/main.tsxWeek09/hyunbin5921/misson02/src/slices/cartSlice.tsWeek09/hyunbin5921/misson02/src/slices/modalSlice.tsWeek09/hyunbin5921/misson02/src/store/store.tsWeek09/hyunbin5921/misson02/src/types/cart.tsWeek09/hyunbin5921/misson02/tsconfig.app.jsonWeek09/hyunbin5921/misson02/tsconfig.jsonWeek09/hyunbin5921/misson02/tsconfig.node.jsonWeek09/hyunbin5921/misson02/vite.config.tsWeek09/hyunbin5921/misson03/.gitignoreWeek09/hyunbin5921/misson03/README.mdWeek09/hyunbin5921/misson03/eslint.config.jsWeek09/hyunbin5921/misson03/index.htmlWeek09/hyunbin5921/misson03/package.jsonWeek09/hyunbin5921/misson03/src/App.cssWeek09/hyunbin5921/misson03/src/App.tsxWeek09/hyunbin5921/misson03/src/components/CartItem.tsxWeek09/hyunbin5921/misson03/src/components/CartList.tsxWeek09/hyunbin5921/misson03/src/components/Modal.tsxWeek09/hyunbin5921/misson03/src/components/Navbar.tsxWeek09/hyunbin5921/misson03/src/constants/cartItems.tsWeek09/hyunbin5921/misson03/src/hooks/useCartStore.tsWeek09/hyunbin5921/misson03/src/hooks/useModalStore.tsWeek09/hyunbin5921/misson03/src/index.cssWeek09/hyunbin5921/misson03/src/main.tsxWeek09/hyunbin5921/misson03/src/types/cart.tsWeek09/hyunbin5921/misson03/tsconfig.app.jsonWeek09/hyunbin5921/misson03/tsconfig.jsonWeek09/hyunbin5921/misson03/tsconfig.node.jsonWeek09/hyunbin5921/misson03/vite.config.tsWeek09/hyunbin5921/prac-1/.gitignoreWeek09/hyunbin5921/prac-1/README.mdWeek09/hyunbin5921/prac-1/eslint.config.jsWeek09/hyunbin5921/prac-1/index.htmlWeek09/hyunbin5921/prac-1/package.jsonWeek09/hyunbin5921/prac-1/src/App.cssWeek09/hyunbin5921/prac-1/src/App.tsxWeek09/hyunbin5921/prac-1/src/index.cssWeek09/hyunbin5921/prac-1/src/main.tsxWeek09/hyunbin5921/prac-1/src/useReducer/UseReducerCompany.tsxWeek09/hyunbin5921/prac-1/src/useReducer/UseReducerPage.tsxWeek09/hyunbin5921/prac-1/tsconfig.app.jsonWeek09/hyunbin5921/prac-1/tsconfig.jsonWeek09/hyunbin5921/prac-1/tsconfig.node.jsonWeek09/hyunbin5921/prac-1/vite.config.ts
Comment on lines
+12
to
+15
| <ul> | ||
| {cartItems.map((item) => ( | ||
| <CartItem key={item.id} lp={item} /> | ||
| ))} |
There was a problem hiding this comment.
<ul>의 직계 자식을 <li>로 감싸주세요.
Line 12~Line 15에서 <ul> 아래에 <div>(CartItem 루트)가 직접 들어가 시맨틱/접근성 구조가 깨집니다.
수정 예시
- <ul>
- {cartItems.map((item) => (
- <CartItem key={item.id} lp={item} />
- ))}
- </ul>
+ <ul>
+ {cartItems.map((item) => (
+ <li key={item.id}>
+ <CartItem lp={item} />
+ </li>
+ ))}
+ </ul>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <ul> | |
| {cartItems.map((item) => ( | |
| <CartItem key={item.id} lp={item} /> | |
| ))} | |
| <ul> | |
| {cartItems.map((item) => ( | |
| <li key={item.id}> | |
| <CartItem lp={item} /> | |
| </li> | |
| ))} | |
| </ul> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@Week09/hyunbin5921/misson01/src/components/CartList.tsx` around lines 12 -
15, The <ul> in CartList currently renders CartItem components as direct
children, which breaks semantics/accessibility; wrap each CartItem inside an
<li> so the list contains only <li> elements (update the JSX in the CartList
component where cartItems.map is used), e.g., map to <li key={item.id}><CartItem
lp={item} /></li> ensuring the key remains on the <li> and CartItem receives its
lp prop unchanged.
|
|
||
| return ( | ||
| <div className="flex justify-between items-center p-4 bg-gray-800 text-white"> | ||
| <h1 onClick={()=>{window.location.href = '/'}} className="text-2xl font-semibold cursor-pointer">MusicCartList</h1> |
There was a problem hiding this comment.
헤더 클릭 시 전체 리로드가 발생해 장바구니 상태가 초기화됩니다.
Line 17의 window.location.href = '/'는 SPA를 하드 리로드하여 사용자가 담아둔 상태를 잃게 만듭니다. 클릭 동작을 제거하거나 클라이언트 라우팅 기반 링크/버튼으로 바꿔주세요.
안전한 최소 수정 예시 (클릭 제거)
- <h1 onClick={()=>{window.location.href = '/'}} className="text-2xl font-semibold cursor-pointer">MusicCartList</h1>
+ <h1 className="text-2xl font-semibold">MusicCartList</h1>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <h1 onClick={()=>{window.location.href = '/'}} className="text-2xl font-semibold cursor-pointer">MusicCartList</h1> | |
| <h1 className="text-2xl font-semibold">MusicCartList</h1> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@Week09/hyunbin5921/misson01/src/components/Navbar.tsx` at line 17, The
header's onClick handler in Navbar.tsx (the h1 element with className "text-2xl
font-semibold cursor-pointer") triggers a full reload via window.location.href =
'/', which clears SPA state; remove that hard reload and instead implement
client-side navigation — either render a router Link (e.g., replace the h1 with
a Link to="/") or use your router's programmatic navigation (useNavigate /
useRouter) inside a click handler to navigate to "/" without reloading;
alternatively simply remove the onClick if navigation isn't needed.
Comment on lines
+35
to
+42
| decrease: (state, action: PayloadAction<{ id: string }>) => { | ||
| const itemId = action.payload.id; | ||
| //내가 클릭한 음반 찾기 | ||
| const item = state.cartItems.find((cartItem) => cartItem.id === itemId); | ||
|
|
||
| if (item) { | ||
| item.amount -= 1; | ||
| } |
There was a problem hiding this comment.
수량 감소 하한(0/1) 방어가 필요합니다.
Line 41에서 현재 로직은 음수 수량까지 내려갈 수 있습니다. 최소 1로 고정하거나 1에서 감소 시 아이템 제거로 처리해야 합니다.
제안 수정안
decrease: (state, action: PayloadAction<{ id: string }>) => {
const itemId = action.payload.id;
const item = state.cartItems.find((cartItem) => cartItem.id === itemId);
if (item) {
- item.amount -= 1;
+ if (item.amount > 1) {
+ item.amount -= 1;
+ } else {
+ state.cartItems = state.cartItems.filter(
+ (cartItem) => cartItem.id !== itemId
+ );
+ }
}
},📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| decrease: (state, action: PayloadAction<{ id: string }>) => { | |
| const itemId = action.payload.id; | |
| //내가 클릭한 음반 찾기 | |
| const item = state.cartItems.find((cartItem) => cartItem.id === itemId); | |
| if (item) { | |
| item.amount -= 1; | |
| } | |
| decrease: (state, action: PayloadAction<{ id: string }>) => { | |
| const itemId = action.payload.id; | |
| //내가 클릭한 음반 찾기 | |
| const item = state.cartItems.find((cartItem) => cartItem.id === itemId); | |
| if (item) { | |
| if (item.amount > 1) { | |
| item.amount -= 1; | |
| } else { | |
| state.cartItems = state.cartItems.filter( | |
| (cartItem) => cartItem.id !== itemId | |
| ); | |
| } | |
| } | |
| }, |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@Week09/hyunbin5921/misson01/src/slices/cartSlice.ts` around lines 35 - 42, In
the decrease reducer in cartSlice.ts (decrease: (state, action) => { ... }),
guard against negative/zero amounts by checking item.amount before decrementing:
if item.amount > 1 then decrement item.amount, otherwise remove the item from
state.cartItems (e.g., filter or splice by id) so items never end up with amount
0 or negative; update the logic around the item variable (found via
state.cartItems.find(...)) accordingly.
| <meta charset="UTF-8" /> | ||
| <link rel="icon" type="image/svg+xml" href="/vite.svg" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>misson01</title> |
There was a problem hiding this comment.
프로젝트 제목이 misson02와 불일치합니다.
현재 title이 misson01로 되어 있어 탭 표시와 프로젝트 식별에 혼선을 줍니다. misson02로 맞춰주세요.
수정 제안
- <title>misson01</title>
+ <title>misson02</title>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <title>misson01</title> | |
| <title>misson02</title> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@Week09/hyunbin5921/misson02/index.html` at line 7, HTML 문서의 <title> 요소 내용이
"misson01"로 되어 있어 프로젝트명과 불일치합니다; index.html에서 <title> 태그 값을 "misson02"로 변경하여 탭
표시와 프로젝트 식별을 일치시키세요 (찾기 쉬운 식별자: <title> element in the document head).
| @@ -0,0 +1,35 @@ | |||
| { | |||
| "name": "misson01", | |||
There was a problem hiding this comment.
패키지명이 misson02와 불일치합니다.
name이 misson01로 설정되어 있어 프로젝트 식별이 어긋납니다. misson02로 정정하는 게 안전합니다.
수정 제안
- "name": "misson01",
+ "name": "misson02",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| "name": "misson01", | |
| "name": "misson02", |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@Week09/hyunbin5921/misson02/package.json` at line 2, The package.json "name"
field is incorrect ("misson01"); update the "name" property in package.json to
"misson02" so the project identifier matches the repository and build tooling,
and ensure any places that reference package.json's name (e.g., build scripts or
CI that rely on package name) are updated if needed.
Comment on lines
+10
to
+44
| return ( | ||
| <> | ||
| <div | ||
| className="fixed inset-0 bg-white/50 backdrop-blur-sm flex items-center justify-center" | ||
| onClick={close} | ||
| /> | ||
|
|
||
| {/* modal box */} | ||
| <div className="fixed top-1/2 left-1/2 z-50 | ||
| -translate-x-1/2 -translate-y-1/2 | ||
| bg-white p-6 rounded-md w-80"> | ||
| <p className="text-center mb-6"> | ||
| 장바구니를 전부 비울까? | ||
| </p> | ||
|
|
||
| <div className="flex justify-between"> | ||
| <button | ||
| className="px-4 py-2 border" | ||
| onClick={close} | ||
| > | ||
| 아니요 | ||
| </button> | ||
|
|
||
| <button | ||
| className="px-4 py-2 bg-red-500 text-white" | ||
| onClick={() => { | ||
| clearCart(); | ||
| close(); | ||
| }} | ||
| > | ||
| 네 | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </> |
There was a problem hiding this comment.
모달 접근성 속성이 없어 키보드/스크린리더 사용자의 작업 완료가 어렵습니다.
Line 18~43의 모달 컨테이너에 role="dialog", aria-modal, 라벨 연결, Escape 닫기 처리가 없어 접근성 요구사항을 충족하지 못합니다.
수정 예시
+import { useEffect } from "react";
import { useModalStore } from "../hooks/useModalStore";
import { useCartActions } from "../hooks/useCartStore";
const Modal = () => {
const { isOpen, close } = useModalStore();
const { clearCart } = useCartActions();
+ useEffect(() => {
+ const onKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "Escape") close();
+ };
+ if (isOpen) window.addEventListener("keydown", onKeyDown);
+ return () => window.removeEventListener("keydown", onKeyDown);
+ }, [isOpen, close]);
+
if (!isOpen) return null;
return (
<>
<div
className="fixed inset-0 bg-white/50 backdrop-blur-sm flex items-center justify-center"
onClick={close}
/>
- <div className="fixed top-1/2 left-1/2 z-50
+ <div
+ role="dialog"
+ aria-modal="true"
+ aria-labelledby="clear-cart-title"
+ className="fixed top-1/2 left-1/2 z-50
-translate-x-1/2 -translate-y-1/2
- bg-white p-6 rounded-md w-80">
- <p className="text-center mb-6">
+ bg-white p-6 rounded-md w-80"
+ >
+ <p id="clear-cart-title" className="text-center mb-6">
장바구니를 전부 비울까?
</p>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| return ( | |
| <> | |
| <div | |
| className="fixed inset-0 bg-white/50 backdrop-blur-sm flex items-center justify-center" | |
| onClick={close} | |
| /> | |
| {/* modal box */} | |
| <div className="fixed top-1/2 left-1/2 z-50 | |
| -translate-x-1/2 -translate-y-1/2 | |
| bg-white p-6 rounded-md w-80"> | |
| <p className="text-center mb-6"> | |
| 장바구니를 전부 비울까? | |
| </p> | |
| <div className="flex justify-between"> | |
| <button | |
| className="px-4 py-2 border" | |
| onClick={close} | |
| > | |
| 아니요 | |
| </button> | |
| <button | |
| className="px-4 py-2 bg-red-500 text-white" | |
| onClick={() => { | |
| clearCart(); | |
| close(); | |
| }} | |
| > | |
| 네 | |
| </button> | |
| </div> | |
| </div> | |
| </> | |
| return ( | |
| <> | |
| <div | |
| className="fixed inset-0 bg-white/50 backdrop-blur-sm flex items-center justify-center" | |
| onClick={close} | |
| /> | |
| {/* modal box */} | |
| <div | |
| role="dialog" | |
| aria-modal="true" | |
| aria-labelledby="clear-cart-title" | |
| className="fixed top-1/2 left-1/2 z-50 | |
| -translate-x-1/2 -translate-y-1/2 | |
| bg-white p-6 rounded-md w-80" | |
| > | |
| <p id="clear-cart-title" className="text-center mb-6"> | |
| 장바구니를 전부 비울까? | |
| </p> | |
| <div className="flex justify-between"> | |
| <button | |
| className="px-4 py-2 border" | |
| onClick={close} | |
| > | |
| 아니요 | |
| </button> | |
| <button | |
| className="px-4 py-2 bg-red-500 text-white" | |
| onClick={() => { | |
| clearCart(); | |
| close(); | |
| }} | |
| > | |
| 네 | |
| </button> | |
| </div> | |
| </div> | |
| </> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@Week09/hyunbin5921/misson03/src/components/Modal.tsx` around lines 10 - 44,
The modal JSX lacks accessibility attributes and keyboard handling; update the
Modal component to add role="dialog" and aria-modal="true" on the modal
container div, add an id on the title paragraph (e.g., modal-title) and set
aria-labelledby to that id, and ensure keyboard users can close the modal by
handling Escape (attach a keydown listener in the Modal component or add an
onKeyDown that calls close when key === 'Escape'); also ensure focus is moved
into the modal on open (e.g., focus the first button) and returned on close so
clearCart and close behavior remains unchanged.
Comment on lines
+38
to
+45
| decrease: (id: string) => { | ||
| set((state) => { | ||
| const cartItem = state.cartItems.find((item) => item.id === id); | ||
|
|
||
| if (cartItem && cartItem.amount > 0) { | ||
| cartItem.amount -= 1; | ||
| } | ||
| }); |
There was a problem hiding this comment.
스토어에서 수량 0 상태를 허용하지 않도록 막아주세요.
decrease가 amount === 1인 항목을 0으로 만들 수 있어, 직접 액션 호출 시 0개 수량 항목이 남을 수 있습니다. 스토어 레벨에서 1 이하면 제거 또는 최소 1로 clamp 처리하는 편이 안전합니다.
수정 예시
decrease: (id: string) => {
set((state) => {
const cartItem = state.cartItems.find((item) => item.id === id);
- if (cartItem && cartItem.amount > 0) {
- cartItem.amount -= 1;
- }
+ if (!cartItem) return;
+ if (cartItem.amount <= 1) {
+ state.cartItems = state.cartItems.filter((item) => item.id !== id);
+ return;
+ }
+ cartItem.amount -= 1;
});
},📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| decrease: (id: string) => { | |
| set((state) => { | |
| const cartItem = state.cartItems.find((item) => item.id === id); | |
| if (cartItem && cartItem.amount > 0) { | |
| cartItem.amount -= 1; | |
| } | |
| }); | |
| decrease: (id: string) => { | |
| set((state) => { | |
| const cartItem = state.cartItems.find((item) => item.id === id); | |
| if (!cartItem) return; | |
| if (cartItem.amount <= 1) { | |
| state.cartItems = state.cartItems.filter((item) => item.id !== id); | |
| return; | |
| } | |
| cartItem.amount -= 1; | |
| }); | |
| }, |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@Week09/hyunbin5921/misson03/src/hooks/useCartStore.ts` around lines 38 - 45,
The decrease handler in useCartStore.ts allows an item's amount to reach 0;
update the decrease method (in the decrease: (id: string) => { ... } block that
touches state.cartItems and cartItem.amount) so it never leaves a zero-quantity
item in the store: locate the cartItem lookup inside decrease and change the
logic to either (a) if cartItem.amount <= 1 remove the item from state.cartItems
(e.g., set cartItems = state.cartItems.filter(i => i.id !== id)) otherwise
decrement, or (b) clamp the amount to a minimum of 1 when decrementing (e.g.,
set amount = Math.max(1, cartItem.amount - 1)); pick one behavior and apply it
consistently so decrease cannot produce amount === 0.
| .logo.react:hover { | ||
| filter: drop-shadow(0 0 2em #61dafbaa); | ||
| } | ||
| @import "tailwindcss"; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify that `@import` appears before any non-@import CSS rule in App.css
python - <<'PY'
from pathlib import Path
p = Path("Week09/hyunbin5921/prac-1/src/App.css")
lines = p.read_text(encoding="utf-8").splitlines()
first_non_empty = None
import_line = None
for i, raw in enumerate(lines, 1):
s = raw.strip()
if not s or s.startswith("/*") or s.startswith("*") or s.startswith("//"):
continue
if s.startswith("`@import`"):
if import_line is None:
import_line = i
continue
if first_non_empty is None:
first_non_empty = i
break
print(f"first_non_import_rule_line={first_non_empty}")
print(f"first_import_line={import_line}")
if import_line is None:
print("FAIL: no `@import` found")
elif first_non_empty is not None and import_line > first_non_empty:
print("FAIL: `@import` is after normal rule")
else:
print("PASS: `@import` position is valid")
PYRepository: HSU-Makeus-Challenge-10th/Web
Length of output: 148
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE="Week09/hyunbin5921/prac-1/src/App.css"
echo "== File size (lines) =="
wc -l "$FILE"
echo "== Lines containing '`@import`' (if any) =="
rg -n "`@import`" "$FILE" || true
echo "== App.css (first 60 lines with numbers) =="
nl -ba "$FILE" | sed -n '1,60p'Repository: HSU-Makeus-Challenge-10th/Web
Length of output: 312
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE="Week09/hyunbin5921/prac-1/src/App.css"
echo "== App.css line dump (1-35) =="
# cat -n is usually available; avoid nl
cat -n "$FILE" | sed -n '1,35p'
python3 - <<'PY'
from pathlib import Path
p = Path("Week09/hyunbin5921/prac-1/src/App.css")
lines = p.read_text(encoding="utf-8").splitlines()
first_non_empty = None
import_lines = []
for i, raw in enumerate(lines, 1):
s = raw.strip()
if not s or s.startswith("/*") or s.startswith("*") or s.startswith("//"):
continue
if s.startswith("`@import`"):
import_lines.append(i)
continue
if first_non_empty is None:
first_non_empty = i
break
print(f"import_lines={import_lines}")
print(f"first_non_import_rule_line={first_non_empty}")
if not import_lines:
print("FAIL: no `@import` found")
elif first_non_empty is not None and min(import_lines) > first_non_empty:
print("FAIL: `@import` is after normal rule")
else:
print("PASS: `@import` position is valid")
PYRepository: HSU-Makeus-Challenge-10th/Web
Length of output: 984
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE="Week09/hyunbin5921/prac-1/src/App.css"
python3 - <<'PY'
from pathlib import Path
p = Path("Week09/hyunbin5921/prac-1/src/App.css")
lines = p.read_bytes().splitlines(keepends=False)
# Show physical line 20 (1-based)
i = 20
raw = lines[i-1]
print("line20_bytes_len=", len(raw))
print("line20_raw_bytes=", raw)
print("line20_raw_repr=", repr(raw.decode("utf-8", errors="replace")))
# Show Unicode code points after decoding
decoded = raw.decode("utf-8", errors="replace")
print("line20_codepoints=", [hex(ord(ch)) for ch in decoded])
# Also show lines 18-22 decoded for context
for j in range(18,23):
r = lines[j-1]
d = r.decode("utf-8", errors="replace").rstrip("\n\r")
print(f"line{j} repr={repr(d)} codepoints={[hex(ord(ch)) for ch in d]}")
PYRepository: HSU-Makeus-Challenge-10th/Web
Length of output: 1287
🏁 Script executed:
#!/bin/bash
set -euo pipefail
python3 - <<'PY'
from pathlib import Path
p = Path("Week09/hyunbin5921/prac-1/src/App.css")
lines = p.read_text(encoding="utf-8").splitlines()
import_lines = []
first_non_import_rule_line = None
for i, raw in enumerate(lines, 1):
s = raw.strip()
if not s or s.startswith("/*") or s.startswith("*") or s.startswith("//"):
continue
if s.startswith("`@import`"):
import_lines.append(i)
continue
if first_non_import_rule_line is None:
first_non_import_rule_line = i
break
print("import_lines=", import_lines)
print("first_non_import_rule_line=", first_non_import_rule_line)
if not import_lines:
print("FAIL: no `@import` found")
elif first_non_import_rule_line is not None and min(import_lines) > first_non_import_rule_line:
print("FAIL: `@import` is after normal rule")
else:
print("PASS: `@import` position is valid")
PYRepository: HSU-Makeus-Challenge-10th/Web
Length of output: 143
🏁 Script executed:
#!/bin/bash
set -euo pipefail
python3 - <<'PY'
from pathlib import Path
p = Path("Week09/hyunbin5921/prac-1/src/App.css")
t = p.read_text(encoding="utf-8")
lines = t.splitlines()
print("len(lines)=", len(lines))
for i in range(15, 26): # 1-based
if i-1 < 0 or i-1 >= len(lines):
continue
raw = lines[i-1]
s = raw.strip()
print(i, "raw_repr=", repr(raw), "stripped_repr=", repr(s), "startswith=", s.startswith("`@import`"))
PYRepository: HSU-Makeus-Challenge-10th/Web
Length of output: 1019
App.css에서 Tailwind @import "tailwindcss";를 파일 최상단으로 이동하세요.
App.css의 @import "tailwindcss";가 #root 및 일반 규칙들(라인 1~19)보다 아래(라인 20)에 있어 no-invalid-position-at-import-rule 위반/린트 실패 및 Tailwind 로딩 문제를 유발할 수 있습니다.
수정 제안 diff
+@import "tailwindcss";
+
`#root` {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
@@
-.logo.react:hover {
- filter: drop-shadow(0 0 2em `#61dafbaa`);
-}
-@import "tailwindcss";
+.logo.react:hover {
+ filter: drop-shadow(0 0 2em `#61dafbaa`);
+}🧰 Tools
🪛 Stylelint (17.12.0)
[error] 20-20: Invalid position for @import rule (no-invalid-position-at-import-rule)
(no-invalid-position-at-import-rule)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@Week09/hyunbin5921/prac-1/src/App.css` at line 20, Move the Tailwind import
to the top of App.css by placing the `@import` "tailwindcss"; statement before any
other CSS rules (including the `#root` selector and other existing rules) so the
import is the very first line; update App.css so `@import` "tailwindcss"; appears
before all other content to resolve the no-invalid-position-at-import-rule lint
error and ensure Tailwind styles load correctly.
Comment on lines
+6
to
+11
| color-scheme: light dark; | ||
| color: rgba(255, 255, 255, 0.87); | ||
| background-color: #242424; | ||
|
|
||
| font-synthesis: none; | ||
| text-rendering: optimizeLegibility; |
There was a problem hiding this comment.
Stylelint 오류를 정리해 주세요.
Line [6], Line [10], Line [11]에서 Stylelint 에러가 발생합니다(빈 줄 규칙/키워드 케이스). 린트 파이프라인 통과를 위해 정리하는 것이 좋습니다.
수정 제안 diff
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
-
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: `#242424`;
-
font-synthesis: none;
- text-rendering: optimizeLegibility;
+ text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}🧰 Tools
🪛 Stylelint (17.12.0)
[error] 6-6: Expected no empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
[error] 10-10: Expected no empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
[error] 11-11: Expected "optimizeLegibility" to be "optimizelegibility" (value-keyword-case)
(value-keyword-case)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@Week09/hyunbin5921/prac-1/src/index.css` around lines 6 - 11, Stylelint 오류는 빈
줄 규칙과 키워드 케이스 불일치에서 발생하니, 아래처럼 고치세요: 불필요한 빈 줄을 제거하여 background-color(=`#242424`)와
font-synthesis 사이의 빈 줄을 없애고, 값 키워드의 케이스/형식을 통일하기 위해 color-scheme: light dark;와
text-rendering: optimizeLegibility;의 값 키워드를 스타일린트 규칙에 맞는 소문자/하이픈 표기(예:
text-rendering: optimize-legibility; 또는 프로젝트의 value-keyword-case 규칙에 맞는 형태)로
변경하고 나머지 속성(font-synthesis, color 등)은 소문자 형태로 유지하세요.
Comment on lines
+27
to
+29
| case "RESET": { | ||
| return {...state, department: 'Department를 입력하세요'} | ||
| } |
There was a problem hiding this comment.
RESET 액션에서 error도 함께 초기화해 주세요.
Line [27]~Line [29]는 department만 바꾸고 error를 유지해서, Reset 이후에도 에러 문구가 남습니다.
수정 제안 diff
case "RESET": {
- return {...state, department: 'Department를 입력하세요'}
+ return { ...state, department: "Department를 입력하세요", error: null };
}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@Week09/hyunbin5921/prac-1/src/useReducer/UseReducerCompany.tsx` around lines
27 - 29, The RESET case in the reducer only resets department and leaves error
intact; update the reducer's case "RESET" branch in UseReducerCompany.tsx so it
returns a state that resets both department and error (e.g., return {...state,
department: 'Department를 입력하세요', error: ''}) ensuring the error field is cleared
on RESET; locate the reducer function and modify the case "RESET" return to
include error alongside department.
wantkdd
approved these changes
May 26, 2026
Contributor
wantkdd
left a comment
wantkdd
left a comment
There was a problem hiding this comment.
Redux와 Zustand 버전 모두 UI 핸들러에서는 수량이 1일 때 removeItem을 호출하고 있지만, decrease 액션 자체는 0 이하 수량이 남을 수 있는 구조라서 같은 액션을 다른 곳에서 재사용할 때 상태 규칙이 깨질 수 있습니다. 합계 계산도 Navbar의 useEffect에 의존하고 있고 Zustand 쪽은 useCartInfo가 cartItems, amount, total을 함께 구독하고 있어, 액션 내부에서 합계를 함께 갱신하거나 필요한 값별 selector를 나누면 상태 책임과 리렌더 범위가 더 명확해질 것 같습니다. 전체 미션 흐름은 잘 구현되어 있으니 이 부분만 다음 개선 때 다듬어보면 좋겠습니다, 수고하셨습니다!
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
2 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.
📝 미션 번호
9주차 Misson 0,1,2,3
📋 구현 사항
📎 스크린샷
_2025-12-14_133058.mp4
_2025-12-14_172003.mp4
_2025-12-14_202948.mp4
_2025-12-14_2029148.mp4
✅ 체크리스트
🤔 질문 사항
Summary by CodeRabbit
릴리스 노트
새로운 기능
문서