Project 'Karly'

☕ 개요

Market Kurly를 레퍼런스로 제작한 Market Karly의 피그마 시안을 바탕으로 Vanilla JS 기술만을 이용해서 제품을 제작하는 프로젝트

✨ 특징

• JavaScript 뿐만 아니라 CSS도 보조 라이브러리 사용 X

• Semantic mark-up 및 WEI-ARIA 등을 이용한 웹 접근성 고려

• 스크럼 프로세스를 차용하여 프로젝트 진행

💻 기술 스택

Vite, Git, GitHub, HTML5, CSS3, JavaScript, PocketBase, Visual Studio, GitHub Pages

👪 팀 구성

멋쟁이사자처럼 프론트엔드 스쿨 8기 수강생 4명으로 구성

• 송현규

  • 역할 : 팀장

  • 담당 업무 : 회원가입 페이지, 로그인 페이지 제작

• 김용범

  • 역할 : 스크럼 마스터

  • 담당 업무 : 제품 목록 페이지 및 제품 상세 페이지 제작, 발표 자료 컨텐츠 제작, 발표

• 박예진

  • 역할 : 서기

  • 담당 업무 : 노션 관리, 헤더 컴포넌트 및 메인 페이지 제작, 발표 PPT 제작

• 조유나

  • 역할 : 총무

  • 담당 업무 : 푸터 컴포넌트와 장바구니 페이지 제작, README 작성

📚 프로젝트 자료

배포 링크

• 🚀 https://dragontiger92.github.io/Karly/

  📓 테스트 ID와 비밀번호

  • ID : water222
  • 비밀번호 : 123456!

ERD

기타

• 📗 의뢰인 요구 사항

• 📁 기능 정의서

🔧 프로젝트 협업 툴

• GitHub

  • 사용 기능

    • Issues & Milestones : 일정 관리 및 백로그 생성

    • Pull Requests

      • Template를 만들어 PR 품질 향상 제고

    • Projects

      • Table을 생성하여 backlog 관리

    • Wiki : 데일리 스크럼 등 회의 내용 관리

  • 'Karly' GitHub repository link

• Discord

  • 사용 방식

    • 보이스 채널을 사용하여 실시간 소통

    • Webhooks 기능을 이용하여 GitHub issue, PR 생성 등의 업데이트 사항을 실시간으로 공유

• Notion

  • 사용 방향

    • 프로젝트 목표 및 트러블 슈팅 방법, 기능 정의서 등을 올려놓아 쉽게 필요한 자료에 접근할 수 있도록 운용

  • 'Karly' project notion link

📰 컨벤션

코딩 컨벤션

HTML

• Naming convention : Snake Case

• XHTML 1.0 문법

• Chrome extension Web Developer로 HTML validation

• headingsMap으로 mark-up의 추상 체계 및 접근성 관점에서의 headings 적절성 여부 점검

• Indentation: 2 spaces

JavaScript

• Naming convention : camelCase

• 설정한 Prettier 규칙을 통해 formatting

• 설정한 ESLint 규칙을 통해 linting

커밋 컨벤션

• Prefix로 커밋의 종류 명기

  • [add] : 추가

  • [modify] : 수정

  • [complete] : 완료

• Prefix를 제외한 commit message는 한글로 작성

GitHub 이슈 라벨 컨벤션

• bug : 버그 이슈

• documentation : 문서 작업과 관련된 이슈

• duplicate : 중복된 이슈

• enhancement : 기존 기능 향상

• feature : 새로운 기능 추가

• in progress : 현재 진행 중인 작업

• invalid : 유효하지 않은 이슈

• needs review : 리뷰가 필요한 상태

• on hold : 작업 중지 상태

👐 제품 소개

헤더 및 메인 페이지

• 박예진 담당

헤더

• 최상단 배너 닫기

• 고객센터 hover 시 버블 나타내기

• Scroll 시 fixed nav 나타내기

• 카테고리 영역 scroll bar 나타내기

메인

배너 캐러셀

상품 캐러셀 타입 1

상품 캐러셀 타입 2	최근본상품

로그인, 회원가입 페이지

• 송현규 담당

로그인 - 아이디 유효성 검사	로그인 - 비밀번호 유효성 검사

로그인 기능	회원가입 - 이메일 중복 검사

새로운 회원 생성	회원가입 - 아이디 유효성 검사, 회원가입 - 아이디 중복 검사

제품 목록 및 상세 페이지

• 김용범 담당

제품 목록 페이지

제품 상세 페이지

장바구니 페이지

• 조유나 담당

장바구니 페이지

📆 제작 일정

• 2024. 01. 04. ~ 2024. 01. 16.

일정	개발기간	진행내용
1차	2024. 01. 04. ~ 2024. 01. 08.	킥오프, HTML 마크업 및 CSS 스타일링
중간 점검	2024. 01. 09.	진행 내용 피드백
2차	2024. 01. 10. ~ 2024. 01. 15.	JS 작업 및 re-factoring, 배포, 발표 준비
데모 데이	2024. 01. 16.	발표