Chore link canonical 추가 #108
Conversation
- 따로 컴포넌트로 분리화함 메타데이터와 use client때문
…into chore-link-canonical-추가
![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!
This pull request focuses on improving the main homepage's search engine optimization by implementing a canonical URL. Additionally, it includes a significant refactoring of the home page's component structure, separating client-side interactivity into a new component to better utilize Next.js's server and client component architecture.
Highlights
- SEO Enhancement: I've added a canonical link (
<link rel="canonical" href="https://snac-app.com/">) to the main homepage (app/page.tsx). This helps search engines understand the preferred version of the page, preventing duplicate content issues and improving SEO. - Next.js Component Refactoring: The home page component has been refactored to align with Next.js App Router best practices. All client-side logic and UI previously residing in
app/page.tsxhave been extracted into a new dedicated client component,app/HomePage.tsx. This allowsapp/page.tsxto function as a server component, primarily handling metadata and rendering the client component.
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. ↩
There was a problem hiding this comment.
Code Review
이번 PR은 홈페이지에 canonical 태그를 추가하고, 기존 page.tsx의 클라이언트 로직을 HomePage.tsx 컴포넌트로 분리하는 리팩토링을 진행했습니다. 코드 분리는 Next.js 앱 라우터의 권장 패턴을 잘 따르고 있습니다.
리뷰에서는 몇 가지 개선점을 제안했습니다. 주요 내용으로는 useEffect 의존성 배열의 누락으로 인한 버그 수정, API 요청 시 서버 필터링을 활용한 성능 최적화, 디버깅용 콘솔 로그 제거, 그리고 스타일 가이드에 맞는 파일명 규칙 적용 등이 있습니다. 이러한 부분들을 수정하면 코드의 안정성과 효율성을 더욱 높일 수 있을 것입니다.
| const queryString = generateQueryParams({ | ||
| cardCategory: cardCategory, | ||
| sellStatusFilter: 'ALL' as SellStatus, | ||
| priceRanges: [priceRange], | ||
| highRatingFirst, | ||
| size: PAGE_SIZE, | ||
| lastCardId, | ||
| lastUpdatedAt, | ||
| carrier: carrierForQuery, | ||
| favoriteOnly: false, | ||
| }); |
There was a problem hiding this comment.
현재 API에서 모든 상태의 카드를 가져온 후 클라이언트 측에서 transactionStatus와 postView(FAVORITE_POSTS)에 따라 필터링하고 있습니다. 이는 네트워크와 클라이언트 모두에 부담을 주어 비효율적일 수 있습니다.
generateQueryParams 함수는 sellStatusFilter와 favoriteOnly 파라미터를 지원하는 것으로 보입니다. 이 파라미터들을 활용하여 서버 측에서 필터링을 수행하도록 수정하면 성능을 개선하고 클라이언트 측 로직을 단순화할 수 있습니다.
제안:
sellStatusFilter에transactionStatus값을 전달합니다. (TRADING상태는 백엔드에서 지원하지 않는 경우 클라이언트 필터링을 유지해야 할 수 있습니다.)postView가FAVORITE_POSTS일 때favoriteOnly를true로 설정합니다.
이렇게 변경하면, 이후의 클라이언트 측 필터링 로직(lines 217-222)도 함께 수정되어야 합니다.
const queryString = generateQueryParams({
cardCategory: cardCategory,
sellStatusFilter:
transactionStatus && transactionStatus !== 'TRADING'
? transactionStatus
: 'ALL',
priceRanges: [priceRange],
highRatingFirst,
size: PAGE_SIZE,
lastCardId,
lastUpdatedAt,
carrier: carrierForQuery,
favoriteOnly: postView === 'FAVORITE_POSTS',
});| }, [ | ||
| currentPage, | ||
| cardPages, | ||
| cardCategory, | ||
| category, | ||
| transactionStatus, | ||
| priceRange, | ||
| sortBy, | ||
| carrier, | ||
| ]); |
There was a problem hiding this comment.
데이터를 가져오는 useEffect의 의존성 배열에 postView가 누락되었습니다. postView 필터가 변경될 때 useEffect가 다시 실행되지 않아 데이터가 갱신되지 않는 버그가 발생할 수 있습니다.
또한, carrier는 이 useEffect 내에서 직접 사용되지 않으므로 의존성 배열에서 제거하는 것이 좋습니다. carrierForQuery는 category 상태를 기반으로 생성되고 있습니다.
}, [
currentPage,
cardPages,
cardCategory,
category,
transactionStatus,
priceRange,
sortBy,
postView
]);| }); | ||
|
|
||
| const fullUrl = `${API_BASE}/cards/scroll?${queryString}&_v=${new Date().getTime()}`; | ||
| console.log('[요청 URL]', fullUrl); |
| filteredCards = filterCardsByPostView(filteredCards, postView); | ||
|
|
||
| // sortBy에 따라 카드 정렬 | ||
| filteredCards = sortCards(filteredCards, sortBy); |
There was a problem hiding this comment.
API 요청 시 highRatingFirst 파라미터를 통해 서버 측 정렬을 이미 요청하고 있습니다. 그런데 클라이언트 측에서 sortCards 함수를 통해 다시 정렬을 수행하고 있어 중복 작업이 발생할 수 있습니다.
서버에서 반환된 데이터가 이미 원하는 순서로 정렬되어 있다면, 이 클라이언트 측 정렬 로직은 제거하여 성능을 향상시킬 수 있습니다. 만약 서버 측 정렬이 충분하지 않아 (예: 2차 정렬 기준 부재) 클라이언트 정렬이 의도된 것이라면, 코드에 주석으로 그 이유를 명시해주는 것이 좋겠습니다.1
Style Guide References
Footnotes
| @@ -1,288 +1,12 @@ | |||
| 'use client'; | |||
| import { Metadata } from 'next'; | |||
| import HomePage from './HomePage'; // 클라이언트 컴포넌트 분리 | |||
There was a problem hiding this comment.
3 participants
📝 변경 사항
🔍 변경 사항 세부 설명
🕵️♀️ 요청사항
📷 스크린샷 (선택)