반려견에 대한 다양한 질문과 응답을 공유하는 커뮤니티 서비스
현재 360*740에 최적화되어있습니다. (갤럭시S8+)
퍼디는 Pet + Buddy의 합성어로
반려견을 자신의 가족, 친구와 같이 생각한다는 의미에서 네이밍되었습니다.
반려견을 키우는 주인이 서로 정보를 교환하고,
경험을 공유하며 도움을 주고받을 수 있는 플랫폼입니다.
FrontEnd.
├─assets
│ └─login
├─components
│ ├─common
│ ├─main
│ ├─qnaDetail
│ └─signup
├─constants
├─context
├─fonts
├─hooks
├─layouts
├─pages
│ ├─AuthExpert
│ ├─Bookmark
│ ├─CardDetail
│ ├─CardList
│ ├─CardSearch
│ ├─CommentAnswer
│ ├─ExpertCardList
│ ├─ExpertProfile
│ ├─ExpertProfileEditor
│ ├─FindAccount
│ ├─Login
│ ├─Main
│ ├─MyActivityInfo
│ ├─MyPage
│ ├─MyProfileEditor
│ ├─NewPost
│ ├─NotFound
│ ├─Notification
│ ├─PetProfile
│ ├─PetProfileEditor
│ ├─Review
│ └─Signup
├─routes
├─styles
│ ├─abstracts
│ ├─base
│ ├─components
│ ├─layout
│ │ ├─footer
│ │ └─header
│ └─pages
├─types
└─utils
├─initialValues
└─validate
회원가입한 사용자의 경우
로그인이 성공하면 메인페이지로 이동됩니다.
사용자가 필수 입력 값을 입력하지 않으면
해당 인풋 박스가 흔들리는 인터랙션을 적용하였습니다.
정규식을 통해 유효한 아이디, 비밀번호, 이름, 이메일을 확인하며,
아이디와 이메일은 중복검사를 하도록 구현하였습니다.
상단 캐러셀을 통해 광고와 같은 배너를 삽입할 수 있도록 구현하였습니다.
인기 Q&A, 최신 Q&A, 퍼디 신규 전문가, 커뮤니티 HOT, 커뮤니티 NEW 정보를 확인 할 수 있습니다.
Q&A 질문 글을 무한 스크롤로 구현했습니다.
더 이상 가져상 가져올 데이터가 없는 경우 마지막 페이지임을 알리는 문구를 표시합니다.
정렬 기능을 통해 최신순, 오래된 순, 인기 순으로 게시글을 확인할 수 있습니다.
Q&A와 커뮤니티 글 CRUD를 구현하였습니다.
본인이 작성한 Q&A글에는 답변 작성은 불가하며, 다른 사용자가 남긴 답변만 채택할 수 있습니다.
하나의 Q&A글에는 하나의 답변만 등록할 수 있습니다.
채택된 답변은 가장 최상단에 노출됩니다.
일반 사용자가 아닌, 전문가 사용자의 리뷰를 채택할 경우 리뷰 작성이 가능합니다.
채택된 답변은 삭제 및 수정이 불가능합니다.
_2023_04_21_21_12_55_792.mp4
작성된 게시글을 확인할 수 있으며,
댓글을 작성할 수 있습니다.
_2023_04_21_21_13_45_654.mp4
Q&A와 커뮤니티를 제목 기준으로 검색할 수 있습니다.
_2023_04_21_21_14_49_265.mp4
내 프로필 수정, 내 펫 등록, 비밀번호 변경/계정 로그아웃 등이 가능한 페이지입니다.
펫 프로필 등록, 수정을 할 수 있습니다.
작성한 프로필은 Q&A 게시글 등록 후 게시글 내 태그 형태로 나타납니다.
닉네임과 프로필 사진을 등록/변경할 수 있습니다.
'퍼디'로 시작하는 닉네임은 가입 시 자동으로 부여하고 있으므로 '퍼디'로 시작되는 닉네임은 사용할 수 없습니다.
닉네임 유효성 검사와 프로필 사진 확장자를 제한하고 있습니다.
현재는 어드민 페이지가 존재하지 않아 테스트를 위해 서류 제출 시 바로 권한을 부여하도록 해놓았습니다.
마이페이지에서 전문가 프로필 작성 시 전문가 프로필을 확인할 수 있는 페이지입니다.
본인의 프로필인 경우에만 '수정하기' 버튼이 노출됩니다.
| Back. | Front. | Front. |
|---|---|---|
 |
 |
 |
| 전상준 | 이유 | 홍주완 |
| 💎 팀원 | 👑 팀장 | 💎 팀원 |
사이드 프로젝트 회고 - 팀 빌딩부터 기획까지
JWT 리프레시 토큰 도대체 언제, 어떻게 쓰는거지?
세션스토리지에서 토큰을 강제 삭제 한다면?
리액트 서스펜스(Suspense) 사용기
도전 클린코드! API endpoint, routes Path 상수로 바꾸기
인풋 인터랙션 적용시켜보기
웹 접근성에 대해 고민해보고 적용해보기 - tabindex
사이드 프로젝트 개발 마무리 회고
UX/UI 개선 및 반응형 작업하기1
UX/UI 개선 및 반응형 작업하기2
1. 소셜 로그인(카카오) 오류
카카오 로그인 진행 시 오류가 발생합니다.
2. 코드의 중복과 매직 넘버가 존재합니다.
재사용이 가능한 코드와 클린코드를 위한 리팩토링 과정이 필요합니다.
3. 어드민 페이지와 관련 API의 부재로 현재는 전문가 서류 제출 시 자동으로 사용자의 권한을 변경하고 있습니다.
어드민 페이지를 통해 제출한 서류를 검토 후 사용자의 권한을 변경하는 로직이 필요합니다.
4. 반응형 작업
현재는 모바일(갤럭시 S8+)에 최적화되어있으며, 작업 진행중입니다.
5. form 인터랙션 통일
일부 페이지는 shake 애니메이션 인터랙션으로 required 인풋 값이 비어져있는 것을 확인할 수 있도록 하는 반면,
일부 페이지는 버튼의 활성화, 비활성화 형식으로 form이 구성되어있습니다.
따라서 form 제출의 인터랙션이 통일되도록 수정해야합니다.
6. 리프레시 토큰
서버로부터 리프레시 토큰을 받고 있으나,
기술적인 이슈로 액세스 토큰이 만료되었을 때 리프레시 토큰을 사용하는 로직이 구현되어있지 않습니다.
7. UX/UI 개선
모바일 환경을 고려하지 못한 UX/UI 개선이 필요합니다.
