Skip to content

Conversation

@jeonghanyun
Copy link
Owner

πŸ‡°πŸ‡· Korean Date Expression Support

이 PR은 MaTeMaTuK/gantt-task-react PR #254의 "Support for Korean date expressions" κΈ°λŠ₯을 ν•œκ΅­μ–΄ 버전에 μ μš©ν•œ κ²ƒμž…λ‹ˆλ‹€.

✨ μ£Όμš” κΈ°λŠ₯

πŸ“… Korean Date Expressions (locale='kor')

  • Year View: 2024λ…„ 1μ›” ν˜•μ‹μœΌλ‘œ ν‘œμ‹œ
  • Month View: ν•œκ΅­μ–΄ μ›” 이름 ν‘œμ‹œ
  • Week View: 1μ›” 1μ£Ό ν˜•μ‹μœΌλ‘œ μ£Όμ°¨ ν‘œμ‹œ
  • Day View: 1μ›” 1일 (μ›”) ν˜•μ‹μœΌλ‘œ λ‚ μ§œ ν‘œμ‹œ
  • Hour/PartOfDay Views: λͺ¨λ“  μ‹œκ°„ λ‹¨μœ„μ—μ„œ ν•œκ΅­μ–΄ λ‚ μ§œ 지원

🎯 Jira-style Today Indicator

  • Today ν‘œμ‹œ κ°œμ„ : λ‹¨μˆœν•œ μ‚¬κ°ν˜• β†’ Jira μŠ€νƒ€μΌ ν™”μ‚΄ν‘œ
  • 주황색 ν™”μ‚΄ν‘œ (#fea362)둜 μ‹œκ°μ  κ°•μ‘°
  • 쀑앙 μ„Έλ‘œμ„ κ³Ό μ—­μ‚Όκ°ν˜• ν™”μ‚΄ν‘œ 머리 μ‘°ν•©

🎨 Visual Improvements

  • Project Bar λ‹¨μˆœν™”: μ‚Όκ°ν˜• μž₯식 제거, κΉ”λ”ν•œ μ§μ‚¬κ°ν˜• λ””μžμΈ
  • Task Label: fontSize={12}둜 가독성 κ°œμ„ 
  • Tooltip κ°œμ„ : μž‘μ—…λͺ…κ³Ό λ‚ μ§œ 정보 뢄리, YYYY-MM-DD ~ YYYY-MM-DD ν˜•μ‹
  • Calendar Styling: ꡬ뢄선 μΆ”κ°€ 및 쀑앙 μ •λ ¬

πŸ”§ μ‚¬μš© 예제

import { Gantt } from 'gantt-task-react';

<Gantt 
  tasks={tasks}
  locale="kor"  // ν•œκ΅­μ–΄ λ‚ μ§œ ν‘œν˜„ ν™œμ„±ν™”
  viewMode={ViewMode.Week}
/>

πŸ“… ν•œκ΅­μ–΄ λ‚ μ§œ ν˜•μ‹ μ˜ˆμ‹œ

ViewMode English Korean (locale='kor')
Year 2024 2024
Month January, 2024 2024λ…„ 1μ›”
Week W01 1μ›” 1μ£Ό
Day Mon, 1 1μ›” 1일 (μ›”)
Hour Mon, 1 January 1μ›” 1일 (μ›”)

πŸ“ λ³€κ²½λœ νŒŒμΌλ“€

Core Files

  • src/helpers/date-helper.ts: getWeekOfMonth ν•¨μˆ˜ μΆ”κ°€
  • src/components/calendar/calendar.tsx: ν•œκ΅­μ–΄ λ‚ μ§œ ν‘œν˜„ 둜직 및 μ‹œκ°μ  κ°œμ„ 
  • src/components/grid/grid-body.tsx: Jira μŠ€νƒ€μΌ Today ν™”μ‚΄ν‘œ κ΅¬ν˜„
  • src/components/other/tooltip.tsx: 툴팁 λ‚ μ§œ ν˜•μ‹ κ°œμ„ 
  • src/components/task-item/project/project.tsx: ν”„λ‘œμ νŠΈ λ°” λ‹¨μˆœν™”
  • src/components/task-item/task-item.tsx: ν…μŠ€νŠΈ 크기 μ‘°μ •

Example Files

  • example/src/App.tsx: ν•œκ΅­μ–΄ locale μ‚¬μš© 예제 (locale="kor")

οΏ½οΏ½ 기술 세뢀사항

getWeekOfMonth ν•¨μˆ˜

  • μ›” λ‹¨μœ„ μ£Όμ°¨ 계산 (getWeekNumberISO8601 λŒ€μ²΄)
  • μ›”μ˜ 첫 번째 μ›”μš”μΌ κΈ°μ€€ μ£Όμ°¨ μ‚°μ •

Today Indicator SVG Structure

<svg>
  <rect /> {/* λ°°κ²½ */}
  <rect /> {/* 쀑앙 μ„Έλ‘œμ„  */}
  <polygon /> {/* ν™”μ‚΄ν‘œ 머리 */}
</svg>

βœ… ν…ŒμŠ€νŠΈ

  • λΉŒλ“œ 성곡
  • λͺ¨λ“  ViewModeμ—μ„œ ν•œκ΅­μ–΄ λ‚ μ§œ ν‘œν˜„ 확인
  • Jira μŠ€νƒ€μΌ Today ν™”μ‚΄ν‘œ λ™μž‘ 확인
  • TypeScript νƒ€μž… 검증
  • κΈ°μ‘΄ μ˜μ–΄ locale ν˜Έν™˜μ„± μœ μ§€

πŸ™ Credit

Original PR by @ohshinyeop - PR #254

"ν•œκ΅­μ‹ λ‚ μ§œ ν‘œκΈ°λŠ” μ˜μ–΄μ™€ 맀우 λ‹€λ¦…λ‹ˆλ‹€" - 이제 ν•œκ΅­ μ‚¬μš©μžλ“€μ΄ 더 μžμ—°μŠ€λŸ½κ²Œ Gantt Chartλ₯Ό μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€! πŸŽ‰

- Add getWeekOfMonth function for monthly week calculation
- Add Korean locale support (locale='kor') in calendar component
  - Year view: Display as '2024λ…„ 1μ›”'
  - Month view: Show month names in Korean
  - Week view: Display as '1μ›” 1μ£Ό' format
  - Day view: Display as '1μ›” 1일 (μ›”)' format
  - Hour/PartOfDay views: Korean date format support
- Add Jira-style Today indicator with orange arrow
  - Replace simple rect with SVG containing vertical line and triangle arrow
  - Orange color (#fea362) for better visibility
- Improve tooltip date format
  - Separate task name and date information
  - Use 'YYYY-MM-DD ~ YYYY-MM-DD' format
- Simplify project visual style
  - Remove triangular decorations from project bars
  - Clean rectangular design only
- Add fontSize={12} to task labels for better readability
- Add Korean locale examples in demo app (locale='kor')
- Update calendar styling with divider lines and center alignment

Based on PR MaTeMaTuK#254 from MaTeMaTuK/gantt-task-react by ohshinyeop
Korean date expressions are fundamentally different from English formats
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants