fix: 이벤트 생성 UI 및 상태관리 에러 수정

[Yejiin21]

Summary by CodeRabbit

• Refactor

  • 여러 이벤트 생성 관련 컴포넌트들이 로컬 상태 및 props 기반에서 컨텍스트 기반 상태 관리로 변경되었습니다.
  • 일부 컴포넌트의 props 인터페이스 및 시그니처가 변경되어, 더 이상 불필요한 props 전달 없이 컨텍스트에서 직접 상태를 사용합니다.
  • 이벤트 생성 페이지의 라우팅 구조가 변경되어, 컨텍스트 프로바이더 적용 위치가 조정되었습니다.

• Style

  • 날짜 선택기, 이벤트 기간 페이지 등에서 레이아웃 및 여백 관련 스타일이 개선되었습니다.

• Bug Fixes

  • 이벤트 상태 초기값의 위치 정보 값이 소수점 자리수 수정 등으로 미세하게 조정되었습니다.

• Chores

  • 환경 변수 미설정 시 API 기본 URL이 더 이상 자동으로 지정되지 않도록 변경되었습니다.

[coderabbitai]

Walkthrough

이 변경사항은 이벤트 생성 플로우의 여러 UI 컴포넌트들이 로컬 상태 및 props 기반에서 컨텍스트 기반의 상태 관리로 리팩토링되었습니다. 주요 컴포넌트들이 funnel context를 직접 사용하도록 변경되었으며, 일부 레이아웃 및 스타일 클래스, 기본값, props 인터페이스도 조정되었습니다. 라우터에서 EventFunnel 관련 컨텍스트 래핑 위치가 이동하였습니다.

Changes

파일/경로 요약	변경 요약
src/app/routes/Router.tsx, src/pages/event/ui/create-event/FunnelPage.tsx	이벤트 생성 라우트에서 FunnelProvider의 래핑 위치가 Router로 이동됨. FunnelPage 내부에서는 더 이상 래핑하지 않음.
src/features/event/model/FunnelContext.tsx	eventState의 locationLng 초기값 소수점 자리수 수정(126.9780 → 126.978).
src/features/event/ui/DatePicker.tsx, src/pages/event/ui/create-event/EventPeriodPage.tsx	레이아웃 및 여백 관련 Tailwind CSS 클래스 수정.
src/features/event/ui/EventFunnel.tsx	createHost 뮤테이션의 onError 핸들러에서 타입 어노테이션 제거.
src/features/event/ui/EventType.tsx	주소 관련 로컬 상태 제거, funnel context 기반으로 상태 관리 변경.
src/features/event/ui/FileUpload.tsx	value prop 제거, funnel context에서 bannerImageUrl 직접 사용하도록 변경. props 인터페이스 수정.
src/features/event/ui/LinkInput.tsx	props 및 로컬 상태 제거, funnel context에서 referenceLinks 직접 사용. props 인터페이스 제거.
src/features/event/ui/TextEditor.tsx	props 및 내부 상태 제거, funnel context의 description 직접 사용. 유효성 검사 및 길이 제한 로직 통합.
src/pages/event/ui/create-event/EventInfoPage.tsx	TextEditor, LinkInput에 setEventState prop 전달 제거.
vite.config.ts	API_BASE_URL의 기본 fallback URL 제거. 환경변수 미설정 시 undefined 가능성 있음.

Sequence Diagram(s)

sequenceDiagram
    participant Router
    participant FunnelProvider
    participant FunnelPage
    participant EventFunnel
    participant FunnelContext

    Router->>FunnelProvider: 이벤트 생성 라우트 진입 시 FunnelProvider로 감쌈
    FunnelProvider->>FunnelPage: FunnelPage 렌더링
    FunnelPage->>EventFunnel: EventFunnel 렌더링
    EventFunnel->>FunnelContext: funnel context 상태 사용 및 갱신
    EventFunnel->>TextEditor/FileUpload/LinkInput/EventType: context 상태 직접 사용

Loading

Possibly related PRs

• fix: 기능/CSS 에러 수정 및 개선 #143: FileUpload 컴포넌트의 value prop 제거 및 funnel context 사용으로의 전환과 관련된 변경 PR.
• refact: 이벤트 생성 페이지 리펙토링 #181: 이벤트 생성 플로우의 위치 좌표 및 UI 컴포넌트 리팩토링과 관련된 PR.

Suggested labels

🪄 Refactoring

Suggested reviewers

• xaexunxang

Poem

🐰
컨텍스트 따라 hop hop hop,
props는 안녕, state도 stop!
주소도, 링크도, 에디터도
모두 함께 한 곳에서 모여요.
깔끔해진 코드밭에
토끼는 오늘도 춤을 춰요!
🥕✨

---

📜 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 5da0391 and a952508.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (12)

• src/app/routes/Router.tsx (1 hunks)
• src/features/event/model/FunnelContext.tsx (1 hunks)
• src/features/event/ui/DatePicker.tsx (3 hunks)
• src/features/event/ui/EventFunnel.tsx (1 hunks)
• src/features/event/ui/EventType.tsx (2 hunks)
• src/features/event/ui/FileUpload.tsx (2 hunks)
• src/features/event/ui/LinkInput.tsx (2 hunks)
• src/features/event/ui/TextEditor.tsx (4 hunks)
• src/pages/event/ui/create-event/EventInfoPage.tsx (1 hunks)
• src/pages/event/ui/create-event/EventPeriodPage.tsx (1 hunks)
• src/pages/event/ui/create-event/FunnelPage.tsx (1 hunks)
• vite.config.ts (1 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (4)

src/app/routes/Router.tsx (2)

src/app/routes/routes.ts (1)

• MAIN_ROUTES (1-12)

src/features/event/model/FunnelContext.tsx (1)

• FunnelProvider (15-51)

src/features/event/ui/LinkInput.tsx (1)

src/features/event/model/FunnelContext.tsx (1)

• useFunnelState (53-59)

src/features/event/ui/TextEditor.tsx (1)

src/features/event/model/FunnelContext.tsx (1)

• useFunnelState (53-59)

src/features/event/ui/FileUpload.tsx (1)

src/features/event/model/FunnelContext.tsx (2)

• FunnelState (5-11)
• useFunnelState (53-59)

🪛 Biome (1.9.4)

src/features/event/ui/LinkInput.tsx

[error] 7-7: Shouldn't redeclare 'Link'. Consider to delete it or rename it.

'Link' is defined here:

(lint/suspicious/noRedeclare)

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

• GitHub Check: storybook

🔇 Additional comments (26)

src/features/event/model/FunnelContext.tsx (1)

35-35: 좌표 정밀도 변경 확인 필요

경도 값이 126.9780에서 126.978로 변경되었습니다. 이 변경이 위치 정확도에 미치는 영향을 확인해주세요. 좌표 정밀도 변경이 의도적인 것인지, 다른 시스템과의 일관성을 위한 것인지 검토가 필요합니다.

src/pages/event/ui/create-event/EventInfoPage.tsx (1)

31-32: 상태 관리 리팩토링 잘 적용됨

TextEditor와 LinkInput 컴포넌트에서 setEventState prop을 제거하고 컴포넌트 내부에서 funnel context를 직접 사용하도록 변경한 것이 좋습니다. 이를 통해 props drilling을 줄이고 중앙집중식 상태 관리를 구현했네요.

src/pages/event/ui/create-event/EventPeriodPage.tsx (1)

8-8: 패딩 조정 확인

컨테이너의 패딩이 p-5에서 py-5 px-4로 변경되어 수평 패딩이 줄어들었습니다. 이벤트 생성 플로우의 다른 페이지들과 일관된 레이아웃을 위한 조정으로 보입니다.

src/features/event/ui/EventFunnel.tsx (1)

50-50: 타입 어노테이션 단순화

에러 콜백에서 명시적 타입 어노테이션을 제거한 것은 TypeScript의 타입 추론을 활용한 코드 단순화로 보입니다. 에러 처리 로직은 그대로 유지되어 기능상 문제없습니다.

vite.config.ts (1)

11-11: 환경 변수 의존성 강화 - 검증 필요

API_BASE_URL의 기본 폴백 값이 제거되어 이제 VITE_API_BASE_URL 환경 변수에만 의존합니다. 환경 변수가 설정되지 않은 경우 API 호출이 실패할 수 있으므로 모든 배포 환경에서 해당 환경 변수가 올바르게 설정되어 있는지 확인해주세요.

다음 스크립트로 환경 변수 설정을 확인할 수 있습니다:

#!/bin/bash
# 프로젝트 루트에서 환경 변수 설정 파일들 확인
echo "=== 환경 설정 파일 확인 ==="
fd -t f "\.env" . --exec echo "파일: {}" \; --exec cat {} \;

echo -e "\n=== package.json의 스크립트 확인 ==="
jq '.scripts' package.json 2>/dev/null || echo "package.json을 찾을 수 없습니다"

echo -e "\n=== Vite 설정에서 환경 변수 사용 확인 ==="
rg "VITE_API_BASE_URL" --type ts --type js -A 2 -B 2

src/pages/event/ui/create-event/FunnelPage.tsx (1)

56-63: 컨텍스트 제공자 구조 개선이 적절합니다.

FunnelProvider를 라우터 레벨로 이동시켜 컨텍스트를 상위에서 제공하는 것은 좋은 아키텍처 결정입니다. 이를 통해 funnel 상태가 더 넓은 범위에서 관리되고, 컴포넌트 간의 결합도가 낮아집니다.

src/app/routes/Router.tsx (2)

41-41: FunnelProvider import가 올바르게 추가되었습니다.

필요한 의존성이 적절히 import되었습니다.

---

45-53: 라우터 레벨에서의 컨텍스트 제공이 적절합니다.

FunnelProvider를 라우터 레벨에서 제공하여 이벤트 생성 플로우 전체에서 상태를 공유할 수 있게 된 것은 좋은 아키텍처 결정입니다. 이는 컴포넌트 간의 props drilling을 방지하고 상태 관리를 중앙화합니다.

src/features/event/ui/EventType.tsx (1)

74-79: 컨텍스트 기반 상태 관리로의 성공적인 리팩토링입니다.

로컬 상태에서 funnel 컨텍스트로 전환하여 상태 관리가 중앙화되었습니다. eventState에서 직접 주소 정보를 가져와 사용하는 것이 더 일관된 접근 방식입니다.

src/features/event/ui/DatePicker.tsx (2)

98-99: 레이아웃 구조 개선이 적절합니다.

컨테이너 div에서 flex-col을 제거하고 자식 div 클래스를 단순화한 것은 레이아웃을 더 깔끔하게 만듭니다.

---

102-117: DatePicker 입력 요소의 간격 조정이 적절합니다.

각 DatePicker 요소에 mr-1 클래스를 추가하여 입력 필드 간의 시각적 간격을 개선했습니다. 이는 사용자 경험을 향상시킵니다.

Also applies to: 157-165

src/features/event/ui/FileUpload.tsx (3)

2-2: useFunnelState 훅 import가 올바르게 추가되었습니다.

funnel 컨텍스트 사용을 위한 필요한 의존성이 적절히 추가되었습니다.

---

13-17: 컨텍스트 기반 상태 관리로의 성공적인 전환입니다.

로컬 props에서 funnel 컨텍스트로 상태 관리를 전환한 것은 다른 이벤트 생성 컴포넌트들과 일관성을 유지하는 좋은 접근입니다. eventState.bannerImageUrl을 직접 사용하여 중앙화된 상태 관리를 구현했습니다.

---

25-27: 옵셔널 체이닝 사용으로 코드 안정성이 향상되었습니다.

onValidationChange?.(!!previewUrl) 사용으로 콜백이 존재하지 않을 경우에도 안전하게 처리됩니다.

src/features/event/ui/LinkInput.tsx (4)

1-2: 컨텍스트 기반 상태 관리로의 리팩토링이 잘 구현되었습니다.

useFunnelState 훅을 적절히 import하고 사용하여 중앙화된 상태 관리로 전환한 것이 좋습니다.

---

7-10: 타입 정의는 문제없습니다.

정적 분석 도구가 Link 재선언 경고를 표시했지만, 이는 TypeScript 인터페이스 정의이므로 import된 SVG와 다른 네임스페이스에 있어 문제가 없습니다.

---

12-15: 컨텍스트 상태 사용이 올바르게 구현되었습니다.

props를 제거하고 useFunnelState를 통해 상태에 접근하는 방식으로 잘 변경되었습니다. 컴포넌트가 이제 FunnelProvider 내에서만 사용될 수 있도록 명확히 제한된 점이 좋습니다.

---

28-28: 방어적 프로그래밍 패턴이 적용되었습니다.

links || []를 사용한 옵셔널 체이닝으로 undefined 상태를 안전하게 처리한 것이 좋습니다.

src/features/event/ui/TextEditor.tsx (8)

5-5: 컨텍스트 기반 상태 관리 전환이 적절합니다.

useFunnelState 훅을 import하여 중앙화된 상태 관리로 전환한 것이 좋습니다.

---

34-36: props 인터페이스 단순화가 잘 이루어졌습니다.

value, onChange, setEventState props를 제거하고 컨텍스트에서 직접 상태를 관리하도록 변경한 것이 적절합니다. 컴포넌트의 책임이 명확해졌습니다.

---

68-70: 유틸리티 함수 추가가 코드 가독성을 향상시켰습니다.

HTML 태그를 제거하여 순수 텍스트를 추출하는 getPlainText 함수를 추가한 것이 좋습니다. 검증 로직에서 재사용성을 높였습니다.

---

77-91: 콘텐츠 길이 검증 로직이 잘 구현되었습니다.

길이 제한을 초과할 때 이전 상태로 되돌리는 fallback 메커니즘과 사용자에게 피드백을 제공하는 로직이 잘 구현되었습니다. 이미지 가중치를 포함한 총 길이 계산도 적절합니다.

---

93-95: 검증 상태 동기화를 위한 useEffect가 적절합니다.

eventState.description 변경 시 상위 컴포넌트에 검증 상태를 알리는 useEffect가 잘 구현되었습니다. 상태 변경에 대한 반응형 검증이 보장됩니다.

---

118-119: 컨텍스트 상태를 활용한 계산 로직이 일관성 있게 구현되었습니다.

eventState.description을 직접 사용하여 총 길이와 이미지 개수를 계산하는 것이 상태 관리 패턴과 일치합니다.

---

126-126: ReactQuill value prop이 컨텍스트 상태와 올바르게 연결되었습니다.

eventState.description을 직접 사용하여 에디터의 값을 설정한 것이 적절합니다.

---

135-137: 사용자 피드백 UI가 향상되었습니다.

길이 제한 초과 시 명확한 에러 메시지를 표시하고, 이미지 개수 정보를 포함한 상세한 카운터 표시가 사용자 경험을 개선합니다.

✨ Finishing Touches

• 📝 Generate Docstrings

---

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

📖storybook: https://677a88d1e04e06676106db14-fkmlalwsio.chromatic.com/

[hyeeuncho]

good