[Feature] onChange All Write Fields in Write Page

fixtures/write-form.js

@@ -0,0 +1,14 @@
+const writeForm = {
+  title: '스터디를 소개합니다.1',
+  contents: '우리는 이것저것 합니다.1',
+  moderatorId: 'user1',
+  applyEndDate: '2020-11-26',
+  participants: [],
+  personnel: 10,
+  tags: [
+    'JavaScript',
+    'Algorithm',
+  ],
+};
+
+export default writeForm;

src/components/write/WriteForm.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import styled from '@emotion/styled';
+
+const WriteFormWrapper = styled.div``;
+
+const WriteForm = ({ onChange, fields }) => {
+  const {
+    title, applyEndDate, personnel, contents,
+  } = fields;
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+
+    onChange({ name, value });
+  };
+
+  return (
+    <WriteFormWrapper>
+      <div>
+        <input
+          type="text"
+          name="title"
+          value={title}
+          onChange={handleChange}
+          placeholder="제목을 입력하세요"
+        />
+      </div>
+      <div>
+        <label htmlFor="application-deadline">모집 마감 날짜</label>
+        <input
+          type="date"
+          name="applyEndDate"
+          value={applyEndDate}
+          onChange={handleChange}
+          id="application-deadline"
+        />
+      </div>
+      <div>
+        <label htmlFor="participants-number">참여 인원 수</label>
+        <input
+          type="number"
+          name="personnel"
+          value={personnel}
+          onChange={handleChange}
+          id="participants-number"
+        />
+      </div>
+      <div>
+        {/* TODO: 추후 draft.js를 사용하여 변경 예정 */}
+        <textarea
+          rows="10"
+          cols="100"
+          name="contents"
+          value={contents}
+          onChange={handleChange}
+          placeholder="내용"
+        />
+      </div>
+    </WriteFormWrapper>
+  );
+};
+
+export default WriteForm;

src/components/write/WriteForm.test.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react';
+
+import WriteForm from './WriteForm';
+
+import WRITE_FORM from '../../../fixtures/write-form';
+
+describe('WriteForm', () => {
+  const handleChange = jest.fn();
+
+  beforeEach(() => {
+    handleChange.mockClear();
+  });
+
+  const renderWriteForm = (fields) => render((
+    <WriteForm
+      fields={fields}
+      onChange={handleChange}
+    />
+  ));
+
+  it('renders input write form text', () => {
+    const { getByLabelText, getByPlaceholderText } = renderWriteForm(WRITE_FORM);
+
+    const {
+      title, applyEndDate, personnel, contents,
+    } = WRITE_FORM;
+
+    expect(getByPlaceholderText('제목을 입력하세요')).toHaveValue(title);
+    expect(getByLabelText('모집 마감 날짜')).toHaveValue(applyEndDate);
+    expect(getByLabelText('참여 인원 수')).toHaveValue(personnel);
+    expect(getByPlaceholderText('내용')).toHaveTextContent(contents);
+  });
+
+  describe('listens change event', () => {
+    it('write fields value change', () => {
+      const { getByPlaceholderText } = renderWriteForm(WRITE_FORM);
+
+      const { title } = WRITE_FORM;
+
+      const inputTitle = getByPlaceholderText('제목을 입력하세요');
+      expect(inputTitle).toHaveValue(title);
+
+      fireEvent.change(inputTitle, {
+        target: {
+          value: '안녕하세요!',
+          name: 'title',
+        },
+      });
+
+      expect(handleChange).toBeCalled();
+    });
+  });
+});

src/containers/write/TagsFormContainer.jsx

@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { get } from '../../util/utils';
 import TagsForm from '../../components/write/TagsForm';
+
 import { changeWriteField } from '../../reducers/slice';
 
 const TagsFormContainer = () => {

src/containers/write/WriteFormContainer.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { useDispatch, useSelector } from 'react-redux';
+
+import { get } from '../../util/utils';
+import WriteForm from '../../components/write/WriteForm';
+
+import { changeWriteField } from '../../reducers/slice';
+
+const WriteFormContainer = () => {
+  const dispatch = useDispatch();
+
+  const writeField = useSelector(get('writeField'));
+
+  const onChangeWriteField = ({ name, value }) => {
+    dispatch(
+      changeWriteField({
+        name,
+        value,
+      }),
+    );
+  };
+
+  return (
+    <WriteForm
+      fields={writeField}
+      onChange={onChangeWriteField}
+    />
+  );
+};
+
+export default WriteFormContainer;

src/containers/write/WriteFormContainer.test.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import { useDispatch, useSelector } from 'react-redux';
+
+import { fireEvent, render } from '@testing-library/react';
+
+import WriteFormContainer from './WriteFormContainer';
+
+describe('WriteFormContainer', () => {
+  const dispatch = jest.fn();
+
+  beforeEach(() => {
+    dispatch.mockClear();
+
+    useDispatch.mockImplementation(() => dispatch);
+
+    useSelector.mockImplementation((state) => state({
+      writeField: {
+        title: '',
+        contents: '',
+        moderatorId: '',
+        applyEndDate: '',
+        participants: [],
+        personnel: 0,
+      },
+    }));
+  });
+
+  const renderWriteFormContainer = () => render((
+    <WriteFormContainer />
+  ));
+
+  describe('render Write Form Container contents text', () => {
+    it('renders write input text', () => {
+      const { getByPlaceholderText, getByLabelText } = renderWriteFormContainer();
+
+      expect(getByPlaceholderText('제목을 입력하세요')).not.toBeNull();
+      expect(getByPlaceholderText('내용')).not.toBeNull();
+      expect(getByLabelText('모집 마감 날짜')).not.toBeNull();
+      expect(getByLabelText('참여 인원 수')).not.toBeNull();
+    });
+  });
+
+  describe('dispatch actions call', () => {
+    const { value, name } = {
+      name: 'title',
+      value: '안녕하세요!',
+    };
+    it('listens actions change event', () => {
+      const { getByPlaceholderText } = renderWriteFormContainer();
+
+      const inputTitle = getByPlaceholderText('제목을 입력하세요');
+
+      expect(inputTitle).toHaveValue('');
+
+      fireEvent.change(inputTitle, {
+        target: { value, name },
+      });
+
+      expect(dispatch).toBeCalledWith({
+        payload: {
+          name,
+          value,
+        },
+        type: 'application/changeWriteField',
+      });
+    });
+  });
+});

src/pages/WritePage.jsx

@@ -1,26 +1,14 @@
 import React from 'react';
 
 import TagFormContainer from '../containers/write/TagsFormContainer';
+import WriteFormContainer from '../containers/write/WriteFormContainer';
 
 import Responsive from '../styles/Responsive';
 
 const IntroducePage = () => (
   <Responsive>
     <h1>스터디 그룹 개설하기</h1>
-    <div>
-      <input type="text" placeholder="제목을 입력하세요" />
-    </div>
-    <div>
-      <span>모집 마감 날짜</span>
-      <input type="date" />
-    </div>
-    <div>
-      <span>참여 인원 수</span>
-      <input type="number" />
-    </div>
-    <div>
-      <textarea rows="10" cols="100" placeholder="내용" />
-    </div>
+    <WriteFormContainer />
     <TagFormContainer />
     <div>
       <button type="button">저장</button>

src/reducers/slice.js

@@ -42,10 +42,12 @@ const { actions, reducer } = createSlice({
       };
     },
     changeWriteField(state, { payload: { name, value } }) {
+      const { writeField } = state;
+
       return {
         ...state,
         writeField: {
-          ...state.writeField,
+          ...writeField,
           [name]: value,
         },
       };