[feat] 기업 자동응답 목록 추가 페이지 구현 및 테스트 코드 작성

src/components/auto-reply-company/AutoReplyAddForm.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useRef } from 'react';
+
+import { useNavigate } from 'react-router-dom';
+
+import { Controller, useForm } from 'react-hook-form';
+
+import useAutoReplyFormStore from '../../hooks/useAutoReplyFormStore';
+
+import { STATIC_ROUTES } from '../../constants/routes';
+
+import TextArea from '../ui/TextArea';
+import OperationButtons from '../ui/OperationButtons';
+import ErrorMessage from '../ui/ErrorMessage';
+
+const MAX_LENGTH = {
+  question: 60,
+  answer: 150,
+};
+
+export default function AutoReplyAddForm() {
+  const navigate = useNavigate();
+
+  const [{ done, errorMessage }, store] = useAutoReplyFormStore();
+
+  const questionRef = useRef<HTMLTextAreaElement | null>(null);
+
+  interface FormValues {
+    question: string,
+    answer: string,
+  }
+
+  const { control, handleSubmit } = useForm<FormValues>();
+
+  useEffect(() => {
+    if (done) {
+      store.reset();
+
+      navigate(STATIC_ROUTES.AUTO_REPLIES);
+    }
+  }, [done]);
+
+  const onSubmit = (data: FormValues) => {
+    store.addAutoReply(data.question, data.answer.trim());
+  };
+
+  return (
+    <div>
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        data-testid="auto-reply-form"
+      >
+        <Controller
+          control={control}
+          name="question"
+          render={({ field: { value, onChange } }) => (
+            <TextArea
+              label="질문"
+              value={value}
+              onChange={onChange}
+              maxLength={MAX_LENGTH.question}
+              showLength
+              ref={questionRef}
+            />
+          )}
+        />
+
+        <Controller
+          control={control}
+          name="answer"
+          render={({ field: { value, onChange } }) => (
+            <TextArea
+              label="답변"
+              value={value}
+              onChange={onChange}
+              maxLength={MAX_LENGTH.answer}
+              showLength
+              fixHeight
+            />
+          )}
+        />
+
+        <OperationButtons
+          primaryType="submit"
+          primaryName="저장하기"
+        />
+
+        {errorMessage && (
+          <ErrorMessage>{errorMessage}</ErrorMessage>
+        )}
+      </form>
+    </div>
+  );
+}

src/components/auto-reply-company/AutoReplyRow.test.tsx

@@ -1,4 +1,5 @@
 import { screen } from '@testing-library/react';
+
 import fixtures from '../../../fixtures';
 
 import { render } from '../../test-helper';

src/components/auto-reply-company/AutoReplyRow.tsx

@@ -48,7 +48,7 @@ export default function AutoReplyRow({
 const Container = styled.li`
   display: flex;
   border-bottom: 1px solid ${(props) => props.theme.colors.gray2.default};
-
+  
   &:last-child {
     border-bottom: none;
   }

src/components/layout/ContentLayout.tsx

@@ -40,6 +40,7 @@ const Container = styled.div`
 
   > :nth-child(2){
     height: calc(100vh - 6rem);
+    overflow-x: hidden;
     overflow-y: scroll;
     padding: 0 2rem 2rem;
   }

src/components/ui/ErrorMessage.tsx

@@ -17,6 +17,7 @@ const Container = styled.p`
     ${(props) => props.theme.texts.regular.small}
     color: ${(props) => props.theme.colors.accent.default};
     padding-block: 1.2rem;
+    text-align: center;
 
     @media screen and (${(props) => props.theme.breakPoint.mobile}){
       ${(props) => props.theme.texts.regular.hint}

src/components/ui/TextArea.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-param-reassign */
-import React, { forwardRef, useCallback } from 'react';
+import React, { forwardRef, useCallback, useState } from 'react';
 
 import styled from 'styled-components';
 
@@ -10,16 +10,18 @@ interface TextAreaProps {
   placeholder?: string;
   fixHeight?: boolean;
   maxLength?: number;
+  showLength?: boolean;
   onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
   onKeyPress?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
 }
 
 const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(({
-  value, label, placeholder, fixHeight, maxLength, onKeyPress, onChange,
+  value, label, placeholder, fixHeight, maxLength, showLength, onKeyPress, onChange,
 }, ref) => {
+  const [textLength, setTextLength] = useState(0);
+
   const handleResizeHeight = useCallback(() => {
     if (fixHeight) return;
-
     if (typeof ref === 'object' && ref?.current) {
       const height = ref.current.scrollHeight;
 
@@ -31,6 +33,14 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(({
   }, []);
 
   const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const inputValue = event.target.value;
+
+    if (maxLength && inputValue.length > maxLength) {
+      return;
+    }
+
+    setTextLength(inputValue.length);
+
     handleResizeHeight();
 
     onChange?.(event);
@@ -43,12 +53,20 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(({
         <textarea
           value={value}
           placeholder={placeholder}
-          maxLength={maxLength}
           onChange={handleChange}
           onKeyPress={onKeyPress}
           ref={ref}
         />
       </label>
+      {showLength && (
+        <span>
+          {textLength}
+          {' '}
+          /
+          {' '}
+          {maxLength}
+        </span>
+      )}
     </Container>
   );
 });
@@ -61,13 +79,16 @@ TextArea.defaultProps = {
   fixHeight: false,
   onKeyPress: undefined,
   maxLength: undefined,
+  showLength: false,
 };
 
 export default TextArea;
 
 const Container = styled.div<{ fixHeight?: boolean }>`
+  display: flex;  
+  flex-direction: column;
+  align-items: end;
   padding-block: .7rem;
-  line-height: 1;
   flex-grow: 1;
 
   label {
@@ -110,18 +131,24 @@ const Container = styled.div<{ fixHeight?: boolean }>`
         color: ${(props) => props.theme.colors.gray1.default};
         background-color: ${(props) => props.theme.colors.gray2.default};
       }
-
-      ${(props) => props.fixHeight && `
-        label {
-          textarea {
-            min-height: 12rem;
-            height: 12rem;
-          }
-        }
-      `}
     }
   }
 
+  > span {
+    ${(props) => props.theme.texts.regular.small};
+    ${(props) => props.theme.colors.gray1.default};
+    padding-top: .2rem;
+  }
+
+  ${(props) => props.fixHeight && `
+    label {
+      textarea {
+        min-height: 12rem;
+        height: 12rem;
+      }
+    }
+  `}
+
   @media screen and (${(props) => props.theme.breakPoint.mobile}){   
     padding-block: .6rem;
 
@@ -145,24 +172,27 @@ const Container = styled.div<{ fixHeight?: boolean }>`
         padding: .8rem 1.2rem;
       }
     }
-  }
 
-  ${(props) => props.fixHeight && `
-    label {
-      textarea {
-        min-height: 12rem;
-        height: 12rem;
-      }
+    > span {
+      ${(props) => props.theme.texts.regular.hint};
     }
 
-    @media screen and (${props.theme.breakPoint.mobile}){    
+    ${(props) => props.fixHeight && `
       label {
         textarea {
-          min-height: 7rem;
-          height: 7rem;
+          min-height: 12rem;
+          height: 12rem;
         }
       }
-    }   
-  `
-}
+
+      @media screen and (${props.theme.breakPoint.mobile}){    
+        label {
+          textarea {
+            min-height: 7rem;
+            height: 7rem;
+          }
+        }
+      }   
+    `}
+  }
 `;

src/components/ui/TextBox.tsx

@@ -1,4 +1,4 @@
-import type React from 'react';
+import { useState } from 'react';
 
 import styled from 'styled-components';
 
@@ -9,6 +9,8 @@ type TextBoxProps = {
   value: string;
   onChange?: (value: string) => void;
   readOnly?: boolean;
+  maxLength?: number;
+  showLength?: boolean;
 };
 
 export default function TextBox({
@@ -18,9 +20,21 @@ export default function TextBox({
   value,
   onChange = undefined,
   readOnly = false,
+  maxLength = undefined,
+  showLength = false,
 }: TextBoxProps) {
+  const [textLength, setTextLength] = useState(0);
+
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    onChange?.(event.target.value);
+    const inputValue = event.target.value;
+
+    if (maxLength && inputValue.length > maxLength) {
+      return;
+    }
+
+    setTextLength(inputValue.length);
+
+    onChange?.(inputValue);
   };
 
   return (
@@ -35,13 +49,24 @@ export default function TextBox({
           readOnly={readOnly}
         />
       </label>
+      {showLength && (
+        <span>
+          {textLength}
+          {' '}
+          /
+          {' '}
+          {maxLength}
+        </span>
+      )}
     </Container>
   );
 }
 
 const Container = styled.div`
+  display: flex;  
+  flex-direction: column;
+  align-items: end;
   padding-block: 0.7rem;
-  flex-grow: 1;
 
   label {
     width: 100%;
@@ -82,6 +107,12 @@ const Container = styled.div`
     }
   }
 
+  > span {
+    ${(props) => props.theme.texts.regular.small};
+    ${(props) => props.theme.colors.gray1.default};
+    padding-top: .2rem;
+  }
+
   @media screen and (${(props) => props.theme.breakPoint.mobile}){
     padding-block: 0.6rem;
 
@@ -105,5 +136,9 @@ const Container = styled.div`
         padding: .8rem 1.2rem;
       }
     } 
+
+    > span {
+      ${(props) => props.theme.texts.regular.hint};
+    }
   }
 `;

src/constants/routes.ts

@@ -6,7 +6,7 @@ export const STATIC_ROUTES = {
   MY_PROFILE: '/profile',
   MY_PROFILE_EDIT: '/profile/edit',
   AUTO_REPLIES: '/auto-replies',
-  AUTO_REPLIES_ADD: '/auto-replies/new',
+  AUTO_REPLIES_NEW: '/auto-replies/new',
   OPEN_PROFILES: '/open-profiles',
   ACCOUNT: '/account',
   DELETE_ACCOUNT: '/account/delete',

src/hooks/useAutoReplyFormStore.ts

@@ -0,0 +1,13 @@
+import { container } from 'tsyringe';
+
+import { useStore } from 'usestore-ts';
+
+import AutoReplyFormStore from '../stores/AutoReplyFormStore';
+
+const useAutoReplyFormStore = () => {
+  const store = container.resolve(AutoReplyFormStore);
+
+  return useStore(store);
+};
+
+export default useAutoReplyFormStore;