refactor: 홈페이지 카드들 -> cards 로 이관작업 #121
Conversation
- 헤더에 일반 거래 추가
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @hyonun321, 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!
I've refactored the application's structure by migrating the entire card display and management system from the main homepage to a new, dedicated /cards route. This change significantly streamlines the homepage, allowing it to focus on core content, while providing a specialized section for general transactions. To facilitate navigation, I've also introduced a new 'General Transaction' link in the header that directs users to this new card-centric page. This refactoring enhances modularity, improves code organization, and sets the stage for more focused feature development.
Highlights
- Dedicated Cards Page: The core logic and display of data item cards, including fetching, filtering, sorting, and pagination, have been extracted from
app/HomePage.tsxand relocated toapp/cards/page.tsx. This creates a dedicated and more maintainable section for general transactions. - New Navigation Entry: A new navigation link labeled '일반 거래' (General Transaction), accompanied by a grid icon, has been added to the main application header. This link provides direct access to the newly created
/cardspage. - Homepage Simplification: The
app/HomePage.tsxfile has been significantly simplified by removing all complex card management logic. It now focuses solely on rendering theBannerandArticleSection, making the homepage cleaner and more performant. - Component Consolidation and Relocation: Several components previously residing in the
cardsdirectory (cards-layout.tsx,cards-section.tsx,data-avgs.tsx) have been removed. Their functionalities have either been integrated directly intoapp/cards/page.tsxor their components (likeDataAvgandHomeLayout) have been moved toapp/homeand are now imported intoapp/cards/page.tsx. - UI/UX and Code Clarity Improvements: Minor styling adjustments were made to
DataItemCard.tsxto improve responsiveness across different screen sizes. Additionally, new Korean comments were added to enhance code clarity and maintainability.
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 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 or fill out our survey 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.
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. ↩
| <div className="transition-transform duration-300 hover:scale-[1.02] relative bg-[#F3F5F7] rounded-2xl shadow-md max-w-[150px] max-h-[203px] md:w-[238px] md:max-w-none md:max-h-[348px] flex flex-col p-3"> | ||
| {isNew && ( | ||
| <span className="absolute top-3 left-3 z-10 bg-red text-white text-regular-2xs md:text-regular-xs font-bold w-[47px] md:w-[57px] h-[20px] md:h-[24px] rounded-[16px] flex items-center justify-center"> | ||
| <span className="absolute z-10 bg-red text-white text-regular-2xs md:text-regular-xs font-bold w-[47px] md:w-[57px] h-[20px] md:h-[24px] rounded-[16px] flex items-center justify-center "> |
There was a problem hiding this comment.
isNew 배지를 표시하는 <span> 태그에서 top-3 left-3 클래스가 누락되어 배지가 의도한 위치에 표시되지 않습니다. 또한, 클래스 목록에 불필요한 공백이 포함되어 있습니다.
<span className="absolute top-3 left-3 z-10 bg-red text-white text-regular-2xs md:text-regular-xs font-bold w-[47px] md:w-[57px] h-[20px] md:h-[24px] rounded-[16px] flex items-center justify-center">| <Image | ||
| src={imageUrl} | ||
| alt={title} | ||
| fill |
There was a problem hiding this comment.
next/image 컴포넌트에서 sizes 속성이 제거되었습니다. 이 속성은 다양한 화면 크기에 맞는 최적의 이미지를 제공하여 성능을 향상시키고 레이아웃 시프트(CLS)를 방지하는 데 중요합니다. 이 속성을 다시 추가하는 것을 권장합니다.
fill
sizes="(max-width: 768px) 50vw, (max-width: 1024px) 33vw, 25vw"|
|
||
| <div className="flex-grow flex flex-col items-center md:items-start md:py-[18px] mt-2"> | ||
| <h3 className="text-medium-xs font-bold md:text-medium-md text-[#141718] truncate w-full text-center md:text-left"> | ||
| <h3 className="text-medium-xs font-bold md:text-medium-md text-[#141718]"> |
There was a problem hiding this comment.
제목을 표시하는 <h3> 태그에서 truncate w-full text-center md:text-left 클래스가 제거되었습니다. truncate 클래스가 없으면 긴 제목이 카드 레이아웃을 깨뜨릴 수 있습니다. 의도된 변경이 아니라면 클래스를 복원하는 것을 고려해 보세요.
<h3 className="text-medium-xs font-bold md:text-medium-md text-[#141718] truncate w-full text-center md:text-left">| {cardCategory === 'SELL' && ( | ||
| <Button | ||
| onClick={() => { | ||
| console.log(cardId); |
There was a problem hiding this comment.
디버깅 목적으로 사용된 console.log 문이 코드에 남아있습니다. 프로덕션 코드에 포함되지 않도록 병합 전에 제거해야 합니다.
| <Button | ||
| onClick={() => { | ||
| console.log(cardId); | ||
| // 수정하기 로직 |
|
|
||
| <Button | ||
| onClick={() => { | ||
| // 삭제하기 로직 |
|
|
||
| export default function CardsPage() { | ||
| // WebSocket 가드 사용 | ||
| export default function HomePage() { |
There was a problem hiding this comment.
파일 경로는 app/cards/page.tsx이지만 컴포넌트 이름은 HomePage로 되어 있습니다. 이는 혼란을 야기하고 유지보수를 어렵게 할 수 있습니다. 파일 경로와 일관되게 CardsPage로 변경하는 것이 좋겠습니다.
export default function CardsPage() {| const router = useRouter(); | ||
|
|
||
| const handleBuyClick = (item: CardData) => { | ||
| // 거래 페이지로 이동 |
3 participants
📝 변경 사항
🔍 변경 사항 세부 설명
🕵️♀️ 요청사항
📷 스크린샷 (선택)