javascript를 활용한 vanilla-project 입니다
이듬이라는 기기거래 어플리케이션입니다.
- HTML5 마크업 구조 설계
- Tailwind CSS 를 사용한 화면단의 배치
- Javascript 와 PocketBase를 사용한 기능 및 데이터베이스 구현
- Vite를 사용한 빌드 및 Netlify를 사용한 배포
- Tab 키로 접근 가능
- Img태그의 alt 속성 기입
- button태그의 aria-label 또는 title 속성
- 스타트/로그인/회원가입 영역
- 프로필/프로필수정/프로필상세 영역
- 기기거래/상품리스트/상품작성/페이지수정/채팅 영역
- 같이해요/커뮤니티/글작성/채팅 영역
초기 폴더와 파일 세팅
Tailwind.config 파일 설정
tailwind.css 내의 구성 global 폰트 설정과 layout을 통해 공통 클래스를 지정합니다
collection/field relation 구조 계획
계획에 따른 pocketbase 생성
signUP의 정보 유효성검사와 유저정보유무에 따른 기능 구현
프로필카드의 유저정보 수정 업데이트 기능
기기거래의 gsap을 사용한 페이지 로딩 애니메이션과 필터에 따른 페이지 구현
게시판의 filter기능과 gsap을 사용한 페이지 애니메이션 랜더링