체험 등록의 이미지 등록시 파일 크기 제한

[MyungJiwoo]

🧩 관련 이슈 번호

• 체험 등록시 이미지 크기 제한 #240

📌 작업 내용

• 체험 등록의 이미지 등록시 파일 크기를 5MB로 제한했습니다.
• 프로필 이미지 등록시 alert으로 메시지가 뜨는 것도 토스트 메시지로 변경했습니다.

✅ 체크리스트

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

📷 UI 변경 사항 (선택)

❓무슨 문제가 발생했나요? (선택)

💬 기타 참고 사항 (선택)

Summary by CodeRabbit

• 버그 수정
  • 이미지 업로드 시 파일 크기(5MB 초과) 및 파일 형식(이미지 아님) 검사에서, 기존의 알림창(alert) 대신 토스트 알림으로 오류 메시지가 표시됩니다.
  • 사용자 경험이 개선되어, 잘못된 파일 선택 시 비차단성 토스트 메시지로 안내를 받을 수 있습니다.

[coderabbitai]

Warning

Rate limit exceeded

@MyungJiwoo has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 8 minutes and 51 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 83ce7a9 and a11fac2.

📒 Files selected for processing (1)

• apps/what-today/src/components/experiences/ImageInput.tsx (4 hunks)

📝 Walkthrough

Walkthrough

두 개의 컴포넌트에서 파일 업로드 시 발생하는 오류 알림 방식을 기존의 alert에서 toast 알림으로 변경했습니다. 이미지 파일의 크기와 타입을 검증하는 로직은 유지되며, 유효하지 않은 파일 선택 시 toast 형태로 사용자에게 오류 메시지를 제공합니다.

Changes

Cohort / File(s)	Change Summary
ImageInput 컴포넌트 개선 apps/what-today/src/components/experiences/ImageInput.tsx	파일 크기(5MB 초과) 및 타입(이미지 아님) 검증 후, 오류 발생 시 toast 알림으로 메시지 표시하도록 변경.
ProfileImageInput 알림 방식 개선 packages/design-system/src/components/ProfileImageInput.tsx	파일 검증 실패 시 alert 대신 toast 알림 사용. 기존 검증 로직 및 컴포넌트 시그니처는 변경 없음.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant ImageInput/ProfileImageInput
    participant Toast

    User->>ImageInput/ProfileImageInput: 파일 선택
    ImageInput/ProfileImageInput->>ImageInput/ProfileImageInput: 파일 크기 및 타입 검증
    alt 유효하지 않음
        ImageInput/ProfileImageInput->>Toast: 오류 메시지 표시
        Toast-->>User: toast 알림 노출
    else 유효함
        ImageInput/ProfileImageInput->>ImageInput/ProfileImageInput: 이미지 URL 생성 및 처리
    end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~7 minutes

Suggested labels

📮 Api, ♻️ Refactor

Suggested reviewers

• Taeil08
• kjhyun0830

Poem

🐰
토스트 알림이 번쩍,
이미지 검증은 똑딱!
알림창 대신 부드럽게,
사용자 경험 한층 업그레이드!
오늘도 코드는 깔끔하게,
토끼도 기분 좋게!
🥕✨

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/mongdiwoo/240

---

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

• 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.
  • 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 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]

🚀 오늘뭐해 Preview Deploy 완료!
👉 미리보기 링크

[github-actions]

🚀 오늘뭐해 Preview Deploy 완료!
👉 미리보기 링크

[HarrySeop]

고생하셨습니다!!