공연 및 축제 정보를 확인하고 검색할 수 있습니다.
- 개인 프로젝트
- 2022년 06월 01일 ~ 2022년 06월 05일
- Typescript, React, Sass, react-query, recoil
- yarn 설치
npm i yarn
- repository 클론
git clone https://github.com/Yu-jae-min/POB_KPAPedia.git
- dependencies 설치
yarn install
- 실행
yarn start
로그인 | 홈 | 예매 현황 |
---|---|---|
![]() |
![]() |
![]() |
공연 목록 | 축제 목록 | 수상작 |
![]() |
![]() |
![]() |
상세 페이지 | ||
![]() |
-
아이디 입력 창 및 비밀번호 입력 창
-
정규식과 match 메소드를 활용한 이메일 유효성 및 비밀번호 유효성 검사
-
입력 폼 틀린 경우 input 하단에 경고 label 노출
-
-
로그인 버튼
-
아이디, 비밀번호 입력 폼 모두 맞는 경우 버튼 자동 활성화
-
아이디, 비밀번호 입력 폼 틀린 상태에서 버튼 클릭 시 경고 모달 노출
- Portal과 children을 활용한 모달 구현
-
활성화 버튼 클릭 시 메인 페이지로 이동 및 storejs 라이브러리를 활용하여 로컬 스토리지에 유저 아이디 저장
-
-
로그인 체크
-
Custom Hook을 활용한 Login, LogOut 함수 관리
-
사이트 접속 시 로컬 스토리지에 login key가 없는 경우 로그인 페이지로 자동 이동
-
-
헤더 로고
-
클릭 시 메인 페이지로 이동
-
svg icon을 유동적인 스타일로 활용하기 위해 컴포넌트로 변환하여 사용
-
-
네비게이션 메뉴
-
네비게이션 메뉴 클릭 시 해당 페이지로 이동
-
네비게이션 메뉴 클릭 시 classnames 라이브러리를 활용한 활성화 기능
-
-
로그인 유저 아이디 표시
-
로그아웃 버튼
-
로그아웃 버튼 클릭 시 로그인 페이지로 이동
-
로컬 스토리지에 저장 된 login key 데이터 삭제
-
-
타이틀에 맞는 각각의 리스트 노출
-
각각의 리스트 컴포넌트로 분리
-
박스오피스 썸네일 리스트
- filter 메소드를 활용하여 상위 7위까지의 리스트는 썸네일을 포함하여 노출
-
박스오피스 테이블 리스트
-
slice 메소드를 활용한 상위 30위 아이템 리스트 생성
-
1위 테이블 데이터 컬러 활성화
-
자세히 보기 버튼 클릭 시 상세 페이지 이동
-
-
검색 창
-
filter 메소드를 활용한 검색 기능 구현
-
검색 창에 검색어 입력 시 연속 API 호출을 막기 위한 Debouncing 구현
-
검색어 입력 시 toLowerCase 메소드를 활용하여 영문 대소문자 구분하지 않는 검색 결과 노출
-
검색 결과 있는 경우 검색 결과 노출 후 무한 스크롤 기능 중지
-
검색 결과 없는 경우 검색 결과 없음 표시
-
검색 대상이 되는 전체 아이템 리스트 비동기 요청이 완료되기 전 검색 창 disable true로 입력 불가 처리
-
-
무한 스크롤
- useInView Hook을 사용하여 무한 스크롤 구현, Scroll 하단 위치 시 API 재요청
-
동적 라우팅
-
해당 아이템의 상세 내용 표시
-
비동기 통신
-
API Key 환경 변수로 관리
-
react-query를 사용하여 데이터 캐싱
-
요청 시 조건에 따른 스피너 노출
-
요청 에러 시 조건에 따른 에러 컴포넌트 노출
-
CORS 에러 proxy 로 우회
-
xml 데이터 json 형식으로 변환
-
-
비동기 통신 로딩 처리
-
axios 비동기 통신 시 useState Hook을 활용한 Spinner 처리
-
react-query 비동기 통신 시 isLoading을 활용한 Spinner 처리
-
-
비동기 통신 에러 처리
-
axios 비동기 통신 시 catch 메소드를 활용한 에러 처리
-
react-query 비동기 통신 시 isError를 활용한 에러 처리
-
-
404 Not found 페이지 구현
-
Layout 컴포넌트에 Outlet을 활용한 전체 Layout 설정
-
ScrollTop 컴포넌트 추가하여 페이지 전환 시 스크롤 하단에 위치한 에러 수정
-
SEO 측면을 고려하여 react-helmet을 활용하여 각 페이지별 메타 태그 설정
-
썸네일 리스트 및 상세 페이지
-
전체 페이지의 썸네일 리스트 및 상세 페이지 하나의 컴포넌트로 관리
-
썸네일 마우스 호버 시 이미지 스케일 증가
-
썸네일 클릭 시 상세 페이지로 이동
-