☆☆☆진행 순서☆☆☆

1. (수정)'이찬혁', '이수현' 버튼 클릭시 해당 아티스트의 팬레터가 보이도록 구현
   • 가장 상단 state인 Rooter.js에서 member, setMember 변수를 useState로 선언해놓고 자식 state에 props 내리기
   • 해당 props를 함수 인자에 넣어 놓고, 그 값을 통해 버튼 구현하기
     

이전에는 {selectMember, setSeletMember}로 자식 컴포넌트로 내린 값을 사용한게 아닌, 자체적으로 const [selectMember, setSelectMember] = useState(''); 로 사용했었으나, 가장 초기 컴포넌트에서 값을 내려야 동일한 값을 팬레터 등록할 때 사용할 수 있으므로, props로 받아서 수정하였음.

---

2. (오류해결)팬레터 등록 시 '이찬혁','이수현' 선택을 하지 못하고 등록하던걸 해결
   
   버튼에서 적용한 selectMember와 팬레터 등록 시 한명의 아티스트에게만 생성이 되도록 통일하기 위해 member:selectMember로 값을 맞춰줌
   
   만든 팬테러 클릭 시 상세페이지로 넘어가기 위해 navigate()를 사용하였고, 생성한 팬레터의 id값에 대한 상세페이지로만 들어가져야 하므로, navigate(/detailPages/${id})로 http 주소가 생성되도록 만들었음.

select를 통해 원하는 아티스트를 선택하도록 구현하였는데,

select 밑에 option을 통해 두 아티스트를 선택할 수 있게 만들었고, 여기서 option value는 실제 그 팬레터를 클릭하였을 때, selectMember의 id값인 0이나 1로 접근할 수 있도록 연동하였다.

---

3. 홈화면의 팬레터 클릭 시 상세화면으로 이동 구현
   앞서 설명한대로

useNavigate가 상세페이지로 가게해주는 방법인데, detailPages뒤에 ${id}로 해당페이지로 접근을 용이하게 해주고, 그걸 실현화해주기 위해서![]

Rooter.js 가장최상단 컴포넌트에서 path를 /detailPages/:id로 적어야 어떤 팬레터를 클릭하여도 그 아이디 값으로 된 페이지로 넘어가게 도와주며,

홈페이지에서 uuid를 사용한 값이 나오게 된다.

---

4. 상세화면 UI 구현

• 상세요구사항

  1) 팬레터 내용 전체를 볼 수 있도록 UI를 표현해 주세요.

  2) 수정, 삭제 기능을 넣어야 하니 버튼도 넣어주세요.

  3) 홈 화면의 아바타 이미지와 버튼과 동일한 공용 컴포넌트를 만들어 적용해 보세요. (선택 - 어려울 시 스킵)
  

5. 메인페이지 / 상세페이지 styled-component 적용하기

안된 부분

• 상세페이지 css 다 완성 못함
• 수정 삭제 기능 구현