[1주차 미션] 남수빈 미션 제출합니다. #51
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hello @ssuebin, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
Summary of Changes
This pull request by ssuebin introduces the basic layout and styling for a restaurant listing application. It includes components for the header, category filter, and the restaurant list itself. The category filter is present but not yet functional. The overall structure and styling are implemented, providing a foundation for future development.
Highlights
- Component Structure: The PR introduces three main components:
Header,CategoryFilter, andRestaurantList, which are imported and used withinApp.jsx. - Styling: A comprehensive
App.cssfile is added to provide styling for the application, including colors, typography, and layout for various elements. - Category Filter: A
CategoryFiltercomponent is implemented with a select dropdown for filtering restaurant categories, although the filtering functionality is not yet implemented. - Restaurant List: The
RestaurantListcomponent displays a static list of restaurants with their categories, names, and descriptions.
Changelog
Click here to see the changelog
- src/App.css
- Added a comprehensive CSS file to style the application.
- Defined colors, typography, and layout for various components.
- Implemented styling for the header, category filter, restaurant list, and modal elements.
- src/App.jsx
- Imported and used the
Header,CategoryFilter, andRestaurantListcomponents. - Implemented the basic layout of the application using these components.
- Imported and used the
- src/components/CategoryFilter.jsx
- Created a
CategoryFiltercomponent with a select dropdown for filtering restaurant categories. - Added options for '전체', '한식', '중식', '일식', '양식', '아시안', and '기타'.
- Created a
- src/components/RestaurantList.jsx
- Implemented a
RestaurantListcomponent to display a list of restaurants. - Included static data for several restaurants with their categories, names, and descriptions.
- Used images for restaurant categories.
- Implemented a
- src/components/header.jsx
- Created a
Headercomponent with a title and an 'add restaurant' button. - Added basic styling for the header.
- Created a
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
A list of restaurants,
Styled with care, but not yet,
Filters wait to work.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
The pull request introduces several React components (Header, CategoryFilter, and RestaurantList) to display a list of restaurants with a category filter. The code is well-structured and uses CSS for styling. However, there are a few areas that could be improved for better maintainability and functionality.
Summary of Findings
- Missing Functionality in Category Filter: The CategoryFilter component is implemented, but the filtering functionality is not yet implemented. This should be addressed to provide the intended user experience.
- Image Paths: The image paths in RestaurantList.jsx are relative and might cause issues when the application is deployed. Using absolute paths or importing the images would be more robust.
Merge Readiness
The pull request is not quite ready for merging. The category filter functionality needs to be implemented, and the image paths should be reviewed and potentially updated. Once these issues are addressed, the pull request can be considered for merging. I am unable to approve this pull request, and recommend that others review and approve this code before merging.
| function CategoryFilter(){ | ||
| return ( | ||
| <section className="restaurant-filter-container"> | ||
| <select name="category" id="category-filter" className="restaurant-filter" aria-label="음식점 카테고리 필터"> | ||
| <option value="전체">전체</option> | ||
| <option value="한식">한식</option> | ||
| <option value="중식">중식</option> | ||
| <option value="일식">일식</option> | ||
| <option value="양식">양식</option> | ||
| <option value="아시안">아시안</option> | ||
| <option value="기타">기타</option> | ||
| </select> | ||
| </section> | ||
| ); | ||
| } |
There was a problem hiding this comment.
The component is created, but the actual filtering logic is missing. Consider adding a state to manage the selected category and a function to filter the restaurant list based on the selected category. You can pass the filter function and the restaurant list from the parent component (App.jsx).
| <li className="restaurant"> | ||
| <div className="restaurant__category"> | ||
| <img | ||
| src="./templates/category-korean.png" |
There was a problem hiding this comment.
Using relative paths for images can lead to issues when deploying the application or changing the directory structure. Consider using absolute paths or importing the images directly into the component. For example, you can import the images like import koreanCategory from './templates/category-korean.png'; and then use {koreanCategory} in the src attribute.
import koreanCategory from "./templates/category-korean.png";
|
|
||
| <li className="restaurant"> | ||
| <div className="restaurant__category"> | ||
| <img src="./templates/category-etc.png" alt="기타" className="category-icon" /> |
There was a problem hiding this comment.
Similar to the other image paths, this should also be updated to use either an absolute path or import the image directly.
import etcCategory from "./templates/category-etc.png";
| </div>; | ||
| } | ||
|
|
||
| export default App; |
| @@ -0,0 +1,17 @@ | |||
| function CategoryFilter(){ | |||
There was a problem hiding this comment.
오! 여기 그냥 function 써도 되는 거였군요. 감사합니다
2 participants
app.jsx파일에서 활용할 컴포넌트 세 개를 만들어 import하였습니다.
CategoryFilter.jsx, header.jsx, RestaurantList.jsx를 활용하였습니다.
category filter를 만들었지만, 실제로 필터 기능이 작동하지는 않아서 그 부분을 수정하면 좋을 것 같습니다.