📂 소개

영화 정보를 크롤링해서 사용자에게 제공하고, 사용자는 영화를 구매하고 리뷰를 작성할 수 있습니다.

Side Project Repository 살펴보기↗

🖥️ main

🖥️ sign up

🖥️ sign in

🖥️ my

🖥️ movie

🖥️ review

🖥️ payment

📝 log

2022-05-17

• API
  • Backend(Spring Boot) API 테스트를 진행했습니다. proxy 관련 이슈가 발생하여, proxy를 설정 작업을 진행하였습니다.
  • DB 연동 후 Backend와 API 테스트를 진행하였습니다. API 테스트를 진행한 부분은 회원가입, 로그인, 회원탈퇴, 닉네임 수정, 리뷰 작성, 리뷰 수정, 리뷰 삭제, 영화 구매, 영화 구매 내역 상세입니다.

2022-05-16

2022-05-15

2022-05-14

• input에 value 을 가져오기는 했는데 수정이 불가능한 이슈가 발생했습니다. 왜 수정이 불가능한 지 찾아보니, onChange 이벤트 함수가 없으면 readOnly처리가 되기 때문이었습니다. 이에 대한 해결 방법은 props를 state에 담아서 수정하고 value에 state를 넣으면 됩니다.

• My > 구매내역 & 내 리뷰에서의 API 호출 작업을 완료했습니다. 더불어 postman을 이용하여 API 테스트를 완료했습니다.

2022-05-12

• mock date 테스트를 완료했으며, API 테스트를 진행 중입니다.

Join

const InputClass = `form-control ${InputHasError ? 'invalid' : ''}`;
const pwReEnterInputClass = pwReEnterInputHasError
  ? 'form-control invalid'
  : 'from-control';

const InputClass = `form-control ${InputHasError ? 'invalid' : ''}`;

API

• 인증 관련하여 mock api가 필요했습니다. 해당 부분은 지인 찬스😇를 사용했습니다.
  • mock api 문제가 해결되어, 로그인 등등을 테스트할 수 있어 작업이 가능했습니다.

2022-05-11

Join

• 회원 가입 페이지에서 유효성 관리 작업을 하였습니다. 회원 가입 페이지의 입력창에 값을 미입력하면 등록 버튼이 비활성화되도록 했습니다.

const {
    value: inputEmail,
    ...
  } = useInput((value) => value.includes("@" && "."));
  } = useInput((value) => value.includes("@") && value.includes("."));

    ...
  } = useInput((value) => value.includes("@" && "."));

• API 테스트를 진행 중이며, style 작업을 완료 했습니다. 🥳

2022-05-10

ReviewPost

• 리뷰 등록 시, 경우에 따른 경고 문구를 출력하고 작성해야 하는 영역을 표시하게끔 했습니다.

제목과 내용에 1글자 미만 작성한 경우

제목에 1글자 미만 작성한 경우

내용에 1글자 미만 작성한 경우

2022-05-09

• API 테스트를 postman을 이용하여 완료했습니다. postman도 이번에 프로젝트를 하면서 처음 사용해봤는데요. 써본 소감은 완전 신기방기
• 추가로 디자인이 필요한 부분이 있어서 figma로 마무리했습니다. 디자인_진짜_진짜_끝.jpg

Troubleshooting

const [movieData, setMovieData] = useState([]);
const params = useParams();
const movieIndex = params.no;
const movie = movieData.find((movie) => movie.no === movieIndex);

const movieIndex = params.no;
const movie = movieData.find((movie) => movie.no === movieIndex);

ReviewPost

• 메인 페이지 > 영화 상세 페이지 > 리뷰 페이지 경로 작업을 진행하였습니다.
• 영화 상세 페이지 > 리뷰 페이지 이동 시, 리뷰 페이지에 영화 제목을 자동 입력을 시키고 사용자는 이를 수정 불가능하도록 작업했습니다.

• 1글자 이상 미입력 시, 경고 문구를 출력하고 게시물 등록 불가능하게 했습니다.
• 리뷰 등록을 성공하면 useNavigate을 이용하여 목록으로 이동하게 하였습니다.

2022-05-08

• 메인 페이지에서 영화 아이템 클릭 시, 상세 페이지로 이동하는 작업을 진행하였습니다. router@6으로 값을 전달하는 부분에서 헤맸습니다. 🤧

2022-05-07

• router는 처음 사용해봐서 6일에는 사용 방법을 익히고, 7일에는 router@6을 프로젝트에 적용하였습니다.

2022-05-05

• JSON 특정 문자를 제거하기 위해 정규식 사용이 필요하여 관련 문서를 찾고 적용했습니다.

2022-05-04

• JSON 데이터를 출력 테스트했습니다.
  • mock data를 생성하여 JSON으로 변환 후 map() 메서드를 사용하여 출력 테스트를 완료하였습니다.

.main {
  display: grid;
  grid-template-columns: repeat(6, 184px);
  flex-flow: column;
  inline-size: 1104px;
  margin: 0 auto;
  margin-top: 30px;
}

  grid-template-columns: repeat(6, 184px);
}

• header에는 grid와 flex를 사용하고, 사용해보고 싶었던 CSS hover 중 하나를 적용했습니다.