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,19 +40,10 @@ 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();
@@ -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/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;