🪐Coding 커뮤니티 공간, CodeSpace🧑‍🚀

🚀 배포 링크 : https://code-space-tan.vercel.app/

🧑‍🚀 테스트 계정

ID :[email protected]
PW :000000

개발 기간 : 2023.06.01 ~ 2023.06.30

코딩 질문, 스터디모집, 코딩 꿀팁

CodeSpace는 코딩에 관한 궁금증이 생겼을 때 언제든지 도움을 청할 수 있는 커뮤니티입니다.

CodeSpace는 Code + Space로 복잡하고 거대한 코드 우주공간 속에서 코드에 관한 궁금증을 해결하고
코드 스페이스 행성을 탈출해보세요 🚀

code에 관한 질문 뿐만 아니라 스터디 모집 등 자유롭게 다양한 이야기를 나눠보세요❗️

🌍 목차

1. 팀 소개
2. 역할 분담
3. 기술 및 개발환경
4. 컨벤션
5. 기능 및 추가 기능
6. CodeSpace UI
7. 폴더 구조

🧑‍🚀팀 소개

🧑‍🚀조병현 (PM)

👩‍🚀김가람

👩‍🚀백서영

👩‍🚀송윤비

👥 역할 분담

⚙️ 기술 및 개발환경

분야	기술 및 개발환경
Front-End
Back-End	제공된 API
버전 및 이슈관리
커뮤니케이션
디자인
컨벤션
배포

[링크]

📑 팀 워크스페이스

🎨 디자인 피그마

☝️ 컨벤션

커밋 컨벤션

- ✨Feat: 새로운 기능 구현
- 🐛Fix: 오류 수정
- 💄Styles: style 작업, 코드에 변화가 없는 수정 (예 : prettier, 세미콜론 등)
- ♻️Refactor: 코드 리팩토링
- 🔥remove: 파일 삭제
- 🚚Move: 리소스 이동, 이름 변경
- 🔧Add: 기본 셋팅 파일 SetUp.
- 🚀Deploy: 배포 
- 🔀Merge: 브랜치 합병
- 📦Chore: 패키지 파일 수정
- 📝Docs: ReadMe, 문서 수정

프리티어 설정

{
  "printWidth": 120, 
  //한 줄의 최대 길이를 120으로 설정,120자가 넘어가면 줄을 개행
  
  "tabWidth": 2,
  //탭의 크기를 2로 설정

  "useTabs": false,
  //탭 대신 공백을 사용하여 들여쓰기

  "semi": true,
  //세미콜론(;)을 코드 끝에 자동으로 삽입

  "singleQuote": true,
  //문자열을 작은따옴표(')로 표기
  
  "trailingComma": "all",
  //객체나 배열의 마지막 요소 뒤에 항상 쉼표(,)
  
  "bracketSpacing": true,
  //객체 리터럴의 괄호 주위에 공백을 추가

  "jsxBracketSameLine": true,
  //JSX 요소의 닫는 괄호를 같은 줄에 위치
  
  "arrowParens": "avoid",
  //화살표 함수의 인자가 하나인 경우 괄호를 생략
  
  "endOfLine": "auto"
  //개행 문자 자동 선택
}

🛠️기능 및 추가기능

🔒 로그인 / 회원가입

• 로그인
• 회원가입
• 유효성 검사
• 토큰 검증

📎 피드

• 게시글 업로드
• 팔로잉 게시글 보기
• 무한 스크롤 (➕)
• 전체 게시글 보기(➕)
• 게시글 상세보기(➕)
• 카테고리별 게시글 보기(➕)
• 스크롤 탑 버튼(➕)

🔍 검색

• 유저 검색
• 게시글 검색(➕)

🖼 게시글

• 게시글 수정, 삭제
• 댓글 게시, 삭제
• 게시글/댓글 신고
• 이미지 상세보기(➕)
• 코드블럭 작성(➕)
• 댓글 생성시간 표시(➕)

👨🏿‍🤝‍👨🏼프로필

• 로그아웃
• 프로필 수정
• 팔로우 / 팔로잉
• 그리드, 리스트형 게시글
• 상품 등록

🪐CodeSpace UI

1) 홈

Splash	로그인	회원가입

홈 피드 / 카테고리별	게시글 검색 / 유저 검색	메시지

미로그인 시 피드 접속	Top 버튼 / 무한 스크롤	404 Error

2) 게시글

게시글 작성	게시글 수정	게시글 삭제

게시글 좋아요/코드블럭	댓글 작성	댓글 삭제

이미지 업로드 3장 제한	이미지 상세보기

3) 프로필

프로필 전체	팔로우/언팔로우	로그아웃

초기 프로필 설정	프로필 수정	상품 등록

🚀 핵심 기능 설명

📁폴더 구조

📦final-03-code-space 
 📂src
 ┃ ┣ 📂assets
 ┃ ┃ ┣ 📂icons
 ┃ ┃ ┣ 📂img
 ┃ ┣ 📂Atom
 ┃ ┣ 📂Components
 ┃ ┃ ┣ 📂Common
 ┃ ┃ ┣ 📂Feed
 ┃ ┃ ┣ 📂Follow
 ┃ ┃ ┣ 📂Product
 ┃ ┃ ┗ 📂Profile
 ┃ ┃ ┃ ┣ 📂Post
 ┃ ┣ 📂Hooks
 ┃ ┣ 📂Pages
 ┃ ┃ ┣ 📂Feed
 ┃ ┃ ┣ 📂Landing
 ┃ ┃ ┣ 📂Message
 ┃ ┃ ┣ 📂Profile
 ┃ ┣ 📂Route
 ┃ ┣ 📂Styles
 ┃ ┃ ┣ 📂FeedStyle
 ┃ ┃ ┣ 📂LandingStyle
 ┃ ┃ ┣ CommonStyle.jsx
 ┃ ┃ ┣ globalStyle.jsx
 ┃ ┃ ┗ MainLayoutStyle.jsx
 ┃ ┣ App.js
 ┃ ┗ index.js
 ┣ .gitignore
 ┣ .prettierrc
 ┣ jsconfig.json
 ┣ package-lock.json
 ┣ package.json

🔼 Top