알림 ui 구현 및 api 연동 #751
알림 ui 구현 및 api 연동 #751
Conversation
- 배경을 누르면 툴팁 제거 - 툴팁 테두리색 변경
- 둥근 배경이 있는 경우에만 해당
- msw 데이터 불러오기 성공 - 더보기 클릭 시 추가 데이터 불러오기 성공 - 서스펜스, 에러바운더리, 로딩스피너 도입
- 알림 리스트 내 아이템 UI 구현
- 사이드바에서 높이 설정 - 툴팁에서는 최대높이 및 가로길이 설정
- msw를 통한 적용 확인
- 비회원인 경우 알림 툴팁, 사이드가 안열리도록 조치 - 비회원인 경우 알림 툴팁, 사이드 버튼을 눌러도 api 통신되지 않도록 조치
- component/common > component
- msw 코드 중 무의미한 url 코드 삭제
frontend/__test__/api/user.test.ts
Outdated
| @@ -28,12 +28,19 @@ describe('서버와 통신하여 유저의 정보를 불러올 수 있어야 한 | |||
| expect(data).toEqual(transformUserInfoResponse(MOCK_USER_INFO)); | |||
| }); | |||
|
|
|||
| test('클라이언트에서 사용하는 유저 정보 API 명세가 [nickname, gender, birthYear, postCount, voteCount]으로 존재해야한다', async () => { | |||
| test('클라이언트에서 사용하는 유저 정보 API 명세가 [nickname, gender, birthYear, postCount, voteCount, hasLatestAlarm]으로 존재해야한다', async () => { | |||
There was a problem hiding this comment.
conflict 사전 방지를 위해 hasLatestAlarm 뒤에 role도 추가해주실 수 있나요...ㅎㅎㅎ
| --gray: #F4F4F4; | ||
| --slate: #94a3b8; | ||
| --gray: #ced4da; | ||
| --bright-gray: #F4F4F4; |
| margin-top: 10px; | ||
|
|
||
| //포함된 부분에서 이벤트 발생을 막는 속성 | ||
| pointer-events: none; |
There was a problem hiding this comment.
혹시 이 속성이 어떤 의도로 필요한 건지 궁금해요!!
이벤트 발생을 막지 않는다는 건가용..??
There was a problem hiding this comment.
네네 그 포스트 컴포넌트를 넣는다면 onClick event를 막아도 방지가 되지 않고 투표가 됩니다😂
그래서 아예 css 속성으로 못하게 설정했습니다.
| {[...new Set(data.reason.map(each => REPORT_MESSAGE[each]))].map(reason => { | ||
| return <S.ListItem>{reason}</S.ListItem>; | ||
| })} |
There was a problem hiding this comment.
오 Set~~~~ 프로젝트에서 최초로 쓰였군요! 중복 제거 좋습니다👍
| export default function ReportTargetPost({ postId }: { postId: number }) { | ||
| const { data } = usePostDetail(true, postId); | ||
|
|
||
| return data && <Post postInfo={data} isPreview={false} />; |
frontend/src/constants/path.ts
Outdated
| @@ -8,6 +8,7 @@ export const BASE_PATH = { | |||
| SEARCH: '/search', | |||
| RANKING: '/ranking', | |||
| ANNOUNCEMENT: '/announcements', | |||
| ALARM: '/alarm', | |||
There was a problem hiding this comment.
alarms 로 복수형 형식으로 통일 어떠신가용
|
|
||
| import * as S from './style'; | ||
|
|
||
| // 70px = 토글 스위치의 크기(40px) 및 상하 padding(각 10px), gap(10px) | ||
| const alarmToolTipStyle: CSSProperties = { |
| @@ -38,7 +38,7 @@ export const Retry: Story = { | |||
| }; | |||
|
|
|||
| export const UserInfo: Story = { | |||
There was a problem hiding this comment.
오 유저정보 스토리인데 category가 'alarm'인가용??
| @@ -18,7 +18,7 @@ export const LeftSideBar = () => { | |||
|
|
|||
| return ( | |||
| <div> | |||
| <NarrowMainHeader handleMenuOpenClick={openDrawer} /> | |||
| <NarrowMainHeader handleCategoryOpenClick={openDrawer} handleAlarmOpenClick={() => {}} /> | |||
There was a problem hiding this comment.
handleDrawerOpenClick 어떠신가요? (Drawer에 카테고리 외에 유저 프로필도 있어서...)
There was a problem hiding this comment.
근데 저 알림도 drawer라서 헷갈릴 것 같아요..
| NICKNAME: '닉네임', | ||
| }; | ||
|
|
||
| export default function ReportAlarmList({ closeToolTip }: { closeToolTip: () => void }) { |
There was a problem hiding this comment.
common 에 위치하기에는 도메인적 요소가 많아보이는데 common 외에 다른 곳에 위치시키는 것 어떠신가요?
수아가 생각하시는 common 폴더에 위치할 수 있는 기준이 궁금해요!
There was a problem hiding this comment.
헤더 두 개에 사용될 예정이라 common에 넣었는데 만들고 보니 도메인이 강하네요!
수정하겠습니다!
|
🌟 논의 사항
💯💯
개인적인 의견으로 common 에는 NarrowHeader 처럼 여러번 범용적으로 재사용되는 것만 있어야 된다고 생각해요!
🤔 오 우스 말대로 key 값이 동일해서 상태가 제대로 업데이트 안되는 것일수도 있겠군요!
github 처럼 approve 어떠신가요? reportApproveResult 추천합니다 (저도 신고 조치 fetch 함수명 reportApprove 로 바꿀까 고민 중..) |
- 관리자 페이지와 관련된 내용이지만 PR 충돌 방지를 위해 추가
- 수정전: ReportConfirmResult - 수정후: ReportApproveResult
|
fe-리뷰요청 |
|
⚡️ Lighthouse report!
|
🔥 연관 이슈
close: #740
📝 작업 요약
알림 ui 구현 및 api 연동.
⏰ 소요 시간
3일
생각보다 할일이 많았습니다..
🔎 작업 상세 설명
디자인 추가 / 변경
기능 안내
🌟 논의 사항
reportConfirmResult을 사용했습니다. 오히려 이게 더 헷갈린다고 하면 변경하겠습니다. 변수명 추천 받습니다.