Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

알림 ui 구현 및 api 연동 #740

Closed
2 tasks
chsua opened this issue Oct 12, 2023 · 0 comments · Fixed by #751
Closed
2 tasks

알림 ui 구현 및 api 연동 #740

chsua opened this issue Oct 12, 2023 · 0 comments · Fixed by #751
Assignees
@chsua
Labels
FE 🐾 개발
Milestone
6차 데모데이

Comments

@chsua
Copy link
Collaborator

chsua commented Oct 12, 2023

✨ 추가 기능

알림 ui 구현 및 api 연동

📆 일정 추정

2일

📃 세부 사항

디자인

  • 모바일: 오른쪽 drawer
  • 데스크탑: 모달처럼 보여주기 (티스토리)
  • (+기존 마이페이지로 이동하는 트리거 수정)

api 연동

  • myInfo 필드에 알림 관련 필드 넣기
  • 신고/컨텐츠 알림 연동

✅ 투두리스트

  • UI 생성
  • api 연동

🔗 참고 자료
@chsua chsua self-assigned this Oct 12, 2023
@chsua chsua added this to the 6차 데모데이 milestone Oct 12, 2023
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 알림을 넣을 툴킷 컴포넌트 제작
edee88b
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
test: (#740) 알림을 넣을 툴킷 컴포넌트 테스트
200b854
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 알림아이콘 컴포넌트 제작 및 마이페이지 아이콘과 교체
386a986
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 알림 아이콘을 누르는 경우 툴팁 렌더링 구현
5d1d8bd 
- 배경을 누르면 툴팁 제거
- 툴팁 테두리색 변경
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 알림 관련 api 및 query hook 생성
54d613f
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 신고처리 알림 타입 필드명 변경
ff40264
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
test: (#740) msw를 위한 mockData 생성 및 핸들러 생성
3be6b91
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 알림 쿼리훅과 UI 연결
2c3b69b 
- msw 데이터 불러오기 성공
- 더보기 클릭 시 추가 데이터 불러오기 성공
- 서스펜스, 에러바운더리, 로딩스피너 도입
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
fix: (#740) msw를 위한 mockData에 undefined이 있어 수정
6d07063
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 알림 내용 구체적인 메세지로 전달되도록 구현
749093c 
- 알림 리스트 내 아이템 UI 구현
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 알림 item을 눌렀을 경우 tooltip 닫기 구현
eb7e57c
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 읽었던 알림은 회색 처리 + hover 색상 수정
d8c9490
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 알림 리스트를 담은 컨테이너 분리
c2766f6
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
test: (#740) 알림 리스트를 담은 컨테이너 스토리북 생성
9811b51
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 리스트 사용하는 곳에서 style을 조정할 수 있도록 수정
6f5d394
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 모바일버전 홈페이지에서 사이드바로 알림 내용 노출 구현
b7d603b
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 알림 컨테이너 외부 크기에 맞추어 style 조정
7019429 
- 사이드바에서 높이 설정
- 툴팁에서는 최대높이 및 가로길이 설정
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 알림 버튼 활성화 표시를 포함하기 위해 분리
8544af9
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
test: (#740) 활성화 표시가 포함된 알림 트리거 버튼 테스트
e12de83
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 기존 알림리스트 트리거 버튼을 알림 버튼으로 교체
e86d413
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 활성화 정보 포함 알림버튼을 활성화정보 포함 버튼 컨테이너로 수정
350dbc6
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 사용자 정보 response에 알림 활성화 여부 추가 및 UI 적용
0fa00d8 
- msw를 통한 적용 확인
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 최근 알림 읽기 api, hook 생성 및 적용
b19fa5b 
- 비회원인 경우 알림 툴팁, 사이드가 안열리도록 조치
- 비회원인 경우 알림 툴팁, 사이드 버튼을 눌러도 api 통신되지 않도록 조치
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
refactor: (#740) 최신 알림 읽기 query hook 오타수정
1d44599
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 단건 알림 읽기 api 및 query hook 생성
b510e01
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 신고 처리 결과 페이지 초안 작성
2b22721
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 신고 처리 알림 api 명세 변경에 따른 수정
9feb79d 
- 생성시간 뎁스 변경
- 신고 사유 필드 추가
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 단건 신고 처리 조회 api 및 query hook 생성
4a4ba91
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
test: (#740) 단건 신고 처리 조회 msw 생성
c1f94d4
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
test: (#740) 신고된 내역 알림 list 타입 수정에 따른 mockData 수정
9e54ae6
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 신고 조치 결과 페이지 라우터 url 변경
bd576ff
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 신고 조치 결과 페이지 내부 요소 구현
17a0ca0 
- 신고 조치 정보 추가
- 게시물인 경우 게시물 정보 통신. (서스펜스/에러 바운더리 적용)
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
fix: (#740) 알림 읽기 api 위치 변경 및 잘못된 hook 이름 수정
6d590ce 
- api 위치: userInfo > alarm
- hook 이름: useReadLatestAlarm >useReadAlarm
chsua added a commit that referenced this issue Oct 15, 2023
@chsua
feat: (#740) 알림 리스트 내 알림을 누른 경우 알림을 읽음 api 통신 구현
e0423d3
@chsua chsua mentioned this issue Oct 15, 2023
Merged
chsua added a commit that referenced this issue Oct 17, 2023
@chsua
fix: (#740) 바뀐 알림 관련 API 명세 적용
a035376 
- 컨텐츠 알림 목록 api
- 신고 조치 알림 목록 api
- 신고 조치 단건 조회  api
chsua added a commit that referenced this issue Oct 17, 2023
@chsua
feat: (#740) 알림 목록에 아이템이 없는 경우의 문구 크기 설정
fb1c7ca
chsua added a commit that referenced this issue Oct 17, 2023
@chsua
feat: (#740) 글로벌 스타일에 페이지 헤더 글씨 크기 및 1.4rem 추가
073277b
chsua added a commit that referenced this issue Oct 17, 2023
@chsua
design: (#740) 신고된 내역 확인 페이지 글씨크기 키우기 및 반응형 적용
bcde780
chsua added a commit that referenced this issue Oct 17, 2023
@chsua
refactor: (#740) 알림 리스트가 포함된 알림 컨테이너 폴더 이동
9a740e3 
- component/common > component
chsua added a commit that referenced this issue Oct 17, 2023
@chsua
refactor: (#740) 알림 말줄임표 상수화 및 메세지 구체화
f2fe4ac
chsua added a commit that referenced this issue Oct 17, 2023
@chsua
refactor: (#740) 스타일 컴포넌트 컨벤션 지키기
d260548
chsua added a commit that referenced this issue Oct 17, 2023
@chsua
feat: (#740) 추후 토스트 처리할 위치 표시
0ae97ef
chsua added a commit that referenced this issue Oct 17, 2023
@chsua
refactor: (#740) 불필요한 코드 삭제
15bc644 
- msw 코드 중 무의미한 url 코드 삭제
chsua added a commit that referenced this issue Oct 17, 2023
@chsua
test: (#740) 알림 관련 mock data가 동일한 id를 가지지 않도록 수정
4133609
chsua added a commit that referenced this issue Oct 17, 2023
@chsua
refactor: (#740) 신고 처리 알림 문구 상수화 및 변경
c7785e2
chsua added a commit that referenced this issue Oct 17, 2023
@chsua
refactor: (#740) 알람 URL 수정
02ef925
chsua added a commit that referenced this issue Oct 17, 2023
@chsua
test: (#740) 잘못된 알림 아이콘 버튼 스토리명 수정
2acbcd7
chsua added a commit that referenced this issue Oct 17, 2023
@chsua
refactor: (#740) 단건 신고처리 변수명 수정
8beb5b7 
- 수정전: ReportConfirmResult
- 수정후: ReportApproveResult
chsua added a commit that referenced this issue Oct 17, 2023
@chsua
fix: (#740) .map을 사용하며 key를 설정하지 않아 발생한 오류 해결
371b263
chsua added a commit that referenced this issue Oct 17, 2023
@chsua
design: (#740) 신고조치 상세 페이지에서 사유 UI 재설정
91c861c
chsua added a commit that referenced this issue Oct 17, 2023
@chsua
feat: (#740) api url mocking이 아닌 실제 서버 url로 수정
b05f2b5
chsua added a commit that referenced this issue Oct 18, 2023
@chsua
Merge branch 'dev' into feat/#740
77236dd
chsua added a commit that referenced this issue Oct 18, 2023
@chsua
refactor: (#740) reportApproveResult 쿼리키 상수에 적용
a051294
chsua added a commit that referenced this issue Oct 18, 2023
@chsua
알림 ui 구현 및 api 연동 (#751)
88567a4 
* feat: (#740) 알림을 넣을 툴킷 컴포넌트 제작

* test: (#740) 알림을 넣을 툴킷 컴포넌트 테스트

* feat: (#740) 알림아이콘 컴포넌트 제작 및 마이페이지 아이콘과 교체

* design: 기존 --gray > --bright-gray로 수정 및 --gray 추가

* feat: (#740) 알림 아이콘을 누르는 경우 툴팁 렌더링 구현

- 배경을 누르면 툴팁 제거
- 툴팁 테두리색 변경

* design: icon button 내 icon 크기 줄이기

- 둥근 배경이 있는 경우에만 해당

* feat: (#740) 알림 관련 api 및 query hook 생성

* feat: (#740) 신고처리 알림 타입 필드명 변경

* test: (#740) msw를 위한 mockData 생성 및 핸들러 생성

* feat: (#740) 알림 쿼리훅과 UI 연결

- msw 데이터 불러오기 성공
- 더보기 클릭 시 추가 데이터 불러오기 성공
- 서스펜스, 에러바운더리, 로딩스피너 도입

* fix: (#740) msw를 위한 mockData에 undefined이 있어 수정

* feat: (#740) 알림 내용 구체적인 메세지로 전달되도록 구현

- 알림 리스트 내 아이템 UI 구현

* design: 툴팁 트리거 버튼과 중심이 일치하지 않아 위치 조정

* design: 스크롤때문에 툴팁 위치가 맞지 않아 스크롤 숨기기 구현 및 위치 조정

* feat: (#740) 알림 item을 눌렀을 경우 tooltip 닫기 구현

* feat: (#740) 읽었던 알림은 회색 처리 + hover 색상 수정

* feat: (#740) 알림 리스트를 담은 컨테이너 분리

* test: (#740) 알림 리스트를 담은 컨테이너 스토리북 생성

* feat: (#740) 리스트 사용하는 곳에서 style을 조정할 수 있도록 수정

* feat: (#740) 모바일버전 홈페이지에서 사이드바로 알림 내용 노출 구현

* feat: (#740) 알림 컨테이너 외부 크기에 맞추어 style 조정

- 사이드바에서 높이 설정
- 툴팁에서는 최대높이 및 가로길이 설정

* feat: (#740) 알림 버튼 활성화 표시를 포함하기 위해 분리

* test: (#740) 활성화 표시가 포함된 알림 트리거 버튼 테스트

* feat: (#740) 기존 알림리스트 트리거 버튼을 알림 버튼으로 교체

* feat: (#740) 활성화 정보 포함 알림버튼을 활성화정보 포함 버튼 컨테이너로 수정

* feat: (#740) 사용자 정보 response에 알림 활성화 여부 추가 및 UI 적용

- msw를 통한 적용 확인

* feat: (#740) 최근 알림 읽기 api, hook 생성 및 적용

- 비회원인 경우 알림 툴팁, 사이드가 안열리도록 조치
- 비회원인 경우 알림 툴팁, 사이드 버튼을 눌러도 api 통신되지 않도록 조치

* refactor: (#740) 최신 알림 읽기 query hook 오타수정

* feat: (#740) 단건 알림 읽기 api 및 query hook 생성

* feat: (#740) 신고 처리 결과 페이지 초안 작성

* feat: (#740) 신고 처리 결과 페이지 라우터 설정 및 진입 트리거 연결

- 신고 알림 리스트에서 페이지 연결

* feat: 신고 사유 type 강화.

- 신고 모달, 신고 api에서 신고 사유 type checking

* feat: (#740) 신고 처리 알림 api 명세 변경에 따른 수정

- 생성시간 뎁스 변경
- 신고 사유 필드 추가

* feat: (#740) 단건 신고 처리 조회 api 및 query hook 생성

* test: (#740) 단건 신고 처리 조회 msw 생성

* test: (#740) 신고된 내역 알림 list 타입 수정에 따른 mockData 수정

* feat: (#740) 신고 조치 결과 페이지 라우터 url 변경

* feat: (#740) 신고 조치 결과 페이지 내부 요소 구현

- 신고 조치 정보 추가
- 게시물인 경우 게시물 정보 통신. (서스펜스/에러 바운더리 적용)

* fix: (#740) 알림 읽기 api 위치 변경 및 잘못된 hook 이름 수정

- api 위치: userInfo > alarm
- hook 이름: useReadLatestAlarm >useReadAlarm

* feat: (#740) 알림 리스트 내 알림을 누른 경우 알림을 읽음 api 통신 구현

* fix: 마이페이지에서는 유저 프로필 내 마이페이지 이동 트리거 제거

* test: 알림 관련 api url을 mock에서 실제 baseUrl로 수정

* refactor: 단건 알림 읽기 쿼리 훅 위치 변경

- 쿼리훅/유저정보 폴더> 쿼리훅/알림 폴더

* test: 사용자 정보 api 수정에 따른 jest 테스트 코드 수정

* fix: (#740) 바뀐 알림 관련 API 명세 적용

- 컨텐츠 알림 목록 api
- 신고 조치 알림 목록 api
- 신고 조치 단건 조회  api

* test: 알림 리스트 data가 없는 경우 msw에 추가

* feat: (#740) 알림 목록에 아이템이 없는 경우의 문구 크기 설정

* feat: (#740) 글로벌 스타일에 페이지 헤더 글씨 크기 및 1.4rem 추가

* design: (#740) 신고된 내역 확인 페이지 글씨크기 키우기 및 반응형 적용

* design: 게시글 모바일버전 카테고리, 닉네임 등 1.2rem -> 1.4rem 수정

* refactor: (#740) 알림 리스트가 포함된 알림 컨테이너 폴더 이동

- component/common > component

* refactor: (#740) 알림 말줄임표 상수화 및 메세지 구체화

* refactor: (#740) 스타일 컴포넌트 컨벤션 지키기

* feat: (#740) 추후 토스트 처리할 위치 표시

* refactor: (#740) 불필요한 코드 삭제

- msw 코드 중 무의미한 url 코드 삭제

* test: (#740) 알림 관련 mock data가 동일한 id를 가지지 않도록 수정

* refactor: (#740) 신고 처리 알림 문구 상수화 및 변경

* feat: 사용자 정보에 종류(유저/관리자) 필드 추가

- 관리자 페이지와 관련된 내용이지만 PR 충돌 방지를 위해 추가

* refactor: (#740) 알람 URL 수정

* test: (#740) 잘못된 알림 아이콘 버튼 스토리명 수정

* refactor: (#740) 단건 신고처리 변수명 수정

- 수정전: ReportConfirmResult
- 수정후: ReportApproveResult

* fix: (#740) .map을 사용하며 key를 설정하지 않아 발생한 오류 해결

* design: (#740) 신고조치 상세 페이지에서 사유 UI 재설정

* feat: (#740) api url mocking이 아닌 실제 서버 url로 수정

* feat: 라우터에서 신고 처리된 내용 페이지에 RouteChangeTracker 삭제

* refactor: (#740) reportApproveResult 쿼리키 상수에 적용
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@chsua chsua

Labels
FE 🐾 개발
Projects
2023-votogether
Status: Done
Milestone
6차 데모데이
Development

Successfully merging a pull request may close this issue.

알림 ui 구현 및 api 연동 woowacourse-teams/2023-votogether
1 participant
@chsua