Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
commit b81a587 Author: Minjae Kim <[email protected]> Date: Mon Jul 31 16:13:27 2023 +0900 feat: 음식점 카드에 필요한 컴포넌트 추가 (#205) * feat: 마커 호버시 마커를 맨 앞으로 가져오기 (#192) * style: 마커 호버시 마커 강조 (#192) * feat: 마커 클릭시 레스토랑 카드 띄우기 (#192) * refactor: 불필요한 코드 제거 (#192) - 레스토랑 카드 클릭시 맵 모달 이벤트 제거 - 마커 클릭시 맵 모달 이벤트 제거 * feat: 마커클릭 시 마커 위치에 따라 카드모달 위치 조정 (#192) * style: 레스토랑 오버레이 스타일 수정 (#192) * refactor: restaurantCard 컴포넌트를 용도에 따라 스타일 다르게 설정 (#192) * feat: 마커 클릭시 강조 효과 주기 (#192) * Squashed commit of the following: commit 3442d16 Author: Minjae Kim <[email protected]> Date: Fri Jul 28 15:06:21 2023 +0900 design: 전체 카테고리에 해당하는 이미지 수정 (#195) (#196) commit 2112803 Author: 황준승 <[email protected]> Date: Thu Jul 27 16:45:06 2023 +0900 feat: 음식점 리스트 중복 필터링 기능 구현 (#186) * refactor: 지도 boundary 타입 추가 및 음식점 카테고리 타입 일부 수정 (#180) * feat: 셀럽 및 음식점 카테고리 별 필터링 기능 추가 (#180) * refactor: getQueryString 로직 분리 및 적용 (#180) * feat: CelebDropDown 및 CategoryNavbar에 전체 버튼 추가 (#184) * fix: 필터링 클릭 시 렌더링이 한 박자 늦게되는 오류 해결 (#184) * refactor: Map 컴포넌트에서 사용하지 않는 props 속성 제거 (#184) * refactor: celeb 전체를 나타내는 상태값을 -1로 변경 (#184) * feat: CelebDropDown blur 기능 추가 (#184) * fix: 불필요한 useEffect dependency 제거 (#184) * feat: Restaurant_Category에 전체 옵션 추가 (#184) * fix: CelebId 초기값 수정 (#184) * fix: API 명세서 수정에 따른 데이터 타입 변경 (#184) * refactor: NavButton props 프로퍼티 수정으로 인한 코드 수정 (#184) * refactor: css 선언방식을 삼항연산자를 && 로 변경 (#184) * fix: NavButton 불필요한 hover 기능 제거 (#184) Changed: hover 이벤트 && 연산자를 삼항연산자 사용으로 변경 * refactor: NavButton 컴포넌트를 NavItem 컴포넌트로 네이밍 수정 (#184) --------- Co-authored-by: d0dam <[email protected]> Co-authored-by: Jeremy <[email protected]> * feat: 다른 마커 클릭시 기존 마커 모달 닫기 기능 구현 (#192) * feat: 음식점 카드에 사용하는 컴포넌트 스켈레톤 구현 (#199) * refactor: 음식점 카드 리스트 컴포넌트 분리, 로딩 상태 추가 (#199) * refactor: 이미지에 대해 loading lazy 속성 추가 (#199) * refactor: 로딩 애니메이션을 자연스럽게 수정 (#199) * refactor: Map에 data 로딩 상태 추가 (#199) * feat: 전 음식점 갯수만큼 음식점 스켈레톤을 표시하도록 수정 (#199) * refactor: Map이 로딩 상태일 때 스타일 추가 (#199) * feat: ImageCarousel 컴포넌트 구현 (#201) * refactor: ImageCarousel 컴포넌트의 props 타입을 변경 (#201) * feat: WaterMarkImage 컴포넌트 구현 (#201) * refactor: 음식점 카드에 이미지 대신 케러셀 연결 (#201) * feat: 음식점 사진에 좋아요 아이콘 추가 (#201) * feat: ProfileImageList 구현 및 음식점 카드에 반영 (#201) * refactor: story에 size props 추가 (#201) * refactor: useBooleanState를 활용 가능한 상태를 해당 훅으로 변경 (#201) * Squashed commit of the following: commit cfb505f Author: d0dam <[email protected]> Date: Mon Jul 31 15:16:41 2023 +0900 fix: 충돌 해결 간 생긴 에러 및 lint 에러 수정 (#201) commit fbc4ff1 Merge: 7dc4a3e 60f8707 Author: Minjae Kim <[email protected]> Date: Mon Jul 31 15:13:46 2023 +0900 Merge branch 'develop-frontend' into 199-feat-레스토랑-카드에-loading-상태-추가-및-skeleton-반영 commit 7dc4a3e Author: d0dam <[email protected]> Date: Mon Jul 31 15:10:42 2023 +0900 Squashed commit of the following: commit 60f8707 Author: Jeremy <[email protected]> Date: Mon Jul 31 14:41:46 2023 +0900 feat: 레스토랑 카드 및 마커 클릭 이벤트 변경 (#198) * feat: 마커 호버시 마커를 맨 앞으로 가져오기 (#192) * style: 마커 호버시 마커 강조 (#192) * feat: 마커 클릭시 레스토랑 카드 띄우기 (#192) * refactor: 불필요한 코드 제거 (#192) - 레스토랑 카드 클릭시 맵 모달 이벤트 제거 - 마커 클릭시 맵 모달 이벤트 제거 * feat: 마커클릭 시 마커 위치에 따라 카드모달 위치 조정 (#192) * style: 레스토랑 오버레이 스타일 수정 (#192) * refactor: restaurantCard 컴포넌트를 용도에 따라 스타일 다르게 설정 (#192) * feat: 마커 클릭시 강조 효과 주기 (#192) * Squashed commit of the following: commit 3442d16 Author: Minjae Kim <[email protected]> Date: Fri Jul 28 15:06:21 2023 +0900 design: 전체 카테고리에 해당하는 이미지 수정 (#195) (#196) commit 2112803 Author: 황준승 <[email protected]> Date: Thu Jul 27 16:45:06 2023 +0900 feat: 음식점 리스트 중복 필터링 기능 구현 (#186) * refactor: 지도 boundary 타입 추가 및 음식점 카테고리 타입 일부 수정 (#180) * feat: 셀럽 및 음식점 카테고리 별 필터링 기능 추가 (#180) * refactor: getQueryString 로직 분리 및 적용 (#180) * feat: CelebDropDown 및 CategoryNavbar에 전체 버튼 추가 (#184) * fix: 필터링 클릭 시 렌더링이 한 박자 늦게되는 오류 해결 (#184) * refactor: Map 컴포넌트에서 사용하지 않는 props 속성 제거 (#184) * refactor: celeb 전체를 나타내는 상태값을 -1로 변경 (#184) * feat: CelebDropDown blur 기능 추가 (#184) * fix: 불필요한 useEffect dependency 제거 (#184) * feat: Restaurant_Category에 전체 옵션 추가 (#184) * fix: CelebId 초기값 수정 (#184) * fix: API 명세서 수정에 따른 데이터 타입 변경 (#184) * refactor: NavButton props 프로퍼티 수정으로 인한 코드 수정 (#184) * refactor: css 선언방식을 삼항연산자를 && 로 변경 (#184) * fix: NavButton 불필요한 hover 기능 제거 (#184) Changed: hover 이벤트 && 연산자를 삼항연산자 사용으로 변경 * refactor: NavButton 컴포넌트를 NavItem 컴포넌트로 네이밍 수정 (#184) --------- Co-authored-by: d0dam <[email protected]> Co-authored-by: Jeremy <[email protected]> * feat: 다른 마커 클릭시 기존 마커 모달 닫기 기능 구현 (#192) * style: 파일명 오류 수정 (#192) * refactor: baseURL 환경변수 설정 및 type import 분리 * feat: RestaurantCard 컴포넌트 props 수정 (#192) onClick을 optional로 수정 * refactor: getQuadrant 리팩터링 (#192) * style: 상태 네이밍 수정 (#192) mainPosition -> currentCenter * feat: 음식점 카드 호버시 해당 음식점 마커 강조 (#192) * design: 강조시 애니메이션 효과 추가 및 음식점 리스트 스타일 수정 (#192) * refactor: 음식점 카드 호버시 마커 강조 로직 변경 (#192) * refactor: 프로필 이미지 컴포넌트 Props 타입 수정 (#192) size: number => string * fix: setHoverId가 없을 때 default value 설정 (#192) commit 60f8707 Author: Jeremy <[email protected]> Date: Mon Jul 31 14:41:46 2023 +0900 feat: 레스토랑 카드 및 마커 클릭 이벤트 변경 (#198) * feat: 마커 호버시 마커를 맨 앞으로 가져오기 (#192) * style: 마커 호버시 마커 강조 (#192) * feat: 마커 클릭시 레스토랑 카드 띄우기 (#192) * refactor: 불필요한 코드 제거 (#192) - 레스토랑 카드 클릭시 맵 모달 이벤트 제거 - 마커 클릭시 맵 모달 이벤트 제거 * feat: 마커클릭 시 마커 위치에 따라 카드모달 위치 조정 (#192) * style: 레스토랑 오버레이 스타일 수정 (#192) * refactor: restaurantCard 컴포넌트를 용도에 따라 스타일 다르게 설정 (#192) * feat: 마커 클릭시 강조 효과 주기 (#192) * Squashed commit of the following: commit 3442d16 Author: Minjae Kim <[email protected]> Date: Fri Jul 28 15:06:21 2023 +0900 design: 전체 카테고리에 해당하는 이미지 수정 (#195) (#196) commit 2112803 Author: 황준승 <[email protected]> Date: Thu Jul 27 16:45:06 2023 +0900 feat: 음식점 리스트 중복 필터링 기능 구현 (#186) * refactor: 지도 boundary 타입 추가 및 음식점 카테고리 타입 일부 수정 (#180) * feat: 셀럽 및 음식점 카테고리 별 필터링 기능 추가 (#180) * refactor: getQueryString 로직 분리 및 적용 (#180) * feat: CelebDropDown 및 CategoryNavbar에 전체 버튼 추가 (#184) * fix: 필터링 클릭 시 렌더링이 한 박자 늦게되는 오류 해결 (#184) * refactor: Map 컴포넌트에서 사용하지 않는 props 속성 제거 (#184) * refactor: celeb 전체를 나타내는 상태값을 -1로 변경 (#184) * feat: CelebDropDown blur 기능 추가 (#184) * fix: 불필요한 useEffect dependency 제거 (#184) * feat: Restaurant_Category에 전체 옵션 추가 (#184) * fix: CelebId 초기값 수정 (#184) * fix: API 명세서 수정에 따른 데이터 타입 변경 (#184) * refactor: NavButton props 프로퍼티 수정으로 인한 코드 수정 (#184) * refactor: css 선언방식을 삼항연산자를 && 로 변경 (#184) * fix: NavButton 불필요한 hover 기능 제거 (#184) Changed: hover 이벤트 && 연산자를 삼항연산자 사용으로 변경 * refactor: NavButton 컴포넌트를 NavItem 컴포넌트로 네이밍 수정 (#184) --------- Co-authored-by: d0dam <[email protected]> Co-authored-by: Jeremy <[email protected]> * feat: 다른 마커 클릭시 기존 마커 모달 닫기 기능 구현 (#192) * style: 파일명 오류 수정 (#192) * refactor: baseURL 환경변수 설정 및 type import 분리 * feat: RestaurantCard 컴포넌트 props 수정 (#192) onClick을 optional로 수정 * refactor: getQuadrant 리팩터링 (#192) * style: 상태 네이밍 수정 (#192) mainPosition -> currentCenter * feat: 음식점 카드 호버시 해당 음식점 마커 강조 (#192) * design: 강조시 애니메이션 효과 추가 및 음식점 리스트 스타일 수정 (#192) * refactor: 음식점 카드 호버시 마커 강조 로직 변경 (#192) * refactor: 프로필 이미지 컴포넌트 Props 타입 수정 (#192) size: number => string * fix: setHoverId가 없을 때 default value 설정 (#192) * refactor: 경로 수정 (#201) * fix: lint 에러 수정 (#201) --------- Co-authored-by: Jeremy <[email protected]> commit 2977855 Author: Minjae Kim <[email protected]> Date: Mon Jul 31 16:05:17 2023 +0900 feat: 레스토랑 카드에 loading 상태 추가 및 skeleton 반영 (#202) * feat: 마커 호버시 마커를 맨 앞으로 가져오기 (#192) * style: 마커 호버시 마커 강조 (#192) * feat: 마커 클릭시 레스토랑 카드 띄우기 (#192) * refactor: 불필요한 코드 제거 (#192) - 레스토랑 카드 클릭시 맵 모달 이벤트 제거 - 마커 클릭시 맵 모달 이벤트 제거 * feat: 마커클릭 시 마커 위치에 따라 카드모달 위치 조정 (#192) * style: 레스토랑 오버레이 스타일 수정 (#192) * refactor: restaurantCard 컴포넌트를 용도에 따라 스타일 다르게 설정 (#192) * feat: 마커 클릭시 강조 효과 주기 (#192) * Squashed commit of the following: commit 3442d16 Author: Minjae Kim <[email protected]> Date: Fri Jul 28 15:06:21 2023 +0900 design: 전체 카테고리에 해당하는 이미지 수정 (#195) (#196) commit 2112803 Author: 황준승 <[email protected]> Date: Thu Jul 27 16:45:06 2023 +0900 feat: 음식점 리스트 중복 필터링 기능 구현 (#186) * refactor: 지도 boundary 타입 추가 및 음식점 카테고리 타입 일부 수정 (#180) * feat: 셀럽 및 음식점 카테고리 별 필터링 기능 추가 (#180) * refactor: getQueryString 로직 분리 및 적용 (#180) * feat: CelebDropDown 및 CategoryNavbar에 전체 버튼 추가 (#184) * fix: 필터링 클릭 시 렌더링이 한 박자 늦게되는 오류 해결 (#184) * refactor: Map 컴포넌트에서 사용하지 않는 props 속성 제거 (#184) * refactor: celeb 전체를 나타내는 상태값을 -1로 변경 (#184) * feat: CelebDropDown blur 기능 추가 (#184) * fix: 불필요한 useEffect dependency 제거 (#184) * feat: Restaurant_Category에 전체 옵션 추가 (#184) * fix: CelebId 초기값 수정 (#184) * fix: API 명세서 수정에 따른 데이터 타입 변경 (#184) * refactor: NavButton props 프로퍼티 수정으로 인한 코드 수정 (#184) * refactor: css 선언방식을 삼항연산자를 && 로 변경 (#184) * fix: NavButton 불필요한 hover 기능 제거 (#184) Changed: hover 이벤트 && 연산자를 삼항연산자 사용으로 변경 * refactor: NavButton 컴포넌트를 NavItem 컴포넌트로 네이밍 수정 (#184) --------- Co-authored-by: d0dam <[email protected]> Co-authored-by: Jeremy <[email protected]> * feat: 다른 마커 클릭시 기존 마커 모달 닫기 기능 구현 (#192) * feat: 음식점 카드에 사용하는 컴포넌트 스켈레톤 구현 (#199) * refactor: 음식점 카드 리스트 컴포넌트 분리, 로딩 상태 추가 (#199) * refactor: 이미지에 대해 loading lazy 속성 추가 (#199) * refactor: 로딩 애니메이션을 자연스럽게 수정 (#199) * refactor: Map에 data 로딩 상태 추가 (#199) * feat: 전 음식점 갯수만큼 음식점 스켈레톤을 표시하도록 수정 (#199) * refactor: Map이 로딩 상태일 때 스타일 추가 (#199) * Squashed commit of the following: commit 60f8707 Author: Jeremy <[email protected]> Date: Mon Jul 31 14:41:46 2023 +0900 feat: 레스토랑 카드 및 마커 클릭 이벤트 변경 (#198) * feat: 마커 호버시 마커를 맨 앞으로 가져오기 (#192) * style: 마커 호버시 마커 강조 (#192) * feat: 마커 클릭시 레스토랑 카드 띄우기 (#192) * refactor: 불필요한 코드 제거 (#192) - 레스토랑 카드 클릭시 맵 모달 이벤트 제거 - 마커 클릭시 맵 모달 이벤트 제거 * feat: 마커클릭 시 마커 위치에 따라 카드모달 위치 조정 (#192) * style: 레스토랑 오버레이 스타일 수정 (#192) * refactor: restaurantCard 컴포넌트를 용도에 따라 스타일 다르게 설정 (#192) * feat: 마커 클릭시 강조 효과 주기 (#192) * Squashed commit of the following: commit 3442d16 Author: Minjae Kim <[email protected]> Date: Fri Jul 28 15:06:21 2023 +0900 design: 전체 카테고리에 해당하는 이미지 수정 (#195) (#196) commit 2112803 Author: 황준승 <[email protected]> Date: Thu Jul 27 16:45:06 2023 +0900 feat: 음식점 리스트 중복 필터링 기능 구현 (#186) * refactor: 지도 boundary 타입 추가 및 음식점 카테고리 타입 일부 수정 (#180) * feat: 셀럽 및 음식점 카테고리 별 필터링 기능 추가 (#180) * refactor: getQueryString 로직 분리 및 적용 (#180) * feat: CelebDropDown 및 CategoryNavbar에 전체 버튼 추가 (#184) * fix: 필터링 클릭 시 렌더링이 한 박자 늦게되는 오류 해결 (#184) * refactor: Map 컴포넌트에서 사용하지 않는 props 속성 제거 (#184) * refactor: celeb 전체를 나타내는 상태값을 -1로 변경 (#184) * feat: CelebDropDown blur 기능 추가 (#184) * fix: 불필요한 useEffect dependency 제거 (#184) * feat: Restaurant_Category에 전체 옵션 추가 (#184) * fix: CelebId 초기값 수정 (#184) * fix: API 명세서 수정에 따른 데이터 타입 변경 (#184) * refactor: NavButton props 프로퍼티 수정으로 인한 코드 수정 (#184) * refactor: css 선언방식을 삼항연산자를 && 로 변경 (#184) * fix: NavButton 불필요한 hover 기능 제거 (#184) Changed: hover 이벤트 && 연산자를 삼항연산자 사용으로 변경 * refactor: NavButton 컴포넌트를 NavItem 컴포넌트로 네이밍 수정 (#184) --------- Co-authored-by: d0dam <[email protected]> Co-authored-by: Jeremy <[email protected]> * feat: 다른 마커 클릭시 기존 마커 모달 닫기 기능 구현 (#192) * style: 파일명 오류 수정 (#192) * refactor: baseURL 환경변수 설정 및 type import 분리 * feat: RestaurantCard 컴포넌트 props 수정 (#192) onClick을 optional로 수정 * refactor: getQuadrant 리팩터링 (#192) * style: 상태 네이밍 수정 (#192) mainPosition -> currentCenter * feat: 음식점 카드 호버시 해당 음식점 마커 강조 (#192) * design: 강조시 애니메이션 효과 추가 및 음식점 리스트 스타일 수정 (#192) * refactor: 음식점 카드 호버시 마커 강조 로직 변경 (#192) * refactor: 프로필 이미지 컴포넌트 Props 타입 수정 (#192) size: number => string * fix: setHoverId가 없을 때 default value 설정 (#192) * fix: 충돌 해결 간 생긴 에러 및 lint 에러 수정 (#201) --------- Co-authored-by: Jeremy <[email protected]> commit 60f8707 Author: Jeremy <[email protected]> Date: Mon Jul 31 14:41:46 2023 +0900 feat: 레스토랑 카드 및 마커 클릭 이벤트 변경 (#198) * feat: 마커 호버시 마커를 맨 앞으로 가져오기 (#192) * style: 마커 호버시 마커 강조 (#192) * feat: 마커 클릭시 레스토랑 카드 띄우기 (#192) * refactor: 불필요한 코드 제거 (#192) - 레스토랑 카드 클릭시 맵 모달 이벤트 제거 - 마커 클릭시 맵 모달 이벤트 제거 * feat: 마커클릭 시 마커 위치에 따라 카드모달 위치 조정 (#192) * style: 레스토랑 오버레이 스타일 수정 (#192) * refactor: restaurantCard 컴포넌트를 용도에 따라 스타일 다르게 설정 (#192) * feat: 마커 클릭시 강조 효과 주기 (#192) * Squashed commit of the following: commit 3442d16 Author: Minjae Kim <[email protected]> Date: Fri Jul 28 15:06:21 2023 +0900 design: 전체 카테고리에 해당하는 이미지 수정 (#195) (#196) commit 2112803 Author: 황준승 <[email protected]> Date: Thu Jul 27 16:45:06 2023 +0900 feat: 음식점 리스트 중복 필터링 기능 구현 (#186) * refactor: 지도 boundary 타입 추가 및 음식점 카테고리 타입 일부 수정 (#180) * feat: 셀럽 및 음식점 카테고리 별 필터링 기능 추가 (#180) * refactor: getQueryString 로직 분리 및 적용 (#180) * feat: CelebDropDown 및 CategoryNavbar에 전체 버튼 추가 (#184) * fix: 필터링 클릭 시 렌더링이 한 박자 늦게되는 오류 해결 (#184) * refactor: Map 컴포넌트에서 사용하지 않는 props 속성 제거 (#184) * refactor: celeb 전체를 나타내는 상태값을 -1로 변경 (#184) * feat: CelebDropDown blur 기능 추가 (#184) * fix: 불필요한 useEffect dependency 제거 (#184) * feat: Restaurant_Category에 전체 옵션 추가 (#184) * fix: CelebId 초기값 수정 (#184) * fix: API 명세서 수정에 따른 데이터 타입 변경 (#184) * refactor: NavButton props 프로퍼티 수정으로 인한 코드 수정 (#184) * refactor: css 선언방식을 삼항연산자를 && 로 변경 (#184) * fix: NavButton 불필요한 hover 기능 제거 (#184) Changed: hover 이벤트 && 연산자를 삼항연산자 사용으로 변경 * refactor: NavButton 컴포넌트를 NavItem 컴포넌트로 네이밍 수정 (#184) --------- Co-authored-by: d0dam <[email protected]> Co-authored-by: Jeremy <[email protected]> * feat: 다른 마커 클릭시 기존 마커 모달 닫기 기능 구현 (#192) * style: 파일명 오류 수정 (#192) * refactor: baseURL 환경변수 설정 및 type import 분리 * feat: RestaurantCard 컴포넌트 props 수정 (#192) onClick을 optional로 수정 * refactor: getQuadrant 리팩터링 (#192) * style: 상태 네이밍 수정 (#192) mainPosition -> currentCenter * feat: 음식점 카드 호버시 해당 음식점 마커 강조 (#192) * design: 강조시 애니메이션 효과 추가 및 음식점 리스트 스타일 수정 (#192) * refactor: 음식점 카드 호버시 마커 강조 로직 변경 (#192) * refactor: 프로필 이미지 컴포넌트 Props 타입 수정 (#192) size: number => string * fix: setHoverId가 없을 때 default value 설정 (#192) commit 3442d16 Author: Minjae Kim <[email protected]> Date: Fri Jul 28 15:06:21 2023 +0900 design: 전체 카테고리에 해당하는 이미지 수정 (#195) (#196)
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import type { RestaurantData } from './api.types'; | ||
|
|
||
| type RestaurantImages = RestaurantData['images']; | ||
|
|
||
| export type RestaurantImage = RestaurantImages[number]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
| import ImageCarousel from './ImageCarousel'; | ||
|
|
||
| const meta: Meta<typeof ImageCarousel> = { | ||
| title: 'ImageCarousel', | ||
| component: ImageCarousel, | ||
| }; | ||
|
|
||
| export default meta; | ||
|
|
||
| type Story = StoryObj<typeof ImageCarousel>; | ||
|
|
||
| export const Default: Story = { | ||
| args: { | ||
| images: [ | ||
| { id: 1, name: 'https://picsum.photos/315/300', author: '@d0dam', sns: 'youtube' }, | ||
| { id: 2, name: 'https://picsum.photos/315/300', author: '@d0dam', sns: 'youtube' }, | ||
| { id: 3, name: 'https://picsum.photos/315/300', author: '@d0dam', sns: 'youtube' }, | ||
| { id: 4, name: 'https://picsum.photos/315/300', author: '@d0dam', sns: 'youtube' }, | ||
| ], | ||
| }, | ||
| }; | ||
|
|
||
| export const OneImage: Story = { | ||
| args: { | ||
| images: [{ id: 1, name: 'https://picsum.photos/315/300', author: '@d0dam', sns: 'youtube' }], | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,155 @@ | ||
| import { useState } from 'react'; | ||
| import styled, { css } from 'styled-components'; | ||
| import { RestaurantImage } from '~/@types/image.type'; | ||
| import LeftBracket from '~/assets/icons/left-bracket.svg'; | ||
| import RightBracket from '~/assets/icons/right-bracket.svg'; | ||
| import { BORDER_RADIUS } from '~/styles/common'; | ||
| import WaterMarkImage from '../WaterMarkImage'; | ||
|
|
||
| interface ImageCarouselProps { | ||
| images: RestaurantImage[]; | ||
| type: 'list' | 'map'; | ||
| } | ||
|
|
||
| function ImageCarousel({ images, type }: ImageCarouselProps) { | ||
| const [currentIndex, setCurrentIndex] = useState<number>(0); | ||
|
|
||
| const goToPrevious = () => { | ||
| setCurrentIndex(prevIndex => prevIndex - 1); | ||
| }; | ||
|
|
||
| const goToNext = () => { | ||
| setCurrentIndex(prevIndex => prevIndex + 1); | ||
| }; | ||
|
|
||
| return ( | ||
| <StyledCarouselContainer type={type}> | ||
| <StyledCarouselSlide currentIndex={currentIndex}> | ||
| {images.map(({ id, name, author }) => ( | ||
| <WaterMarkImage key={id} imageUrl={name} waterMark={author} /> | ||
| ))} | ||
| </StyledCarouselSlide> | ||
| {currentIndex !== 0 && ( | ||
| <StyledLeftButton type="button" onClick={goToPrevious}> | ||
| <LeftBracket width={10} height={10} /> | ||
| </StyledLeftButton> | ||
| )} | ||
| {currentIndex !== images.length - 1 && ( | ||
| <StyledRightButton type="button" onClick={goToNext}> | ||
| <RightBracket width={10} height={10} /> | ||
| </StyledRightButton> | ||
| )} | ||
| {images.length > 1 && ( | ||
| <StyledDots currentIndex={currentIndex}> | ||
| {Array.from({ length: images.length }, () => ( | ||
| <StyledDot /> | ||
| ))} | ||
| </StyledDots> | ||
| )} | ||
| </StyledCarouselContainer> | ||
| ); | ||
| } | ||
|
|
||
| export default ImageCarousel; | ||
|
|
||
| const StyledCarouselContainer = styled.div<{ type: 'list' | 'map' }>` | ||
| position: relative; | ||
| width: 100%; | ||
| overflow: hidden; | ||
| border-radius: ${({ type }) => | ||
| type === 'list' ? `${BORDER_RADIUS.md}` : `${BORDER_RADIUS.md} ${BORDER_RADIUS.md} 0 0`}; | ||
| button { | ||
| visibility: hidden; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| position: absolute; | ||
| top: 50%; | ||
| width: 32px; | ||
| height: 32px; | ||
| border: none; | ||
| border-radius: 50%; | ||
| background-color: var(--white); | ||
| cursor: pointer; | ||
| opacity: 0; | ||
| transition: transform 0.15s ease-in-out, opacity 0.2s ease-in-out; | ||
| transform: translateY(-50%); | ||
| box-shadow: var(--shadow); | ||
| outline: none; | ||
| &:hover { | ||
| transform: translateY(-50%) scale(1.04); | ||
| } | ||
| } | ||
| &:hover { | ||
| button { | ||
| visibility: visible; | ||
| opacity: 0.85; | ||
| &:hover { | ||
| opacity: 1; | ||
| } | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| const StyledLeftButton = styled.button` | ||
| left: 12px; | ||
| `; | ||
|
|
||
| const StyledRightButton = styled.button` | ||
| right: 12px; | ||
| `; | ||
|
|
||
| const StyledCarouselSlide = styled.div<{ currentIndex: number }>` | ||
| display: flex; | ||
| width: 100%; | ||
| transition: transform 0.3s ease-in-out; | ||
| transform: ${({ currentIndex }) => `translateX(-${currentIndex * 100}%)`}; | ||
| flex-wrap: nowrap; | ||
| aspect-ratio: 1.05 / 1; | ||
| `; | ||
|
|
||
| const StyledDots = styled.div<{ currentIndex: number }>` | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: 0 0.5rem; | ||
| position: absolute; | ||
| bottom: 12px; | ||
| width: 100%; | ||
| ${({ currentIndex }) => css` | ||
| & > span:nth-child(${currentIndex + 1}) { | ||
| opacity: 1; | ||
| transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; | ||
| transform: scale(1.1); | ||
| } | ||
| `} | ||
| `; | ||
|
|
||
| const StyledDot = styled.span` | ||
| width: 6px; | ||
| height: 6px; | ||
| border-radius: 50%; | ||
| background-color: var(--white); | ||
| opacity: 0.2; | ||
| transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import ImageCarousel from './ImageCarousel'; | ||
|
|
||
| export default ImageCarousel; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.