Giter VIP home page Giter VIP logo

karly's Introduction

바닐라 프로젝트 6조 대장군 Karly (발표용) (작성자: 박예진) 2024-01-15_170723

프로젝트 소개

마켓칼리 웹사이트 클론코딩(Web)

Pure CSS, Javascript, PocketBase, Vite, Git, Github Pages 사용

배포 링크


🐶 팀 대장군 소개

테킷 프론트엔드 스쿨 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를 다르게 랜더링해주세요
    • 로그인되지 않은 사용자면 회원가입 페이지로 리디렉션 시켜주세요
    • 회원가입시 중복된 유저가 있는지 체크해주세요
  • 장바구니 기능을 구현해 주세요

    • 사용자가 장바구니에 항목을 담으면 장바구니 페이지에 랜더링이 되도록 구현해 주세요.

📝 페이지 및 기능

헤더
a220b1cc15bda619
  • 최상단 배너 닫기, 고객센터 호버 시 버블 나타내기, 스크롤시 fixed nav 나타내기, 카테고리 영역 스크롤바 나타내기

메인
a220b1cc15bda619
배너 캐러셀
메인
상품 캐러셀 타입 1
3
상품 캐러셀 타입 2 최근본상품
메인2 메인4

로그인 및 회원가입

로그인 - 아이디 유효성 검사 로그인 - 비밀번호 유효성 검사
login1 login7
로그인 기능 회원가입 - 이메일 중복 검사
login6 login4
새로운 회원 생성 회원가입 - 아이디 유효성 검사, 회원가입 - 아이디 중복 검사
login2 login3

제품

제품 상세 페이지
Honeycam_2024-01-15_19-52-31

장바구니

장바구니 페이지
장바구니

karly's People

Contributors

lumpyspaceyz avatar dragontiger92 avatar song0331 avatar cho-yn avatar

Watchers

슬비쌤 avatar

karly's Issues

[bug] 로컬에 있는 feature/product_detail 브랜치에 node 파일 등이 git으로 tracking 되는 이슈

로컬에서 feature/product_detail 브랜치 작업 수정 사항을 커밋하고 원격 레포지토리에 push 하려고 하는데, git에 의해 tracking 되는 파일들이 너무 많아서(node 파일들 전부 다 들어가 있는 것 같음) 로컬에서 커밋을 할 수가 없음. 건드린 게 없는데 갑자기 왜 node 파일들이 git에 의해 tracking 되는지 모르겠음.
.gitignore 폴더에 node 관련 자료들 넣어야 할 것 같은데('add-gitignore' node package 등 이용해서), 상의하고 진행하는 게 나을 것 같아서 아직 로컬에서 commit 진행하지 않음. 내일 오전 데일리 스크럼 때 같이 확인 후, 이슈가 해결 되면 바로 로컬에서 commit 및 push 진행 예정.

  • 현재 상황
  • 제품 상세 페이지 CSS 완성
  • 제품 상세 페이지 HTML 수정: 요소 내 아이콘 이미지 파일 전부 svg 포맷으로 수정 - svg 코드 HTML에 img 태그 대신 추가, 스타일링을 위한 요소 삽입.

[feature] header 컴포넌트

PR 유형

  • 새로운 기능 추가
  • 버그 수정
  • CSS 등 사용자 UI 디자인 변경
  • 코드에 영향을 주지 않는 변경사항(오타 수정, 탭 사이즈 변경, 변수명 변경)
  • 코드 리팩토링
  • 주석 추가 및 수정
  • 문서 수정
  • 테스트 추가, 테스트 리팩토링
  • 빌드 부분 혹은 패키지 매니저 수정
  • 파일 혹은 폴더명 수정
  • 파일 혹은 폴더 삭제

PR 체크리스트

  • 커밋 메시지 컨벤션에 맞게 작성했습니다
  • 변경 사항에 대한 테스트를 했습니다.(버그 수정 / 기능에 대한 테스트)

PR 내용 요약

PR 상세

스크린샷

이슈

resolves #12

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.