로그인/회원가입 화면
메인 리스트 화면
- 내트리 아이템의 각각의 프리뷰 카드 컴포넌트 디자인
-
내트리 아이템 empty 화면 디자인
-
편지쓰기……. 어떤 트리로의 편지쓰기인가
- 미공유트리
- 초대하기를 통해 링크로 접근했던 트리
- 개발 공수가 길어질 것 같음
- 일단 미공유트리만!
- 클릭시 다이얼로그 표시
- 미공유 트리 리스트 표시
- 선택 후, 쓰러가기 버튼 클릭시 해당 트리 상세화면으로 이동
알림
// 구현을 위해 우리가 해야하는 일
- 알림 기능
- tables
- notification
- notificationId: Long;
- title: string;
- content: string;
- updatedAt: string; // 작성된 날짜
- notification_access(read)
- notification_access_id: Long;
- notificationId: Long;
- userId: Long;
- 공지 사항을 추가하고 싶을 경우
- notification에 데이터 추가
- 유저가 알림 창을 열었을 경우
- notification 데이터 전부 가져옴
- isAccessed(isRead) 항목을 추가한다.(boolean)
notification_access에 접근해서 notificationId를 where로 한 후 userId가 존재하는지 확인
true, false 판별해서 보내줘야 함
- 열었을 때, isAccessed(isRead)가 false라면, notification_access의 데이터를 추가하는 api 호출
POST notification/access/{notificationId}로 db 접근 및 데이터 추가
{
notificationId,
userId
}
한다고 하면, 읽음 유무는 안하는걸로 (최대한 나중에 하는 걸로)
메뉴
과 비슷하게
트리 작성화면
- 트리 타이틀 edit 컴포넌트 디자인
- 작성화면 전이 직후, 트리 타이틀 입력 다이얼로그 출력
- 입력 후, 아래와 같은 디자인으로 변경
- 클릭시, 트리 타이틀 입력 다이얼로그 출력
- 배경 편집
- 트리 편집하기와 동일한 방식
- 배경 타입 4개 추가되면 작업 진행
트리 완성하기 다이얼로그
- 디자인은 건들지말자
- ? 아이콘으로 툴팁 표시 및 “트리 소유자 유형”, “트리 아이템 열람”유형에 대한 설명 추가
트리 상세화면
- 트리 아이템 작성
- 트리 초대하기
- “미공유트리일 경우”, 주인에게 전달
-
편집화면으로 이동
- 메뉴 아이콘이 있는 오른쪽 상단에 편집 버튼으로 변경
-
트리의 트리 아이템
- 페이징처리 필요
- 페이지당 트리 아이템은 10개
-
트리 아이템 클릭시 트리 아이템 상세 다이얼로그 표시
- 열람 유형에 따라 표시 불가(다이얼로그가 열리지 않음)
- 읽을 수 있을 경우엔 블랙 + bold
- 읽을 수 없을 경우엔 gray
- 읽을 수 없는 거 클릭했을 시, 알림 출력
- https://element-plus.org/en-US/component/notification.html#basic-usage
- 열람 유형에 따라 표시 불가(다이얼로그가 열리지 않음)
-
본인 트리 detail일 경우, 메뉴 아이콘이 있는 오른쪽 상단에 삭제 버튼
트리 아이템 작성화면, 트리 아이템 상세 화면
- 편지지 종류 디자인 변경
- 다이얼로그의 여백이 너무 넓다
- 전체적으로 여백을 줄이자, 가운데로 모아보자
