poko 양육일지-MemberCheck Component 동작 분석

MemberCheck Component

MemberCheck Component는 탭과 폼을 통해 여러 학생의 데이터를 독립적으로 관리하는 기능을 제공합니다.

• MemberCheck Component: 탭을 사용하여 여러 학생의 데이터를 관리합니다.
• StudentForm Component: 각 탭에 대한 폼을 렌더링하고 폼 데이터를 관리합니다.

1) MemberCheck Component

(1) 상태값

const MemberCheck = () => {
  const [selectedStudent, setSelectedStudent] = useState(testStudents[0].id);
  const [studentData, setStudentData] = useState({});

• selectedStudent: 현재 선택된 학생의 ID를 관리하는 상태입니다.
• studentData: 각 학생의 폼 데이터를 저장하는 객체입니다.

개발환경에서는 testStudents라는 사전 객체를 생성하여 진행함.

(2) handle

handle submit

  const handleSaveDraft = async (values) => {
    try {
      const response = await saveDraft({ ...values, status: 0, studentId: selectedStudent });
      console.log('임시 저장 성공:', response);
    } catch (error) {
      console.error('임시 저장 실패:', error);
    }
  };

  const handleSubmit = async (values) => {
    try {
      const response = await submitCheck({ ...values, status: 1, studentId: selectedStudent });
      console.log('제출 성공:', response);
    } catch (error) {
      console.error('제출 실패:', error);
    }
  };

• handleSaveDraft: 폼 데이터를 임시 저장하는 함수입니다.
• handleSubmit: 폼 데이터를 제출하는 함수입니다.

두 함수 모두 제작된 API 요청을 통해 데이터를 저장 또는 제출하며, 현재 선택된 학생의 ID를 포함합니다.
본 문서에서는 API에 코드 상세내용은 생략하였습니다.

handle value

  const handleValuesChange = (changedValues, allValues) => {
    setStudentData({
      ...studentData,
      [selectedStudent]: allValues,
    });
  };

• handleValuesChange: 폼의 값이 변경될 때 호출되는 함수입니다. 변경된 값을 studentData 객체에 업데이트합니다.

(3) tab

  const items = testStudents.map(student => ({
    key: student.id,
    label: student.name,
    children: (
      <StudentForm
        key={student.id}
        studentId={student.id}
        initialValues={studentData[student.id] || {}}
        handleSaveDraft={handleSaveDraft}
        handleSubmit={handleSubmit}
        handleValuesChange={handleValuesChange}
      />
    ),
  }));

• 각 학생에 대한 탭 항목을 생성합니다.
• StudentForm Component를 사용하여 각 탭에 대한 폼을 렌더링합니다.
• initialValues prop을 통해 초기 값을 설정합니다.

map 함수를 통해 각 학생에 대한 항목 생성하기

testStudents 배열을 map 함수로 순회하여 각 학생에 대한 탭 항목을 생성합니다.
각 탭 항목은 key, label, children 속성을 가지며, key는 탭의 고유 ID, label은 탭에 표시될 이름, children은 탭의 내용입니다.
children 속성으로 각 학생에 대한 StudentForm 컴포넌트를 포함합니다.

(4) return

  return (
    <div className="member-check-section">
      <h2 className="section-title">학생 양육일지</h2>
      <Tabs activeKey={selectedStudent} onChange={setSelectedStudent} items={items} />
    </div>
  );
};

• Tabs 컴포넌트를 사용하여 탭 인터페이스를 생성합니다.
• activeKey prop으로 현재 선택된 탭을 설정합니다.
• onChange prop으로 탭 변경 시 selectedStudent 상태를 업데이트합니다.

2) StudentForm Component

(1) form(Ant Design)

const StudentForm = ({ studentId, initialValues, handleSaveDraft, handleSubmit, handleValuesChange }) => {
  const [form] = Form.useForm();

  useEffect(() => {
    form.setFieldsValue(initialValues);
  }, [initialValues, form]);

• Form.useForm(): Ant Design의 useForm 훅을 사용하여 폼 인스턴스를 생성합니다.
• useEffect: initialValues가 변경될 때 폼 필드를 초기화합니다.

(2) return

  return (
    <Form
      form={form}
      onFinish={handleSubmit}
      layout="vertical"
      onValuesChange={handleValuesChange}
      initialValues={initialValues}
    >
      <Form.Item label="주일예배는 얼마나 참석했나요?" name="worship_attendance">
        <Radio.Group>
          <Radio value="1부 예배">1부 예배</Radio>
          <Radio value="2부 예배">2부 예배</Radio>
          <Radio value="3부 예배">3부 예배</Radio>
          <Radio value="불참">불참</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item label="GQS 참석 여부" name="gqs" valuePropName="checked">
        <Checkbox>GQS 참석 여부</Checkbox>
      </Form.Item>
      <Form.Item label="양육 내용" name="training_content">
        <Input.TextArea className="form-item-input" />
      </Form.Item>
      <Form.Item label="기도 내용" name="pray_member">
        <Input.TextArea className="form-item-input" />
      </Form.Item>
      <Form.Item label="기타 내용" name="additional_issues">
        <Input.TextArea className="form-item-input" />
      </Form.Item>
      <Form.Item className="button-group">
        <Button onClick={() => handleSaveDraft(form.getFieldsValue())}>임시 저장</Button>
        <Button type="primary" htmlType="submit">제출</Button>
      </Form.Item>
    </Form>
  );
};

• Form 컴포넌트: 폼을 렌더링하며 initialValues, onFinish, onValuesChange 등 여러 prop을 사용합니다.
• 각 Form.Item: 폼 필드를 정의합니다. 예배 참석 여부, GQS 참석 여부, 양육 내용, 기도 내용, 기타 내용을 포함합니다.
• 버튼 그룹: 임시 저장 및 제출 버튼을 포함하며, 각 버튼은 handleSaveDraft와 handleSubmit 함수를 호출합니다.