feat: DateMonthPicker 컴포넌트에 startYear props 추가, width, height 높임

packages/common/business_components/src/ui/date_month_picker/index.tsx

@@ -17,6 +17,7 @@ type MonthPickerProps = {
   field: { value: string; onChange: (date: string) => void }; // yyyyMM 문자열
   selectClass?: string;
   readOnly?: boolean;
+  startYear?: number; // 시작 연도 props 추가
 };
 
 // yyyyMM → Date 객체
@@ -37,6 +38,7 @@ export const DateMonthPicker = ({
   field,
   selectClass,
   readOnly = false,
+  startYear,
 }: MonthPickerProps) => {
   const [open, setOpen] = useState(false);
 
@@ -75,6 +77,7 @@ export const DateMonthPicker = ({
         <MonthPicker
           currentMonth={parsedDate}
           onMonthChange={handleSelect}
+          startYear={startYear}
         />
       </PopoverContent>
     </Popover>

packages/common/business_components/src/ui/date_month_picker/mothPicker.tsx

@@ -28,35 +28,41 @@ export type MonthPickerProps = {
     newMonth: Date | undefined,
     shouldClosePopover?: boolean
   ) => void;
+  startYear?: number;
 };
 
-export function MonthPicker({ currentMonth, onMonthChange }: MonthPickerProps) {
+export function MonthPicker({ currentMonth, onMonthChange, startYear }: MonthPickerProps) {
 
   const today = startOfToday();
-const currentYear = today.getFullYear();
+  const currentYear = today.getFullYear();
   const yearFromProp = format(currentMonth, "yyyy");
-const selectedYear = parseInt(yearFromProp);
+  const selectedYear = parseInt(yearFromProp);
 
   // 현재 월의 시작 날짜
   const fullYearStart = parse(yearFromProp, "yyyy", new Date());
 
   const yearEnd =
     selectedYear === currentYear ? today : endOfYear(fullYearStart);
-  
-  
 
 
-  const yearRange = Array.from({ length: 21 }, (_, i) => currentYear - 20 + i);
+
+
+  // startYear가 없으면 기존과 동일하게 (현재년도 - 20년부터 현재년도까지)
+  // startYear가 있으면 해당 년도부터 현재년도까지, 내림차순으로 정렬
+  const yearRange = startYear 
+    ? Array.from({ length: currentYear - startYear + 1 }, (_, i) => currentYear - i)
+    : Array.from({ length: 21 }, (_, i) => currentYear - 20 + i);
+
   const months = eachMonthOfInterval({ start: fullYearStart, end: yearEnd });
 
   const getMonthButtonClass = (month: Date) =>
     cn(
       "inline-flex h-9 w-16 items-center justify-center rounded-md p-0 text-sm font-normal ring-offset-white transition-colors hover:bg-slate-100 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-selected:opacity-100 dark:ring-offset-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50 dark:focus-visible:ring-slate-800",
       isEqual(month, currentMonth) &&
-        "bg-slate-900 text-slate-50 hover:bg-slate-900 hover:text-slate-50 focus:bg-slate-900 focus:text-slate-50 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50 dark:hover:text-slate-900 dark:focus:bg-slate-50 dark:focus:text-slate-900",
+      "bg-slate-900 text-slate-50 hover:bg-slate-900 hover:text-slate-50 focus:bg-slate-900 focus:text-slate-50 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50 dark:hover:text-slate-900 dark:focus:bg-slate-50 dark:focus:text-slate-900",
       !isEqual(month, currentMonth) &&
-        isEqual(month, getStartOfCurrentMonth()) &&
-        "bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-slate-50"
+      isEqual(month, getStartOfCurrentMonth()) &&
+      "bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-slate-50"
     );
 
   return (
@@ -77,7 +83,7 @@ const selectedYear = parseInt(yearFromProp);
                 onMonthChange(newDate, false);
               }}
             >
-              <SelectTrigger className="w-[120px] h-7">
+              <SelectTrigger className="w-[140px] h-9 text-base">
                 <SelectValue placeholder="년도" />
               </SelectTrigger>
               <SelectContent>
@@ -112,7 +118,7 @@ const selectedYear = parseInt(yearFromProp);
                   onClick={() => onMonthChange(month, true)}
                 >
                   <time dateTime={format(month, "yyyy-MM-dd")}>
-                  {format(month, 'MMM', { locale: ko })}
+                    {format(month, 'MMM', { locale: ko })}
                   </time>
                 </button>
               </div>