✨Feat: SEO 개선 #269

HarrySeop · 2025-04-28T19:38:54Z

이슈 번호

✨Feat: SEO 개선 #268

📌 주요 변경 사항

각각의 페이지에 타이틀, 메타태그를 적용했습니다.

✅ 체크리스트

PR 하기 전에 이슈에서 빼먹은건 없는지 확인했습니다.
- 구현 기간에 맞는 이슈에서 서브이슈로 등록했습니다.
- 라벨 및 마일스톤을 사이드 탭에서 등록했습니다.
- PR 사이드 탭에서는 Projects을 등록 하지않았습니다.
PR을 보내는 브랜치가 올바른지 확인했습니다.
팀원들이 리뷰하기 쉽도록 설명을 자세하게 작성했습니다.
변경사항을 충분히 테스트 했습니다.
(함수를 구현 했을 때) JSDoc을 양식에 맞춰서 작성했습니다.
컨벤션에 맞게 구현했습니다.

📷 UI 변경 사항 (선택)

구현 후

❓무슨 문제가 발생했나요 ?

각 페이지별로 겹치는 부분을 컴포넌트 분리해서 구현하면 좋을 것 같았지만 우선 각각의 페이지에 적용해줬습니다.

Summary by CodeRabbit

신규 기능
- 랜딩 페이지, 리스트 페이지, 마이 페이지에 SEO 및 소셜 미디어 메타 태그가 추가되어 검색 엔진 및 소셜 공유 시 정보가 더욱 풍부하게 표시됩니다.
버그 수정
- 마이 페이지에서 아이돌 추가 시, 선택된 프로필이 없을 경우 경고 알림이 표시되어 실수로 빈 목록을 추가하는 것을 방지합니다.
스타일
- 사이트의 문서 제목이 "StarSync"로 단순화되었습니다.

# 커밋 메시지 형식 # <이모지><타입>: <제목> (#이슈 번호) # # ⛔ 제목은 100자 이내, 끝에 마침표(.) 사용 금지 # ⛔ 이모지와 타입 사이에 공백 없이 붙여 씁니다 (예: ✨Feat) # ⛔ 제목과 콜론(:) 사이에 공백 없이 붙이고, 콜론 뒤에는 공백 1칸 필요 # ✅ 제목은 커밋의 "무엇"을 나타냅니다 # ✅ 본문은 "왜", "어떻게"를 요약하며, 선택사항입니다 # ✅ 본문은 여러 줄의 메시지를 작성할 땐 "-"로 구분 # 예시: # ✨Feat: 마이페이지 수정 기능 추가 (#15) # 커밋 타입 가이드: # ✨ Feat : 새로운 기능 추가 # 🐛 Fix : 버그 수정 # 📦 Chore : 설정/빌드 수정, 기타 잡일 # 💄 Style : 포맷팅, 세미콜론 등 비즈니스 로직 없는 변경 # 📝 Docs : 문서 작성 및 수정 # ♻️ Refactor : 리팩토링 (동작 변경 없이 코드 개선)

coderabbitai · 2025-04-28T19:39:00Z

📝 Walkthrough

Walkthrough

이번 변경에서는 여러 페이지 컴포넌트에 SEO 및 소셜 미디어 메타데이터 태그가 추가되었습니다. 각 페이지(LandingPage, ListPage, MyPage)는 이제 React Fragment를 사용하여 <title> 및 다양한 <meta> 태그를 렌더링합니다. 또한, Open Graph 이미지 URL을 상수로 분리하여 재사용합니다. MyPage에서는 "추가하기" 버튼 클릭 시 선택된 프로필이 없을 경우 경고 알림을 표시하도록 로직이 보강되었습니다. HTML 문서의 타이틀도 "StarSync"로 단순화되었습니다.

Changes

파일/경로	변경 요약
index.html	문서의 `<title>`을 "Fandom-K \| StarSync"에서 "StarSync"로 변경
src/pages/landing/LandingPage.jsx	SEO 및 소셜 미디어 메타태그 추가, React Fragment로 구조 변경, Open Graph 이미지 상수 도입
src/pages/list/ListPage.jsx	SEO 및 소셜 미디어 메타태그 추가, React Fragment로 구조 변경, Open Graph 이미지 상수 도입
src/pages/my/MyPage.jsx	SEO 및 소셜 미디어 메타태그 추가, React Fragment로 구조 변경, Open Graph 이미지 상수 도입,
	"추가하기" 버튼 클릭 시 선택된 프로필 없을 때 경고 알림 추가

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant MyPage
    participant Alert

    User->>MyPage: "추가하기" 버튼 클릭
    alt 선택된 프로필 있음
        MyPage->>MyPage: addMyIdols() 호출
    else 선택된 프로필 없음
        MyPage->>Alert: 경고 알림 ("아이돌을 추가해주세요.")
    end

Suggested reviewers

sgoldenbird
yuj2n

Poem

🌟
별빛 아래 타이틀이 새로워졌네,
SEO 태그로 페이지가 반짝이네!
오픈그래프 이미지도 상수로 딱,
"추가하기"엔 경고도 척!
토끼는 기뻐서 귀를 쫑긋,
StarSync의 밤은 더욱 빛나네.
🐇✨

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ca5769c and 2b070bf.

⛔ Files ignored due to path filters (1)

public/default-og.png is excluded by !**/*.png

📒 Files selected for processing (4)

index.html (1 hunks)
src/pages/landing/LandingPage.jsx (2 hunks)
src/pages/list/ListPage.jsx (2 hunks)
src/pages/my/MyPage.jsx (2 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (1)

src/pages/landing/LandingPage.jsx (5)

src/pages/list/ListPage.jsx (1)

DEFAULT_OG_IMAGE (17-17)

src/pages/my/MyPage.jsx (1)

DEFAULT_OG_IMAGE (23-23)

src/components/loadingStatus/pendingUI/PendingUI.jsx (1)

stars (5-19)

src/pages/landing/landingPage.styles.js (2)

section (91-102)

section (91-102)

src/components/button/customButton/CustomButton.jsx (1)

CustomButton (46-89)

🔇 Additional comments (9)

index.html (1)

6-6: 타이틀 변경이 적절하게 이루어졌습니다.

페이지 타이틀을 "Fandom-K | StarSync"에서 "StarSync"로 간소화하여 브랜드 일관성과 단순함을 제공합니다. 이는 SEO 개선 목표에 맞게 잘 변경되었습니다.

src/pages/list/ListPage.jsx (2)

17-18: 상수 정의가 적절합니다.

Open Graph 이미지 URL을 상수로 분리하여 코드의 가독성과 재사용성을 높였습니다. 다른 페이지와 동일한 패턴을 사용하여 일관성을 유지하고 있습니다.

34-59: SEO 메타 태그가 적절하게 추가되었습니다.

React Fragment를 사용하여 다양한 SEO 관련 메타 태그를 추가하셨습니다. 제목, 설명, 키워드, 작성자, Open Graph 및 Twitter 카드 메타 태그를 모두 포함시켜 검색 엔진 최적화와 소셜 미디어 공유 시 표시되는 정보를 개선했습니다.

페이지별 제목("StarSync - 리스트")과 URL(https://www.starsync.wiki/list)을 포함시켜 각 페이지에 맞게 커스터마이징한 점이 좋습니다.

src/pages/landing/LandingPage.jsx (3)

58-59: 상수 정의가 적절합니다.

Open Graph 이미지 URL을 상수로 분리하여 코드의 가독성과 재사용성을 높였습니다. 다른 페이지 컴포넌트와 동일한 패턴을 사용하여 일관성을 유지하고 있습니다.

97-122: SEO 메타 태그가 적절하게 추가되었습니다.

메인 랜딩 페이지에 React Fragment를 사용하여 다양한 SEO 관련 메타 태그를 추가하셨습니다. 제목, 설명, 키워드, 작성자, Open Graph 및 Twitter 카드 메타 태그를 포함시켜 검색 엔진 최적화와 소셜 미디어 공유를 개선했습니다.

루트 URL(https://www.starsync.wiki/)을 메타 태그에 포함시킨 것이 적절합니다.

123-179: 기존 페이지 컨텐츠가 적절하게 유지되었습니다.

React Fragment 내부로 기존 페이지 컨텐츠를 이동시키면서 기능적 변화 없이 SEO 개선을 적용했습니다. 페이지의 구조와 스타일이 잘 유지되었습니다.
src/pages/my/MyPage.jsx (3)

23-24: 상수 정의가 적절합니다.

Open Graph 이미지 URL을 상수로 분리하여 코드의 가독성과 재사용성을 높였습니다. 다른 페이지 컴포넌트와 동일한 패턴을 따라 일관성을 유지하고 있습니다.

133-158: SEO 메타 태그가 적절하게 추가되었습니다.

마이페이지에 React Fragment를 사용하여 다양한 SEO 관련 메타 태그를 추가하셨습니다. 제목("StarSync - 마이페이지"), 설명, 키워드, 작성자, Open Graph 및 Twitter 카드 메타 태그를 포함시켜 검색 엔진 최적화와 소셜 미디어 공유를 개선했습니다.

페이지별 URL(https://www.starsync.wiki/mypage)을 메타 태그에 포함시킨 것이 적절합니다.

227-237: 유효성 검사 추가로 사용자 경험이 개선되었습니다.

아이돌 추가 버튼 클릭 시 선택된 프로필이 있는지 확인하는 유효성 검사를 추가하셨습니다. 선택된 아이돌이 없을 경우 경고 알림을 표시하여 사용자에게 명확한 피드백을 제공하는 점이 좋습니다.
if (hasSelected) {
  addMyIdols();
} else {
  showAlert('관심있는 아이돌을 추가해 주세요', 'warning', 2000);
}
이러한 검증 로직은 사용자 경험을 향상시키고 오류 상황을 방지합니다.

✨ Finishing Touches

📝 Generate Docstrings

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary or @coderabbitai 요약 to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

github-actions · 2025-04-28T19:39:14Z

🚀 PR Preview 배포 완료!
🔗 Preview 확인하기

HarrySeop · 2025-04-28T19:39:52Z

해당 PR은 컨플릭트를 유발할 것 같아서 다른 리팩토링을 먼저 머지 진행한 후 제가 컨플릭트 해결하도록 하겠습니다.

HarrySeop added the ✨Feat 기능 개발 label Apr 28, 2025

HarrySeop added this to the 2차 구현 기간 milestone Apr 28, 2025

HarrySeop self-assigned this Apr 28, 2025

HarrySeop linked an issue Apr 28, 2025 that may be closed by this pull request

✨Feat: SEO 개선 #268

Closed

coderabbitai bot approved these changes Apr 28, 2025

View reviewed changes

HarrySeop merged commit 807c480 into develop Apr 29, 2025
2 checks passed

coderabbitai bot mentioned this pull request Apr 29, 2025

♻️Refactor: SEO 방식 수정 #293

Merged

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

✨Feat: SEO 개선 #269

✨Feat: SEO 개선 #269

Uh oh!

HarrySeop commented Apr 28, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Apr 28, 2025 •

edited

Loading

Walkthrough

Changes

Sequence Diagram(s)

Suggested reviewers

Poem

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

Documentation and Community

Uh oh!

github-actions bot commented Apr 28, 2025

Uh oh!

HarrySeop commented Apr 28, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

✨Feat: SEO 개선 #269

✨Feat: SEO 개선 #269

Uh oh!

Conversation

HarrySeop commented Apr 28, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

이슈 번호

📌 주요 변경 사항

✅ 체크리스트

📷 UI 변경 사항 (선택)

❓무슨 문제가 발생했나요 ?

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Apr 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Suggested reviewers

Poem

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

Documentation and Community

Uh oh!

github-actions bot commented Apr 28, 2025

Uh oh!

HarrySeop commented Apr 28, 2025

해당 PR은 컨플릭트를 유발할 것 같아서 다른 리팩토링을 먼저 머지 진행한 후 제가 컨플릭트 해결하도록 하겠습니다.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

HarrySeop commented Apr 28, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Apr 28, 2025 •

edited

Loading