💥 남유지,유시원, 임한길, 황유빈 Let’s go 💥

• UI 프로젝트 개요

⭐  오전 9시 30분에 모여서 각자 진행률 공유하기

❗진행 상황 공유

❗이슈 상황 공유

커밋 컨벤션

• [타입] 이름 / 내용 으로 작성한다. 세부 내역이 필요하다면 한 줄 띄어서 작성한다. -로 각 항목을 구분하여 작성한다.

  # 한줄 커밋
  [chore] 임한길 / prettier 패키지 추가
  
  # 여러줄 커밋
  [feat] 임한길 / STORY 페이지 구현
  
  - 브랜드 페이지
  - Why 버거킹 페이지
  

• 커밋 컨벤션 타입

  type	description
  [feat]	새로운 기능 추가
  [bugFix]	버그 수정
  [docs]	문서의 수정
  [modify]	코드 변경
  [refactor	리팩토링
  [design]	CSS 등 사용자 UI 디자인 변경
  [comment]	필요한 주석 추가 및 변경
  [style]	코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
  [test]	테스트(테스트 코드 추가, 수정, 삭제, 비즈니스 로직에 변경이 없는 경우)
  [chore]	빌드 수정, 패키지 매니저 설정, 운영 코드 변경이 없는 경우(assets image, 패키지 매니저 등)
  [init]	프로젝트 초기 생성
  [rename]	파일 혹은 폴더명 수정하거나 옮기는 경우
  [remove]	파일을 삭제하는 작업만 수행하는 경우
  [merge]	Pull 과정 중 현재 commit과 자동 병합이 일어날 때
  [build]	새로운 라이브러리 혹은 패키지

코딩 컨벤션

• 각 구역별 가독성을 위해 시작 / 끝 영역을 표시한다.

  <!-- ST: header -->
  <!-- ED: header -->
  
  <!-- ST: 메뉴 리스트 -->
  <!-- ED: 메뉴 리스트 -->
  

  <!-- ST: header -->
  <!-- ED: header -->
  
  <!-- ST: 메뉴 리스트 -->
  <!-- ED: 메뉴 리스트 -->
  

• 4px 단위가 아닌 수치들은 [rem]로 작성한다.

  ex ) py-[.3125rem] 
  

• 컴포넌트 파일은 src/components 폴더 하위에 생성하며 component-메뉴명(컴포넌트명).html으로 네이밍한다.

  페이지 파일은 src/pages 폴더 하위에 생성하며 페이지명으로 네이밍한다.

• 컴포넌트 및 전체 페이지는 flex, 섹션별 레이아웃은 grid를 적용한다.

• JS 주석: 함수나 중요한 로직에 대해서는 주석을 추가한다.

  // 스크롤 이벤트 일시 중지 (1초 동안)
        isScrollingDisabled = true;
        setTimeout(() => {
          isScrollingDisabled = false;
        }, 1000);
  

• 모바일 퍼스트로 작업한다.

  • 반응형 breakpoint
    • md: 640px ~ 1023px
    • lg: 1024px ~ 1499px
    • xl: 1500px ~
  • • 메인 breakpoint
      • hd : 1130px ~
      • ad : 1220px ~

기본 구조

• public 정적 파일

  • fonts폴더 -> 메인 폰트, 서브 폰트
  • asset 폴더 -> 파비콘, 로고

• src 동적 파일

  • asset 폴더 -> 이미지 파일
  • components 폴더 -> 컴포넌트
  • pages 폴더 -> 페이지

• pages 폴더구조

  ├── 📂 pages
  │   │   ├── 📂 menu
  │   │   │   ├── menu.html
  │   │   │   └── menudetail.html
  │   │   ├── 📂 news
  │   │   │   ├── newsdetail.html
  │   │   │   ├── newsend.html
  │   │   │   └── newsongoing.html
  │   │   ├── 📂 store
  │   │   │   ├── storeall.html
  │   │   │   └── storenear.html
  │   │   ├── 📂 story
  │   │   │   ├── adarchive.html
  │   │   │   └── awards.html
  │   │   │   ├── brand.html
  │   │   │   └── esgbusiness.html
  │   │   │   ├── smartqsr.html
  │   │   │   └── whyburgerking.html
  │   │   ├── 📂 customer
  │   │   │   ├── customer.html
  │   │   │   ├── qa_list.html
  │   │   │   └── customerdetail.html
  │   │   ├── 📂 franchise
  │   │   │  └── franchise.html
  │   │   ├── 📂 policies
  │   │   │   ├── terms.html (이용약관)
  │   │   │   ├── privacy.html (개인정보처리방침)
  │   │   │   ├── location.html (위치정보이용약관)
  │   │   │   ├── legal.html (법적고지)
  │   │   │   └── cctv.html (영상정보처리기기운영방침)
  │   │   ├── modal
  └── └── └── home.html (홈)
  

💭 데일리 스크럼 (회의록)

🍟 Burger queen To do list

<aside>

• < To do list > </aside>

<aside>

• <Done list>

</aside>

🍔 burgerking 제작