이미지 출력

Page.tsx

import

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

상태

const [imageNameList, setImageNameList] = useState<string[]>([]);

useEffect(() => {
    const storage = getStorage(firebaseApp);
    //이미지 경로
    const imageRef = ref(storage, `images/${uidVar}/${boardSelectedId}/`);

//이미지 불러오기
    listAll(imageRef).then((response) => {
      response.items.forEach((item) => {
        getDownloadURL(item).then((url) => {
          setImageNameList([url]);
        });
      });
    });
  }, [id]);

이미지경로 : images/유저uid/페이지id/파일이름.확장자

전체코드

import { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { useParams } from "react-router-dom";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import deleteuserdata from "../../redux/thunks/boardDelteThunk";
import {
  getStorage,
  ref,
  uploadBytes,
  listAll,
  getDownloadURL,
} from "firebase/storage";
import { firebaseApp } from "../../firebase";

const Page = () => {
  // URL 파라미터에서 id 추출
  const { id } = useParams();

  //boardItemMap 상태 선택
  const userData = useSelector((state: any) => state.boardItemMap.boarditem);
  const boardSelectedId = useSelector(
    (state: any) => state.board.selectedBoardId
  );
  const modata = useSelector((state: any) => state.boardModify.boarditem);
  const userUidValue = useSelector((state: any) => state.login.user);
  const userUidList = useSelector((state: any) => state.login.userLists);
  const uidVar = userUidValue?.uid;

  const navigate = useNavigate();

  //데이터를 각 key에 맞춰 넣기 위해 비구조화 할당 사용
  const userDataVar: any = userData[Number(id)];

  const { did, title, content, timedata, userUid } = userDataVar;

  const dispatch = useDispatch();

  const boardId = Number(id);

  const handleDelete = async () => {
    try {
      window.confirm("삭제 하시 겠습니까?");
      dispatch(
        deleteuserdata({
          boardId: boardSelectedId,
        }) as any
      );
      //목록 페이지로 이동
      navigate("/");
    } catch (error) {
      console.log(error);
      console.log("삭제가 안됩니다");
    }
  };

  const userDates = new Date(userDataVar[0].timedata);

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

  const userDate = `${yesr}.${month}.${date}`;

  const matchingUser = userUidList.find(
    (user: any) => user.uid === userDataVar[0].userUid
  );

  const [imageNameList, setImageNameList] = useState<string[]>([]);

  useEffect(() => {
    const storage = getStorage(firebaseApp);
    const imageRef = ref(storage, `images/${uidVar}/${boardSelectedId}/`);

    listAll(imageRef).then((response) => {
      response.items.forEach((item) => {
        getDownloadURL(item).then((url) => {
          setImageNameList([url]);
        });
      });
    });
  }, [id]);

  return (
    <>
      {/* Page 컴포넌트의 내용을 id에 따라 동적으로 표시 */}
      <div className="container">
        <div className="page_box">
          <section>
            <p className="title">{userDataVar[0].title}</p>
            <div className="userInfo">
              {userUidList.map((name: any, index: number) => {
                if (name.uid === matchingUser.uid) {
                  return <span>{name.displayName}</span>;
                } else {
                }
              })}
              <span>{userDate}</span>
            </div>
            <div className="page_txt">
              {userDataVar[0].content}
              {imageNameList.map((el) => {
                return <img key={el} src={el} />;
              })}
            </div>
          </section>
        </div>
        <div className="board_back_btn">
          <Link to="/">목록</Link>
        </div>

        <div className="page_btn">
          {userDataVar[0].userUid === uidVar && (
            <div>
              <div className="edit_btn">
                <Link to={`/pagemodify/${id}`}>수정</Link>
              </div>
              <input
                type="button"
                onClick={() => handleDelete()}
                value="삭제"
              />
            </div>
          )}
        </div>

        {/* 아직 구현 안됨 */}
        {/* <div className="comment_box">
          <form>
            <textarea placeholder="내용을 입력 해주세요"></textarea>
            <input type="submit" value="등록" />
          </form>
          <div className="comment_view">
            <div className="comment_user">
              <span>굴러가는 참새</span>
              <span>2023.08.18</span>
            </div>
            <div className="comment_txt">
              댓글 입니다.
              <br />
              댓글 입니다.
              <br />
              댓글 입니다.
              <div className="comment_btn">
                <input type="submit" value="댓글" />
                <input type="submit" value="수정" />
                <input type="button" value="삭제" />
              </div>
            </div>
          </div>
        </div> */}
      </div>
    </>
  );
};

export default Page;

블로그 참고