[feat] 달력 카테고리 분류 추가

[hyejun0228]

Summary by CodeRabbit

• New Features
  • Schedule items now show category labels before titles for clearer identification.
  • Category colors are now consistent across schedule views for improved visual cues.
  • Navigate card and schedule layouts updated for full-width display and better text overflow handling.

[coderabbitai]

📝 Walkthrough

Walkthrough

Extracted schedule category color and label constants into src/constants/schedule.ts, and updated Home, ScheduleDetail, and DateBox components to use these shared constants; Home and ScheduleDetail render category labels prefixed to titles and adjust layout classes for proper truncation and spacing.

Changes

Cohort / File(s)	Summary
Constants added src/constants/schedule.ts	Adds exported SCHEDULE_COLOR (category → hex color) and SCHEDULE_LABEL (category → Korean label) constants.
Home page UI src/pages/Home/index.tsx	Replaces local color map with imported SCHEDULE_COLOR/SCHEDULE_LABEL; prefixes titles with category labels, updates layout classes (mt-2 w-full, flex min-w-0 items-center gap-3, flex min-w-0 flex-1 flex-col) and applies overflow/truncation to title text.
Schedule detail UI src/pages/Schedule/components/ScheduleDetail.tsx	Imports shared SCHEDULE_COLOR/SCHEDULE_LABEL, prefixes schedule titles with label in brackets, and adjusts DOM structure to accommodate label display while retaining color usage.
Date box UI src/pages/Schedule/components/DateBox.tsx	Removes local SCHEDULE_COLOR and local ScheduleCategory alias; imports SCHEDULE_COLOR from constants and retains existing rendering logic relying on the external color map.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I hopped through code with cheerful zeal,
Colors and labels now part of the deal.
Titles trimmed neat, brackets gleam bright,
Shared constants guide each tiny sprite.
A tidy patch — I nibble with delight! 🥕

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title '[feat] 달력 카테고리 분류 추가' (Add calendar category classification) directly reflects the main change: extracting schedule color/label constants and adding category labels to schedule displays across multiple components.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch 114-feat-달력-분류-표시-추가

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (2)

src/pages/Schedule/components/ScheduleDetail.tsx (2)

61-65: Unnecessary wrapper div can be simplified.

The outer flex flex-row gap-1 wrapper contains only a single child, so the flex layout has no effect. Consider removing the redundant wrapper.

♻️ Suggested simplification

             <div className="flex flex-col gap-1">
-              <div className="flex flex-row gap-1">
-                <div className="text-[14px] leading-4 font-bold">
-                  [{SCHEDULE_LABEL[scheduleCategory]}] {title}
-                </div>
-              </div>
+              <div className="text-[14px] leading-4 font-bold">
+                [{SCHEDULE_LABEL[scheduleCategory]}] {title}
+              </div>
               <div className="text-[13px] leading-3 text-indigo-300">{formatScheduleTime({ startedAt, endedAt })}</div>
             </div>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/Schedule/components/ScheduleDetail.tsx` around lines 61 - 65, In
ScheduleDetail, remove the redundant outer wrapper div with className "flex
flex-row gap-1" (it only has one child so flex/gap do nothing); keep the inner
text div (the element that renders "[{SCHEDULE_LABEL[scheduleCategory]}]
{title}") and, if any layout styles are required, move them to that inner div
(update its className accordingly). This touches the JSX around the
SCHEDULE_LABEL[scheduleCategory] and title rendering—delete the outer node and
ensure the remaining div preserves necessary classes.

---

18-23: Consider aligning the type with SCHEDULE_COLOR for type safety.

SCHEDULE_COLOR is typed implicitly with specific keys, while SCHEDULE_LABEL uses Record<string, string>. This loses type safety - a typo in scheduleCategory would silently return undefined. Consider using the same typing approach or extracting a shared ScheduleCategory type.

♻️ Suggested refactor

-const SCHEDULE_LABEL: Record<string, string> = {
+const SCHEDULE_LABEL = {
   UNIVERSITY: '학사일정',
   CLUB: '동아리',
   COUNCIL: '총동아리',
   DORM: '기숙사',
-};
+} as const;

Or extract a shared type:

type ScheduleCategory = 'UNIVERSITY' | 'CLUB' | 'COUNCIL' | 'DORM';

const SCHEDULE_LABEL: Record<ScheduleCategory, string> = { ... };
const SCHEDULE_COLOR: Record<ScheduleCategory, string> = { ... };

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/Schedule/components/ScheduleDetail.tsx` around lines 18 - 23,
SCHEDULE_LABEL is currently typed as Record<string, string>, losing type safety
compared to the implicitly-typed SCHEDULE_COLOR; define a shared literal union
type (e.g., ScheduleCategory = 'UNIVERSITY' | 'CLUB' | 'COUNCIL' | 'DORM') and
change both SCHEDULE_LABEL and SCHEDULE_COLOR to use Record<ScheduleCategory,
string> (or extract the existing keys into a ScheduleCategory type) so lookups
by scheduleCategory are type-checked and typos surface at compile time.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/pages/Home/index.tsx`:
- Around line 149-155: Extract the duplicated SCHEDULE_LABEL (and the related
SCHEDULE_COLOR) into a shared constants module (e.g., create
src/constants/schedule.ts), export a ScheduleCategory type and both
SCHEDULE_LABEL and SCHEDULE_COLOR as Record<ScheduleCategory, string>, then
replace the inline SCHEDULE_LABEL in Home (index.tsx) and the duplicate in
ScheduleDetail.tsx with imports from that module so the constants are not
recreated on every render and remain single source of truth.

---

Nitpick comments:
In `@src/pages/Schedule/components/ScheduleDetail.tsx`:
- Around line 61-65: In ScheduleDetail, remove the redundant outer wrapper div
with className "flex flex-row gap-1" (it only has one child so flex/gap do
nothing); keep the inner text div (the element that renders
"[{SCHEDULE_LABEL[scheduleCategory]}] {title}") and, if any layout styles are
required, move them to that inner div (update its className accordingly). This
touches the JSX around the SCHEDULE_LABEL[scheduleCategory] and title
rendering—delete the outer node and ensure the remaining div preserves necessary
classes.
- Around line 18-23: SCHEDULE_LABEL is currently typed as Record<string,
string>, losing type safety compared to the implicitly-typed SCHEDULE_COLOR;
define a shared literal union type (e.g., ScheduleCategory = 'UNIVERSITY' |
'CLUB' | 'COUNCIL' | 'DORM') and change both SCHEDULE_LABEL and SCHEDULE_COLOR
to use Record<ScheduleCategory, string> (or extract the existing keys into a
ScheduleCategory type) so lookups by scheduleCategory are type-checked and typos
surface at compile time.

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

src/pages/Schedule/components/DateBox.tsx (1)

44-54: ⚠️ Potential issue | 🟡 Minor

Using title as key may cause issues if schedules have duplicate titles.

If two schedules on the same day have identical titles, React will emit a warning and may not correctly reconcile the list. Consider using a unique identifier if available.

🛠️ Suggested fix (if a unique ID is available)

-              visibleSchedules.map((s) => (
+              visibleSchedules.map((s, index) => (
                 <div
-                  key={s.title}
+                  key={s.id ?? `${s.title}-${index}`}
                   className="flex-1"

If schedules have an id field, prefer that. Otherwise, combining title with index provides a stable fallback.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/Schedule/components/DateBox.tsx` around lines 44 - 54, The map over
visibleSchedules in DateBox.tsx currently uses s.title as the React key which
can collide; change the key in the visibleSchedules.map callback (the function
that returns the div with className "flex-1" and style using
SCHEDULE_COLOR[s.scheduleCategory]) to use a unique identifier if the schedule
objects expose one (e.g., s.id), otherwise use a stable fallback such as
`${s.title}-${index}` by taking the map index parameter to avoid duplicate keys
and ensure proper reconciliation.

src/pages/Schedule/components/ScheduleDetail.tsx (1)

21-28: ⚠️ Potential issue | 🔴 Critical

Bug: Uses current system year instead of the year prop.

Line 22 uses new Date().getFullYear() to construct the target date, ignoring the year prop passed to the component. This will cause incorrect filtering when viewing schedules from a different year.

🐛 Proposed fix

   const dailySchedules = schedules?.schedules?.filter(({ startedAt, endedAt }) => {
-    const target = new Date(new Date().getFullYear(), month - 1, day);
+    const target = new Date(year, month - 1, day);
 
     const start = parseDateOnly(startedAt);
     const end = parseDateOnly(endedAt);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/Schedule/components/ScheduleDetail.tsx` around lines 21 - 28, The
filter for dailySchedules incorrectly builds target using new
Date().getFullYear(); update it to use the component's year prop instead (use
the numeric year value passed into the component) so the target date reflects
props year/month/day; specifically, in the schedules?.schedules?.filter callback
that references target, replace creation of target with new Date(year, month -
1, day) (ensuring year is parsed/validated as a number if needed) so
parseDateOnly(startedAt)/parseDateOnly(endedAt) comparisons are done against the
correct year.

🧹 Nitpick comments (3)

src/constants/schedule.ts (1)

1-13: Consider adding explicit type annotations for better type safety.

Both constants use the same keys, but SCHEDULE_LABEL is typed as Record<string, string>, which loses type safety. Components like DateBox.tsx define scheduleCategory as a literal union type 'UNIVERSITY' | 'CLUB' | 'COUNCIL' | 'DORM'. Consider extracting a shared type and using as const for stricter typing.

♻️ Suggested improvement

+export type ScheduleCategory = 'UNIVERSITY' | 'CLUB' | 'COUNCIL' | 'DORM';
+
-export const SCHEDULE_COLOR = {
+export const SCHEDULE_COLOR: Record<ScheduleCategory, string> = {
   UNIVERSITY: '#AEDCBA',
   CLUB: '#FDE49B',
   COUNCIL: '#E9F2FA',
   DORM: '#B9ADEF',
 };
 
-export const SCHEDULE_LABEL: Record<string, string> = {
+export const SCHEDULE_LABEL: Record<ScheduleCategory, string> = {
   UNIVERSITY: '학사일정',
   CLUB: '동아리',
   COUNCIL: '총동아리',
   DORM: '기숙사',
 };

This allows DateBox.tsx and other components to import and reuse ScheduleCategory instead of duplicating the union type.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/constants/schedule.ts` around lines 1 - 13, Extract a literal union type
and tighten both constant types: change SCHEDULE_COLOR and SCHEDULE_LABEL to use
"as const" and export a shared type alias (e.g., export type ScheduleCategory =
keyof typeof SCHEDULE_COLOR) so both objects keep exact keys and DateBox.tsx can
import ScheduleCategory instead of duplicating the union; update
SCHEDULE_LABEL's type from Record<string,string> to
Record<ScheduleCategory,string> (or infer via typeof) to restore full type
safety and reuse across components.

src/pages/Schedule/components/ScheduleDetail.tsx (2)

15-19: Variable shadowing: year, month, day shadow component props.

The destructured variables inside parseDateOnly shadow the component's props. While currently not problematic (the function is self-contained), this can lead to subtle bugs if the function is later modified to reference outer scope.

♻️ Suggested rename

   const parseDateOnly = (value: string) => {
     const [date] = value.split(' ');
-    const [year, month, day] = date.split('.').map(Number);
-    return new Date(year, month - 1, day);
+    const [y, m, d] = date.split('.').map(Number);
+    return new Date(y, m - 1, d);
   };

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/Schedule/components/ScheduleDetail.tsx` around lines 15 - 19, The
destructured names year, month, day inside parseDateOnly shadow the component
props; rename those local variables (e.g., dateYear, dateMonth, dateDay or y, m,
d) inside parseDateOnly and update the new Date(...) call to use the renamed
locals so the function remains self-contained without shadowing the
component-level props referenced elsewhere in this file; locate parseDateOnly in
ScheduleDetail.tsx and change the destructure and the new Date call accordingly.

---

48-52: Unnecessary wrapper div.

The outer <div className="flex flex-row gap-1"> wraps a single child element, making the flex and gap styles ineffective. This can be simplified.

♻️ Suggested simplification

             <div className="flex flex-col gap-1">
-              <div className="flex flex-row gap-1">
-                <div className="text-[14px] leading-4 font-bold">
-                  [{SCHEDULE_LABEL[scheduleCategory]}] {title}
-                </div>
-              </div>
+              <div className="text-[14px] leading-4 font-bold">
+                [{SCHEDULE_LABEL[scheduleCategory]}] {title}
+              </div>
               <div className="text-[13px] leading-3 text-indigo-300">{formatScheduleTime({ startedAt, endedAt })}</div>
             </div>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/Schedule/components/ScheduleDetail.tsx` around lines 48 - 52, The
outer wrapper div with className="flex flex-row gap-1" around the single child
in ScheduleDetail.tsx is unnecessary; remove that wrapper and move any needed
classes to the remaining element (the div rendering
"[{SCHEDULE_LABEL[scheduleCategory]}] {title}") so styling is preserved, e.g.,
keep the text div and ensure it contains the necessary classes instead of
keeping an extra flex container around the single child.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@src/pages/Schedule/components/DateBox.tsx`:
- Around line 44-54: The map over visibleSchedules in DateBox.tsx currently uses
s.title as the React key which can collide; change the key in the
visibleSchedules.map callback (the function that returns the div with className
"flex-1" and style using SCHEDULE_COLOR[s.scheduleCategory]) to use a unique
identifier if the schedule objects expose one (e.g., s.id), otherwise use a
stable fallback such as `${s.title}-${index}` by taking the map index parameter
to avoid duplicate keys and ensure proper reconciliation.

In `@src/pages/Schedule/components/ScheduleDetail.tsx`:
- Around line 21-28: The filter for dailySchedules incorrectly builds target
using new Date().getFullYear(); update it to use the component's year prop
instead (use the numeric year value passed into the component) so the target
date reflects props year/month/day; specifically, in the
schedules?.schedules?.filter callback that references target, replace creation
of target with new Date(year, month - 1, day) (ensuring year is parsed/validated
as a number if needed) so parseDateOnly(startedAt)/parseDateOnly(endedAt)
comparisons are done against the correct year.

---

Nitpick comments:
In `@src/constants/schedule.ts`:
- Around line 1-13: Extract a literal union type and tighten both constant
types: change SCHEDULE_COLOR and SCHEDULE_LABEL to use "as const" and export a
shared type alias (e.g., export type ScheduleCategory = keyof typeof
SCHEDULE_COLOR) so both objects keep exact keys and DateBox.tsx can import
ScheduleCategory instead of duplicating the union; update SCHEDULE_LABEL's type
from Record<string,string> to Record<ScheduleCategory,string> (or infer via
typeof) to restore full type safety and reuse across components.

In `@src/pages/Schedule/components/ScheduleDetail.tsx`:
- Around line 15-19: The destructured names year, month, day inside
parseDateOnly shadow the component props; rename those local variables (e.g.,
dateYear, dateMonth, dateDay or y, m, d) inside parseDateOnly and update the new
Date(...) call to use the renamed locals so the function remains self-contained
without shadowing the component-level props referenced elsewhere in this file;
locate parseDateOnly in ScheduleDetail.tsx and change the destructure and the
new Date call accordingly.
- Around line 48-52: The outer wrapper div with className="flex flex-row gap-1"
around the single child in ScheduleDetail.tsx is unnecessary; remove that
wrapper and move any needed classes to the remaining element (the div rendering
"[{SCHEDULE_LABEL[scheduleCategory]}] {title}") so styling is preserved, e.g.,
keep the text div and ensure it contains the necessary classes instead of
keeping an extra flex container around the single child.