[Feat] 게시물 생성 미리보기 코드 추가

src/pages/CreateBoardPage/CreateBoardPage.jsx

@@ -5,8 +5,30 @@ import { useNavigate } from "react-router-dom";
 import TextareaAutosize from "react-textarea-autosize";
 import axios from "../../customAxios"
 
-const CreateBoardPage = () => {
+const CheckCountFile = (files = []) => {
+  return files.length <= 5;
+};
+
+const PostContainer = ({ preview, setPreview, setFile }) => {
+  const containFiles = preview.length > 0;
+  return (<S.PostContainer>
+      { containFiles && 
+      <S.PostImages>
+           {preview.map((prevUrl, index) => (
+            <S.PostImageWithIcon key={`preview-${index}`}>
+              <S.PostImage src={prevUrl} alt="preview" />
+              <S.DeleteImageButton onClick={() => {
+                setPreview((prevPreviews) => prevPreviews.filter((_, i) => i !== index));
+                setFile((prevFiles) => prevFiles.filter((_, i) => i !== index));
+              }} />
+            </S.PostImageWithIcon>
+          ))}
+      </S.PostImages>
+      }
+  </S.PostContainer>);
+};
 
+const CreateBoardPage = () => {
   const inputEl = useRef(null);
   const [fileName, setFileName] = useState("");
   const fileInputHandler = useCallback((event) => {
@@ -50,7 +72,8 @@ const CreateBoardPage = () => {
     content: "",
   });
 
-  const [file, setFile] = useState(null);
+  const [file, setFile] = useState([]);
+  const [preview, setPreview] = useState([]);
 
   const onChangeInfo = (e) => {
     setBoardInfo({
@@ -60,9 +83,28 @@ const CreateBoardPage = () => {
   };
 
   const onChangeFile = (e) => {
-    setFile(e.target.files);
+
+    const selectedFile = e.target.files[0];
+
+    if (selectedFile) {
+      const reader = new FileReader();
+      reader.readAsDataURL(selectedFile);
+      reader.onloadend = () => {
+        const newFiles = [...file, selectedFile];
+        if (CheckCountFile(newFiles)) {
+          setFile(newFiles);
+          setPreview((prevPreviews) => [...prevPreviews, reader.result]);
+        } else {
+          alert("사진은 최대 5개까지 추가할 수 있습니다.");
+        }
+      };
+    }
   };
 
+  useEffect(() => {
+    CheckCountFile(file);
+  }, [file])
+
   const navigate = useNavigate();
   const handleCreateBoardPage = (e) => {
     e.preventDefault();
@@ -71,7 +113,9 @@ const CreateBoardPage = () => {
     formData.append("title", boardInfo.title);
     formData.append("content", boardInfo.content);
     if (file) {
-      formData.append("images", file[0]);
+      file.forEach((f) => {
+        formData.append("images", f);
+      });
     }
     createBoardAPI(formData);
     navigate("/");
@@ -102,6 +146,11 @@ const CreateBoardPage = () => {
           placeholder="내용을 입력하세요 ..."
           minRows={10}
         />
+
+        <S.FileView>
+          <PostContainer preview={preview} setPreview={setPreview} setFile={setFile}/>
+        </S.FileView>
+
         <label for="file">
         <S.StyledFileInput>
           <S.AttachmentButton>Upload File</S.AttachmentButton>

src/pages/CreateBoardPage/CreateBoardPage.style.jsx

@@ -1,4 +1,6 @@
 import styled from "@emotion/styled";
+import deleteIcon from "../../assets/images/delete_image_icon.png"
+
 
 export const CreateBoardPage = styled.div``;
 
@@ -54,4 +56,46 @@ export const AttachedFile = styled.p`
   font-size: 9x;
   font-weight: bold;
   color: #999;
+`;
+
+export const FileView = styled.div`
+  display: flex;
+  align-items: center;
+  width: 70%;
+  overflow: auto;
+  margin-top: 40px;
+`;
+
+export const PostContainer = styled.div``;
+
+export const PostImages = styled.div`
+  display: flex;
+  flex-direction: row;
+  overflow: auto;
+  height: 10em;
+`;
+
+export const PostImage = styled.img`
+  margin: 0 10px 0 10px;
+  width: auto;
+  height: 10em;
+`;
+
+export const DeleteImageButton = styled.button`
+  position: absolute;
+  right: 15px;
+
+  background-image: url(${deleteIcon});
+  width: 30px;
+  height: 30px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+`;
+
+export const PostImageWithIcon = styled.div`
+  position: relative;
 `;

src/pages/UpdateBoardPage/UpdateBoardPage.jsx

@@ -178,7 +178,6 @@ const UpdateBoardPage = () => {
         />
 
         <S.FileView>
-        {/* urlList, preview, setBoardInfo, setPreview, setFile */}
           <PostContainer urlList={boardInfo.urlList} preview={preview} setBoardInfo={setBoardInfo} setPreview={setPreview} setFile={setFile}/>
         </S.FileView>