바닐라 프로젝트 6조 대장군 Karly (발표용) (작성자: 박예진)
Pure CSS
, Javascript
, PocketBase
, Vite
, Git
, Github Pages
사용
- https://lumpyspaceyz.github.io/Karly/
- id: water222, pw: 123456!
테킷 프론트엔드 스쿨 8기 프로젝트 팀 '대장군'
- 송현규 (팀장) : 회원가입 페이지, 로그인 페이지
- 김용범 (스크럼마스터) : 제품 목록 페이지, 제품 상세 페이지, 발표자
- 박예진 (노션관리) : 헤더 컴포넌트, 메인 페이지, 발표 PPT 작성
- 조유나 : 푸터 컴포넌트, 장바구니 페이지
2024.1.4 ~ 2024.1.16
일정 | 개발기간 | 진행내용 |
---|---|---|
1차 | 2024. 01. 04 ~ 2024. 01. 08 | 킥오프, html 마크업 및 css 스타일링, 시맨틱 마크업 및 접근성 |
중간점검 | 2024. 01. 09 | 진행내용 피드백 |
2차 | 2024. 01. 10 ~ 2024. 01. 15 | js 작업 및 리팩토링, 1차 2차 배포, 발표 준비 |
데모데이 | 2024. 01. 16 | 발표 |
- 버전 및 이슈관리 : Github, Github Issues, Github Project
- 협업 툴 :
- Discord : 커밋시 알람기능이 오도록 WebHook을 활용 Github연동
- Notion : 일정을 포함한 모든 관련 기록
- Github Wiki : 데일리 스크럼 목록
- 서비스 배포 환경 : Github Pages
- 디자인 툴 : Figma
컨벤션
-
HTML
- 네이밍 컨벤션 : Snake Case
- XHTML 1.0 문법
- 'Web Developer' 사용
- 'headingsMap' 사용
- Indentation: 2spaces
-
JS
- 네이밍 컨벤션 : Camel case
- Prettier 사용
- ESLint 사용
-
Eslint
- 선언한 변수 사용하지 않으면 에러
"no-unused-vars": "error"
- 정의되지 않은 변수 사용하면 에러
"no-undef": "error"
- 줄 끝에 공백 에러
"no-trailing-spaces": "error"
- var 키워드 사용 금지
"no-var": "error"
- 선언한 변수 사용하지 않으면 에러
-
Prettier
- 세미콜론 여부
"semi": false
- 따옴표, 쌍따옴표
"singleQuote": true
- 탭 너비
"tabWidth": 2
- 마지막 요소 뒤에 콤마 여부
"trailingComma": "es5”
- 세미콜론 여부
-
커밋
- 추가 - [add]
- 수정 - [modify]
- 완료 - [complete]
- ex) [add] 한글로 작성
Github 이슈 라벨
- bug : 버그 이슈
- documentation : 문서 작업과 관련된 이슈
- duplicate : 중복된 이슈
- enhancement : 기존 기능 향상
- feature : 새로운 기능 추가
- in progress : 현재 진행 중인 작업
- invalid : 유효하지 않은 이슈
- needs review : 리뷰가 필요한 상태
- on hold : 작업 중지 상태
요구사항 및 기능 정의서
-
📁 기능 정의서
-
슬라이드가 필요한 ui에서는 swiper.js를 사용해주세요.
- 각 슬라이드를 데이터로 받아 동적으로 렌더링 되도록 만들어주세요.
- 슬라이드의
prev
,next
버튼도 구현해주세요. - 키보드 키로도 작동되도록 구현해주세요.
-
localStorage를 사용하여 “최근 본 항목”의 UI를 구성해주세요.
-
“마이크로 애니메이션”이 필요하다면 추가해주세요.
-
“회원가입 기능”을 구현해주세요.
- 최소한 이메일, 비밀번호 입력 필드(
input
), 제출 버튼(button
)을 가지도록 구성해주세요.
- 최소한 이메일, 비밀번호 입력 필드(
-
이메일과 비밀번호의 유효성을 확인합니다.
- 이메일 조건 : 최소
@
,.
포함 - 비밀번호 조건 : 특수문자 포함 최소 6자 - 최대 16자
- 이메일과 비밀번호가 모두 입력되어 있고, 조건을 만족해야 제출 버튼이 활성화 되도록 구현해주세요.
- 이메일 조건 : 최소
-
회원가입을 통해 사용자(user)를 생성하고 관리합니다.
- 데이터 통신을 통해 유저를 생성하고 관리해주세요
- 유저의 회원을 탈퇴할 수 있는 기능을 구현해주세요
- 로그인된 유저를 인식하여 UI를 다르게 랜더링해주세요
- 로그인되지 않은 사용자면 회원가입 페이지로 리디렉션 시켜주세요
- 회원가입시 중복된 유저가 있는지 체크해주세요
-
장바구니 기능을 구현해 주세요
- 사용자가 장바구니에 항목을 담으면 장바구니 페이지에 랜더링이 되도록 구현해 주세요.
헤더 |
---|
- 최상단 배너 닫기, 고객센터 호버 시 버블 나타내기, 스크롤시 fixed nav 나타내기, 카테고리 영역 스크롤바 나타내기
메인 |
---|
배너 캐러셀 |
---|
상품 캐러셀 타입 1 |
---|
상품 캐러셀 타입 2 | 최근본상품 |
---|---|
로그인 - 아이디 유효성 검사 | 로그인 - 비밀번호 유효성 검사 |
---|---|
로그인 기능 | 회원가입 - 이메일 중복 검사 |
---|---|
새로운 회원 생성 | 회원가입 - 아이디 유효성 검사, 회원가입 - 아이디 중복 검사 |
---|---|
제품 상세 페이지 |
---|
장바구니 페이지 |
---|