From cecc51f29adf394e2303db04fce342c285c946b9 Mon Sep 17 00:00:00 2001
From: Lim Jonguk <minuk926@gmail.com>
Date: Tue, 5 Apr 2022 05:25:35 +0900
Subject: [PATCH] fix: file form fix

---
 src/themes/compStyleOverride.js         |  2 +-
 src/views/biz/board/PublicBoardForm.jsx | 58 +++++++++----------------
 src/views/form/FileForm.jsx             | 46 ++++++++++++++++++++
 src/views/form/FileInputForm.jsx        | 10 ++++-
 4 files changed, 76 insertions(+), 40 deletions(-)
 create mode 100644 src/views/form/FileForm.jsx

diff --git a/src/themes/compStyleOverride.js b/src/themes/compStyleOverride.js
index 7c9df8a..e20c53b 100755
--- a/src/themes/compStyleOverride.js
+++ b/src/themes/compStyleOverride.js
@@ -9,7 +9,7 @@ export default function componentStyleOverrides(theme, borderRadius, outlinedFil
       styleOverrides: {
         root: {
           fontWeight: 500,
-          borderRadius: '4px'
+          borderRadius: '3px'
         }
       }
     },
diff --git a/src/views/biz/board/PublicBoardForm.jsx b/src/views/biz/board/PublicBoardForm.jsx
index ad0fef4..12dc62f 100644
--- a/src/views/biz/board/PublicBoardForm.jsx
+++ b/src/views/biz/board/PublicBoardForm.jsx
@@ -16,6 +16,8 @@ import InputLabel from 'ui-component/extended/Form/InputLabel';
 import { Delete, FileDownload, FileUpload, List, Save } from '@mui/icons-material';
 import { fileDownload } from '../../../apis/common';
 import FileInputForm from '../../form/FileInputForm';
+import FileInputForms from '../../form/FileInputForms';
+import FileForm from 'views/form/FileForm';
 
 const PublicBoardForm = (props) => {
   // eslint-disable-next-line react/prop-types
@@ -112,16 +114,15 @@ const PublicBoardForm = (props) => {
     []
   );
 
-  /*
   const onChangeFile = (file) => {
     setSelectedFile(file.name);
     setFilesInfo([file]);
   };
-*/
-  const onChangeFile = (e) => {
-    setSelectedFile(e.target.files[0].name);
-    setFilesInfo(e.target.files);
-  };
+
+  // const onChangeFile = (e) => {
+  //   setSelectedFile(e.target.files[0].name);
+  //   setFilesInfo(e.target.files);
+  // };
 
   const handleFileDownload = () => {
     if (!inFilename) {
@@ -150,9 +151,6 @@ const PublicBoardForm = (props) => {
                 onChange={(e) => setDept(e.target.value)}
                 fullWidth
               >
-                {/* <MenuItem value=""> */}
-                {/*  <em>None</em> */}
-                {/* </MenuItem> */}
                 <MenuItem value="주정차위반">주정차위반</MenuItem>
                 <MenuItem value="장애인위반">장애인위반</MenuItem>
                 <MenuItem value="기타">기타</MenuItem>
@@ -173,35 +171,8 @@ const PublicBoardForm = (props) => {
           <Grid item xs={12} sm={3}>
             <TextField size="small" disabled label="조회수" value={inHit} fullWidth />
           </Grid>
-          <Grid item xs={12} sm={3}>
-            <TextField
-              // label="첨부파일"
-              value={selectedFile}
-              // inputProps={{ display: 'none' }}
-              fullWidth
-              // InputProps={{
-              //   display: 'none'
-              // }}
-              onClick={handleFileDownload}
-              InputProps={{
-                display: 'none',
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <FileDownload stroke={1.5} size="1rem" />
-                  </InputAdornment>
-                )
-              }}
-            />
-            <input id="fileInfo" type="file" style={{ display: 'none' }} onChange={onChangeFile} />
-            {/* <Tooltip title="Select Image"> */}
-            <InputLabel htmlFor="fileInfo">
-              <IconButton color="primary" aria-label="upload file" component="span">
-                {selectedFile ? <FileDownload fontSize="small" /> : <FileUpload fontSize="small" />}
-              </IconButton>
-            </InputLabel>
-          </Grid>
         </Grid>
-        <Grid container spacing={1} item xs={12} mt={1.5} mb={2}>
+        <Grid container spacing={1} item xs={12} mb={1}>
           <Grid item xs={12}>
             <ReactQuill
               ref={(element) => {
@@ -217,6 +188,19 @@ const PublicBoardForm = (props) => {
             />
           </Grid>
         </Grid>
+        <Grid container spacing={1} item xs={12} mb={1}>
+          <Grid item sm={6}>
+            <FileForm
+              isDownload={inFilename}
+              labelName="첨부파일"
+              savedFilename={inFilename}
+              selectedFile={selectedFile}
+              handleChangeFile={onChangeFile}
+              handleFileDownload={handleFileDownload}
+              alert={alert}
+            />
+          </Grid>
+        </Grid>
       </Grid>
       <Grid item container spacing={0.5} xs={12}>
         <Grid item>
diff --git a/src/views/form/FileForm.jsx b/src/views/form/FileForm.jsx
new file mode 100644
index 0000000..c48f05a
--- /dev/null
+++ b/src/views/form/FileForm.jsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Button, Grid, InputAdornment, TextField } from '@mui/material';
+import { FileDownload, FileUpload } from '@mui/icons-material';
+
+const FileForm = ({ isDownload = false, labelName, selectedFile, handleChangeFile, handleFileDownload, alert }) => {
+  const onChangeFile = (e) => {
+    const file = e.target.files[0];
+    if (file.type.includes('image')) {
+      alert.show(<img alt={`${file.name}`} src={URL.createObjectURL(file)} style={{ margin: 'auto' }} />);
+    }
+    handleChangeFile(file);
+  };
+
+  return (
+    <Grid container item spacing={0.5}>
+      <Grid item sm={7.5}>
+        {isDownload ? (
+          <TextField
+            placeholder={labelName}
+            value={selectedFile}
+            size="small"
+            InputProps={{
+              display: 'none',
+              endAdornment: (
+                <InputAdornment position="end">
+                  <FileDownload stroke={1.5} size="1rem" cursor="pointer" />
+                </InputAdornment>
+              )
+            }}
+            onClick={handleFileDownload}
+          />
+        ) : (
+          <TextField placeholder={labelName} value={selectedFile} size="small" />
+        )}
+      </Grid>
+      <Grid item sm={4.5}>
+        <Button variant="contained" component="label" color="primary" size="small" startIcon={<FileUpload />}>
+          파일 업로드
+          <input type="file" hidden onChange={onChangeFile} />
+        </Button>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default FileForm;
diff --git a/src/views/form/FileInputForm.jsx b/src/views/form/FileInputForm.jsx
index 1fb9a76..7364640 100644
--- a/src/views/form/FileInputForm.jsx
+++ b/src/views/form/FileInputForm.jsx
@@ -14,10 +14,16 @@ const FileInputForm = ({ labelName, selectedFile, handleChangeFile, alert }) =>
   return (
     <Grid container item spacing={0.5}>
       <Grid item xs={12} sm={7.5}>
-        <TextField placeholder={labelName} value={selectedFile} size="small" startIcon={<FileUpload />} onClick={() => {}} />
+        <TextField
+          placeholder={labelName}
+          value={selectedFile}
+          size="small"
+          startIcon={<FileUpload stroke={1.5} size="1rem" />}
+          onClick={() => {}}
+        />
       </Grid>
       <Grid item xs={12} sm={4.5}>
-        <Button variant="contained" component="label" color="primary" size="small" startIcon={<FileUpload />}>
+        <Button variant="contained" component="label" color="primary" size="small" startIcon={<FileUpload stroke={1.5} size="1rem" />}>
           파일
           <input type="file" hidden onChange={onChangeFile} />
         </Button>