feat: 가게 등록 팝업 by Seojunhwan · Pull Request #112 · YAPP-Github/26th-Web-Team-1-FE

Seojunhwan · 2025-07-31T13:01:10Z

✅ 이슈 번호

close x

🪄 작업 내용 (변경 사항)

[x]

📸 스크린샷

💡 설명

메인 페이지에 register query true로 설정해주시면 돼요!

🗣️ 리뷰어에게 전달 사항

popup 컴포넌트 만들어뒀어요! 스토리북은 만간에,,!

📍 트러블 슈팅

Summary by CodeRabbit

신규 기능
- 홈 화면에 사용자가 즐겨찾는 식당을 등록하도록 안내하는 모달 팝업이 추가되었습니다. 팝업에는 이미지 슬라이더와 등록 페이지로 이동하는 버튼, "나중에 하기" 버튼이 포함되어 있습니다.
- 팝업은 URL 쿼리 파라미터(register=true)에 따라 자동으로 표시됩니다.
개선 사항
- 헤더의 마켓 아이콘 클릭 시, 이제 메인 페이지가 아닌 스토어 목록 페이지로 이동합니다.
스타일
- 팝업 및 이미지 슬라이더에 애니메이션과 스타일이 적용되어 사용자 경험이 향상되었습니다.

github-actions · 2025-07-31T13:01:57Z

🎨 Storybook Preview: https://685a32a1c0bbd269fdb67af4-djotaoqsmu.chromatic.com/
🔗 Chromatic Build: https://www.chromatic.com/build?appId=685a32a1c0bbd269fdb67af4&number=167
🕖 Updated at: 2025년 07월 31일 22시 04분 35초

wkdtnqls0506

따봉!

coderabbitai · 2025-07-31T13:04:03Z

Caution

Review failed

The pull request is closed.

Walkthrough

헤더의 마켓 아이콘 링크가 /에서 /stores로 변경되었습니다. 새로운 RegisterPopup 컴포넌트가 추가되어, 홈 페이지에서 URL 쿼리 파라미터에 따라 팝업이 표시됩니다. 팝업은 이미지 슬라이더, 등록 버튼, 닫기 버튼을 포함합니다. Popup UI 컴포넌트와 스타일, 컨텍스트, 배럴 파일들이 신규로 도입되었습니다.

Changes

Cohort / File(s)	Change Summary
Header Navigation Update `src/app/(home)/_components/Header/Header.tsx`	마켓 아이콘의 링크를 `/`에서 `/stores`로 변경하고 관련 TODO 주석 삭제.
RegisterPopup 컴포넌트 도입 `src/app/(home)/_components/RegisterPopup/RegisterPopup.tsx`, `src/app/(home)/_components/RegisterPopup/register.slick.css`	사용자가 즐겨찾는 식당 등록을 유도하는 팝업 컴포넌트 및 슬라이더 CSS 추가.
RegisterPopup 배럴 및 내보내기 `src/app/(home)/_components/RegisterPopup/index.ts`, `src/app/(home)/_components/index.ts`	RegisterPopup 컴포넌트의 배럴 파일 및 상위 컴포넌트 디렉터리에서의 export 추가.
홈 페이지에서 RegisterPopup 사용 `src/app/(home)/page.tsx`	RegisterPopup 컴포넌트를 홈 페이지에 추가.
Popup UI 컴포넌트 및 스타일 추가 `src/components/ui/Popup/Popup.tsx`, `src/components/ui/Popup/Popup.css.ts`, `src/components/ui/Popup/context.ts`, `src/components/ui/Popup/index.ts`	Radix UI와 motion/react 기반의 Popup 컴포넌트, 스타일, 컨텍스트, 배럴 파일 신규 도입.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant HomePage
    participant RegisterPopup
    participant Popup
    User->>HomePage: 접속 (register=true 쿼리 포함)
    HomePage->>RegisterPopup: RegisterPopup 렌더링
    RegisterPopup->>Popup: 팝업 오픈 상태 전달
    Popup-->>User: 팝업 표시 (이미지 슬라이더, 버튼 등)
    User->>RegisterPopup: "나중에 하기" 클릭
    RegisterPopup->>HomePage: 쿼리 파라미터 제거, 팝업 닫힘

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~15–20 minutes

Suggested labels

✨ feature

Poem

🐇
새로운 팝업이 반짝 등장해,
식당 등록을 살짝 권유해요.
슬라이더 이미지가 빙글빙글,
버튼 누르면 등록 페이지로!
헤더의 마켓도 길을 바꾸고,
코드 속 토끼는 깡총깡총 춤춰요.
✨

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

📜 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 808e83b and 214abde.

⛔ Files ignored due to path filters (3)

public/images/register-popup-card1.png is excluded by !**/*.png
public/images/register-popup-card2.png is excluded by !**/*.png
public/images/register-popup-card3.png is excluded by !**/*.png

📒 Files selected for processing (10)

src/app/(home)/_components/Header/Header.tsx (1 hunks)
src/app/(home)/_components/RegisterPopup/RegisterPopup.tsx (1 hunks)
src/app/(home)/_components/RegisterPopup/index.ts (1 hunks)
src/app/(home)/_components/RegisterPopup/register.slick.css (1 hunks)
src/app/(home)/_components/index.ts (1 hunks)
src/app/(home)/page.tsx (2 hunks)
src/components/ui/Popup/Popup.css.ts (1 hunks)
src/components/ui/Popup/Popup.tsx (1 hunks)
src/components/ui/Popup/context.ts (1 hunks)
src/components/ui/Popup/index.ts (1 hunks)

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat/register-popup

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.

❤️ 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.
- Explain this complex logic.
- 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 explain this code block.
- @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 explain its main purpose.
- @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.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

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 generate unit tests to generate unit tests for 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 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.

Seojunhwan added 5 commits July 31, 2025 21:44

wip

200d1c1

feat: RegisterPopup 슬라이더 스타일 및 클래스명 수정

5f9c9dc

fix: framer-motion에서 motion/react로 변경하여 Popup 컴포넌트 수정

c417124

fix: 헤더 컴포넌트에서 링크를 가게 리스트 페이지로 수정

939a655

fix: motion import

e3f4853

github-actions bot requested a review from wkdtnqls0506 July 31, 2025 13:01

github-actions bot assigned Seojunhwan Jul 31, 2025

wkdtnqls0506 previously approved these changes Jul 31, 2025

View reviewed changes

fix: 팝업 닫기 버튼의 아이콘 색상 수정

214abde

Seojunhwan dismissed wkdtnqls0506’s stale review via 214abde July 31, 2025 13:03

wkdtnqls0506 approved these changes Jul 31, 2025

View reviewed changes

Seojunhwan merged commit 1f103d5 into main Jul 31, 2025
5 of 6 checks passed

Seojunhwan deleted the feat/register-popup branch July 31, 2025 13:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: 가게 등록 팝업#112

feat: 가게 등록 팝업#112
Seojunhwan merged 6 commits intomainfrom
feat/register-popup

Seojunhwan commented Jul 31, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

github-actions bot commented Jul 31, 2025 •

edited

Loading

Uh oh!

wkdtnqls0506 left a comment

Uh oh!

coderabbitai bot commented Jul 31, 2025 •

edited

Loading

Review failed

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Seojunhwan commented Jul 31, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ 이슈 번호

🪄 작업 내용 (변경 사항)

📸 스크린샷

💡 설명

🗣️ 리뷰어에게 전달 사항

📍 트러블 슈팅

Summary by CodeRabbit

Uh oh!

github-actions bot commented Jul 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wkdtnqls0506 left a comment

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Suggested labels

Poem

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Seojunhwan commented Jul 31, 2025 •

edited by coderabbitai bot

Loading

github-actions bot commented Jul 31, 2025 •

edited

Loading

coderabbitai bot commented Jul 31, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)