fix: 랜딩페이지 렌더링 이슈 해결

[WonJuneKim]

💡 작업 내용

• 랜딩 페이지에서 비로그인 시 주제별 벨런스 게임 이 렌더링 되지 않는 이슈 해결

💡 자세한 설명

✅ 문제 원인

• useBestGameList 또는 useLatestGameList 으로 받아온 데이터는 contents 라는 이름으로 메모이제이션 합니다.
  이 때, 컴포넌트 에서 북마크 아이콘을 출력/미출력 을 위해 processedContents 라는 이름으로 2차 가공을 진행하는데,

(기존)

const processedContents = useMemo(() => {
  if (!member?.id) return [];
  return contents.map((item: GameContent) => ({
    ...item,
    showBookmark: item.writerId !== member.id,
  }));
}, [contents, member?.id]);

와 같이 member의 id가 없으면 빈 배열을 반환하도록 되어 있었습니다.

원래 의도한 흐름(비로그인 시에는 북마크 아이콘이 랜더링 X, 로그인 시에는 writer.id와의 검증을 통해서)
(수정 후)

const processedContents = useMemo(() => {
  return contents.map((item: GameContent) => ({
    ...item,
    showBookmark: member?.id ? item.writerId !== member.id : false,
  }));
}, [contents, member?.id]);

로 처리하였습니다.

📗 참고 자료 (선택)

📢 리뷰 요구 사항 (선택)

🚩 후속 작업 (선택)

✅ 셀프 체크리스트

• PR 제목을 형식에 맞게 작성했나요?
• 브랜치 전략에 맞는 브랜치에 PR을 올리고 있나요? (master/main이 아닙니다.)
• 이슈는 close 했나요?
• Reviewers, Labels, Projects를 등록했나요?
• 작업 도중 문서 수정이 필요한 경우 잘 수정했나요?
• 테스트는 잘 통과했나요?
• 불필요한 코드는 제거했나요?

closes #303

Summary by CodeRabbit

• 버그 수정
  • Landing 페이지에서 책갈피 표시 조건을 개선하여, 로그인 여부와 작성자 정보를 기준으로 책갈피가 일관되게 표시되도록 수정했습니다.
  • 로그인하지 않은 사용자가 로그인 페이지로 직접 이동하도록 변경하여 사용자 경험을 개선했습니다.

[coderabbitai]

Walkthrough

이 PR은 LandingPage.tsx 파일 내의 북마크 표시 로직을 수정합니다. 기존에는 사용자의 id가 없는 경우 빈 배열을 반환했으나, 이제는 member?.id의 존재 여부에 따라 조건문을 통해 항상 true 또는 false 값을 할당하도록 변경되었습니다. 즉, 로그인 상태에 따라 item.writerId와 비교하여 북마크의 표시 여부를 명확히 결정합니다. 또한, 로그인 모달 처리 방식이 변경되어 비로그인 시 모달을 여는 대신 로그인 페이지로 직접 이동하도록 수정되었습니다.

Changes

파일 위치	변경 내용
src/pages/LandingPage/LandingPage.tsx	member?.id 확인을 통해 showBookmark 로직을 수정 (로그인 시 writerId와 비교, 비로그인 시 명시적으로 false); 로그인 시 모달 대신 로그인 경로로 이동하도록 수정

Sequence Diagram(s)

sequenceDiagram
    participant LP as LandingPage
    participant M as Member
    participant GC as GameContent Item
    LP->>M: member?.id 확인
    alt Member 존재
        LP->>GC: item.writerId와 member.id 비교
        note right of GC: showBookmark = (item.writerId !== member.id)
    else Member 미존재
        note right of GC: showBookmark = false
    end

Loading

Suggested labels

✔︎pull requests, 👩🏻‍💻 frontend

Suggested reviewers

• alwubin
• areumH
• hsgh085

Poem

작은 토끼가 코를 킁킁,
코드 숲 속을 뛰노네,
북마크 불빛 반짝이며,
논리 변환의 길을 밝혀,
우리 앱엔 새 희망이 피어납니다! 🐇✨

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f648b06 and 001e008.

📒 Files selected for processing (1)

• src/pages/LandingPage/LandingPage.tsx (4 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src/pages/LandingPage/LandingPage.tsx

⏰ Context from checks skipped due to timeout of 90000ms (2)

• GitHub Check: build
• GitHub Check: storybook

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 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. (Beta)
• @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 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.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

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.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/pages/LandingPage/LandingPage.tsx (1)

92-116: 에러 메시지를 더 구체적으로 개선하면 좋겠습니다.

현재 구현은 잘 되어 있지만, 에러 메시지를 좀 더 구체적으로 만들면 사용자 경험이 개선될 것 같습니다.

다음과 같이 에러 메시지를 개선하는 것을 제안합니다:

-            showToastModal('북마크 해제에 실패했습니다.');
+            showToastModal('일시적인 오류로 북마크 해제에 실패했습니다. 잠시 후 다시 시도해 주세요.');
-            showToastModal('북마크 등록에 실패했습니다.');
+            showToastModal('일시적인 오류로 북마크 등록에 실패했습니다. 잠시 후 다시 시도해 주세요.');

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f17e265 and f648b06.

📒 Files selected for processing (1)

• src/pages/LandingPage/LandingPage.tsx (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms (2)

• GitHub Check: build
• GitHub Check: storybook

🔇 Additional comments (1)

src/pages/LandingPage/LandingPage.tsx (1)

65-70: 북마크 표시 로직이 개선되었습니다!

비로그인 사용자와 로그인 사용자 모두에 대해 북마크 표시 여부가 명확하게 처리되었습니다. 삼항 연산자를 사용하여 코드가 간결해졌으며, 의도가 잘 드러납니다.

[alwubin]

큰 보수가 안들어서 다행이네요..!!!!! 수정하시느라 수고 많으셨습니다👏

[areumH]

렌더링 이슈 해결 확인했습니다!! 👍👍👍

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud