feat: 구글 검색 유입을 위한 SEO 메타태그 및 크롤링 인프라 구성#318
Merged
Merged
Conversation
- react-helmet-async 패키지 설치 (v3.0.0) - main.tsx에 HelmetProvider 추가 - 공통 SEOHead 컴포넌트 생성 (src/components/common/SEOHead.tsx) - title, description props 기반 동적 메타태그 주입 - 기본값: 기존 index.html의 title/description 유지
- SearchBook.tsx: 책 제목(title), 저자명(authorName) 기반 동적 title/description 주입 - GroupDetail.tsx: 모임명(roomName), 책 제목(bookTitle) 기반 동적 title/description 주입 - 데이터 로드 전(null 상태)에는 기본값 유지
- public/robots.txt 추가: 크롤러 허용/차단 경로 명시 - public/sitemap.xml 추가: 주요 경로 정적 sitemap 구성 - Google Search Console 제출로 인덱싱 속도 단축 예정
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
워크스루이 PR은 react-helmet-async 라이브러리를 통합하여 애플리케이션에 SEO 메타데이터 관리 기능을 추가합니다. HelmetProvider를 루트에 추가하고, SEOHead 컴포넌트를 생성하여 동적 페이지 제목과 설명을 관리합니다. robots.txt와 sitemap.xml 정적 파일도 함께 추가됩니다. 변경 사항
시퀀스 다이어그램sequenceDiagram
participant Browser as Browser
participant App as App Root
participant HelmetProvider as HelmetProvider
participant Page as Page Component
participant SEOHead as SEOHead Component
participant Helmet as Helmet (DOM)
Browser->>App: Load Application
App->>HelmetProvider: Wrap with HelmetProvider
HelmetProvider->>App: Provide Helmet Context
App->>Page: Render Page (e.g., GroupDetail)
Page->>Page: Load page data
Page->>SEOHead: Render with title & description
SEOHead->>Helmet: Update <title> & <meta> tags
Helmet->>Browser: Inject metadata into <head>
Browser->>Browser: Display page with SEO metadata
예상 코드 검토 노력🎯 3 (Moderate) | ⏱️ ~20 분 관련 가능성 있는 PR들
제안 라벨
제안 검토자
토끼의 시
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/pages/groupDetail/GroupDetail.tsx (1)
94-96: 단일 Promise에 Promise.all 사용은 불필요합니다.
Promise.all에 단일 요소 배열만 전달하고 있어 불필요한 복잡성이 추가됩니다.minLoadingTime과의 병렬 실행이 목적이라면 두 Promise를 함께 배열에 포함해야 합니다.♻️ 수정 제안
const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500)); - const [response] = await Promise.all([getRoomDetail(Number(roomId))]); + const [response] = await Promise.all([getRoomDetail(Number(roomId)), minLoadingTime]); - await minLoadingTime;또는 단순화:
const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500)); - const [response] = await Promise.all([getRoomDetail(Number(roomId))]); - await minLoadingTime; + const response = await getRoomDetail(Number(roomId)); + await minLoadingTime;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/groupDetail/GroupDetail.tsx` around lines 94 - 96, The current code creates minLoadingTime and uses Promise.all with a single getRoomDetail promise which is unnecessary; either run getRoomDetail and minLoadingTime in parallel by awaiting Promise.all([getRoomDetail(Number(roomId)), minLoadingTime]) and destructure the room detail from the result, or simplify by awaiting getRoomDetail(Number(roomId)) then awaiting minLoadingTime sequentially; update the usage of response accordingly (e.g., rename to roomDetail) so consumers of the fetched data use the correct variable.public/sitemap.xml (1)
1-15: 기본 sitemap 구조는 적절합니다.정적 sitemap으로 주요 페이지를 포함하고 있습니다. 향후 동적 페이지(
/search/book/:isbn,/group/detail/:roomId)가 많아지면 서버 사이드에서 동적 sitemap 생성을 고려해볼 수 있습니다.
<lastmod>와<changefreq>태그 추가도 선택적으로 고려해보세요.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@public/sitemap.xml` around lines 1 - 15, 현재 정적 sitemap.xml에 주요 정적 경로만 포함되어 있는데, 향후 동적 페이지(`/search/book/:isbn`, `/group/detail/:roomId`)를 고려하여 서버사이드로 동적 sitemap을 생성할 수 있도록 준비하고, 또한 각 <url> 항목에 선택적으로 <lastmod>와 <changefreq> 태그를 추가하여 크롤러에게 업데이트 시기와 빈도를 알리도록 수정하세요; 구현 방법은 정적 public/sitemap.xml 대신 서버 엔드포인트(예: /sitemap.xml)를 만들어 URL 집합을 동적으로 생성하고 각 항목에 대해 lastmod 값(예: 게시일 또는 업데이트 타임스탬프)과 changefreq 값을 포함하도록 반환하면 됩니다.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@public/sitemap.xml`:
- Around line 1-15: 현재 정적 sitemap.xml에 주요 정적 경로만 포함되어 있는데, 향후 동적
페이지(`/search/book/:isbn`, `/group/detail/:roomId`)를 고려하여 서버사이드로 동적 sitemap을 생성할
수 있도록 준비하고, 또한 각 <url> 항목에 선택적으로 <lastmod>와 <changefreq> 태그를 추가하여 크롤러에게 업데이트 시기와
빈도를 알리도록 수정하세요; 구현 방법은 정적 public/sitemap.xml 대신 서버 엔드포인트(예: /sitemap.xml)를 만들어
URL 집합을 동적으로 생성하고 각 항목에 대해 lastmod 값(예: 게시일 또는 업데이트 타임스탬프)과 changefreq 값을 포함하도록
반환하면 됩니다.
In `@src/pages/groupDetail/GroupDetail.tsx`:
- Around line 94-96: The current code creates minLoadingTime and uses
Promise.all with a single getRoomDetail promise which is unnecessary; either run
getRoomDetail and minLoadingTime in parallel by awaiting
Promise.all([getRoomDetail(Number(roomId)), minLoadingTime]) and destructure the
room detail from the result, or simplify by awaiting
getRoomDetail(Number(roomId)) then awaiting minLoadingTime sequentially; update
the usage of response accordingly (e.g., rename to roomDetail) so consumers of
the fetched data use the correct variable.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: a1675a90-7d34-4991-8aa0-d9f67df9b5ad
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (7)
package.jsonpublic/robots.txtpublic/sitemap.xmlsrc/components/common/SEOHead.tsxsrc/main.tsxsrc/pages/groupDetail/GroupDetail.tsxsrc/pages/searchBook/SearchBook.tsx
heeeeyong
reviewed
Mar 5, 2026
Collaborator
heeeeyong
left a comment
heeeeyong
left a comment
There was a problem hiding this comment.
CSR 구조에서도 동적으로 메타태그를 적용해 사용할 수 있다니 되게 좋은것같습니다!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📝작업 내용
react-helmet-async설치,main.tsx에HelmetProvider추가SEOHead생성 (src/components/common/SEOHead.tsx)SearchBook.tsx: 책 제목·저자 기반 동적 title/description 주입GroupDetail.tsx: 모임명·책 제목 기반 동적 title/description 주입public/robots.txt추가: 크롤러 허용/차단 경로 명시public/sitemap.xml추가: 주요 경로 정적 sitemap 구성참고
Summary by CodeRabbit
릴리스 노트
새 기능
기타