- 배포 URL :
- Test ID :
- Test PW :
- README는 책을 좋아하는 사람들이 자신의 책 취향을 공유하고, 다 읽은 책을 판매할 수 있는 SNS입니다.
- 개인의 프로필 페이지에 좋아하는 구절 등 책에 대한 정보를 작성하고 판매하고 싶은 상품을 등록할 수 있습니다.
- 검색을 통해 책 취향이 비슷한 다른 유저들의 피드를 구경할 수 있습니다.
- 다양한 유저들을 팔로우하며 마음에 드는 게시글에 좋아요를 누르거나 댓글을 작성할 수 있습니다.
- 유저 간 채팅 기능을 활용해 책 거래 및 소통의 편의성을 증진시킬 예정입니다.
| 고지연 | 김민제 | 양희지 | 지창언 |
|---|---|---|---|
 @yeon1615 |
 @Cheorizzang |
 @heejiyang |
 @journey-ji |
- Front : HTML, React, styled-components, Recoil
- Back-end : 제공된 API 활용
- 버전 및 이슈관리 : Github, Github Issues, Github Project
- 협업 툴 : Discord, notion
- 서비스 배포 환경 : Netlify
- 디자인 : Figma
├── README.md
├── .eslintrc.js
├── .gitignore
├── .prettierrc.json
├── package-lock.json
├── package.json
│
├── public
│ └── index.html
│
└── src
├── App.jsx
├── index.jsx
│
├── api
│ └── mandarinAPI.js
│
├── asset
│ ├── fonts
│ ├── css_sprites.png
│ ├── logo-404.svg
│ └── logo-home.svg
│ .
│ .
│ .
│
├── atoms
│ ├── LoginData.js
│ └── LoginState.js
│
├── common
│ ├── alert
│ │ ├── Alert.jsx
│ │ └── Alert.Style.jsx
│ ├── button
│ ├── comment
│ ├── inputBox
│ ├── post
│ ├── postModal
│ ├── product
│ ├── tabMenu
│ ├── topBanner
│ └── userBanner
│
├── pages
│ ├── addProduct
│ │ ├── AddProduct.jsx
│ │ └── AddProduct.Style.jsx
│ ├── chatList
│ ├── chatRoom
│ ├── emailLogin
│ ├── followerList
│ ├── followingList
│ ├── home
│ ├── join
│ ├── page404
│ ├── postDetail
│ ├── postEdit
│ ├── postUpload
│ ├── productEdit
│ ├── profile
│ ├── profileEdit
│ ├── profileSetting
│ ├── search
│ ├── snsLogin
│ └── splash
│
└── styles
└── Globalstyled.jsx
- UI
- 페이지 : 홈, 검색, 게시글 작성, 게시글 수정, 게시글 상세, 채팅방
- 공통 컴포넌트 : 게시글 템플릿, 버튼
- 기능
- 유저 검색, 게시글 등록 및 수정, 게시글 상세 확인, 댓글 등록, 팔로워 게시글 불러오기, 좋아요 기능
- UI
- 페이지 : 프로필 설정, 프로필 수정, 팔로잉&팔로워 리스트, 상품 등록, 상품 수정, 채팅 목록, 404 페이지
- 공통 컴포넌트 : 탭메뉴, InputBox, Alert 모달, 댓글
- 기능
- 프로필 설정 및 수정 페이지 유저 아이디 유효성 및 중복 검사, 상품 등록 및 수정
- UI
- 페이지 : splash 페이지, sns 로그인 페이지, 로그인, 회원가입
- 공통 컴포넌트 : 상품 카드, 사용자 배너
- 기능
- splash 페이지, sns 로그인 페이지, 로그인 유효성 및 중복 검사 , 회원가입 유효성 및 중복 검사, 이메일 검증, 프로필 설정
- UI
- 페이지 : 사용자 프로필 페이지
- 공통 컴포넌트 : 탑배너, 하단 모달창
- 기능
- 팔로우 & 언팔로우, 로그아웃, 하단 모달창, 댓글 삭제, 게시글 삭제, 상품 삭제, 사용자 게시글 앨범형 이미지, 탑 배너 뒤로가기 버튼, Alert 모달
- 전체 개발 기간 : 2022-12-09 ~ 2022-12-31
- UI구현 : 2022-12-09 ~ 2022-12-16
- 기능 구현 : 2022-12-17 ~ 2022-12-31
- GitHub Projects와 Issues를 사용하여 진행 상황을 공유했습니다.
- 주간회의를 진행하며 작업 순서와 방향성에 대한 고민을 나누고 GitHub Wiki에 회의 내용을 기록했습니다.
- 서비스 접속 초기화면으로 splash 화면이 잠시 나온 뒤 다음 페이지가 나타납니다.
- 로그인이 되어 있지 않은 경우 : SNS 로그인 페이지
- 로그인이 되어 있는 경우 : README 홈 화면
- SNS(카카오톡, 구글, 페이스북) 로그인 기능은 구현되어 있지 않습니다.
| 초기화면 |
|---|
 |
- 이메일 주소와 비밀번호를 입력하면 입력창에서 바로 유효성 검사가 진행되고 통과하지 못한 경우 각 경고 문구가 입력창 하단에 표시됩니다.
- 이메일 주소의 형식이 유효하지 않거나 이미 가입된 이메일일 경우 또는 비밀번호가 6자 미만일 경우에는 각 입력창 하단에 경구 문구가 나타납니다.
- 작성이 완료된 후, 유효성 검사가 통과된 경우 다음 버튼이 활성화되며, 버튼을 클릭하면 프로필 설정 화면이 나타납니다.
| 회원가입 |
|---|
 |
- 회원가입 페이지의 유효성 검사를 통과해야 진입할 수 있습니다.
- 프로필 설정에 필요한 프로필 사진, 사용자 이름, 계정 ID, 소개를 입력받습니다.
- 사용자 이름과 계정 ID는 필수 입력사항입니다.
- 계정 ID에는 형식 및 중복 검사가 진행됩니다.
- 프로필 사진은 등록하지 않을 경우 기본 이미지가 등록됩니다.
| 프로필 설정 |
|---|
 |
- 이메일 주소와 비밀번호를 입력하면 입력창에서 바로 유효성 검사가 진행되고 통과하지 못한 경우 각 경고 문구가 입력창 하단에 표시됩니다.
- 이메일 주소의 형식이 유효하지 않거나 비밀번호가 6자 미만일 경우에는 각 입력창 하단에 경구 문구가 나타납니다.
- 작성이 완료된 후, 유효성 검사가 통과된 경우 로그인 버튼이 활성화됩니다.
- 로그인 버튼 클릭시 이메일 주소 또는 비밀번호가 일치하지 않을 경우에는 경고 문구가 나타나며, 로그인에 성공하면 홈 피드 화면으로 이동합니다.
| 로그인 |
|---|
 |
- 상단 탭의 kebab menu를 클릭 후 나타나는 모달창의 로그아웃 버튼을 클릭하면 확인창이 뜹니다.
- 로그아웃시 로컬 저장소의 토큰 값과 사용자 정보를 삭제하고 초기화면으로 이동합니다.
| 로그아웃 |
|---|
 |
- 상단 탭 : 각 페이지별로 다른 종류의 버튼을 가지고 있습니다.
- 뒤로가기 : 브라우저 상에 기록된 이전 페이지로 돌아갑니다.
- 검색 : 사용자 검색 페이지로 이동합니다.
- 사용자 이름 : 채팅룸 페이지의 경우 상대방의 사용자 이름을 보여줍니다.
- kebab menu : 각 페이지 또는 컴포넌트에 따른 하단 모달창을 생성합니다.
- 상품, 댓글, 게시글 컴포넌트 - 삭제, 수정, 신고하기
- 사용자 프로필 페이지 - 설정 및 사용자 정보, 로그아웃
- 하단 탭 : 홈, 채팅, 게시물 작성, 프로필 아이콘을 클릭하면 각각 홈 피드, 채팅 목록, 게시글 작성 페이지, 내 프로필 페이지로 이동합니다.
| 탭 메뉴 |
|---|
 |
- 자신이 팔로우 한 유저의 게시글이 최신순으로 보여집니다.
- 팔로우 한 유저가 없거나, 팔로워의 게시글이 없을 경우 검색 버튼이 표시됩니다.
- 게시글의 상단 유저배너 클릭 시 게시글을 작성한 유저의 프로필 페이지로, 본문 클릭 시 게시글 상세 페이지로 이동합니다.
| 팔로우하는 유저가 없을 때 | 팔로우하는 유저가 있을 때 |
|---|---|
 |
 |
- 사용자 이름 혹은 계정 ID로 유저를 검색할 수 있습니다.
- 검색어와 일치하는 단어는 파란색 글씨로 표시됩니다.
- 클릭 시 해당 유저의 프로필 페이지로 진입합니다.
| 검색 |
|---|
 |
- 상단 프로필란에 프로필 수정과 상품 등록 버튼이 나타납니다.
- 판매중인 상품란에는 사용자가 판매하는 상품이 등록되며, 판매중인 상품이 없을 경우에는 영역 자체가 나타나지 않습니다.
- 게시글란은 상단의 리스트형과 앨범형 두 개의 버튼을 통해서 나누어 볼 수 있습니다.
- 리스트형의 경우, 사용자가 작성한 글 내용과 이미지, 좋아요와 댓글의 수를 보여줍니다.
- 앨범형의 경우, 사용자 게시글 중 이미지가 있는 글만 필터링해 바둑판 배열로 보여줍니다.
- 게시글을 클릭하면 각 게시글의 상세페이지로 이동합니다.
| 리스트형 & 앨범형 게시글 | 팔로잉 & 팔로워 리스트 |
|---|---|
 |
 |
- 버튼을 클릭해 해당 사용자를 팔로우 또는 언팔로우할지 결정할 수 있으며 팔로워 수의 변화가 페이지에 즉시 반영됩니다.
| 팔로우 & 언팔로우 |
|---|
 |
- 사용자 프로필 이미지, 이름, 아이디, 소개 중 한 가지를 수정하면 저장 버튼이 활성화됩니다.
- 계정 ID의 유효한 형식 및 중복 검사를 통과하지 못하면 하단에 경고 문구가 나타나며 저장 버튼이 비활성화됩니다.
- 사용자 이름과 소개는 공백으로 시작할 수 없습니다.
- 프로필 수정이 완료되면 내 프로필 페이지로 이동합니다.
| 초기화면 |
|---|
 |
- 글이 입력되거나 사진이 첨부되면 업로드 버튼이 활성화됩니다.
- 최대 세 장까지 이미지 첨부가 가능하며 첨부한 파일을 취소할 수 있습니다.
- 게시글 하단에 업로드 날짜가 표시됩니다.
| 게시글 작성 |
|---|
 |
- 자신의 게시글일 경우 모달 버튼을 통해 수정, 삭제가 가능합니다.
- 게시글 삭제 버튼 클릭 시, 게시글을 삭제하고 페이지를 리렌더링하여 삭제된 내용을 페이지에 반영합니다.
- 타 유저의 게시글일 경우 모달 버튼을 통해 신고할 수 있습니다.
| 게시글 수정 & 삭제 |
|---|
 |
- 댓글이 몇 분 전에 작성되었는지 표시됩니다.
- 좋아요와 댓글 수는 실시간으로 상세 페이지에 반영됩니다.
- 자신의 댓글일 경우 모달 버튼을 통해 삭제가 가능합니다.
- 타 유저의 댓글일 경우 모달 버튼을 통해 신고할 수 있습니다.
| 좋아요 & 댓글 |
|---|
 |
- 상품 이미지, 상품명, 가격, 판매 링크를 필수로 입력해야 저장 버튼이 활성화됩니다.
- 상품 가격은 숫자만 입력할 수 있으며, 숫자를 입력하면 자동으로 원 단위로 변환됩니다.
- 상품 가격이 0원일 경우 버튼이 비활성화되며 하단에 경고 문구가 나타납니다.
- 상품명과 판매 링크는 공백으로 시작할 수 없습니다.
- 상품 등록이 완료되면 내 프로필 페이지로 이동합니다.
| 상품 등록 |
|---|
 |
- 상품 이미지, 상품명, 가격, 판매 링크 중 한 가지를 수정하면 저장 버튼이 활성화됩니다.
- 상품 수정이 완료되면 내 프로필 페이지로 이동합니다.
- 상품 삭제 버튼 클릭 시, 상품을 삭제하고 페이지를 리렌더링하여 삭제된 내용을 페이지에 반영합니다.
| 상품 수정 & 삭제 |
|---|
 |
- 채팅 목록에서 아직 읽지 않은 채팅에는 좌측 상단의 파란색 알림을 띄워줍니다.
- 채팅방에서 메시지를 입력하거나 파일을 업로드하면 전송 버튼이 활성화됩니다.
- 채팅방에서 우측 상단의 채팅방 나가기 모달 버튼을 통해 채팅 목록 페이지로 이동할 수 있습니다.
- 채팅 메시지 전송 및 수신 기능은 개발 예정입니다.
| 채팅 |
|---|
 |
- React
- 컴포넌트화를 통해 추후 유지보수와 재사용성을 고려했습니다.
- styled-component
- props에 따른 조건부 스타일링이 가능합니다.
- 컴포넌트 스타일링이 가능하여 React의 컴포넌트화에 최적화되어 있습니다.
- 빌드될 때 고유한 클래스 이름이 부여되어 따로 네이밍을 고려할 필요가 없습니다.
- S dot naming 을 통해 일반 컴포넌트와 스타일드 컴포넌트를 쉽게 구별하도록 했습니다.
- Sass 문법을 사용할 수 있습니다.
- 최상위 컴포넌트를 만들어 props로 유저 정보를 내려주는 방식의 경우, 불필요한 props 전달이 발생합니다. 따라서, 필요한 컴포넌트 내부에서만 상태 값을 가져다 사용하기 위해 상태 관리 라이브러리를 사용하기로 했습니다.
- redux가 아닌 recoil을 채택한 이유
- recoil은 React만을 위한 라이브러리로 사용법도 기존의 useState 훅을 사용하는 방식과 유사해 훅을 사용해본 경험이 있는 경우에는 쉽게 진입할 수 있습니다.
- 또한 Redux보다 훨씬 적은 코드라인으로 작동 가능하다는 장점이 있습니다.
- 로그인과 최초 프로필 설정 시 유저 정보를 atom에 저장하며 필요한 페이지나 컴포넌트에서 구독하는 방식으로 사용했습니다.
- 정해진 규칙에 따라 자동적으로 코드 스타일을 정리해 코드의 일관성을 유지하고자 했습니다.
- 코드 품질 관리는 eslint에, 코드 포맷팅은 prittier에 일임해 사용했습니다.
- airbnb의 코딩 컨벤션을 참고해 사용했고, 예외 규칙은 팀원들과 협의했습니다.
- 협업 시 매번 컨벤션을 신경 쓸 필요 없이 빠르게 개발하는 데에 목적을 두었습니다.
- github-flow 전략을 기반으로 main, develop 브랜치와 feature 보조 브랜치를 운용했습니다.
- main, develop, Feat 브랜치로 나누어 개발을 하였습니다.
- main 브랜치는 배포 단계에서만 사용하는 브랜치입니다.
- develop 브랜치는 개발 단계에서 git-flow의 master 역할을 하는 브랜치입니다.
- Feat 브랜치는 기능 단위로 독립적인 개발 환경을 위하여 사용하고 merge 후 각 브랜치를 삭제해주었습니다.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent