Today I Did
- MusicalDetails 컴포넌트에 뮤지컬 제목, 공연 시작 날짜, 공연 종료 날짜, 가격, 공연장소, 출연진, 러닝타임, 공연 날짜, 공연 진행 상태 받아오기
➡️ 뮤지컬 상세 정보 페이지 구현 후 상세 정보 보여주기 - Posters 컴포넌트에 뮤지컬 상세 이미지 받아오기
- Search 컴포넌트에서 검색창의 변화가 있을 때 마다 검색 상태 변경
- Search 컴포넌트에서 돋보기 아이콘 클릭 시 서버에 요청
- Search 컴포넌트에서 서버로부터 받아온 데이터로 목록 상태 변경
- 즐겨찾기(찜꽁) 아이콘에 마우스 오버했을 때만 활성화 되며 클릭 가능하게 하기
- 즐겨찾기 아이콘 클릭 시 서버에 요청
뮤지컬 상세 정보 페이지 구현 후 상세 정보 보여주기
Thumbnail 컴포넌트의 이미지를 클릭하면 MusicalInfo 페이지에 해당 뮤지컬의 썸네일, 상세 정보(제목, 공연 시작 날짜, 종료 날짜, 가격 등등), Tab 컴포넌트를 보여준다. Tab 컴포넌트에는 뮤지컬 상세 이미지와 댓글을 볼 수 있게 만들었고 각각에 맞는 탭을 눌러야지만 보여준다. 뮤지컬 정보는 useEffect()로 페이지가 처음 렌더링이 되면 서버로부터 받아올 수 있게 만들었다.
오늘 새로 알게된 사실
react-router-dom v6에서 새로 바뀐게 많아서 공식 페이지에서 많이 찾아봤다.
먼저 <Link> 컴포넌트를 이용해서 params를 전달하고, 그걸 엔드포인트에 사용할 수 있다. 또한 다른 컴포넌트에 내가 전달하고싶은 데이터를 state에 담아서 보내줄 수 있다.
// Link 컴포넌트
<Link
to={`/musicalinfo/${id}`}
state={{data: data}} >
</Link>간단 일기
오늘은 오전에 볼일이 있어 잠깐 나갔다온다고 오전 작업을 못했다. 🥲 오늘은 상세페이지 구현과 서치 컴포넌트까지 하려고했는데 ㅜㅜ... 상세페이지 구현에서 생각보다 시간을 많이 잡아먹어서 서치 컴포넌트는 건들지도 못했다. 아쉽... 이번주 내내 너무 달렸던 탓인지 머리가 고장난 느낌을 받았다.. 내일은 다같이 널널하게 하기로 약속했지만! 또 달리겠지 ^_ㅠ.. 그래도 늦잠은 잘 수 있으니까.. 쫌만 더 힘내자!!
으아 사실 쓸 내용 더 많은데 머리가 안돌아가서 못쓰겠다 ㅠ 얼른 자러가자...
Tomorrow To Do
- 찐서버로부터 요청 날리고 응답 받아보기
- Search 컴포넌트에서 검색창의 변화가 있을 때 마다 검색 상태 변경
- Search 컴포넌트에서 돋보기 아이콘 클릭 시 서버에 요청
- Search 컴포넌트에서 서버로부터 받아온 데이터로 목록 상태 변경
- 즐겨찾기(찜꽁) 아이콘에 마우스 오버했을 때만 활성화 되며 클릭 가능하게 하기
- 즐겨찾기 아이콘 클릭 시 서버에 요청
๑•‿•๑