Refactor : 파일 및 파일인풋 훅스 분리

client/src/app/(protectedRoute)/new-post/page.tsx

@@ -3,7 +3,7 @@
 import { Box, Container, Paper, Tooltip } from "@mui/material";
 
 import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 import HOME from "@/const/clientPath";
 import PictureIcon from "@/assets/icons/PictureIcon.svg";
 import PinIcon from "@/assets/icons/PinIcon.svg";
@@ -21,6 +21,8 @@ import CustomAppbar from "@/components/CustomAppbar";
 import SquareIconButton from "@/components/SquareIconButton";
 import PreviewImageByURL from "@/components/PreviewImageByURL";
 import NewPostTextEditor from "@/components/newpost/NewPostTextEditor";
+import useRenderAsDataUrl from "@/hooks/useRenderAsDataUrl";
+import SingleImageInput from "@/components/SingleImageInput";
 
 export default function NewpostPage() {
   const { setLoading } = useGlobalLoadingStore();
@@ -38,52 +40,43 @@ export default function NewpostPage() {
     useState<NewPostRequestAlCohol["alcoholNo"]>();
 
   const [file, setFile] = useState<File>();
-  const [fileUrl, setFileUrl] = useState<string | ArrayBuffer | null>();
+  const fileUrl = useRenderAsDataUrl(file);
 
   const [isSuccess, SetIsSuccess] = useState(false);
 
-  useEffect(() => {
-    if (!file) {
-      return;
-    }
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onloadend = () => setFileUrl(reader.result);
-  }, [file]);
-
   const { mutateAsync: newPostHandler } = useNewPostMutation();
   const { mutateAsync: attachFileHandler } = useNewAttachMutation();
   const { mutateAsync: deletePostHandler } = useDeletePostMutation();
 
-  const submitHandler = useCallback(async () => {
-    setLoading(true);
-    let postNo;
-    try {
-      const { postNo: res } = await newPostHandler({
-        ...formValue,
-        alcoholNo,
-      });
-      postNo = res;
-      if (file) {
-        try {
-          await attachFileHandler({
-            file,
-            url: { pk: postNo, type: "POST" },
-          });
-        } catch {
-          deletePostHandler(postNo);
-          return;
+  const submitHandler = useCallback(
+    async (formValue: NewPostRequestInterface, file?: File) => {
+      setLoading(true);
+      let postNo;
+      try {
+        const { postNo: res } = await newPostHandler(formValue);
+        postNo = res;
+        if (file) {
+          try {
+            await attachFileHandler({
+              file,
+              url: { pk: postNo, type: "POST" },
+            });
+          } catch {
+            deletePostHandler(postNo);
+            return;
+          }
         }
+        invalidatePreviousPost();
+        SetIsSuccess(true);
+        router.push(HOME);
+      } catch {
+        return;
+      } finally {
+        setLoading(false);
       }
-      invalidatePreviousPost();
-      SetIsSuccess(true);
-      router.push(HOME);
-    } catch {
-      return;
-    } finally {
-      setLoading(false);
-    }
-  }, [formValue, alcoholNo, router, file]);
+    },
+    [router]
+  );
 
   return (
     <Paper>
@@ -92,7 +85,7 @@ export default function NewpostPage() {
         title="포스팅"
         appendButton="공유"
         disableAppend={isSuccess}
-        onClickAppend={submitHandler}
+        onClickAppend={()=>submitHandler({...formValue,alcoholNo},file)}
       />
 
       <Container sx={{ p: { xs: 0, sm: 4 } }} maxWidth={"lg"}>
@@ -127,17 +120,7 @@ export default function NewpostPage() {
                 component={"label"}
                 iconComponent={<PictureIcon />}
               >
-                <input
-                  name="image"
-                  style={{ display: "none" }}
-                  type="file"
-                  accept="image/*"
-                  onChange={(e) => {
-                    if (e.target.files) {
-                      setFile(e.target.files[0]);
-                    }
-                  }}
-                />
+                <SingleImageInput onChange={(file) => setFile(file)} />
               </SquareIconButton>
             </Tooltip>
             {/* 위치 */}

client/src/components/SingleImageInput.tsx

@@ -0,0 +1,32 @@
+import React, { InputHTMLAttributes } from "react";
+
+interface SingleImageInputInterface
+  extends Omit<
+    InputHTMLAttributes<HTMLInputElement>,
+    "onChange" | "type" | "capture" | "style" | "name"
+  > {
+  onChange: (file: File) => void;
+}
+
+const SingleImageInput = ({
+  onChange,
+  ...others
+}: SingleImageInputInterface) => {
+  return (
+    <input
+      name="image"
+      style={{ display: "none" }}
+      type="file"
+      accept="image/*"
+      capture="environment"
+      onChange={(e) => {
+        if (e.target.files) {
+          onChange(e.target.files[0]);
+        }
+      }}
+      {...others}
+    />
+  );
+};
+
+export default SingleImageInput;

client/src/components/post/PostCard.tsx

@@ -101,7 +101,12 @@ const PostCard = ({
             </Typography>
           </Stack>
 
-          {isMyPost && <PostCardOptionDropdown postId={postNo} />}
+          {isMyPost && (
+            <PostCardOptionDropdown
+              postId={postNo}
+              filePk={postAttachUrls?.[0]?.attachNo}
+            />
+          )}
         </Stack>
 
         {alcoholName && (

client/src/components/post/PostCardOptionDropdown.tsx

@@ -2,19 +2,36 @@ import React, { useState } from "react";
 import { MoreVertOutlined } from "@mui/icons-material";
 import { ButtonBase, Menu, MenuItem } from "@mui/material";
 import { useDeletePostMutation } from "@/queries/post/useDeletePostMutation";
+import useDeleteAttachMutation from "@/queries/attach/useDeleteAttachMutation";
+import { useRouter } from "next/navigation";
+import HOME from "@/const/clientPath";
 
 type PostCardOptionDropdownProps = {
   postId: number;
+  filePk?: string;
 };
 
-const PostCardOptionDropdown = ({ postId }: PostCardOptionDropdownProps) => {
+const PostCardOptionDropdown = ({
+  postId,
+  filePk,
+}: PostCardOptionDropdownProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
+  const router = useRouter();
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
   };
-  const { mutate: deletePost } = useDeletePostMutation();
+  const { mutateAsync: deletePost } = useDeletePostMutation();
+  const { mutateAsync: deleteFile } = useDeleteAttachMutation();
+
+  const deleteHandler = async () => {
+    if (confirm("정말 삭제하시겠습니까?")) {
+      await deletePost(postId);
+      filePk && (await deleteFile(filePk));
+      router.push(HOME);
+    }
+  };
 
   const handleClose = () => {
     setAnchorEl(null);
@@ -25,15 +42,7 @@ const PostCardOptionDropdown = ({ postId }: PostCardOptionDropdownProps) => {
         <MoreVertOutlined />
       </ButtonBase>
       <Menu open={open} anchorEl={anchorEl} onClose={handleClose}>
-        <MenuItem
-          onClick={() => {
-            if (confirm("정말 삭제하시겠습니까?")) {
-              deletePost(postId);
-            }
-          }}
-        >
-          삭제
-        </MenuItem>
+        <MenuItem onClick={deleteHandler}>삭제</MenuItem>
         <MenuItem>수정</MenuItem>
       </Menu>
     </>

client/src/components/user/info/drawer/UserInfoEditingForm.tsx

@@ -9,13 +9,15 @@ import {
   Badge,
 } from "@mui/material";
 import CameraIcon from "@/assets/icons/badge/CameraIcon.svg";
-import { useCallback, useContext, useEffect, useState } from "react";
+import { useCallback, useContext, useState } from "react";
 import useNewAttachMutation from "@/queries/attach/useNewAttachMutation";
 import useDeleteAttachMutation from "@/queries/attach/useDeleteAttachMutation";
 import UserPageContext from "@/store/user/UserPageContext";
 import CustomAppbar from "@/components/CustomAppbar";
 import { useGlobalLoadingStore } from "./../../../../store/useGlobalLoadingStore";
 import usePatchUserInfoMutation from "@/queries/user/usePatchUserInfoMutation";
+import useRenderAsDataUrl from "@/hooks/useRenderAsDataUrl";
+import SingleImageInput from "@/components/SingleImageInput";
 
 const UserInfoEditingForm = () => {
   const { setIsEditing } = useContext(UserPageContext);
@@ -25,8 +27,9 @@ const UserInfoEditingForm = () => {
   const { data } = useMyInfoQuery();
 
   const [introduction, setIntroduction] = useState(data?.introduction);
+
   const [file, setFile] = useState<File>();
-  const [fileUrl, setFileUrl] = useState<string | ArrayBuffer | null>(null);
+  const fileUrl = useRenderAsDataUrl(file);
 
   const { mutateAsync: attachFile } = useNewAttachMutation();
   const { mutateAsync: removeFile } = useDeleteAttachMutation();
@@ -58,15 +61,6 @@ const UserInfoEditingForm = () => {
     setLoading(false);
   };
 
-  useEffect(() => {
-    if (!file) {
-      return;
-    }
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onloadend = () => setFileUrl(reader.result);
-  }, [file]);
-
   return (
     <>
       <CustomAppbar
@@ -98,16 +92,7 @@ const UserInfoEditingForm = () => {
               sx={{ width: 80, height: 80, border: "1px solid #ccc" }}
             />
           </Badge>
-          <input
-            type="file"
-            accept="image/*"
-            onChange={(e) => {
-              if (e.target.files) {
-                setFile(e.target.files[0]);
-              }
-            }}
-            style={{ display: "none" }}
-          />
+          <SingleImageInput onChange={(file) => setFile(file)} />
         </label>
         <Stack gap={2} width="100%">
           <Stack direction="row" width="100%">

client/src/hooks/useRenderAsDataUrl.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+/**
+ * file 을 입력받아 dataUrl을 리턴하는 훅
+ * @param file
+ * @returns fileDataUrl
+ */
+const useRenderAsDataUrl = (file: File | undefined) => {
+  const [fileUrl, setFileUrl] = useState<string | ArrayBuffer | null>(null);
+
+  useEffect(() => {
+    if (!file) {
+      return;
+    }
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onloadend = () => setFileUrl(reader.result);
+  }, [file]);
+
+  return fileUrl;
+};
+
+export default useRenderAsDataUrl;