이미지 등록

Form.tsx

import

import {
  getStorage,
  ref,
  uploadBytes,
  listAll,
  getDownloadURL,
} from "firebase/storage";
import { firebaseApp } from "../../firebase";

파이어베이스는 firebase.ts 연동

const firebaseApp = initializeApp(firebaseConfig);
export { appAuth, firestore, storageApp, firebaseApp };

상태

파일 유무
const [imageUpload, setImageUpload] = useState<File | null>(null);
이미지 리스트로 받기
const [imageList, setImageList] = useState<string[]>([]);
파이어베이스 연동
const storage = getStorage(firebaseApp);

const handleImageUpload = async (e: any) => {
	//전송 막음
    e.preventDefault();
    if (imageUpload === null) return;
    //이미지 경로
    const imageRef = ref(
      storage,
      `images/${userId}/${selectedBoardId}/${imageUpload.name}`
    );

    //업로드 하는 곳 경로,올라갈 파일
    await uploadBytes(imageRef, imageUpload).then((snapshot) => {
      getDownloadURL(snapshot.ref).then((url) => {
        setImageList((prev) => [...prev, url]);
      });
    });
  };

return

//이미지 출력
 <div className="img_box">
   {imageList.map((item) => {
   return <img key={item} src={item} />;
 })}
</div>

//이미지 업로드 태그
<div className="file_box">
  <input
  type="file"
  onChange={(event) => {
  const file = event.target.files?.[0];
  if (file) {
  setImageUpload(file);
  }
 }}
/>

<button onClick={handleImageUpload}>업로드</button>
</div>

전체 코드

import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import addUserData from "../../redux/thunks/boardFormThunk";
import { getAuth } from "firebase/auth";
import {
  getStorage,
  ref,
  uploadBytes,
  listAll,
  getDownloadURL,
} from "firebase/storage";
import { firebaseApp } from "../../firebase";
const Form = () => {
  //board 상태 불러옴
  const selectedBoardId = useSelector(
    (state: any) => state.board.selectedBoardId
  );
  const dispatch = useDispatch();

  //사용자가 입력 한 데이터 관련 hook
  const [titleValue, settitleValue] = useState("");
  const [contentValue, setContentValue] = useState("");

  const navigate = useNavigate();
  const auth = getAuth();
  const currentUser = auth.currentUser;
  const userId = currentUser?.uid;

  const handleWrite = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (!titleValue || !contentValue) {
      window.confirm("제목과 내용을 입력 해주세요");
      return;
    }

    //날짜 가공
    function formatDate(dateSt: string) {
      const userDates = new Date(dateSt);
      const yesr = userDates.getFullYear();
      //Date 객체에서 월(Month)은 0부터 시작하기 때문에
      //제로 표시된 월을 구하려면 1을 더해주어야 합니다.
      const month = userDates.getMonth() + 1;
      const date = userDates.getDate();

      return `${yesr}.${month}.${date}`;
    }

    try {
      //userData는 이 액션에 전달할 데이터
      //액션의 목적에 따라 어떤 데이터를 전달할지 정의
      const userData = {
        did: selectedBoardId, //board에서 불러 온 값
        title: titleValue,
        content: contentValue,
        timedata: new Date(),
        userUid: userId as string,
        isModified: false,
      };
      console.log(userData);
      await dispatch(
        addUserData({
          boardId: selectedBoardId,
          boarditem: userData,
        }) as any
      );

      settitleValue("");
      setContentValue("");

      // navigate("/page"); 기존 상세페이지로 이동 코드
      navigate(`/page/${selectedBoardId}`); //수정 된 코드
    } catch (error) {
      console.log(error);
      console.log("입력 오류 입니다");
    }
  };

  const handleCancel = () => {
    if (window.confirm("작성을 취소 하시겠습니까?")) {
      navigate(`/`);
    }
  };

  const [imageUpload, setImageUpload] = useState<File | null>(null);
  const [imageList, setImageList] = useState<string[]>([]);
  const storage = getStorage(firebaseApp);

  const handleImageUpload = async (e: any) => {
    e.preventDefault();
    if (imageUpload === null) return;
    //경로
    const imageRef = ref(
      storage,
      `images/${userId}/${selectedBoardId}/${imageUpload.name}`
    );

    //업로드 하는 곳 경로,올라갈 파일
    await uploadBytes(imageRef, imageUpload).then((snapshot) => {
      getDownloadURL(snapshot.ref).then((url) => {
        setImageList((prev) => [...prev, url]);
      });
    });
  };

  return (
    <>
      <div className="container">
        <header>
          <h1>글작성 </h1>
        </header>
        <form onSubmit={handleWrite} name="form">
          <div className="input_box">
            <input
              type="text"
              maxLength={30}
              defaultValue={titleValue}
              placeholder="제목을 입력해주세요."
              onChange={(e) => settitleValue(e.target.value)}
            />
          </div>
          <div className="textarea_box">
            <textarea
              defaultValue={contentValue}
              placeholder="내용을 입력 해주세요"
              onChange={(e) => setContentValue(e.target.value)}
            />
            <div className="img_box">
              {imageList.map((item) => {
                return <img key={item} src={item} />;
              })}
            </div>
          </div>
          <div className="file_box">
            <input
              type="file"
              onChange={(event) => {
                const file = event.target.files?.[0];
                if (file) {
                  setImageUpload(file);
                }
              }}
            />

            <button onClick={handleImageUpload}>업로드</button>
          </div>
          <div className="form_btn_box">
            <input type="submit" value="등록" />
            <input type="button" value="취소" onClick={handleCancel} />
          </div>
        </form>
      </div>
    </>
  );
};

export default Form;

블로그 참고