Previously I Learned

정영찬·2023년 5월 31일

메가바이트 스쿨 프론트엔드 4기

목록 보기

74/77

https://github.com/FE4react5/Hedwig/tree/develop

Hedwig는 twitter 벤치마킹 프라이빗 커뮤니티 SNS 서비스입니다.
프라이빗 서비스이기 때문에 서비스 이용을 위해선 로그인 또는 회원가입을 해야만 컨텐츠 보기가 가능합니다.
유저 프로필의 이미지는 기본으로 제공 됩니다.
메인피드 기준 상단 탭 왼쪽부터 순서대로 메인 | 내가 좋아요 한 글 | 내가 쓴 글을 볼 수 있습니다.
- 메인피드에서는 각 게시글의 댓글 갯수와 좋아요 갯수를 확인할 수 있습니다.
- 메인피드에서 유저는 각 게시글에 좋아요를 누를 수 있고 취소를 할 수 있습니다.
유저는 게시글을 클릭 해 게시글 상세 페이지로 진입 할 수 있습니다.
- 게시글 상세 페이지에서 타 유저의 댓글을 확인 할 수 있으며 댓글도 작성할 수 있습니다.
- 게시글 상세 페이지에서 자신이 작성한 댓글은 수정 및 삭제가 가능 합니다.
메인피드 기준 하단 네비게이션 왼쪽부터 글쓰기 | 홈 | 프로필(으)로 구성되어 있습니다.
- 글쓰기 네비게이션을 클릭 시 글쓰기 페이지로 이동합니다.
  - 글쓰기 페이지에서는 최대 150자 까지 작성할 수 있습니다.
  - 글쓰기 페이지에서는 한 가지의 미디어만 추가 할 수 있습니다.
  - 글쓰기 페이지에서 다른 미디어를 추가 시 교체 됩니다.
- 홈 네비게이션을 클릭 시, 메인 피드로 이동합니다.
- 프로필 네비게이션을 클릭 시, 로그아웃 슬라이더가 출력됩니다.
  - 로그아웃 슬라이더를 클릭 시, 로그아웃 팝업이 출력됩니다.
  - 로그아웃을 클릭하면 다시 인증: 로그인 또는 회원가입 권유 페이지로 이동합니다.

당직 연차 달력 프로젝트 with BE

https://github.com/fastcampusmini03/calendarFE/tree/develop

메인페이지

헤더, 달력 컴포넌트, 푸터, 로그인,회원가입버튼으로 구성되어있습니다.
헤더 : 서비스의 이름과 함께 로그인 후에는 우측에 drawer가 생성되어 마이페이지, 로그아웃의 기능을 사용할수 있습니다.
달력 컴포넌트 : 본인을 포함한 사용자들이 신청하여 승인된 일정을 보여줍니다. 로그인한 유저에 한해서 원하는 일정을 드래그&클릭 하여 일정을 추가할수 있습니다.
- 만약 로그인 하지 않은경우 생성/수정이 제한되며 로그인을 하라는 텍스트가 작성된 스낵바가 좌측하단에 생성됩니다.
- 설령 로그인 했다고 해도 다른 사용자의 일정을 수정/삭제 할수 없도록 했습니다.
- 수정/생성을 위한 form에는 allDay라는 체크항목이 존재하며 이를 통해 연차/당직을 구분합니다.
- 일정 이름, 기간, 연차/당직을 선택한 다음 버튼을 클릭하면 달력에 표시되지만 관리자가 승인하지 않았기 때문에 승인중을 표시하는 색깔로 일정이 표시됩니다
- 관리자 측에서 승인을 하면 승인됨을 보여주기 위해서 일정의 배경색이 다른 색상으로 변경됩니다.
- 만약 승인되지 않으면 지워집니다.
푸터 : 이 프로젝트에 땀과 쏟은 사람들의 이름이 적혀있습니다.
로그인, 회원가입 버튼 : 각각의 버튼을 누르면 해당 페이지로 이동합니다.

로그인 페이지
아이디(이메일), 비밀번호를 입력해서 로그인버튼을 누를때 올바른 정보일 경우 메인 페이지로 이동합니다
- 만약 관리자 아이디일경우 메인 페이지가 아니라 관리자 페이지로 이동합니다.
- 계정이 없는 사람을 위해서 로그인 버튼 하단에 회원가입 페이지로 이동할수 있는 링크를 추가했습니다.
회원가입 페이지
계정이 없는 사용자가 계정을 만들기 위해 이용하는 페이지 입니다.
사용자의 이름과 이메일, 비밀번호, 비밀번호 확인을 입력하고 회원가입을 진행합니다.
회원가입이 성공하면 좌측하단에 환영멘트가 표시되는 스낵바가 보입니다.

마이 페이지
로그인한 사용자만 들어갈수 있는 페이지 입니다.
사용자의 정보를 볼수 있으며 수정이 가능합니다.
사용자가 요청한 일정 목록을 볼수 있으며, 승인된 목록을 열람할수 있습니다.
이 때 '년'과 '월'을 선택하면 해당 일자에 승인/신청한 일정을 볼수 있습니다.

관리자 페이지
관리자의 계정으로 로그인하면 제일 먼저 보이는 페이지입니다.
좌측에는 달력 컴포넌트로 사용자들의 일정을 볼수 있으며, 우측에는 연차/당직 신청 목록을 보여줍니다.
등록/수정/삭제에 대한 탭이 존재하며, 각각의 탭에 해당하는 요청 리스트를 보여주게됩니다.
무한스크롤로 구현하여 전체 데이터를 보여줄수 있게 했으며, 마지막 데이터가 렌더링 되면 하단에 마지막페이지라를 뜻하는 텍스트가 표시됩니다.
각각의 리스트 항목에는 승인 거절 버튼이 있으며, 버튼을 누르면 의사를 다시 묻는 dialog가 나타납니다
승인/ 거절은 각각의 탭마다 다른 동작을 취합니다.
- 등록 : 승인시 일정의 색까리 변경되며 일정 데이터에 저장, 거절 시 일정 데이터에 보이지 않음
- 수정 : 승인시 일정의 내용과 일정이 수정됨, 거절 시 수정전 데이터로 유지
- 삭제 : 승인시 일정 데이터에 보이지 않음, 거절시 데이터 유지
사용자 관리 페이지
현재 회원가입된 사용자 목록을 볼 수 있는 페이지입니다.
상단에 input으로 사용자 검색을 할수 있으며, 검색 하기 전에는 전체 유저의 데이터를 보여줍니다.
이때 무한 스크롤 기능이 존재하며 한번에 8명씩 추가로 표시가 됩니다
input에 검색하면 0.5초 뒤에 해당 사용자 이름과 일치하는 목록만 나오게 됩니다.
동명이인이 존재함을 고려해서 이메일도 같이 표시되게 함으로써 헷갈리지 않게 제작했습니다.
항목을 클릭하면 유저의 권한을 변경할수 있는 팝업이 나타납니다.
관리자, 일반중 하나를 선택하여 변경을 누르고 confirm 시 권한이 변경되어 실시간으로 업데이트합니다.