EggplantMarket

배포 URL: 추후 예정

팀원 소개

박재영	안지원	이보경	이예지

GitHub	GitHub	GitHub	GitHub

1. 프로젝트 주제 및 목표

[프로젝트 설명]

가지마켓 서비스는 자신의 스토어에서 판매하고 있는 상품(가지)을 등록하여 홍보할 수 있는 SNS입니다. 오직 가지만 상품으로 업로드할 수 있습니다.
상품을 등록하지 않아도 일상을 공유하며 즐거운 SNS 활동을 할 수 있습니다. 글과 사진과 함께 게시물을 작성하여 자신의 일상을 공유할 수 있습니다. 다른 사용자를 팔로우하면 유저가 올린 게시물을 홈 피드에서 소식을 확인할 수도 있습니다. 또한 다른 사용자와 메시지를 주고 받을 수 있습니다.

[프로젝트 목표]

프로젝트 목표 1 - 웹접근성 고려 (고대비테마, 키보드 접근성)
프로젝트 목표 2 - 코드 완성도보다는 작동을 중심,
프로젝트 목표 3 - 시맨틱 마크업

2. 기술 스택

사용 기술
협업
IDE

3. 역할 분담

<<추후 추가 예정>>

공통 담당

splash 페이지, 로그인 페이지, 회원가입 페이지

4. 작업 관리

[작업 관리]

🔗issues 를 사용하여 진행도와 상황을 꾸준히 공유

[프로젝트 기간]

총 개발 기간 : 2023.06.01 ~ 2023.06.27
프로젝트 기확 단계 : 2023.06.01 ~ 2023.06.07
마크업 구현 : 2023.06.08 ~ 2023.06.16
기능 구현 : 2023.06.17 ~ 2023.06.26
리팩토링 : 2023.06.23 ~ 2023.06.28

[Git flow]

놀고먹고십구 협업플로우.pdf

[커밋 컨벤션]

Git commit message
- #이슈번호 <아래컨벤션> : <커밋내용>

- add : 새로운 기능 추가
- fix : 버그 수정(단순 수정 X), 충돌 해결
- docs : 문서 수정
- chore : 코드의 논리에 영향이 없는 작업. 변수명 변경 등등
- design : 마크업 및 디자인 구현, 변경
- rename : 파일 이름의 변경 or 파일의 이동
- remove : 파일의 삭제
- refactor : 리팩토링
- test : 테스트 관련 코드 추가 및 삭제 등
- comment : 필요한 주석 추가 및 변경

[코드 컨벤션]

들여쓰기 4칸
prettier 사용하지 않음
시맨틱 마크업으로 작성하기
JS : 변수 ⇒ 카멜 케이스 / 클래스 ⇒ 파스칼 케이스
의미 있는 변수명 사용하기, 함수명은 동사로 시작하기, class명은 형태 + 의미 + 상태

- 이슈 관리

- 커밋 컨벤션

5. 주요 기능

로그인 / 회원가입
- 로그인
- 회원가입
- 유효성 검사
- 프로필 설정
피드
- 게시글 목록 - 목록형/앨범형
검색
- 유저 검색
게시물
- 게시물 작성 / 수정 / 삭제
- 댓글 게시 / 삭제
- 이미지 업로드 / 수정
채팅 (마크업만 진행)
- 채팅 리스트
- 채팅창
마이 프로필
- 로그아웃
- 프로필 수정
- 팔로우 / 팔로잉
유저 프로필
- 팔로우 / 팔로잉

6. 프로젝트 구조

assets/ : 이미지, 파비콘, 아이콘 등
- icon : 아이콘만 따로 보관
css/ : 컴파일된 scss 및 css 디렉토리
html/ : html 디렉토리
- "htmlname".html 으로 작성
js/ : html 디렉토리의 html과 매칭되는 JS 디렉토리.
- common.js는 공통으로 사용되는 함수가 등록된 파일
- modal.js : 모달 관련 js 파일
- contrast.js : 고대비 전환 관련 js 파일
- "htmlname".js 으로 작성
scss/ : html 디렉토리의 html과 매칭되는 scss
- _mixin.scss : 믹스인 모아두기
- _global.scss : 공통으로 사용되는 부분 모으기
- _variable.scss : 변수들 모아두기
- "htmlname".scss 로 작성
  - 필요시 mixin, global, variable 임포트
  - ex) @import "mixin";

기본포맷
│  README.md
│  index.html
├── assets
│    ├── eggplants
│    ├── icon
│    └── profile_imgs
├── css
│    ├── 404.css
│    ├── chat_list.css
│    ├── chat_room.css
│    ├── component.css
│    ├── home_search.css
│    ├── home_withfollowers.css
│    ├── home_withoutfollowers.css
│    ├── join_membership.css
│    ├── login_email.css
│    ├── login.css
│    ├── post_detail.css
│    ├── post_upload.css
│    ├── product.css
│    ├── profile_follow.css
│    ├── profile_info.css
│    ├── profile_modification.css
│    ├── profile_productlist.css
│    ├── profile_view.css
│    ├── reset.css
│    └── splash.scss
├── font
├── html
│    ├── component
│    ├── 404.html
│    ├── chat_list.html
│    ├── chat_room.html
│    ├── home_search.html
│    ├── home.html
│    ├── join_membership.html
│    ├── login_email.html
│    ├── login.html
│    ├── post_detail.html
│    ├── post_upload.html
│    ├── product_upload.html
│    ├── profile_follower.html
│    ├── profile_following.html
│    ├── profile_info.html
│    └── profile_modification.html
├── js
│    ├── chat_room.js
│    ├── common.js
│    ├── contrast.js
│    ├── follower.js
│    ├── following.js
│    ├── home_search.js
│    ├── home.js
│    ├── index.js
│    ├── join.js
│    ├── login_email.js
│    ├── modal.js
│    ├── postDetail.js
│    ├── postUpload.js
│    ├── product_add.js
│    ├── product_modification.js
│    ├── profile_info.js
│    ├── profile_modification.js
│    ├── scrollFetch.js
│    └── setProfile.js
└── scss
     ├── _global.scss
     ├── _mixin.scss 
     ├── _variable.scss
     ├── 404.scss
     ├── chat_list.scss
     ├── chat_room.scss
     ├── component.scss
     ├── home_search.scss
     ├── home_withfollowers.scss
     ├── home_withoutfollowers.scss
     ├── join_membership.scss
     ├── login_email.scss
     ├── login.scss
     ├── post_detail.scss
     ├── post_upload.scss
     ├── product.scss
     ├── profile_follow.scss
     ├── profile_info.scss
     ├── profile_modification.scss
     ├── profile_productlist.scss
     └── profile_view.scss