useToast 훅을 사용하여 토스트 알림을 사용할 수 있습니다. useToast 훅 내부에 있는 toast 함수는 인수로 토스트 알림 문구를 받아 토스트 알림의 text 상태를 변경하고 5초간 active: true 상태를 유지합니다. 5초 동안 변경한 문구를 가진 Toast 컴포넌트가 하단에 나타납니다.
이미지 모달
Footer
NavBar 컴포넌트 폴더 내 Footer 컴포넌트를 분리해두었습니다.
2️⃣ 댓글 기능 구현
댓글 및 대댓글 작성/수정/삭제 기능을 구현했습니다.
댓글 수는 아직 제대로 구현되지 않았습니다. 이 부분 데이터는 백에서 작업 완료되는대로 작업하겠습니다!
댓글 관련 컴포넌트들은 component/comment 폴더로 분리했고 get/post/patch/delete api는 훅 생성하여 hooks/api/comment 폴더로 분리했습니다.
3️⃣ inverse 색상 추가
semantic 상수객체에 inverse 색상을 추가했습니다.
// light
inverse: {
solid: {
accent: '#00A66E' as HexColor,
negative: '#F17961' as HexColor,
hero: '#ffffff' as HexColor,
normal: '#E2E2E2' as HexColor,
bg: '#2B2B2B' as HexColor,
},
},
// dark
inverse: {
solid: {
accent: '#00895A' as HexColor,
negative: '#D93526' as HexColor,
hero: '#262626' as HexColor,
normal: '#3B3B3B' as HexColor,
bg: '#ffffff' as HexColor,
},
},
🚨 버그 발생 이유 (선택 사항)
🔎 후속 작업 (선택 사항)
~px -> rem 작업이 필요합니다.~ (완료)
현재 상세페이지 인터렉션 작업이 되어있지 않습니다. (모달엔 적용되어있음) 전에 만들어두었던 Interaction/ButtonWrap 컴포넌트가 인터렉션 작업으로 적합하지 않다고 판단되어 새로운 방법을 찾아봐야할 것 같습니다😢 TYPO 처럼 상수로 만들어 사용하면 어떨까 싶어 한번 시도해보겠습니다.
✅ 체크리스트
inverse
색상 추가📝 작업 상세 내용
1️⃣ 상세 페이지 UI 변경
상세페이지 UI가 변경되었습니다. TYPO.body가 사용된 일기 상세 내용, 모달 내용, 댓글 내용은 아직 KoPubWorldDotum_Pro 폰트로 적용되어있습니다.
상세페이지
모달 이미지
모달을 컴포넌트로 분리했습니다.
모달의 title, content, x 아이콘을 통해 모달을 닫을 함수를 지정합니다. children은 모달의 버튼을 받습니다. 버튼은 기본 확인 버튼과 커스텀 버튼을 만들어두었습니다.
만든 컴포넌트는 아래 방식처럼 사용하였습니다.
삭제 완료 토스트 알림
기존 삭제 완료 알림이 모달 -> 토스트로 변경되었습니다. 삭제가 성공적으로 이루어졌을 때에만 토스트 알림이 뜨도록 되어 있습니다. 토스트 알림 상태 관리는 zustand를 활용했습니다.
useToastStore은 토스트에 들어갈 내용 상태
text
와 텍스트를 변경할 수 있는setText
, 활성화 상태active
와 활성화 상태를 변경할 수 있는setActive
를 가지고 있습니다useToast 훅을 사용하여 토스트 알림을 사용할 수 있습니다. useToast 훅 내부에 있는 toast 함수는 인수로 토스트 알림 문구를 받아 토스트 알림의 text 상태를 변경하고 5초간 active: true 상태를 유지합니다. 5초 동안 변경한 문구를 가진 Toast 컴포넌트가 하단에 나타납니다.
이미지 모달
Footer
NavBar 컴포넌트 폴더 내 Footer 컴포넌트를 분리해두었습니다.
2️⃣ 댓글 기능 구현
댓글 및 대댓글 작성/수정/삭제 기능을 구현했습니다. 댓글 수는 아직 제대로 구현되지 않았습니다. 이 부분 데이터는 백에서 작업 완료되는대로 작업하겠습니다! 댓글 관련 컴포넌트들은 component/comment 폴더로 분리했고 get/post/patch/delete api는 훅 생성하여 hooks/api/comment 폴더로 분리했습니다.
3️⃣ inverse 색상 추가
semantic 상수객체에 inverse 색상을 추가했습니다.
🚨 버그 발생 이유 (선택 사항)
🔎 후속 작업 (선택 사항)
🤔 질문 사항 (선택 사항)
📚 참고 자료 (선택 사항)
React Query에서 mutation 이후 데이터를 업데이트하는 4가지 방법
📸 스크린샷 (선택 사항)
변경 사항에 대한 스크린샷이 있다면 첨부해주세요.
✅ 셀프 체크리스트
이슈 번호: Close #172 Close #131