feat: add color select field

src/components/subject-collapse.tsx

@@ -3,8 +3,11 @@ import { useSetAtom } from 'jotai'
 import { deleteSubjectAtom } from '~/atoms/subjects'
 import { ButtonControl } from '~/components/button-control'
 import { LectureList } from '~/components/lecture-list'
+import { badgeColors } from '~/constants/badge-colors'
+import { textColors } from '~/constants/text-colors'
 import { useSubjectModal } from '~/contexts/subject-modal'
 import type { Subject } from '~/schemas/subject'
+import { cn } from '~/utils/cn'
 
 export function SubjectCollapse({ subject }: { subject: Subject }) {
   const { openSubjectModal } = useSubjectModal()
@@ -15,7 +18,15 @@ export function SubjectCollapse({ subject }: { subject: Subject }) {
       <summary className="collapse-title">
         <div className="flex items-center justify-between gap-4 font-medium text-xl">
           <div className="flex items-center gap-4">
-            <div className="badge badge-primary badge-lg aspect-square">{subject.credit}</div>
+            <div
+              className={cn(
+                badgeColors.find((color) => color.includes(subject.color)),
+                textColors.find((color) => color.includes(subject.color)),
+                'badge badge-lg aspect-square',
+              )}
+            >
+              {subject.credit}
+            </div>
             <span className="line-clamp-1">{subject.title}</span>
           </div>
           <ButtonControl onClickUpdate={() => openSubjectModal(subject)} onClickDelete={() => deleteSubject(subject)} />

src/components/table.tsx

@@ -1,5 +1,6 @@
 import { backgroundColors } from '~/constants/background-colors'
 import { days } from '~/constants/days'
+import { textColors } from '~/constants/text-colors'
 import type { Timetable } from '~/schemas/timetable'
 import { cn } from '~/utils/cn'
 
@@ -25,8 +26,9 @@ export function Table({ timetable }: { timetable: Timetable }) {
                     key={`td-${timetable.index}-${i}-${j}`}
                     rowSpan={subject.credit}
                     className={cn(
-                      backgroundColors[Math.floor(Math.random() * backgroundColors.length)],
-                      'p-1 text-white text-xs',
+                      backgroundColors.find((color) => color.includes(subject.color)),
+                      textColors.find((color) => color.includes(subject.color)),
+                      'p-1 text-xs',
                     )}
                   >
                     {subject.title}

src/constants/background-colors.ts

@@ -1,19 +1,10 @@
 export const backgroundColors = [
-  'bg-red-600',
-  'bg-orange-600',
-  'bg-amber-600',
-  'bg-yellow-600',
-  'bg-lime-600',
-  'bg-green-600',
-  'bg-emerald-600',
-  'bg-teal-600',
-  'bg-cyan-600',
-  'bg-sky-600',
-  'bg-blue-600',
-  'bg-indigo-600',
-  'bg-violet-600',
-  'bg-purple-600',
-  'bg-fuchsia-600',
-  'bg-pink-600',
-  'bg-rose-600',
+  'bg-primary',
+  'bg-secondary',
+  'bg-accent',
+  'bg-neutral',
+  'bg-info',
+  'bg-success',
+  'bg-warning',
+  'bg-error',
 ] as const

src/constants/badge-colors.ts

@@ -0,0 +1,10 @@
+export const badgeColors = [
+  'badge-primary',
+  'badge-secondary',
+  'badge-accent',
+  'badge-neutral',
+  'badge-info',
+  'badge-success',
+  'badge-warning',
+  'badge-error',
+] as const

src/constants/select-colors.ts

@@ -0,0 +1,10 @@
+export const selectColors = [
+  'select-primary',
+  'select-secondary',
+  'select-accent',
+  'select-neutral',
+  'select-info',
+  'select-success',
+  'select-warning',
+  'select-error',
+] as const

src/constants/text-colors.ts

@@ -0,0 +1,10 @@
+export const textColors = [
+  'text-primary-content',
+  'text-secondary-content',
+  'text-accent-content',
+  'text-neutral-content',
+  'text-info-content',
+  'text-success-content',
+  'text-warning-content',
+  'text-error-content',
+] as const

src/contexts/subject-modal.tsx

@@ -7,6 +7,7 @@ import { useForm } from 'react-hook-form'
 import type { z } from 'zod'
 
 import { createSubjectAtom, subjectsAtom, updateSubjectAtom } from '~/atoms/subjects'
+import { selectColors } from '~/constants/select-colors'
 import { type Subject, subjectSchema } from '~/schemas/subject'
 import { cn } from '~/utils/cn'
 
@@ -22,6 +23,7 @@ export function SubjectModalProvider({ children }: { children: React.ReactNode }
     register,
     reset,
     handleSubmit,
+    watch,
     formState: { errors },
   } = useForm<z.infer<typeof subjectSchema>>({
     resolver: zodResolver(subjectSchema),
@@ -36,6 +38,7 @@ export function SubjectModalProvider({ children }: { children: React.ReactNode }
         index: subjects.length > 0 ? subjects[subjects.length - 1].index + 1 : 0,
         title: '',
         credit: 3,
+        color: 'primary',
         lectures: [],
       })
       setMode('추가')
@@ -98,6 +101,27 @@ export function SubjectModalProvider({ children }: { children: React.ReactNode }
               </div>
             </div>
           </div>
+          <div className="form-control w-full">
+            <label htmlFor="credit" className="label label-text">
+              색
+            </label>
+            <select
+              className={cn(
+                selectColors.find((color) => color.includes(watch('color'))),
+                'select w-full',
+              )}
+              {...register('color')}
+            >
+              <option value="primary">Primary</option>
+              <option value="secondary">Secondary</option>
+              <option value="accent">Accent</option>
+              <option value="neutral">Neutral</option>
+              <option value="info">Info</option>
+              <option value="success">Success</option>
+              <option value="warning">Warning</option>
+              <option value="error">Error</option>
+            </select>
+          </div>
           <div className="modal-action">
             <button type="button" className="btn" onClick={() => modalRef.current?.close()}>
               취소

src/schemas/subject.ts

@@ -8,6 +8,7 @@ export const subjectSchema = z.object({
     message: '과목명을 입력해주세요.',
   }),
   credit: z.number().min(1).max(6),
+  color: z.string(),
   lectures: z.array(lectureSchema),
 })