Skip to content

refactor: 로고 리랜더링 수정 #87

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
Han-wo merged 1 commit into from
Dec 27, 2024
Merged

refactor: 로고 리랜더링 수정 #87

Han-wo merged 1 commit into from
Dec 27, 2024

Conversation

@Han-wo
Copy link
Collaborator

@Han-wo Han-wo commented Dec 26, 2024 •
edited by coderabbitai bot
Loading

입력시 로고 불필요하게 리랜더링되어서 수정

#️⃣ 이슈

📝 작업 내용

로고 리랜더링 되는거 수정하고 컴포넌트들 메모이제이션했습니다

📸 스크린샷

✅ 체크 리스트

  • 적절한 Title 작성
  • 적절한 Label 지정
  • Assignee 및 Reviewer 지정
  • 로컬 작동 확인
  • Merge 되는 브랜치 확인

👩‍💻 공유 포인트 및 논의 사항

Summary by CodeRabbit

  • 새로운 기능
    • 로그인 페이지의 로고가 LoginHeader 컴포넌트로 변경되었습니다.
    • 회원가입 페이지에서 로고가 직접적으로 렌더링되도록 수정되었습니다.
  • 버그 수정
    • 로그인 및 회원가입 페이지의 시각적 구조가 개선되었습니다.

@Han-wo
refactor: 로고 리랜더링 수정
f9e390f 
입력시 로고 불필요하게 리랜더링되어서 수정
@Han-wo Han-wo self-assigned this Dec 26, 2024
@Han-wo Han-wo linked an issue Dec 26, 2024 that may be closed by this pull request
refactor: 로그인 회원가입폼 리팩토링 #86
Closed
2 tasks
@coderabbitai
Copy link

coderabbitai bot commented Dec 26, 2024 •
edited
Loading

Walkthrough

이 풀 리퀘스트는 로그인 및 회원가입 페이지의 헤더 컴포넌트를 리팩토링하는 작업을 포함합니다. Logo 컴포넌트를 LoginHeader 컴포넌트로 대체하여 페이지의 시각적 구조를 변경했습니다. 새로운 컴포넌트는 로고와 한국어 제목을 포함하며, 메모이제이션을 통해 성능을 최적화했습니다.

Changes

파일 변경 요약
src/app/login/page.tsx Logo 컴포넌트를 LoginHeader로 대체
src/app/members/page.tsx 래퍼 <div> 및 제목 요소 제거
src/components/common/auth/logo.tsx Logo 컴포넌트 수정, 새로운 LoginHeader 컴포넌트 추가

Assessment against linked issues

목표 해결 여부 설명
로그인 회원가입폼 리팩토링 [#86] ✅

Possibly related PRs

Suggested labels

✨ FEAT, ♻️REFACTOR

Suggested reviewers

  • cindycho0423

Poem

🐰 코드의 토끼, 헤더를 춤추네
로고와 제목, 새 옷을 입고
리팩토링의 마법으로 반짝이네
더 깔끔하고 멋진 페이지의 꿈
토끼의 발걸음, 코드를 노래해 🎉

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
🪧 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.

@github-actions
Copy link

github-actions bot commented Dec 26, 2024

💄 Storybook: https://66e95dd74f88edf048011168-bnmfknvcgt.chromatic.com/

coderabbitai[bot]
coderabbitai bot reviewed Dec 26, 2024
View reviewed changes
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
src/app/login/page.tsx (1)

9-9: LoginHeader 적용으로 통합 헤더 구성
로고와 문구를 하나의 컴포넌트로 묶음으로써 중복 코드를 줄이고 유지보수를 쉽게 만들었습니다. i18n 적용을 고려한다면, 텍스트를 별도 관리하는 방안도 검토해주세요.

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 18f56ec and f9e390f.

📒 Files selected for processing (3)
  • src/app/login/page.tsx (1 hunks)
  • src/app/members/page.tsx (1 hunks)
  • src/components/common/auth/logo.tsx (2 hunks)
🔇 Additional comments (7)
src/app/members/page.tsx (1)

9-9: 로고와 폼의 직관적 배치
로고 아래에 바로 회원가입 폼을 배치하여 UI 구성이 간결해졌습니다. 다만 로고 주변 여백이나 접근성 측면에서도 확인이 필요합니다.

src/app/login/page.tsx (1)

1-1: LoginHeader 컴포넌트로의 import 변경
Logo 대신 LoginHeader를 가져와 코드 구조를 분명히 했습니다. 앞으로 다른 페이지에서도 동일한 Header 형식을 재사용할 가능성이 높아 보입니다.

src/components/common/auth/logo.tsx (5)

1-2: 클라이언트 전용 코드 지정
이 구문("use client")은 브라우저 환경에서만 동작하게 하므로, SSR이 필요한 경우 주의가 필요합니다. 현재 구조에서는 적절해 보입니다.

5-5: React.memo 임포트 확인
리렌더링 최적화에 유용하므로, 코드 전반에서 memo가 필요한 다른 컴포넌트도 함께 점검해보세요.

Line range hint 7-16: Logo 컴포넌트의 접근성 점검
Link와 Image에 aria-label, alt 등을 적절히 설정하여 스크린 리더 사용자를 배려한 점이 눈에 띕니다. CSS 클래스 네이밍도 직관적입니다.

18-25: LoginHeader 컴포넌트로 로고 및 헤딩 통합
로고와 안내 헤딩을 하나의 컴포넌트로 구성하여 UI를 일관성 있게 유지하며, 메모화가 가능해 성능 이점을 얻습니다.

27-27: 메모를 통한 불필요 렌더링 방지
export default memo(LoginHeader)는 prop 변경이 없을 때 렌더링을 최적화하므로, 성능에 긍정적 영향이 있을 것으로 예상됩니다.

cindycho0423
cindycho0423 approved these changes Dec 27, 2024
View reviewed changes
Copy link
Collaborator

@cindycho0423 cindycho0423 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

메모이제이션 조아용~~👍🏻

src/components/common/auth/logo.tsx
return (
<div className="mb-15 flex flex-col items-center justify-center gap-13">
<Logo />
<h1 className="mt-20 text-18-700">로그인후 서비스를 이용해주세요</h1>
Copy link
Collaborator

@cindycho0423 cindycho0423 Dec 27, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

h1 태그랑 먼가 안맞는것 같은데..! h 태그는 보통 제목에 쓰는 것 같아소,, div 나 p 태그..? 가 낫지 않을까??

Copy link
Collaborator Author

@Han-wo Han-wo Dec 27, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수정하겠습니당!

@Han-wo Han-wo merged commit 004a54c into develop Dec 27, 2024
4 of 5 checks passed
@coderabbitai coderabbitai bot mentioned this pull request Dec 27, 2024
Merged
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@coderabbitai coderabbitai[bot] coderabbitai[bot] left review comments

@cindycho0423 cindycho0423 cindycho0423 approved these changes

Assignees

@Han-wo Han-wo

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

refactor: 로그인 회원가입폼 리팩토링

3 participants

@Han-wo @cindycho0423