FEAT :: 글쓰기

atoms/Post/PostInfoOption.ts

@@ -2,15 +2,15 @@ import { Difficulty } from "@/types/Post/Difficulty";
 import { atom } from "recoil";
 
 interface PostInfoOptionStateType {
-  portion: number;
+  serving: number;
   time: number;
   difficulty: Difficulty;
 }
 
 export const PostInfoOptionState = atom<PostInfoOptionStateType>({
   key: "PostInfoOptionState",
   default: {
-    portion: 1,
+    serving: 1,
     time: 0,
     difficulty: "VERY_HARD",
   },

components/Post/PostImageInput/index.tsx

@@ -11,7 +11,7 @@ function PostImageInput() {
 
   const image = watch("image");
 
-  const { ref, ...rest } = register("image");
+  const { ref, ...rest } = register("image", { required: true });
 
   useEffect(() => {
     if (image && image.length > 0) {

components/Post/PostInfo/index.tsx

@@ -12,16 +12,16 @@ import PostImageInput from "../PostImageInput";
 
 function PostInfo() {
   const [options, setOptions] = useRecoilState(PostInfoOptionState);
-  const { portion, time, difficulty } = options;
-  const upPortion = () => {
-    setOptions((prev) => ({ ...prev, portion: prev.portion + 1 }));
+  const { serving, time, difficulty } = options;
+  const upServing = () => {
+    setOptions((prev) => ({ ...prev, serving: prev.serving + 1 }));
   };
 
-  const downPortion = () => {
-    if (portion === 1) {
+  const downServing = () => {
+    if (serving === 1) {
       return;
     }
-    setOptions((prev) => ({ ...prev, portion: prev.portion - 1 }));
+    setOptions((prev) => ({ ...prev, serving: prev.serving - 1 }));
   };
 
   const upTime = () => {
@@ -46,9 +46,9 @@ function PostInfo() {
         <S.OptionWrap>
           <PostInfoOption
             icon={<MdPeople />}
-            value="portion"
-            up={upPortion}
-            down={downPortion}
+            value="serving"
+            up={upServing}
+            down={downServing}
           >
             레시피의 기준이 되는 인분을 입력하세요.
           </PostInfoOption>

components/Post/PostInfoOption/index.tsx

@@ -8,7 +8,7 @@ import { useOnClickOutside } from "usehooks-ts";
 
 interface PostInfoOptionType {
   icon: ReactNode;
-  value: "portion" | "time" | "difficulty";
+  value: "serving" | "time" | "difficulty";
   children: string;
   up?: () => void;
   down?: () => void;
@@ -30,7 +30,7 @@ function PostInfoOption({
   down,
 }: PostInfoOptionType) {
   const options = useRecoilValue(PostInfoOptionState);
-  const { portion, time, difficulty } = options;
+  const { serving, time, difficulty } = options;
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const ref = useRef(null);
 
@@ -40,7 +40,7 @@ function PostInfoOption({
     }
   });
   const valueText = {
-    portion: `${portion}인분`,
+    serving: `${serving}인분`,
     time: `${time}초`,
     difficulty: difficultyText[difficulty],
   };

components/Post/PostMaterialInputs/index.tsx

@@ -19,14 +19,14 @@ function PostMaterialInputs({ name }: { name: "ingredients" | "seasonings" }) {
 
   const placeholderList = {
     ingredients: [
-      { name: "모짜렐라 치즈", count: "100g" },
-      { name: "피망", count: "1개" },
-      { name: "마늘", count: "2쪽" },
+      { name: "모짜렐라 치즈", quantity: "100g" },
+      { name: "피망", quantity: "1개" },
+      { name: "마늘", quantity: "2쪽" },
     ],
     seasonings: [
-      { name: "굴소스", count: "3t" },
-      { name: "고추장", count: "2T" },
-      { name: "데리야끼소스", count: "3t" },
+      { name: "굴소스", quantity: "3t" },
+      { name: "고추장", quantity: "2T" },
+      { name: "데리야끼소스", quantity: "3t" },
     ],
   };
   return (
@@ -52,9 +52,9 @@ function PostMaterialInputs({ name }: { name: "ingredients" | "seasonings" }) {
                 width="calc(50% - 5px)"
                 name={name}
                 index={index}
-                propertyName="count"
+                propertyName="quantity"
                 placeholder={
-                  index < 3 && `ex) ${placeholderList[name][index].count}`
+                  index < 3 && `ex) ${placeholderList[name][index].quantity}`
                 }
                 control={control}
               />

components/Post/index.tsx

@@ -8,8 +8,10 @@ import { FieldValues, FormProvider, useForm } from "react-hook-form";
 import PostRecipe from "./PostRecipe";
 import { useRecoilValue } from "recoil";
 import { PostInfoOptionState } from "@/atoms/Post/PostInfoOption";
+import { postBoardMutation } from "@/utils/apis/board";
 
 function Post() {
+  const formData = new FormData();
   const options = useRecoilValue(PostInfoOptionState);
   const methods = useForm({
     defaultValues: {
@@ -18,8 +20,34 @@ function Post() {
       recipe: [{}, {}, {}],
     },
   });
+  const postBoardFunc = postBoardMutation(formData);
   const onSubmit = (data: FieldValues) => {
-    console.log({ ...data, ...options });
+    const { difficulty, serving, time } = options;
+    const { image, name, description, ingredients, seasonings, recipe } = data;
+    formData.append("image", image[0]);
+    formData.append(
+      "rq",
+      new Blob(
+        [
+          JSON.stringify({
+            difficulty,
+            serving,
+            time,
+            recipe: {
+              name,
+              description,
+              ingredients,
+              seasonings,
+              recipe: recipe.map((item: { value: string }) => item.value),
+            },
+          }),
+        ],
+        {
+          type: "application/json",
+        },
+      ),
+    );
+    postBoardFunc.mutate();
   };
   return (
     <>

components/etc/Footer/style.ts

@@ -6,7 +6,7 @@ export const Footer = styled.footer<{ isLanding: boolean }>`
   margin: 0 auto;
   justify-content: space-between;
   position: relative;
-  top: 5rem;
+  top: 4rem;
   ${({ isLanding }) => {
     if (isLanding) {
       return LandingFooter;

functions/getAccessToken.ts

@@ -1,9 +1,16 @@
-export const getAccessToken = () => {
-  return (
-    localStorage.accessToken && {
-      headers: {
-        token: localStorage.accessToken,
-      },
-    }
-  );
+export const getAccessToken = (isFormData?: true) => {
+  return localStorage.accessToken
+    ? isFormData
+      ? {
+          headers: {
+            "Content-Type": "multipart/form-data",
+            token: localStorage.accessToken,
+          },
+        }
+      : {
+          headers: {
+            token: localStorage.accessToken,
+          },
+        }
+    : {};
 };

utils/apis/board.ts

@@ -0,0 +1,11 @@
+import { getAccessToken } from "@/functions/getAccessToken";
+import { instance } from "../instance";
+import { useMutation } from "react-query";
+
+export const postBoard = async (data: FormData) => {
+  return (await instance.post("board", data, getAccessToken(true))).data;
+};
+
+export const postBoardMutation = (data: FormData) => {
+  return useMutation(() => postBoard(data));
+};