배민문방구 상세페이지 - 구매후기

구매후기

아직 백엔드와 연결을 하지 않고 가상의 데이터로 진행했기 때문에 나만의 생각을 서술해보자면 상품상세페이지에 들어와서 이 상품을 구매했다면 상품후기를 쓸 수 있도록 해놓은 것 같다. 여기선 이미 구매했다고 가정하고 페이지를 일단은 구현해 보았다. 댓글을 수정 삭제하는건 어디서든 너무나 필요하다. 그냥 끊임없이 공부하고 또 공부하자

작업을 도와줄 구매한 유저들 목록 29-2팀 화이팅!!
  const users = [
    {
      id: 1,
      userName: '최희택',
      comment: '이 제품 너무 좋습니다.',
    },
    {
      id: 2,
      userName: '주지홍',
      comment: '이 제품 너무 별로에요.',
    },
    {
      id: 3,
      userName: '한신웅',
      comment: '이 제품 너무 짱이에요.',
    },
    {
      id: 4,
      userName: '임채현',
      comment: '이 제품 너무 짱이에요.',
    },
  ];

리뷰 작성을 위한 스테이트 값들
  const [writeReview, setWriteReview] = useState({
    comment: '',
    id: '',
  });
  const { comment, id } = writeReview;

	// 받아올자료 댓글구현

  const [userReviews, setUserReviews] = useState(users);

	// 받아올자료

  const nextId = useRef(5); 	
	// 아이디를 겹치지 않게 자동생성
  const nextUserName = useRef(5);	
	// 유저이름 겹치지 않게 자동생성

  const reviewNum = userReviews.filter(x => x.comment.length > 0).length; 
	// 리뷰가 있고 없고에 따라 조건부 렌더링을 위한 조건

  const [isRegisterBtnClick, setIsRegisterBtnClick] = useState(false);
	// 리뷰 등록버튼
  const [isCorrectBtnClick, setIsCorrectBtnClick] = useState(false);
	// 리뷰 삭제버튼

const onCreateReview = () => {
    const newReview = {
      id: nextId.current,
      username: nextUserName.current,
      comment: comment,
      commentdate: '2022.02.28',
    }; // 새로운 유저 등록
    setUserReviews([...userReviews, newReview]);
    setWriteReview({
      comment: '',
    }); // 초기화
    nextId.current += 1;
    nextUserName.current += 1;
    setIsRegisterBtnClick(!isRegisterBtnClick);
    alert('등록이 완료되었습니다.');
  };

  const onChangeReview = e => {
    const { name, value } = e.target;
    setWriteReview({
      ...writeReview,
      [name]: value,
    });
  }; // 인풋창에 입력시 value 값을 변경시키기 위한 함수

  const onClick = () => {
    setIsRegisterBtnClick(!isRegisterBtnClick);
  };

  const onUpdateReview = () => {
    setUserReviews(
      userReviews.map(x => (x.id === id ? { ...x, comment: comment } : x))
    );
    setWriteReview({
      comment: '',
      id: '',
    });
  }; // 수정버튼 클릭시 내가 작성한 리뷰가 리뷰박스에 나오도록하는

  const onRemoveReview = id => {
    setUserReviews(userReviews.filter(x => x.id !== id));
  }; // 리뷰 제거

  const onModifyReview = user => {
    setIsCorrectBtnClick(!isCorrectBtnClick);
    setWriteReview({
      username: user.username,
      comment: user.comment,
      id: user.id,
    });
  }; // 수정을 눌렀을때 리뷰창에 내가 등록했던 리뷰가 나오도록

  const btnStateReset = () => {
    setIsRegisterBtnClick(false);
    setIsCorrectBtnClick(false);
  };

	// 닫기 버튼을 눌렀을 때 닫히도록

후기가없을때 / 후기가 있을때 (최상단 확인)

상품후기 글쓰기 버튼 클릭시 하단 등록버튼 생성

수정버튼 버튼 클릭시 하단 수정버튼 생성

2주차를 마무리하면서 느낀점

이번주는 정말 많이 뻘짓을했다. 블로그에 이렇게 회고하는것도 이 순간을 다시 기억하고 싶어서 이렇게 남겨본다. 블로그에 남긴 글을 읽는다고 해서 내가 나중에 그때 그 순간을 똑같이는 기억하지 못하겠지만 그래도 아 그때 진짜 많이 막혔다는 생각이 날 것 같다.

생각보다 웹사이트를 만드는것이 쉽지 않다라는 것을 느끼게 되었다. 나는 인풋창과 옵션선택창에 꽂혀서 여러 행동을 해보고 다양한 조건 변수들을 생각해 보았다. 너무나 여러 상황들이 있었고 "누군가는 그러한 행동을 하지 않을까?" 라는 생각들로 인해 잠을 많이 못자고 또 생각하고 프론트 엔드 개발자로서 사용자와의 상호작용이 무엇인지 ? 유저인터페이스구축을 어떤식으로 해야하는지 ? 이런 본질적인 문제들에 많이 생각해 보게 되는 과정이었다. 그로 인해 상품후기는 정말 하루만에 작성했다. 중간발표가 끝나면 이 부분을 좀 더 다듬어서 작성해야 겠다.