Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request implements a restaurant listing application featuring category filtering, a detailed view modal, and a form for adding new restaurants. The feedback identifies several missing functional elements, such as the lack of click handlers for the modal backdrop and the header's add button, as well as a missing form submission handler to prevent page reloads. Additionally, there are suggestions to improve code maintainability by extracting hardcoded category lists into a shared constants file and replacing temporary comments with dynamic state logic.
| export default function RestaurantDetailModal({ restaurant, onClose }) { | ||
| return ( | ||
| <div className="modal modal--open"> | ||
| <div className="modal-backdrop"></div> |
There was a problem hiding this comment.
PR 설명에는 backdrop 클릭 시 모달이 닫히도록 구현했다고 명시되어 있으나, 실제 코드의 modal-backdrop 요소에는 onClick 핸들러가 누락되어 있습니다. 사용자가 배경을 클릭했을 때도 모달이 닫힐 수 있도록 핸들러를 추가해 주세요.
| <div className="modal-backdrop"></div> | |
| <div className="modal-backdrop" onClick={onClose}></div> |
| // <div className="modal modal--open"> --- IGNORE --- | ||
| // 개발 단계에서는 모달이 닫흰 상태이므로 modal--open 클래스를 임시제거 |
There was a problem hiding this comment.
코드 내에 IGNORE와 같은 주석이나 임시 코드를 남겨두는 것보다, React의 상태(state)를 활용하여 클래스를 동적으로 제어하거나 조건부 렌더링을 적용하는 것이 더 바람직한 구현 방식입니다.
| <div className="modal-backdrop"></div> | ||
| <div className="modal-container"> | ||
| <h2 className="modal-title text-title">새로운 음식점</h2> | ||
| <form> |
There was a problem hiding this comment.
현재 <form> 태그에 onSubmit 핸들러가 없어 버튼 클릭 시 페이지가 새로고침될 수 있습니다. e.preventDefault()를 추가하여 기본 동작을 방지하는 것이 좋습니다.
| <form> | |
| <form onSubmit={(e) => e.preventDefault()}> |
| <option value="전체">전체</option> | ||
| <option value="한식">한식</option> | ||
| <option value="중식">중식</option> | ||
| <option value="일식">일식</option> | ||
| <option value="양식">양식</option> | ||
| <option value="아시안">아시안</option> | ||
| <option value="기타">기타</option> |
There was a problem hiding this comment.
카테고리 목록(한식, 중식 등)이 CategoryFilter와 AddRestaurantModal 등 여러 곳에 중복되어 하드코딩되어 있습니다. 이를 constants/categories.js와 같은 별도 파일로 분리하여 관리하면 데이터 일관성을 유지하고 유지보수성을 높일 수 있습니다.
| return ( | ||
| <header className="gnb"> | ||
| <h1 className="gnb__title text-title">점심 뭐 먹지</h1> | ||
| <button type="button" className="gnb__button" aria-label="음식점 추가"> |
There was a problem hiding this comment.
음식점 추가 버튼에 클릭 이벤트 핸들러가 연결되어 있지 않습니다. App 컴포넌트에서 모달의 열림 상태를 제어하는 함수를 프롭으로 전달받아 연결해 주어야 기능이 정상적으로 동작할 것입니다.
1 participant
안녕하세요, 김의천 리뷰어님! 프론트엔드 4기 홍의민입니다.
이전에 React를 잠깐 다뤄본 적이 있지만, 당시에는 useState가 정확히 어떤 역할을 하는지 제대로 이해하지 못한 채 클론 코딩 수준에 머물렀습니다. 그런데 3주차 미션인 좀비 서바이벌을 진행하면서 render, state, notify, listener를 활용해 MVVM 패턴을 직접 구현해 보았고, 상태 변화에 따라 화면이 갱신되는 구조를 손으로 만들어 본 경험이 이번 미션에서 큰 도움이 되었습니다.
그때 직접 설계했던 상태 관리 로직이 결국 React의 useState와 같은 맥락이라는 걸 체감하니, 이전에는 모호하게 느껴졌던 단방향 데이터 흐름이나 선언적 UI 구성 같은 개념들이 훨씬 자연스럽게 와닿았습니다. 이해 없이 따라 치는 느낌에서 논리를 알고 시작하는 느낌으로 바뀌어서 작업하는 내내 재밌었습니다.
이번 미션에서는 3단계 Event Handler까지 구현하였습니다.
1단계: /templates의 HTML을 기반으로 Header, CategoryFilter, RestaurantList, RestaurantItem, RestaurantDetailModal, AddRestaurantModal 컴포넌트로 분리하고, class → className, for → htmlFor 등 JSX 문법에 맞게 변환했습니다.
2단계: 음식점 데이터를 constants/restaurants.js로 분리하고, App에서 useState로 카테고리 상태를 관리하여 필터링된 목록을 RestaurantList에 props로 전달하도록 구현했습니다.
3단계: 음식점 아이템 클릭 시 isModalOpen과 selectedRestaurant 상태를 변경하여 RestaurantDetailModal을 조건부 렌더링하고, 닫기 버튼과 backdrop 클릭으로 모달을 닫도록 구현했습니다.
기타 변경사항
UX 개선을 위해 App.css:131에 cursor: pointer를 추가하여 클릭 가능한 요소에 포인터 커서가 표시되도록 했습니다.
AddRestaurantModal.jsx에서 1~3단계 미션 구현을 위해
리뷰를 통해 부족한 부분을 개선하고 React에 대한 이해를 더 깊이 하고 싶습니다. 잘 부탁드립니다!
Directory Structure
view image
video
2026-04-07.2.29.27.mov