이번주 WIL

실전프로젝트 진행하며 어려웠던 기술 및 해설

이번주에 내가 맡고 했던 부분 :

이번주에 내가 주로 맡아서 한 부분은 유저 프로필 파트와 모달 띄우기 파트였다. 상대적으로 난이도가 그렇게 어렵지는 않았으나 사진 올리기, CSS Modal 자체가 처음 도전하는 챌린지적인 면이 있어서 이번주 어려웠던 점으로 기록하고자 한다.

1. CSS Modal

주요코드

(header.jsx)
...
...
const navigate = useNavigate();
  const [modalOn, setModalOn] = useState(false);
  const handleModal = () => {
    setModalOn(true);
  };

  return (
    <div>
      <h1
        onClick={() => {
          navigate("/");
        }}
      >
        HOME
      </h1>
      <Span
        onClick={() => {
          navigate("/postread");
        }}
      >
        MacBook
      </Span>
      <Span
        onClick={() => {
          navigate("/postread");
        }}
      >
        iPhone
      </Span>
      <button
        onClick={() => {
          navigate("/signin");
        }}
      >
        로그인
      </button>
      <button
        onClick={() => {
          navigate("/mypage");
        }}
      >
        마이페이지
      </button>
      <button onClick={handleModal}>모달켜기</button>
      {modalOn && <Modal setModalOn={setModalOn} />}
    </div>
  );
};

export default Header;
...
...

(modal.jsx)
...
...
const Modal = (props) => {
  // 토글
  const [toggle, setToggle] = useState(true);
  const navigate = useNavigate();

  // 토글 핸들러
  const toggleBtnHandle = () => {
    setToggle(!toggle);
  };

  const handleModal = () => {
    props.setModalOn(false);
  };

  return (
    <Background>
      <Content>
        <button onClick={handleModal}>모달끄기</button>
        <button
          onClick={() => {
            navigate("/postcreate");
          }}
        >
          상품등록
        </button>
        <button
          onClick={() => {
            navigate("/objectionread");
          }}
        >
          이의제기
        </button>
        <PricingInput />
      </Content>
    </Background>
  );
};

...

설명

• 핵심은 props로 값을 상속받는 것.
• header에서 선언한 모달 관련 값을 modal과 서로 상속 관계로 만들어 껐다 켰다를 반복할 수 있었다.

2. 사진 올리기가 포함된 프로필 변경 및 표시하기

주요코드

(mypageUpdate.jsx)
const MypageUpdate = () => {
  const uploadedImage = React.useRef(null);
  const imageUploader = React.useRef(null);
  const [photo, setPhoto] = useState(null);
  // 사진을 저장하는 로직이 없었다.
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const onClickHandler = () => {
    navigate("/mypage");
  };

  const handleImageUpload = e => {
    const [file] = e.target.files;
    if (file) {
      const reader = new FileReader();
      const { current } = uploadedImage;
      current.file = file;
      reader.onload = e => {
        current.src = e.target.result;
      };
      reader.readAsDataURL(file);
      setPhoto(file)
    }
  };
  const [write, setWrite, writeHandle] = useInput({
        // 임시 : 00님 코드 확인 필요
    email : "damin1@naver.com",
    nickname : "damin1",
    password : "damin1234",
  });
 
// const {profile} = useSelector((state) => state.login)

  //get 해오기
  useEffect(() => {
    dispatch(__UserProfileEdit);
  }, [dispatch]);

const nicknameEdit = () => {
  // 백엔드와 협의 필요
  const formData = new FormData();
  formData.append("image", photo)
  const obj = {
    // 임시
    // 나중에 이미지 url을 받아서 뿌려야 함.
    email : write.email,
    nickname : write.nickname,
    password : write.password
  }
  formData.append(
    "memberReqDto",
    new Blob([JSON.stringify(obj)], {type : "application/json"})
  );
  dispatch(__UserProfileEdit(formData));
}

...
...
const dispatch = useDispatch()
  const {user} = useSelector((state) => state.Login)
    //get 해오기
    useEffect(() => {
      dispatch(__UserProfile());
    }, [dispatch]);
  return (
    <div><Header/>
    <div>
      <img src={user.profileImg} />
      {user.nickname}
      {user.email}
    </div>
...
...

해설

• backend화 협의하여 사진과 닉네임 정보를 formData형식으로 주고 받기로 했다.
• 사진을 보내는 로직이 위에 코드, 그 변경된 사진을 받는 로직이 아래 코드다.
• TIL로도 이야기했지만 (어제자) Blob을 이용하여 Json을 자바스크립트 & 자바와 소통하는 방식을 취했다.
• 임시 코드는 추후 백엔드와 협의 후 수정 예정(아직 절대값이 들어가야 한다.)

추후 해야 할 작업(마무리)

• 백엔드와 완벽히 소통하여 모달에서 띄울 데이터 받아오기(기종 등)
• 마이페이지 완성
• 판매자 마이페이지 완성
  => 이를 위해서는 일단 CRUD에서 데이터 받아오는 것이 필요