React 17.0.2 + TypeScript 4.3.5 + MobX 조합으로 작성된 예제이며, observer를 사용한 함수형 컴포넌트(const Monitor = observer(() => {...}) 버전입니다.요구사항을 충족합니다:모니터링 주기: DAILY, WEEKLY, MONTHLY 라디오Start Time 입력은 항상 표시WEEKLY 선택 시 요일 라디오MONTHLY 선택 시 1~31일 콤보박스

monitorStore.ts

import { makeAutoObservable } from "mobx";

export type MonitoringCycle = 'DAILY' | 'WEEKLY' | 'MONTHLY';

export class MonitorStore {
  cycle: MonitoringCycle = 'DAILY';
  startTime: string = '';
  dayOfWeek: string = 'MON';
  dayOfMonth: number = 1;

  constructor() {
    makeAutoObservable(this);
  }

  setCycle = (cycle: MonitoringCycle) => {
    this.cycle = cycle;
  };

  setStartTime = (time: string) => {
    this.startTime = time;
  };

  setDayOfWeek = (day: string) => {
    this.dayOfWeek = day;
  };

  setDayOfMonth = (day: number) => {
    this.dayOfMonth = day;
  };
}

export const monitorStore = new MonitorStore();

 

Monitor.tsx

import React from 'react';
import { observer } from 'mobx-react-lite';
import { monitorStore } from './monitorStore';

export const Monitor = observer(() => {
  const store = monitorStore;

  const handleCycleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    store.setCycle(e.target.value as any);
  };

  const handleStartTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    store.setStartTime(e.target.value);
  };

  const handleDayOfWeekChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    store.setDayOfWeek(e.target.value);
  };

  const handleDayOfMonthChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    store.setDayOfMonth(Number(e.target.value));
  };

  const renderDayOfWeekOptions = () => {
    const days = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'];
    return (
      <div>
        <label>요일 선택: </label>
        {days.map(day => (
          <label key={day} style={{ marginRight: 10 }}>
            <input
              type="radio"
              name="dayOfWeek"
              value={day}
              checked={store.dayOfWeek === day}
              onChange={handleDayOfWeekChange}
            />
            {day}
          </label>
        ))}
      </div>
    );
  };

  const renderDayOfMonthOptions = () => {
    return (
      <div>
        <label>날짜 선택: </label>
        <select value={store.dayOfMonth} onChange={handleDayOfMonthChange}>
          {Array.from({ length: 31 }, (_, i) => i + 1).map(day => (
            <option key={day} value={day}>
              {day}일
            </option>
          ))}
        </select>
      </div>
    );
  };

  return (
    <div style={{ padding: 20, fontFamily: 'Arial' }}>
      <h3>모니터링 주기 설정</h3>

      <div style={{ marginBottom: 10 }}>
        <label>주기 선택: </label>
        {(['DAILY', 'WEEKLY', 'MONTHLY'] as const).map((type) => (
          <label key={type} style={{ marginRight: 10 }}>
            <input
              type="radio"
              name="cycle"
              value={type}
              checked={store.cycle === type}
              onChange={handleCycleChange}
            />
            {type}
          </label>
        ))}
      </div>

      <div style={{ marginBottom: 10 }}>
        <label>Start Time: </label>
        <input
          type="text"
          value={store.startTime}
          onChange={handleStartTimeChange}
          placeholder="HH:mm"
        />
      </div>

      {store.cycle === 'WEEKLY' && renderDayOfWeekOptions()}
      {store.cycle === 'MONTHLY' && renderDayOfMonthOptions()}
    </div>
  );
});