[1,2,3단계 미션] 김동건 미션 제출합니다.

[rahwan10]

안녕하세요. 임규영 리뷰어님! 프론트엔드 4기 김동건입니다.

그리디에서 어느덧 4주차 미션까지 하게됐지만 여전히 미숙한것같습니다. 그리디 템포에 잘 따라갈수있도록 열심히 하겠습니다!

react에 대해 처음 배우게 됐는데 기본적인 HTML, CSS, JS로 코드를 짜는것과 분명 비슷하면서도 결이 다름을 느꼈습니다. HTML을 만드는데 JS를 섞어서 쓰는 느낌이었어서 기존에 HTML에서 id로 받고 js에서 document로 불러와서 실행하는것보다 훨씬 쉽고 편하게 느껴졌습니다! 그리고 useState라는 함수가 너무 신기했는데 useState를 통해서 변수에 새로운 값을 할당하면 전체적으로 화면이 업데이트가 되는 점이 화면 업데이트를 하는것도 처음엔 좀 낯설었지만 굉장히 편하다고 생각합니다!

이번 미션에서 3단계인 Event Handler까지 구현을 했습니다 미션에 맞춰 순서대로 화면을 컴포넌트별로 나눠서 app하나에 다 import/export를 하였고 data에 각 음식점의 이름, 설명, 카테고리를 담은 배열을 app에 export하여 CategoryFilter에서 선택한거에 따라 useState를 사용하여 바로 바뀐 category값을 RestaurantList에 전달하여 화면이 바뀌도록 하였습니다.

그리고 아이템을 클릭하면 useState로 isOpen값을 true restarurantsDetailModal화면이 열리거나 열렸을때 백드롭이나 닫기버튼을 누르면 isOpen값을 false로 바꾸어 닫히도록 구현했습니다

리뷰어님과의 티키타카를 통해 REACT에 더 가까이 다가가고 싶습니다. 다음주 화요일까지 열심히 수정하고 더 공부하겠습니다 감사합니다!

Directory Structure

view image

4.mp4

[gemini-code-assist]

Code Review

This pull request implements a restaurant management application, including features for listing, filtering, and adding restaurants via modals. The feedback focuses on improving robustness and code quality, such as preventing default form submission, using optional chaining for safer property access, correcting HTML attribute usage, fixing CSS class name mismatches, and optimizing performance by moving static data outside of component definitions.

[gemini-code-assist]

폼 내부에서 엔터 키를 누르면 기본적으로 제출(submit) 이벤트가 발생하여 페이지가 새로고침될 수 있습니다. 이를 방지하기 위해 onSubmit 핸들러에서 e.preventDefault()를 호출하는 것이 좋습니다.

Suggested change

	<form >
	<form onSubmit={(e) => e.preventDefault()}>

[gemini-code-assist]

selectedRestaurant가 undefined일 경우 속성에 접근할 때 에러가 발생하여 앱이 중단될 수 있습니다. 옵셔널 체이닝(?.)을 사용하여 안전하게 데이터를 렌더링하세요.

Suggested change

	<h2 className="modal-title text-title">{selectedRestaurant.name}</h2>
	<div className="restaurant-info">
	<p className="restaurant-info__description text-body">
	{selectedRestaurant.description}
	</p>
	<h2 className="modal-title text-title">{selectedRestaurant?.name}</h2>
	<div className="restaurant-info">
	<p className="restaurant-info__description text-body">
	{selectedRestaurant?.description}
	</p>

[gemini-code-assist]

상태의 초기값으로 공백 문자열(" ")을 사용하면 나중에 ID 비교 시 혼란을 줄 수 있습니다. 선택된 항목이 없음을 명확히 나타내기 위해 null이나 빈 문자열("")을 사용하는 것이 좋습니다.

Suggested change

	const [restaurantDetail,setDetail]=useState(" ");
	const [restaurantDetail, setDetail] = useState(null);

[gemini-code-assist]

htmlFor 속성에는 연결할 요소의 id만 들어가야 합니다. 현재 클래스명(text-caption)이 포함되어 있어 레이블과 입력 요소가 정상적으로 연결되지 않습니다. 스타일은 className을 이용해 주세요. (28행, 33행의 레이블도 동일한 수정이 필요합니다.)

Suggested change

	<label htmlFor="category text-caption">카테고리</label>
	<label htmlFor="category" className="text-caption">카테고리</label>

[gemini-code-assist]

Header.css 파일에는 .gnb__title(언더바 2개)로 정의되어 있으나, JSX에서는 gnb_title(언더바 1개)로 작성되어 스타일이 적용되지 않습니다. 클래스명을 일치시켜 주세요.

Suggested change

	<h1 className="gnb_title text-title">점심 뭐 먹지</h1>
	<h1 className="gnb__title text-title">점심 뭐 먹지</h1>

[gemini-code-assist]

categoryImage 객체는 정적인 데이터이므로 컴포넌트 외부에서 한 번만 선언하는 것이 효율적입니다. 현재는 리렌더링될 때마다 객체가 새로 생성되고 있습니다.