page 수정

처음 데이터가 출력되는 상세페이지

import

import { 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";

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 uidVar = userUidValue?.uid;

const navigate = useNavigate();

//데이터를 각 key에 맞춰 넣기 위해 비구조화 할당 사용
const userDataVar: any = userData[Number(id) as any][0];
const { did, title, content, timedata, userUid } = userDataVar;

const dispatch = useDispatch();

//타입을 number로 변경
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.timedata);

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

Window.confirm() 모달 대화 상자
getFullYear 날짜

return

return (
    <>
      {/* Page 컴포넌트의 내용을 id에 따라 동적으로 표시 */}
      <div className="container">
        <div className="page_box">
          <section>
            <p className="title">{userDataVar.title}</p>
            <div className="userInfo">
              <span>{userUidValue.displayName}</span>
              <span>{userDate}</span>
            </div>
            <div className="page_txt">{userDataVar.content}</div>
          </section>
         
        </div>
        <div className="board_back_btn">
          <Link to="/">목록</Link>
        </div>

        <div className="page_btn">
        //해당 사용자가 맞으면 수정 버튼이 나온다
          {userDataVar.userUid === uidVar && (
            <div>
              <div className="edit_btn">
                <Link to={`/pagemodify/${id}`}>수정</Link>
              </div>
              <input
                type="button"
                onClick={() => handleDelete()}
                value="삭제"
              />
            </div>
          )}
        </div>
      </div>
    </>
  );

&&논리연산자

🦒추가 사항

• 보완된 부분은 사용자에 맞게 수정 버튼 유무
• 삭제버튼 클릭시 모달창 뜨고 확인을 누르면 데이터 삭제

그리고 보기 쉽게 하기 위해 페이지 마다 중복된 설명글은 줄이고
함수 경우 in,out 값만 간결 하게 표시