[Feature] 반응형 수정

[yeonjin719]

🚨 관련 이슈

#123

✨ 변경사항

• 🐞 BugFix Something isn't working
• 💻 CrossBrowsing Browser compatibility
• 🌏 Deploy Deploy
• 🎨 Design Markup & styling
• 📃 Docs Documentation writing and editing (README.md, etc.)
• ✨ Feature Feature
• 🔨 Refactor Code refactoring
• ⚙️ Setting Development environment setup
• ✅ Test Test related (storybook, jest, etc.)

✏️ 작업 내용

• 반응형 수정
• 인덱스 에러 수정

😅 미완성 작업

N/A

📢 논의 사항 및 참고 사항

[coderabbitai]

Caution

Review failed

The pull request is closed.

Summary by CodeRabbit

• 버그 수정

  • 날짜/시간 입력값을 UTC 밀리초(.000Z)까지 일관되게 처리해 시간 관련 오류를 감소.
  • 시간 값이 비어있는 경우의 검증 로직을 보완하여 예외 상황에서의 안정성 향상.

• 스타일

  • 키워드 버튼의 줄바꿈 동작을 개선해 텍스트 겹침/줄바꿈 문제 완화.
  • 타임라인 레이아웃을 조건부 2열로 개선하고 이미지 정렬을 조정해 가독성과 반응형 표시 향상.

• 리팩터

  • 검색 필터 모달의 단계별 값 매핑을 정리해 일관된 값 갱신과 유지보수성을 개선.

Walkthrough

이 변경은 날짜/시간 포맷 정규화, 필터 모달의 단계 기반 매핑 도입 및 값 업데이트 로직 교체, 타임라인 레이아웃의 조건부 렌더링, 키워드 버튼 클래스 수정, 시간 검증 함수의 초기 가드 강화 등을 포함합니다.

Changes

Cohort / File(s)	Summary
Date/time 포맷 정규화 src/components/dateCourse/dateCourseSearchFilterOption.tsx	날짜 입력 onChange가 시간 포함 시 ...:00.000Z 형태로 UTC 밀리초까지 포함하도록 수정하여 시간 입력 경로와 동일한 포맷으로 정렬.
레이아웃/스타일 업데이트 src/components/dateCourse/keywordButton.tsx, src/components/dateCourse/timeline.tsx	keywordButton: flex-nowrap → whitespace-nowrap. timeline: signatureDish 존재 시에만 좌측 컬럼 렌더링, 이미지 위치/정렬 조정, 좌우 폭을 signatureDish 유무에 따라 lg:w-[50%]/w-full로 분기, 라벨/아이콘 배치 변경.
필터 모달 단계 매핑 리팩터링 src/components/modal/dateCourseSearchFilterModal.tsx	컴포넌트 외부에 Questions/TOTAL_QUESTIONS 정의. stepFieldMap으로 단계→스토어 필드 매핑 추가. valueByStep/updateByStep로 값 조회·업데이트 통일(다중 선택 단계는 배열 초기화). 옵션 렌더링 시 title/value/onChange를 새 함수로 교체. autoInit를 time 타입 특정 인덱스에 조건부 전달.
검증 가드 강화 src/utils/dateCourseValidation.tsx	MealTimeValidation 및 DateTimeStartValidation에서 time == null 추가 체크로 초기 반환 조건 명확화. 기타 로직/시그니처 불변.

Sequence Diagram(s)

sequenceDiagram
  participant U as User
  participant O as DateCourseSearchFilterOption
  participant M as DateCourseSearchFilterModal
  participant S as useFilterStore

  U->>O: 변경(onChange)
  O->>M: onChange(idx, value)
  M->>M: updateByStep(idx, value)\n(stepFieldMap으로 필드 결정)
  M->>S: setField(fieldName, value|null)
  S-->>M: 상태 업데이트
  M-->>O: valueByStep(idx)로 현재 값 전달

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

• yujin5959
• SEBINorSEBOUT

---

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between ec5afc6 and ffad20c.

📒 Files selected for processing (5)

• src/components/dateCourse/dateCourseSearchFilterOption.tsx (1 hunks)
• src/components/dateCourse/keywordButton.tsx (1 hunks)
• src/components/dateCourse/timeline.tsx (1 hunks)
• src/components/modal/dateCourseSearchFilterModal.tsx (4 hunks)
• src/utils/dateCourseValidation.tsx (2 hunks)

✨ Finishing Touches

• 📝 Generate Docstrings

---

🪧 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.
  • 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.
• 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 the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

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

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

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.

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• 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.