📖 책 취향 공유 서비스앱 README

• 배포 URL : https://ohmycode-readme.netlify.app
• Test ID : readme@test.com
• Test PW : 123123

프로젝트 소개

• README는 책을 좋아하는 사람들이 자신의 책 취향을 공유하고, 다 읽은 책을 판매할 수 있는 SNS입니다.
• 개인의 프로필 페이지에 좋아하는 구절 등 책에 대한 정보를 작성하고 판매하고 싶은 책을 등록할 수 있습니다.
• 검색을 통해 책 취향이 비슷한 다른 유저들의 피드를 구경할 수 있습니다.
• 다양한 유저들을 팔로우하며 마음에 드는 게시글에 좋아요를 누르거나 댓글을 작성할 수 있습니다.

팀원 구성

고지연	김민제	양희지	지창언
@yeon1615	@Cheorizzang	@heejiyang	@journey-ji

1. 개발 환경

• Front : HTML, React, styled-components, Recoil
• Back-end : 제공된 API 활용
• 버전 및 이슈관리 : Github, Github Issues, Github Project
• 협업 툴 : Discord, Notion, Github Wiki
• 서비스 배포 환경 : Netlify
• 디자인 : Figma
• 커밋 컨벤션
• 코드 컨벤션
• 스프라이트

2. 채택한 개발 기술과 브랜치 전략

React, styled-component

• React
  • 컴포넌트화를 통해 추후 유지보수와 재사용성을 고려했습니다.
  • 유저 배너, 상단과 하단 배너 등 중복되어 사용되는 부분이 많아 컴포넌트화를 통해 리소스 절약이 가능했습니다.
• styled-component
  • props를 이용한 조건부 스타일링을 활용하여 상황에 알맞은 스타일을 적용시킬 수 있었습니다.
  • 빌드될 때 고유한 클래스 이름이 부여되어 네이밍 컨벤션을 정하는 비용을 절약할 수 있었습니다.
  • S dot naming을 통해 일반 컴포넌트와 스타일드 컴포넌트를 쉽게 구별하도록 했습니다.

Recoil

• 최상위 컴포넌트를 만들어 props로 유저 정보를 내려주는 방식의 경우 불필요한 props 전달이 발생합니다. 따라서, 필요한 컴포넌트 내부에서만 상태 값을 가져다 사용하기 위해 상태 관리 라이브러리를 사용하기로 했습니다.
• Redux가 아닌 Recoil을 채택한 이유
  • Recoil은 React만을 위한 라이브러리로, 사용법도 기존의 useState 훅을 사용하는 방식과 유사해 학습비용을 낮출 수 있었습니다.
  • 또한 Redux보다 훨씬 적은 코드라인으로 작동 가능하다는 장점이 있었습니다.
• 로그인과 최초 프로필 설정 시 유저 정보를 atom에 저장하여 필요한 컴포넌트에서 구독하는 방식으로 사용했습니다.

eslint, prettier

• 정해진 규칙에 따라 자동적으로 코드 스타일을 정리해 코드의 일관성을 유지하고자 했습니다.
• 코드 품질 관리는 eslint에, 코드 포맷팅은 prettier에 일임해 사용했습니다.
• airbnb의 코딩 컨벤션을 참고해 사용했고, 예외 규칙은 팀원들과 협의했습니다.
• 협업 시 매번 컨벤션을 신경 쓸 필요 없이 빠르게 개발하는 데에 목적을 두었습니다.

브랜치 전략

• Git-flow 전략을 기반으로 main, develop 브랜치와 feature 보조 브랜치를 운용했습니다.
• main, develop, Feat 브랜치로 나누어 개발을 하였습니다.
  • main 브랜치는 배포 단계에서만 사용하는 브랜치입니다.
  • develop 브랜치는 개발 단계에서 git-flow의 master 역할을 하는 브랜치입니다.
  • Feat 브랜치는 기능 단위로 독립적인 개발 환경을 위하여 사용하고 merge 후 각 브랜치를 삭제해주었습니다.

3. 프로젝트 구조

├── 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
     ├── routes
     │     ├── privateRoutes.jsx
     │     └── privateRoutesRev.jsx  
     └── styles
           └── Globalstyled.jsx

4. 역할 분담

🍊고지연

• UI
  • 페이지 : 홈, 검색, 게시글 작성, 게시글 수정, 게시글 상세, 채팅방
  • 공통 컴포넌트 : 게시글 템플릿, 버튼
• 기능
  • 유저 검색, 게시글 등록 및 수정, 게시글 상세 확인, 댓글 등록, 팔로워 게시글 불러오기, 좋아요 기능

👻김민제

• UI
  • 페이지 : 프로필 설정, 프로필 수정, 팔로잉&팔로워 리스트, 상품 등록, 상품 수정, 채팅 목록, 404 페이지
  • 공통 컴포넌트 : 탭메뉴, InputBox, Alert 모달, 댓글
• 기능
  • 프로필 설정 및 수정 페이지 유저 아이디 유효성 및 중복 검사, 상품 등록 및 수정

😎양희지

• UI
  • 페이지 : splash 페이지, sns 로그인 페이지, 로그인, 회원가입
  • 공통 컴포넌트 : 상품 카드, 사용자 배너
• 기능
  • splash 페이지, sns로그인 페이지, 로그인 유효성 및 중복 검사, 회원가입 유효성 및 중복 검사, 이메일 검증, 프로필 설정, 접근제한 설정

🐬지창언

• UI
  • 페이지 : 사용자 프로필 페이지
  • 공통 컴포넌트 : 탑배너, 하단 모달창
• 기능
  • 팔로우 & 언팔로우, 로그아웃, 하단 모달창, 댓글 삭제, 게시글 삭제, 상품 삭제, 사용자 게시글 앨범형 이미지, 탑 배너 뒤로가기 버튼, Alert 모달

5. 개발 기간 및 작업 관리

개발 기간

• 전체 개발 기간 : 2022-12-09 ~ 2022-12-31
• UI 구현 : 2022-12-09 ~ 2022-12-16
• 기능 구현 : 2022-12-17 ~ 2022-12-31

작업 관리

• GitHub Projects와 Issues를 사용하여 진행 상황을 공유했습니다.
• 주간회의를 진행하며 작업 순서와 방향성에 대한 고민을 나누고 GitHub Wiki에 회의 내용을 기록했습니다.

6. 신경 쓴 부분

• 접근제한 설정

• Recoil을 통한 상태관리 및 유지

7. 페이지별 기능

[초기화면]

• 서비스 접속 초기화면으로 splash 화면이 잠시 나온 뒤 다음 페이지가 나타납니다.
  • 로그인이 되어 있지 않은 경우 : SNS 로그인 페이지
  • 로그인이 되어 있는 경우 : README 홈 화면
• SNS(카카오톡, 구글, 페이스북) 로그인 기능은 구현되어 있지 않습니다.

초기화면

[회원가입]

• 이메일 주소와 비밀번호를 입력하면 입력창에서 바로 유효성 검사가 진행되고 통과하지 못한 경우 각 경고 문구가 입력창 하단에 표시됩니다.
• 이메일 주소의 형식이 유효하지 않거나 이미 가입된 이메일일 경우 또는 비밀번호가 6자 미만일 경우에는 각 입력창 하단에 경구 문구가 나타납니다.
• 작성이 완료된 후, 유효성 검사가 통과된 경우 다음 버튼이 활성화되며, 버튼을 클릭하면 프로필 설정 화면이 나타납니다.

회원가입

[프로필 설정]

• 회원가입 페이지의 유효성 검사를 통과해야 진입할 수 있습니다.
• 프로필 설정에 필요한 프로필 사진, 사용자 이름, 계정 ID, 소개를 입력받습니다.
• 사용자 이름과 계정 ID는 필수 입력사항입니다.
• 계정 ID에는 형식 및 중복 검사가 진행됩니다.
• 프로필 사진은 등록하지 않을 경우 기본 이미지가 등록됩니다.

프로필 설정

[로그인]

• 이메일 주소와 비밀번호를 입력하면 입력창에서 바로 유효성 검사가 진행되고 통과하지 못한 경우 각 경고 문구가 입력창 하단에 표시됩니다.
• 이메일 주소의 형식이 유효하지 않거나 비밀번호가 6자 미만일 경우에는 각 입력창 하단에 경구 문구가 나타납니다.
• 작성이 완료된 후, 유효성 검사가 통과된 경우 로그인 버튼이 활성화됩니다.
• 로그인 버튼 클릭 시 이메일 주소 또는 비밀번호가 일치하지 않을 경우에는 경고 문구가 나타나며, 로그인에 성공하면 홈 피드 화면으로 이동합니다.

로그인

[로그아웃]

• 상단 의 kebab menu를 클릭 후 나타나는 모달창의 로그아웃 버튼을 클릭하면 확인창이 뜹니다.
• 로그아웃시 로컬 저장소의 토큰 값과 사용자 정보를 삭제하고 초기화면으로 이동합니다.

로그아웃

[상하단 배너]

• 상단 배너 : 각 페이지별로 다른 종류의 버튼을 가지고 있습니다.
  • 뒤로가기 : 브라우저 상에 기록된 이전 페이지로 돌아갑니다.
  • 검색 : 사용자 검색 페이지로 이동합니다.
  • 사용자 이름 : 채팅룸 페이지의 경우 상대방의 사용자 이름을 보여줍니다.
  • kebab menu : 각 페이지 또는 컴포넌트에 따른 하단 모달창을 생성합니다.
    • 상품, 댓글, 게시글 컴포넌트 - 삭제, 수정, 신고하기
    • 사용자 프로필 페이지 - 설정 및 사용자 정보, 로그아웃
• 하단 탭 메뉴 : 홈, 채팅, 게시물 작성, 프로필 아이콘을 클릭하면 각각 홈 피드, 채팅 목록, 게시글 작성 페이지, 내 프로필 페이지로 이동합니다.

상하단 배너

[홈 피드]

• 자신이 팔로우 한 유저의 게시글이 최신순으로 보여집니다.
• 팔로우 한 유저가 없거나, 팔로워의 게시글이 없을 경우 검색 버튼이 표시됩니다.
• 게시글의 상단 유저 배너 클릭 시 게시글을 작성한 유저의 프로필 페이지로, 본문 클릭 시 게시글 상세 페이지로 이동합니다.

팔로우하는 유저가 없을 때	팔로우하는 유저가 있을 때

[검색]

• 사용자 이름 혹은 계정 ID로 유저를 검색할 수 있습니다.
• 검색어와 일치하는 단어는 파란색 글씨로 표시됩니다.
• 클릭 시 해당 유저의 프로필 페이지로 진입합니다.

검색

[프로필]

1. 내 프로필

• 상단 프로필란에 프로필 수정과 상품 등록 버튼이 나타납니다.
• 판매중인 상품란에는 사용자가 판매하는 상품이 등록되며, 판매중인 상품이 없을 경우에는 영역 자체가 나타나지 않습니다.
• 게시글란은 상단의 리스트형과 앨범형 두 개의 버튼을 통해서 나누어 볼 수 있습니다.
  • 리스트형의 경우, 사용자가 작성한 글 내용과 이미지, 좋아요와 댓글의 수를 보여줍니다.
  • 앨범형의 경우, 사용자 게시글 중 이미지가 있는 글만 필터링해 바둑판 배열로 보여줍니다.
• 게시글을 클릭하면 각 게시글의 상세페이지로 이동합니다.

리스트형 & 앨범형 게시글	팔로잉 & 팔로워 리스트

2. 타 유저의 프로필

• 버튼을 클릭해 해당 사용자를 팔로우 또는 언팔로우할지 결정할 수 있으며 팔로워 수의 변화가 페이지에 즉시 반영됩니다.

팔로우 & 언팔로우

3. 프로필 수정

• 사용자 프로필 이미지, 이름, 아이디, 소개 중 한 가지를 수정하면 저장 버튼이 활성화됩니다.
• 계정 ID의 유효한 형식 및 중복 검사를 통과하지 못하면 하단에 경고 문구가 나타나며 저장 버튼이 비활성화됩니다.
• 사용자 이름과 소개는 공백으로 시작할 수 없습니다.
• 프로필 수정이 완료되면 내 프로필 페이지로 이동합니다.

초기화면

[게시글]

1. 게시글 작성

• 글이 입력되거나 사진이 첨부되면 업로드 버튼이 활성화됩니다.
• 최대 세 장까지 이미지 첨부가 가능하며 첨부한 파일을 취소할 수 있습니다.
• 게시글 하단에 업로드 날짜가 표시됩니다.

게시글 작성

2. 게시글 수정 및 삭제

• 자신의 게시글일 경우 모달 버튼을 통해 수정, 삭제가 가능합니다.
• 게시글 삭제 버튼 클릭 시, 게시글을 삭제하고 페이지를 리렌더링하여 삭제된 내용을 페이지에 반영합니다.
• 타 유저의 게시글일 경우 모달 버튼을 통해 신고할 수 있습니다.

게시글 수정 & 삭제

3. 좋아요와 댓글

• 좋아요와 댓글 수는 실시간으로 상세 페이지에 반영됩니다.
• 댓글이 몇 분 전에 작성되었는지 표시됩니다.
• 자신의 댓글일 경우 모달 버튼을 통해 삭제가 가능합니다.
• 타 유저의 댓글일 경우 모달 버튼을 통해 신고할 수 있습니다.

좋아요 & 댓글

[상품]

1. 상품 등록

• 상품 이미지, 상품명, 가격, 판매 링크를 필수로 입력해야 저장 버튼이 활성화됩니다.
• 상품 가격은 숫자만 입력할 수 있으며, 숫자를 입력하면 자동으로 원 단위로 변환됩니다.
• 상품 가격이 0원일 경우 버튼이 비활성화되며 하단에 경고 문구가 나타납니다.
• 상품명과 판매 링크는 공백으로 시작할 수 없습니다.
• 상품 등록이 완료되면 내 프로필 페이지로 이동합니다.

상품 등록

2. 상품 수정 및 삭제

• 상품 이미지, 상품명, 가격, 판매 링크 중 한 가지를 수정하면 저장 버튼이 활성화됩니다.
• 상품 수정이 완료되면 내 프로필 페이지로 이동합니다.
• 상품 삭제 버튼 클릭 시, 상품을 삭제하고 페이지를 리렌더링하여 삭제된 내용을 페이지에 반영합니다.

상품 수정 & 삭제

[채팅]

• 채팅 목록에서 아직 읽지 않은 채팅에는 좌측 상단의 파란색 알림을 띄워줍니다.
• 채팅방에서 메시지를 입력하거나 파일을 업로드하면 전송 버튼이 활성화됩니다.
• 채팅방에서 우측 상단의 채팅방 나가기 모달 버튼을 통해 채팅 목록 페이지로 이동할 수 있습니다.
• 채팅 메시지 전송 및 수신 기능은 개발 예정입니다.

채팅

8. 트러블 슈팅

• 탭메뉴 프로필 버튼 이슈

• 프로필 수정 이슈

9. 개선 목표

• API 모듈화 : API를 불러오는 코드의 반복이 많아 모듈화할 예정

• lighthouse Performance 증진

  • 모든 페이지에서 특히 Best Practices & SEO 점수는 90~100으로 우수
  • Performance 점수가 대체적으로 미흡한 문제

  

• 23-01-17 성능 개선 내용

  

  • 이미지 최적화
    • <img> 요소에 width , height 속성값을 명시해 불필요한 Reflow를 방지했습니다.
    • browser-image-compression 라이브러리를 사용해 유저가 업로드하는 이미지를 압축했습니다.
    • Intersection Observer API를 사용해 Lazy Loading 기법을 적용하여 홈 피드의 게시글 이미지가 viewport 내에 들어오는 순간 로딩되도록 변경했습니다.
  • 웹폰트 최적화
    • WOFF2 포맷을 추가하고 가장 우선적으로 적용되도록 선언했습니다.
    • 서브셋 폰트로 교체해 용량을 줄였습니다.

10. 프로젝트 후기

🍊 고지연

깃헙을 통한 협업에 익숙해지는 것, 서로 감정 상하지 않고 무사히 마무리하는 것이 1차적인 목표였어서 항상 이 부분을 명심하면서 작업했습니다. 각자 페이지를 작업하고 합치는 과정에서 마주친 버그들이 몇 있었는데, 시간에 쫓기느라 해결하기에 급급해서 제대로 트러블슈팅 과정을 기록하지 못한 게 살짝 아쉬운 부분으로 남습니다. 그래도 2022년 한 해 동안 가장 치열하게 살았던 한 달인 것 같습니다. 조원들 모두에게 고생했다고 전하고 싶습니다🧡

👻 김민제

여러모로 많은 것들을 배울 수 있었던 한 달이었습니다. 혼자서는 할 수 없었던 일이라는 것을 너무 잘 알기에 팀원들에게 정말 감사하다는 말 전하고 싶습니다. 개인적으로 아쉬웠던 부분은 기한 내에 기능을 구현하는 데에만 집중하면서 트러블 슈팅이나 새로 배웠던 것들을 체계적으로 기록하지 못했다는 점입니다. 이렇게 느낀 바가 있으니 이후의 제가 잘 정리하면서 개발할 거라 믿습니다… 하하 다들 수고하셨습니다!!!!

😎 양희지

팀 프로젝트 시작에 앞서 초기 설정을 진행하며 체계적인 설계의 중요성을 느꼈습니다. 앞으로는 점점 더 체계적이고 효율적으로 프로젝트를 진행할 수 있도록 발전하고 싶습니다. 정규 수업 직후에 프로젝트를 진행하면서 배운 내용을 직접 구현하는 과정이 어색했지만 어떤 부분이 부족한지 알 수 있는 기회였습니다. 스스로 최대한 노력해보고 팀원들과 함께 해결해 나가면서 협업의 장점을 체감할 수 있었습니다. 하지만 빠르게 작업을 진행하면서 팀원들과 함께 해결한 이슈가 어떤 이슈이며 어떻게 해결했는지에 대해 자세히 작성하지 못한 것이 아쉽습니다. ’멋쟁이 사자처럼’이라는 같은 목표를 가진 집단에서 프로젝트에 함께할 수 있는 소중한 경험이었습니다. 함께 고생한 조원들 모두 고생하셨습니다! 앞으로도 화이팅해서 함께 목표를 이뤄가고 싶습니다.

🐬 지창언

컨벤션을 정하는 것부터 Readme 파일 작성까지 전 과정을 진행하려니 처음 생각보다 많은 에너지를 썼어요. 좋은 의미로 많이 썼다기보다, 제 능력을 십분 발휘하지 못해서 아쉬움이 남는 쪽입니다. 개발한다고 개발만 해서는 안 된다는 것을 몸소 느껴보는 기간이었던 것 같습니다. 이번 기회로 프로젝트를 진행하면서, 제가 잘하는 점과 부족한 점을 확실하게 알고 가는 건 정말 좋습니다. 기술적인 부분에 있어서는 리액트의 컴포넌트화가 주는 장점을 알았습니다. 조금 느린 개발이 되었을지라도 코드 가독성 부분에 있어서 좋았고, 오류가 발생해도 전체가 아닌 오류가 난 컴포넌트와 근접한 컴포넌트만 살펴보면 수정할 수 있는 부분이 너무 편했습니다. 모두 고생 참 많으셨고 리팩토링을 통해 더 나은 프로젝트 완성까지 화이팅입니다.