charkra UI 기반기능 구현태그상세 기능담당자상태메인페이지메인 페이지 상단에 그라데이션 배경과 머쓱이 이미지가 존재한다메인페이지나만의 머쓱이 만들기 버튼을 누르면 머쓱이 추가 페이지로 이동한다Done메인페이지메인 페이지 하단에 머쓱이 카드 목록(카드 5개)를 볼 수 있다메인페이지각 포스트 하단의 메시지의 아이콘과 메시지의 개수를 보여준다.메인페이지전체 머쓱이 카드 중, 댓글 개수가 많은 순서대로 머쓱이 카드를 보여준다.메인페이지댓글 개수가 같을 때는, 이름 순서대로 머쓱이 카드를 배치한다.메인페이지하단의 물방울 아이콘이나 좌우 화살표 아이콘을 통해서 다른 머쓱이 카드 목록을 볼 수 있다.메인페이지카드에서 설명이 1줄이 이상되는 경우 ellipsis로 …처리머쓱이 생성 페이지뒤로가기 버튼을 누르면 navigate(-1) 를 통해서 이전 페이지로 이동한다Done머쓱이 생성 페이지머쓱이 이름의 최대 길이는 10자까지 입력할 수 있다머쓱이 생성 페이지머쓱이 테마를 선택하면 화면에 해당 머쓱이 이미지를 보여준다머쓱이 생성 페이지편지를 쓸 사람들에게 보여줄 멘트는 80자까지 입력할 수 있다머쓱이 생성 페이지화살표를 누르면 다음 머쓱이를 계속 볼 수 있다 ⇒ 화면에는 3개의 머쓱이만 보인다. 계속 순회하는 구조 or 5개 머쓱이 중에서 선택한다.Router각자 필요한 페이지 라우터 연결Done회원가입이메일, 유저네임, 비밀번호를 입력하면 회원가입이 가능하다Done회원가입눈 아이콘을 누르면 *이 아닌 text로 보인다Done회원가입이메일, 닉네임, 비밀번호 유효성 검사Done회원가입이메일, 유저네임, 비밀번호를 입력하면 회원가입이 가능하다Done회원가입Sign in 버튼을 누르면 로그인 페이지로 이동합니다Done로그인사용자는 이메일과 비밀번호로 로그인을 할 수 있다Done로그인로그인 성공시 메인페이지로 이동합니다Done로그인이메일 + 비밀번호 유효성 검사Done로그인create an account를 누르면 회원가입 페이지로 이동Done로그인로그인 토큰은 세션스토리지에 암호화해서 저장한다비밀번호 변경비밀번호 변경 페이지 구현 ( 유효성 검사는 회원가입과 동일 )Done환경설정프로젝트 환경설정Done404404 페이지 구현Done슬랙 인증 서버슬랙 사용자 인증을 위한 서버 구축Done슬랙 인증 서버슬랙 서버에서 사용자에게 DM으로 인증 링크 발송Done슬랙 인증 서버인증 링크 클릭시 slack/confirmation 페이지로 리다이랙트Done슬랙 인증 서버슬랙 인증 확인 페이지에 임시 토큰을 url에 담아서 전송Done헤더상단 네비바상단 네비바의 머쓱레터 로고를 클릭하면 메인페이지로 이동한다Done상단 네비바종 알림 아이콘을 누르면 슬램 알림 인증 드롭다운이 열린다Done슬랙 인증 페이지슬랙 인증 페이지 디자인 및 UI 구현Done슬랙 인증 페이지슬랙 인증 임시토큰 확인을 위한 api 구현Done슬랙 인증 페이지사용자는 데브코스 프/백을 선택하고 자신의 슬랙 id를 입력하여 폼을 제출한다Done슬랙 인증 페이지슬랙 아이디를 찾는 방법을 노션으로 정리해서 링크로 연결한다Done슬랙 인증 페이지사용자가 슬랙 DM으로 온 인증링크를 클릭했을때 suspense를 이용해 슬랙id에대한 데이터가 있는지 확인하며 그 전까지는 loading 컴포넌트를 보여준다Done상단 네비바헤더에서 프로필 아이콘을 누르면 (프로필, 비밀번호 변경) 드롭다운이 열린다Done헤더상단 네비바헤더 UI 구현 + 로그인을 안한 상태인 경우 프로필, 알림 아이콘 안보이고 로그인 버튼이 보이기Done상단 네비바로그인 후 헤더의 프로필 이미지를 누르면 마이 페이지로 이동한다.Done로그아웃상단 네비바로그아웃 구현( 로그아웃 API 통신 + 세션 및 쿼리 clear)Done검색페이지상단 네비바의 사용자 조회 input에서 사용자 검색시 검색 페이지로 이동한다.Done검색페이지검색 페이지 디자인 구현 - FigmaDone검색페이지검색 페이지 UI 구현 + UserCardDone검색페이지사용자 검색 API 구현 및 결과 data 연결Done한눈에 보기 모달Accordion UI 형식으로 편지들을 볼 수 있게 구현 + 스크롤Done편지 한개 보기 모달1개의 편지 정보만 보이는 모달 구현Done환경설정global font, color 차크라에 추가DoneRouter헤더 고정하도록 Router 수정Done슬랙 알림Slack API 조사Done반응형마이페이지화면 좌측에서 사용자의 상세 정보를 확인할 수 있다Done마이페이지로그인한 본인의 페이지인 경우 이미지 업로드 버튼과 프로필 편집하기 버튼을 볼 수 있다.Done마이페이지이미지 업로드를 선택하면 새로운 이미지를 업로드할 수 있다. (input type=file)Done마이페이지프로필 편집하기 버튼을 누르면 수정할 수 있는 폼이 등장한다.Done마이페이지화면 우측의 상단에 머쓱이가 몇 마리 있는지 알 수 있는 텍스트가 있다.Done마이페이지새로운 머쓱이 추가 버튼을 클릭하면 머쓱이 추가 페이지로 이동한다Done마이페이지마이페이지에서 생성된 머쓱이를 볼 수 있다(카드형식) + 무한스크롤Done마이페이지타인의 마이페이지에 접근했을 때는 버튼(머쓱이 추가, 이미지 업로드, 프로필 편집)이 보이지 않는다Done장식 추가 모달사용자는 다른 사용자의 머쓱이 페이지에서 장식을 추가하면서 코멘트를 작성할 수 있다 ⇒ react hook form 사용장식 추가 모달장식은 8개만 보이거나 더 장식이 많아질 경우를 대비해 페이지네이션Done머쓱이 상세페이지다른 사용자의 머쓱이인 경우 머쓱이 이미지의 특정 위치를 클릭하면 편지를 작성할 수 있는 모달이 등장한다머쓱이 상세페이지이미 작성된 편지는 머쓱이의 특정 위치에 장식으로 표현된다머쓱이 상세페이지자신의 머쓱이인 경우 장식을 클릭하면 해당 편지를 읽을 수 있는 모달이 등장한다머쓱이 상세페이지자신의 머쓱이인 경우 받은 편지의 갯수와 리스트로 보기 버튼을 확인할 수 있다머쓱이 상세페이지리스트로 보기 버튼을 클릭하면 받은 모든 편지를 확인할 수 있는 모달이 등장한다슬랙 알림[프론트] 편지 전송시 슬랙 서버에 폼 제출하는 슬랙 mutation api 연결Done슬랙 알림[프론트] 편지 폼 제출시 슬랙 서버로 폼 전송하는 mutation api 구현Done머쓱이 상세페이지머쓱이의 이름과 간단한 멘트를 확인할 수 있다In progress로딩
