Step3-kakao-tech-campus · rktdnjs · Nov 5, 2023 · Nov 4, 2023 · Nov 4, 2023 · Nov 4, 2023
diff --git a/src/apis/admin.js b/src/apis/admin.js
@@ -0,0 +1,13 @@
+import { instance } from './index';
+
+export const adminAuth = () => {
+  return instance.put('/admin/auth/approval');
+};
+
+export const adminAuthDetail = (id = 1) => {
+  return instance.get(`/admin/list/${id}`);
+};
+
+export const adminAuthList = () => {
+  return instance.get('/admin/auth/list');
+};
diff --git a/src/apis/postWrite.js b/src/apis/postWrite.js
@@ -1,4 +1,4 @@
-import instance from './index';
+import { instance } from './index';
 
 const writePost = (data) => {
   const { store, beverage, destination, tip, request, finishedAt } = data;

diff --git a/src/components/atoms/ErrorMsg.jsx b/src/components/atoms/ErrorMsg.jsx
@@ -1,5 +1,8 @@
-const ErrorMsg = () => {
-  return <p className="text-red-600 text-sm">필수 입력 항목입니다.</p>;
+// eslint-disable-next-line
+import { ErrorMessage } from '@hookform/error-message';
+
+const ErrorMsg = ({ errors, name, as, render }) => {
+  return <ErrorMessage className="text-red-600 text-sm" errors={errors} name={name} as={as} render={render} />;
 };
 
 export default ErrorMsg;
diff --git a/src/components/atoms/Input.jsx b/src/components/atoms/Input.jsx
@@ -5,8 +5,8 @@ const Input = ({ register, required, type, value, name, placeholder, width = 'w-
       name={name}
       value={value}
       placeholder={placeholder}
-      {...register(name, { required })}
       {...inputProps}
+      {...register}
       className={`${width} rounded-lg border-gray-300 border-2 px-4 py-2 text-sm block my-2`}
     />
   );

diff --git a/src/components/atoms/RangeInput.jsx b/src/components/atoms/RangeInput.jsx
@@ -2,18 +2,15 @@ import '../../styles/thumb.css';
 
 const RangeInput = ({ name, register }) => {
   return (
-    <>
-      <input
-        name={name}
-        {...register(name)}
-        type="range"
-        max="2500"
-        min="1000"
-        step="500"
-        className="custom-thumb w-[17rem] bg-gray-200 rounded-lg appearance-none"
-      />
-      <output htmlFor={name} />
-    </>
+    <input
+      name={name}
+      {...register}
+      type="range"
+      max="2500"
+      min="1000"
+      step="500"
+      className="custom-thumb w-[17rem] bg-gray-200 rounded-lg appearance-none"
+    />
   );
 };
 

diff --git a/src/components/atoms/SelectInput.jsx b/src/components/atoms/SelectInput.jsx
@@ -15,8 +15,8 @@ const SelectInput = ({
       type={type}
       name={name}
       placeholder={placeholder}
-      {...register(name, { required })}
       {...inputProps}
+      {...register}
       className={`${width} rounded-lg border-gray-300 border-2 px-4 py-2 text-sm block my-2`}
     >
       <option value="">=== 선택 ===</option>

diff --git a/src/components/atoms/TextArea.jsx b/src/components/atoms/TextArea.jsx
@@ -4,10 +4,10 @@ const TextArea = ({ register, placeholder, id, name, ...inputProps }) => {
       id={id}
       placeholder={placeholder}
       name={name}
-      {...register(name)}
       type="text"
       rows="3"
       {...inputProps}
+      {...register}
       className="w-[18rem] rounded-lg border-gray-300 border-2 px-4 py-2 text-sm block my-4"
     />
   );

diff --git a/src/components/organisms/AuthDetail.jsx b/src/components/organisms/AuthDetail.jsx
@@ -1,7 +1,7 @@
 const AuthDetail = ({ user }) => {
   return (
     <>
-      <div className="text-lg">{user.nickname}</div>
+      <p className="text-lg">{user.nickname}</p>
       <img src={user.imageUrl} alt="student" />
     </>
   );

diff --git a/src/components/templates/OrderDeadLine.jsx b/src/components/templates/OrderDeadLine.jsx
@@ -1,24 +1,26 @@
+/* eslint-disable */
 import Labels from '../molecules/Labels';
 import Input from '../atoms/Input';
 import ErrorMsg from '../atoms/ErrorMsg';
+import { ORDER_DEADLINE, HOUR, MINUTE } from '../../constant/postWrite/orderDeadLine';
+import validateInputMsg from '../../constant/validateInputMsg';
+import { useFormContext } from 'react-hook-form';
 
-const OrderDeadLine = ({ register, deadLineError }) => {
-  const HOUR = 'hour';
-  const MINUTE = 'minute';
+const OrderDeadLine = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useFormContext();
 
   return (
     <div className="mt-6 mb-12">
-      <Labels
-        htmlFor={HOUR}
-        label="공고를 언제까지 띄울까요? *"
-        subLabel="마감기한을 설정해주세요! 마감기한이 지나면 공고가 사라져요."
-      />
+      <Labels htmlFor={HOUR} label={ORDER_DEADLINE.label} subLabel={ORDER_DEADLINE.subLabel} />
       <div className="flex items-center place-content-between">
         <Input
           id={HOUR}
           name={HOUR}
-          register={register}
-          required
+          register={register(HOUR, { required: validateInputMsg.HOUR_MSG })}
           type="number"
           min="0"
           max="24"
@@ -28,18 +30,17 @@ const OrderDeadLine = ({ register, deadLineError }) => {
         시
         <Input
           name={MINUTE}
-          register={register}
-          required
+          register={register(MINUTE, { required: validateInputMsg.MINUTE_MSG })}
           type="number"
           min="0"
           max="59"
-          id="deadline-1"
           width="w-[6rem]"
           placeholder="15"
         />
         분까지
       </div>
-      {deadLineError && <ErrorMsg />}
+      <ErrorMsg errors={errors} name={HOUR} as="p" />
+      <ErrorMsg errors={errors} name={MINUTE} as="p" />
     </div>
   );
 };

diff --git a/src/components/templates/OrderInfo.jsx b/src/components/templates/OrderInfo.jsx
@@ -1,54 +1,59 @@
-import { useForm, useFieldArray } from 'react-hook-form';
+/*eslint-disable*/
+import { useFieldArray, useFormContext } from 'react-hook-form';
 import Labels from '../molecules/Labels';
 import SelectInput from '../atoms/SelectInput';
 import Input from '../atoms/Input';
 import ErrorMsg from '../atoms/ErrorMsg';
 import PlusBtn from '../atoms/PlusBtn';
 import MinusBtn from '../atoms/MinusBtn';
+import { ORDER_INFO_STORE, ORDER_INFO_BEVERAGE, STORE, BEVERAGE } from '../../constant/postWrite/orderInfo';
+import validateInputMsg from '../../constant/validateInputMsg';
 
-const OrderInfo = ({ register, storeError, beverageError }) => {
-  const STORE = 'store';
-  const BEVERAGE = 'beverage';
-  const { control } = useForm();
+const OrderInfo = () => {
+  const {
+    register,
+    formState: { errors },
+    control,
+  } = useFormContext();
   const { fields, append, remove } = useFieldArray({ control, name: BEVERAGE });
 
   return (
     <>
       <div className="mt-6 mb-12">
-        <Labels
-          htmlFor={STORE}
-          label="주문할 매장은 어디인가요? *"
-          subLabel="음료를 주문할 매장을 정확하게 입력해주세요."
+        <Labels htmlFor={STORE} label={ORDER_INFO_STORE.label} subLabel={ORDER_INFO_STORE.subLabel} />
+        <SelectInput
+          register={register(STORE, { required: validateInputMsg.STORE_MSG })}
+          id={STORE}
+          name={STORE}
+          className="mb-10"
         />
-        <SelectInput register={register} required id={STORE} name={STORE} className="mb-10" />
-        {storeError && <ErrorMsg />}
+        <ErrorMsg errors={errors} name={STORE} as="p" />
       </div>
+
       <div className="mt-6">
-        <Labels
-          htmlFor={BEVERAGE}
-          label="어떤 음료를 주문하실건가요? *"
-          subLabel="주문할 음료를 정확하게 입력해주세요."
-        />
+        <Labels htmlFor={BEVERAGE} label={ORDER_INFO_BEVERAGE.label} subLabel={ORDER_INFO_BEVERAGE.subLabel} />
         <div className="flex flex-col">
           <div className="flex items-center">
-            <Input
+            {/* <Input
               id={BEVERAGE}
-              name={`${BEVERAGE}[${0}]`}
-              register={register}
+              name={`${BEVERAGE}.0.value`}
+              register={register(`${BEVERAGE}.0.value`)}
               required
               width="w-[15rem]"
               placeholder="아이스 아메리카노 1잔"
-            />
-            <PlusBtn onClick={() => append({ BEVERAGE })} />
+            /> */}
+            <PlusBtn onClick={() => append({ value: '' })} />
           </div>
           {fields.map((field, index) => {
             return (
               <div className="flex items-center">
                 <li key={field.id} className="list-none">
                   <Input
                     id={BEVERAGE}
-                    name={`${BEVERAGE}[${index + 1}]`}
-                    register={register}
+                    name={`${BEVERAGE}.${index}.value`}
+                    register={register(`${BEVERAGE}.${index}.value`, {
+                      required: validateInputMsg.BEVERAGE_MSG,
+                    })}
                     width="w-[15rem]"
                     placeholder="아이스 아메리카노 1잔"
                   />
@@ -58,8 +63,8 @@ const OrderInfo = ({ register, storeError, beverageError }) => {
             );
           })}
         </div>
+        <ErrorMsg errors={errors} name={`${BEVERAGE}.0.value`} as="p" />
       </div>
-      {beverageError && <ErrorMsg />}
     </>
   );
 };

diff --git a/src/components/templates/OrderRequest.jsx b/src/components/templates/OrderRequest.jsx
@@ -1,21 +1,32 @@
+/*eslint-disable*/
 import Labels from '../molecules/Labels';
 import Input from '../atoms/Input';
 import TextArea from '../atoms/TextArea';
 import RangeInput from '../atoms/RangeInput';
 import ErrorMsg from '../atoms/ErrorMsg';
 import price from '../../constant/price';
+import { DESTINATION, TIP, REQUEST, ORDER_REQUEST } from '../../constant/postWrite/orderRequest';
+import validateInputMsg from '../../constant/validateInputMsg';
+import { useFormContext } from 'react-hook-form';
 
-const OrderRequest = ({ destinationError, register }) => {
-  const DESTINATION = 'destination';
-  const TIP = 'tip';
-  const REQUEST = 'request';
+const OrderRequest = () => {
+  const {
+    register,
+    formState: { errors },
+    control,
+  } = useFormContext();
 
   return (
     <>
       <div className="mt-6 mb-12">
         <Labels htmlFor={DESTINATION} label="어디로 픽업할까요? *" subLabel="피커가 해당 장소로 픽업해 줄 거예요." />
-        <Input id={DESTINATION} name={DESTINATION} register={register} required placeholder="공과대학 7호관 1층" />
-        {destinationError && <ErrorMsg />}
+        <Input
+          id={DESTINATION}
+          name={DESTINATION}
+          register={register(DESTINATION, { required: validateInputMsg.DESTINATION_MSG })}
+          placeholder="공과대학 7호관 1층"
+        />
+        <ErrorMsg errors={errors} name={DESTINATION} as="p" />
       </div>
       <div className="mt-6 mb-12">
         <Labels
@@ -28,7 +39,7 @@ const OrderRequest = ({ destinationError, register }) => {
           <div>😍</div>
         </div>
         <div className="flex justify-center items-center">
-          <RangeInput id={TIP} name={TIP} register={register} />
+          <RangeInput id={TIP} name={TIP} register={register(TIP)} />
         </div>
         <div className="mt-3 flex justify-between text-xs text-gray-400">
           {price.map((x) => {
@@ -41,7 +52,7 @@ const OrderRequest = ({ destinationError, register }) => {
         <TextArea
           id={REQUEST}
           name={REQUEST}
-          register={register}
+          register={register(REQUEST)}
           maxLength="50"
           placeholder="1층 도착하면 알려주세요!"
         />

diff --git a/src/constant/auth.js b/src/constant/auth.js
@@ -0,0 +1,2 @@
+export const REJECT = '거절';
+export const APPROVE = '승인';
diff --git a/src/constant/postWrite/intro.js b/src/constant/postWrite/intro.js
@@ -0,0 +1,7 @@
+const intro = {
+  TITLE: '어떤 음료를 픽업 받으실 건가요?',
+  SUB_TITLE: '픽업을 위한 정보를 입력합니다.',
+  START_POST: '공고 작성하기',
+};
+
+export default intro;
diff --git a/src/constant/postWrite/orderDeadLine.js b/src/constant/postWrite/orderDeadLine.js
@@ -0,0 +1,7 @@
+export const ORDER_DEADLINE = {
+  label: '공고를 언제까지 띄울까요? *',
+  subLabel: '마감기한을 설정해주세요! 마감기한이 지나면 공고가 사라져요.',
+};
+
+export const HOUR = 'hour';
+export const MINUTE = 'minute';
diff --git a/src/constant/postWrite/orderInfo.js b/src/constant/postWrite/orderInfo.js
@@ -0,0 +1,12 @@
+export const ORDER_INFO_STORE = {
+  label: '주문할 매장은 어디인가요? *',
+  subLabel: '음료를 주문할 매장을 정확하게 입력해주세요.',
+};
+
+export const ORDER_INFO_BEVERAGE = {
+  label: '어떤 음료를 주문하실건가요? *',
+  subLabel: '주문할 음료를 정확하게 입력해주세요.',
+};
+
+export const STORE = 'store';
+export const BEVERAGE = 'beverage';
diff --git a/src/constant/postWrite/orderRequest.js b/src/constant/postWrite/orderRequest.js
@@ -0,0 +1,8 @@
+export const ORDER_REQUEST = {
+  label: '주문할 매장은 어디인가요? *',
+  subLabel: '음료를 주문할 매장을 정확하게 입력해주세요.',
+};
+
+export const DESTINATION = 'destination';
+export const TIP = 'tip';
+export const REQUEST = 'request';
diff --git a/src/constant/validateInputMsg.js b/src/constant/validateInputMsg.js
@@ -0,0 +1,9 @@
+const validateInputMsg = {
+  STORE_MSG: '주문 매장은 필수 입력입니다.',
+  BEVERAGE_MSG: '주문 정보는 필수 입력입니다.',
+  DESTINATION_MSG: '픽업할 장소는 필수 입력입니다.',
+  HOUR_MSG: '시는 0부터 24까지 입력 가능합니다',
+  MINUTE_MSG: '분은 0부터 59까지 입력 가능합니다.',
+};
+
+export default validateInputMsg;
diff --git a/src/mocks/handlers/index.js b/src/mocks/handlers/index.js
@@ -1,5 +1,6 @@
 import adminHandlers from './admin';
+import postWriteHandlers from './postWrite';
 
-const handlers = [...adminHandlers];
+const handlers = [...adminHandlers, ...postWriteHandlers];
 
 export default handlers;
diff --git a/src/mocks/handlers/postWrite.js b/src/mocks/handlers/postWrite.js
@@ -0,0 +1,11 @@
+import { http, HttpResponse } from 'msw';
+
+const postWriteHandlers = [
+  http.post('/articles/write', async ({ request }) => {
+    const newPost = await request.json();
+
+    return HttpResponse.json(newPost, { status: 201 });
+  }),
+];
+
+export default postWriteHandlers;