README.md

팀원 소개

서혜은 @henization	이서영 @leeseooo	이혜준 @solar3070
웹파트의 애기🍼	웹파트의 이하이🎤	웹파트의 마라샹궈🔥
메인 페이지 & 쪽지 열람 모달	보관함 페이지 & 보관함 세부	랜딩 페이지 & 쪽지 작성 모달 & 온보딩 모달 & 열쇠 획득 모달

기술 스택

서비스 소개

언락🔑 - 즐거운 일상을 쪽지로 공유하는 서비스

코드 컨벤션

컴포넌트 선언

최상위는 function ~ 아래 함수는 const ~

function Component() {
  const handleaaaa = () => {};
}

컴포넌트 이름

camelCase 사용합시다 ~

1. buttonSearch
2. searchButton ✅
3. btnSearch
4. searchBtn

style 붙인 거

스타일만을 위해서 만든 컴포넌트는 styled를 붙이자 명칭 명확히 할 것!

1. ❌ StyledDiv
2. StyledTitle
3. 최상위 div는 StyledRoot로 고정
4. StyledWrapper
5. StyledImage

export , import

export한 친구의 이름 바꿔서 쓰지 말기! 되도록 변수/함수 이름은 자세하게 쓰기

commit message 컨벤션

• 커밋 컨벤션은 대표적인거만 지키좌!!

브랜치 전략 (ex. github flow)

• github flow 사용
• main에서 feat/[브랜치명] 생성하기
• 작업이 다 끝나면 피쳐 브랜치에서 main 브랜치로 Pull Request 작성

기타

• 단위 : rem, em 사용
• 절대경로 사용 & rc 기준으로 경로 작성 (/components/… x , components/… o )

폴더 구조

.
├── data.json 🗂 목 데이터 저장
├── apis 🗂 api 폴더
├── package.json 📦 설치된 패키지를 관리하는 파일
└── src
    ├── App.jsx ✡️ 앱의 라우팅과 글로벌 스타일 지정
    ├── index.js
    ├── component
    │   ├── common 🗂 공통으로 쓰일 컴포넌트 저장
    │   │   └── assets
    │   │       ├── icon
    │   │       └── images
    │   ├── landing 🗂 landing 페이지에 쓰일 컴포넌트 저장
    │   ├── main 🗂 main 페이지에 쓰일 컴포넌트 저장
    │   └── messageFeed 🗂 messageFeed 페이지에 쓰일 컴포넌트 저장
    ├── pages 🗂 라우팅 시 보여질 페이지 컴포넌트 저장
    │   ├── Landing
    │   ├── Main
    │   └── MessageFeed
    └── styles
        └── color.js