STYLEGACY

내일배움캠프 6기 2조 개인과제 23.07.18 - 23.07.24

팀구성

윤수민 | 김슬기 | 박희연 | 안홍민 | 전동헌

목차

1. 프로젝트 소개
2. 주요 기능과 특징
3. 기술스택
4. 배포주소
5. install
6. 컨벤션
7. 구현 기능

프로젝트 소개

' 패션을 이어오다 🧥 '

Style과 Legacy의 합성어로, 패션과 스타일 분야에서 다양한 브랜드들을 유산처럼 보존하고,
사용자들에게 지도정보와 함께 실시간으로 전해주는 플랫폼입니다.
사용자들이 언제나 브랜드에 대한 최신 정보를 얻을 수 있도록 합니다.

주요 기능과 특징

• react-toolkit, react-query, firebase, algolia를 이용한 웹앱 구현

• 디자이너 브랜드 및 편집샵 위치 정보 제공

  지도를 활용하여 사용자들에게 주변에 위치한 다양한 디자이너 브랜드와 편집샵을 보여줍니다. 실시간으로 지도 정보를 업데이트하여 사용자들이 쉽고 편리하게 원하는 스타일을 찾을 수 있습니다.

• 검색 기능 외부 api algolia를 사용하여 텍스트 검색 기능 구현(데이터 반영까지 몇 초 소요됨)

• 브랜드 리뷰

  사용자들이 실시간으로 리뷰와 평가를 함께 남길 수 있어서 다른 사용자들에게 신뢰성 있는 정보를 얻을 수 있도록 돕습니다.

기술스택

배포주소

stylegacy-7hzf.vercel.app/

install

 yarn install
 # 또는
 yarn i

커밋 컨벤션

• Feat : 새로운 기능 추가
• Fix : 버그 수정
• Docs : 문서 변경
• Style : styled-components 수정 등 스타일 관련 변경, 코드 formatting, 코드 자체의 변경이 없는 경우
• Chore : 설정 변경 등 기타 변경사항
• Refactor : 코드 리팩토링 (변수명 변경 등)
• Comment : 주석 추가 및 변경

코드 컨벤션

폴더, 파일명

컴포넌트 파일명은 파스칼 케이스(PascalCase)를 사용한다.

MainHome.jsx;

컴포넌트를 제외한 폴더, 파일명은 카멜 케이스(camelCase)를 사용한다.

kakaoMap.js;

함수

함수명은 카멜 케이스(camelCase)를 원칙으로 한다.

const addPost = () => {};

클래스명

클래스명은 케밥 케이스(kebab-case)를 원칙으로 한다.

<h1 className="main-title">제목</h1>

---

스타일 코드 순서

스타일 코드의 순서는 아래와 같이 작성한다.

.sample {
  /* position 관련 */
  position: absolute;
  top: 0;
  left: 0;

  /* display 관련 */
  display: flex;
  justify-content: center;
  align-items: center;

  /* size 관련 */
  width: auto;
  height: auto;

  /* margin, padding */
  margin: 0 auto;
  padding: 12px;

  /* background 관련 */
  background-color: #ffffff;

  /* border 관련 */
  border: 1px solid #ffffff;
  border-radius: 12px;

  /* font 관련 */
  font-size: 24px;
  font-weight: 700;
  text-align: center;

  /* animation 관련 */
  transform: translate(10px, 100%);
  transition: 300ms;
}

구현 기능

1. 메인페이지

   

2. 로그인 / 회원가입

• 로그인
• 회원가입

3. 검색 페이지

• 

4. 게시물 상세페이지

• 

5. 마이페이지

•