Sky Lounge

개발자 모임공간 커뮤니티 Sky Lounge입니다.

배포

스카이 라운지

Project Tree

📦src
 ┣ 📂assets
 ┃ ┗ 📂svgs
 ┣ 📂components
 ┃ ┣ 📂CommentList
 ┃ ┣ 📂CommentsWrapper
 ┃ ┣ 📂PostList
 ┃ ┃ ┣ 📂PostItem
 ┃ ┃ ┃ ┣ 📂utils
 ┃ ┗ 📂_shared
 ┃ ┃ ┣ 📂Loading
 ┃ ┃ ┣ 📂Navigation
 ┃ ┃ ┗ 📂PageHeader
 ┃ ┃ ┃ ┣ 📂BackButton
 ┣ 📂routes
 ┃ ┣ 📂CreatePost
 ┃ ┃ ┣ 📂SubmitButton
 ┃ ┣ 📂Home
 ┃ ┃ ┣ 📂PostsFeed
 ┃ ┃ ┣ 📂WelcomePopup
 ┃ ┣ 📂MyPage
 ┃ ┣ 📂PrivateRoute
 ┃ ┣ 📂SignIn
 ┣ 📂services
 ┃ ┣ 📜auth.ts
 ┃ ┣ 📜data.ts
 ┃ ┗ 📜myFirebase.ts
 ┣ 📂store
 ┃ ┗ 📜atom.ts
 ┣ 📂styles
 ┃ ┣ 📂base
 ┃ ┣ 📂constants
 ┃ ┣ 📂mixins
 ┣ 📂types
 ┃ ┣ 📜global.d.ts
 ┃ ┗ 📜post.ts
 ┗ 📂utils

화면 예시(기능 설명)

기능 목록

• 게시글 열람

  • 최신순/좋아요순 정렬
  • 태그 필터링
  • 실시간 업데이트

• 게시글 작성(회원)

  • 글 작성
  • 사진 첨부
  • 태그 추가

• 게시글 수정 및 삭제(회원)

• 게시글 좋아요(회원)

• 댓글 열람

• 댓글 작성(회원)

• 회원가입 및 로그인

  • 로그인, 로그아웃, 회원 탈퇴
  • 로그인 시 '내가 쓴 글'과 '내가 쓴 댓글' 열람
  • 닉네임 변경 및 랜덤 닉네임 생성

기본 화면(홈 - 게시글 피드)

피드 기반의 게시글을 보여주는 홈 탭 화면입니다.

실시간 업데이트

새로고침을 하지 않아도 다른 사용자가 작성한 게시글이 피드에 실시간으로 반영됩니다.

정렬(최신순/좋아요순)

최신순 혹은 좋아요순 버튼을 클릭하면 해당 정렬 방법으로 게시글을 정렬합니다.

태그 필터링

선택된 태그가 있는 게시글만 보여줍니다.

좋아요

가입 사용자는 게시글에 좋아요를 토글할 수 있습니다.

댓글

가입 사용자는 게시글에 댓글을 남길 수 있습니다.

작성 탭

게시글 생성

글 작성 탭에서 게시글을 생성할 수 있습니다.

• 텍스트 작성
• 사진 첨부
• 태그 추가

게시글 삭제

해당 게시글 작성자는 게시글을 삭제할 수 있습니다.

게시글 수정

해당 게시글 작성자는 게시글을 수정할 수 있습니다. 게시글 생성과 동일한 작업을 수행할 수 있습니다.

회원가입 및 로그인

게시글 작성, 댓글 작성, 좋아요 요청, 마이 페이지 접근을 시도하면 사용자에게 로그인이 필요함을 알리고, 로그인 페이지로 이동시킵니다. 해당 페이지에서 구글 및 깃허브 계정을 통해 로그인할 수 있습니다.

마이 페이지

내가 쓴 글/댓글 조회

마이 페이지 탭에서 내가 쓴 글과 댓글을 모아서 조회할 수 있습니다. 홈 탭과 마찬가지로 게시글을 수정하거나 삭제할 수 있습니다.

닉네임 변경 및 랜덤 닉네임

마이 페이지 탭에서 닉네임을 변경할 수 있습니다. 랜덤 닉네임 생성 버튼을 누르면 자동으로 닉네임을 생성합니다. 변경 버튼을 누르면 바뀐 닉네임이 반영됩니다.

로그아웃 및 회원 탈퇴

마이 페이지 탭에서 로그아웃하거나 계정을 삭제시킬 수 있습니다.

회고

Tech & Libraries

라우팅

• react-router-dom

중앙 저장소

• recoil

서버 및 DB

• firebase

유틸리티

• lodash
• react-use
• react-loading: 로딩 컴포넌트
• sweetalert2: 알림 컴포넌트
• dayjs

스타일

• scss
• css module
• classnames

코딩 컨벤션

• eslint
• prettier
• stylelint

Contributor

김하늘

ⓒ 2022. @lazy-sky. all rights reserved.