Skip to content

Commit

Permalink
feat: 로그인 기능 구현 (#203)
Browse files Browse the repository at this point in the history
* chore: react-router-dom 라이브러리 설정 및 셋팅 (#193)

* chore: naver, kakao 아이콘 셋팅 (#193)

* feat: api 관련 상수 선언 (#193)

* feat: 네이버, 카카오 로그인 버튼 구현 (#193)

* feat: Oauth 기능 구현 (#193)

* feat: 구글 로그인 버튼 ui 구현 (#193)

* feat: 내 정보 아이콘 ui 구현 (#193)

* feat: InfoDropDown컴포넌트 구현 (#193)

* feat: Modal 컴포넌트 구현 (#193)

* feat: LoginModalContnet 컴포넌트 구현 (#193)

Explained:
로그인 모달창에 쓰이는 content를 컴포넌트로 구현

* feat: Header에 InfoButton 컴포넌트 적용 및 기능 구현 (#193)

* refactor: Modal 컴포넌트 가운데에 정렬이 되도록 수정 (#193)

* refactor: useBooleanstate 훅 활용 (#193)

* refactor: 불필요한 파일 삭제 (#193)

* chore: .vscode 파일 수정 (#193)

* refactor: Oauth 타입 분리 및 적용 (#193)

* refactor: DropDown 리스트 box-shadow 적용 (#193)

* refactor: box shadow 변수 사용 (#193)

* Squashed commit of the following:

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)

* refactor: BASE_URL 값 수정 (#193)
  • Loading branch information
turtle601 authored and TaeyeonRoyce committed Aug 3, 2023
1 parent f82822b commit 5542f40
Show file tree
Hide file tree
Showing 30 changed files with 657 additions and 7 deletions.
1 change: 1 addition & 0 deletions frontend/.vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"editor.defaultFormatter": "esbenp.prettier-vscode",

"stylelint.enable": true,

"stylelint.config": null,
"stylelint.validate": ["css", "scss", "typescript", "typescriptreact"]
}
3 changes: 2 additions & 1 deletion frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"main": "index.tsx",
"license": "MIT",
"scripts": {
"start": "webpack serve --open --mode development",
"start": "webpack serve --open --mode development --port 3000",
"start:prod": "webpack serve --open --mode production",
"build": "webpack --mode production",
"lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
Expand Down Expand Up @@ -32,6 +32,7 @@
"msw": "^1.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.14.2",
"storybook": "^7.0.25",
"styled-components": "^6.0.2",
"ts-loader": "^9.4.4",
Expand Down
1 change: 1 addition & 0 deletions frontend/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,6 @@ <h2>경고!</h2>
<div>현재 사용 중인 브라우저는 스크립트를 지원하지 않거나, 해당 기능이 활성화 되어 있지 않습니다.</div>
</noscript>
<div id="root"></div>
<div id="modal"></div>
</body>
</html>
1 change: 1 addition & 0 deletions frontend/src/@types/oauth.types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export type Oauth = 'google' | 'kakao' | 'naver';
15 changes: 13 additions & 2 deletions frontend/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,20 @@
import MainPage from './pages/MainPage';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import OauthRedirectPage from '~/pages/OauthRedirectPage';
import MainPage from '~/pages/MainPage';

export const { BASE_URL } = process.env;

function App() {
return <MainPage />;
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<MainPage />} />
<Route path="/oauth/redirect/kakao" element={<OauthRedirectPage type="kakao" />} />
<Route path="/oauth/redirect/naver" element={<OauthRedirectPage type="naver" />} />
<Route path="/oauth/redirect/google" element={<OauthRedirectPage type="google" />} />
</Routes>
</BrowserRouter>
);
}

export default App;
3 changes: 3 additions & 0 deletions frontend/src/assets/icons/etc/menu.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions frontend/src/assets/icons/etc/user.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions frontend/src/assets/icons/oauth/google.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions frontend/src/assets/icons/oauth/kakao.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions frontend/src/assets/icons/oauth/naver.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 31 additions & 4 deletions frontend/src/components/@common/Header/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,50 @@
import React from 'react';
import { styled } from 'styled-components';
import Logo from '~/assets/logo.png';
import { Modal, ModalContent } from '~/components/@common/Modal';
import InfoDropDown from '~/components/InfoDropDown';
import LoginModalContent from '~/components/LoginModalContent';
import useBooleanState from '~/hooks/useBooleanState';

const options = [
{ id: 1, value: '로그인' },
{ id: 2, value: '회원가입' },
];

function Header() {
const { value: isModalOpen, setTrue: openModal, setFalse: closeModal } = useBooleanState(false);

const handleInfoDropDown = (event: React.MouseEvent<HTMLElement>) => {
const currentOption = event.currentTarget.dataset.name;

if (currentOption === '로그인') openModal();
};

return (
<StyledHeader>
<StyledLogo alt="셀럽잇 로고" src={Logo} />
</StyledHeader>
<>
<StyledHeader>
<StyledLogo alt="셀럽잇 로고" src={Logo} />
<InfoDropDown options={options} externalOnClick={handleInfoDropDown} isOpen={isModalOpen} />
</StyledHeader>
<Modal>
<ModalContent isShow={isModalOpen} title="로그인 및 회원 가입" closeModal={closeModal}>
<LoginModalContent />
</ModalContent>
</Modal>
</>
);
}

export default Header;

const StyledHeader = styled.header`
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 10;
z-index: 20;
width: 100%;
height: 80px;
Expand Down
15 changes: 15 additions & 0 deletions frontend/src/components/@common/InfoButton/InfoButton.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import type { Meta, StoryObj } from '@storybook/react';
import InfoButton from './InfoButton';

const meta: Meta<typeof InfoButton> = {
title: 'InfoButton',
component: InfoButton,
};

export default meta;

type Story = StoryObj<typeof InfoButton>;

export const Default: Story = {
args: {},
};
47 changes: 47 additions & 0 deletions frontend/src/components/@common/InfoButton/InfoButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import styled, { css } from 'styled-components';

import Menu from '~/assets/icons/etc/menu.svg';
import User from '~/assets/icons/etc/user.svg';

interface InfoButtonProps {
isShow?: boolean;
}

function InfoButton({ isShow = false }: InfoButtonProps) {
return (
<StyledInfoButton isShow={isShow}>
<Menu />
<User />
</StyledInfoButton>
);
}

export default InfoButton;

const StyledInfoButton = styled.button<InfoButtonProps>`
display: flex;
justify-content: space-between;
align-items: center;
width: 77px;
padding: 0.5rem 0.5rem 0.5rem 1.2rem;
border: 1px solid #ddd;
border-radius: 21px;
background: transparent;
cursor: pointer;
${({ isShow }) =>
isShow &&
css`
box-shadow: var(--shadow);
`}
&:hover {
box-shadow: var(--shadow);
transition: box-shadow 0.2s ease-in-out;
}
`;
3 changes: 3 additions & 0 deletions frontend/src/components/@common/InfoButton/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import InfoButton from '~/components/@common/InfoButton/InfoButton';

export default InfoButton;
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import type { Meta, StoryObj } from '@storybook/react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import LoginButton from './LoginButton';

const meta: Meta<typeof LoginButton> = {
title: 'Oauth/LoginButton',
component: LoginButton,
decorators: [
Story => (
<BrowserRouter>
<Routes>
<Route path="/*" element={<Story />} />
</Routes>
</BrowserRouter>
),
],
};

export default meta;

type Story = StoryObj<typeof LoginButton>;

export const Google: Story = {
args: { type: 'google' },
};

export const KaKao: Story = {
args: { type: 'kakao' },
};

export const Naver: Story = {
args: { type: 'naver' },
};
74 changes: 74 additions & 0 deletions frontend/src/components/@common/LoginButton/LoginButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import { Link } from 'react-router-dom';
import styled, { css } from 'styled-components';
import React from 'react';
import { OAUTH_BUTTON_MESSAGE, OAUTH_LINK } from '~/constants/api';

import KaKao from '~/assets/icons/oauth/kakao.svg';
import Naver from '~/assets/icons/oauth/naver.svg';
import Google from '~/assets/icons/oauth/google.svg';
import { Oauth } from '~/@types/oauth.types';

interface LoginButtonProps {
type: Oauth;
}

const LoginIcon: Record<string, React.ReactNode> = {
naver: <Naver />,
kakao: <KaKao />,
google: <Google />,
};

function LoginButton({ type }: LoginButtonProps) {
return (
<StyledLoginButtonWrapper type={type} to={OAUTH_LINK[type]} target="_blank">
<div>{LoginIcon[type]}</div>
<StyledLoginButtonText>{OAUTH_BUTTON_MESSAGE[type]}</StyledLoginButtonText>
</StyledLoginButtonWrapper>
);
}

export default LoginButton;

const StyledLoginButtonWrapper = styled(Link)<LoginButtonProps>`
display: flex;
width: 100%;
height: fit-content;
padding: 2.3rem 1.3rem;
border-radius: 12px;
font-size: 1.4rem;
font-weight: 600;
text-decoration: none;
${({ type }) =>
type === 'naver' &&
css`
background: #03c759;
color: #fff;
`}
${({ type }) =>
type === 'kakao' &&
css`
background: #fee500;
`}
${({ type }) =>
type === 'google' &&
css`
border: 1px solid var(--gray-3);
`}
cursor: pointer;
transition: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1), transform 0.1s cubic-bezier(0.2, 0, 0, 1);
`;

const StyledLoginButtonText = styled.span`
margin: 0 auto;
color: inherit;
`;
3 changes: 3 additions & 0 deletions frontend/src/components/@common/LoginButton/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import LoginButton from '~/components/@common/LoginButton/LoginButton';

export default LoginButton;
11 changes: 11 additions & 0 deletions frontend/src/components/@common/Modal/Modal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { createPortal } from 'react-dom';

interface ModalProps {
children: React.ReactNode;
}

function Modal({ children }: ModalProps) {
return createPortal(children, document.querySelector('#modal'));
}

export default Modal;
20 changes: 20 additions & 0 deletions frontend/src/components/@common/Modal/ModalContent.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import type { Meta, StoryObj } from '@storybook/react';
import ModalContent from './ModalContent';

const meta: Meta<typeof ModalContent> = {
title: 'ModalContent',
component: ModalContent,
};

export default meta;

type Story = StoryObj<typeof ModalContent>;

export const LoginModal: Story = {
args: {
isShow: true,
title: '로그인 또는 회원가입',
closeModal: () => {},
children: '모달 내용',
},
};
Loading

0 comments on commit 5542f40

Please sign in to comment.