feat: develop merge

BCSDLab · Nov 13, 2023 · c685bca · c685bca
2 parents 6bfeecf + 776fdea
commit c685bca
Show file tree

Hide file tree

Showing 29 changed files with 582 additions and 343 deletions.
diff --git a/src/api/mypage/index.ts b/src/api/mypage/index.ts
@@ -26,4 +26,4 @@ export const patchDefaultImage = async () => myPageApi.patch<PatchProfileImageRe
 
 export const patchNickname = async (nickname:string) => myPageApi.patch<PatchNicknameResponse>('/user/me', { nickname });
 
-export const getFollwers = async () => followApi.get<FollowersResponse>('/follow/followers');
+export const getFollowers = async () => followApi.get<FollowersResponse>('/follow/followers');
diff --git a/src/api/search/entity.ts b/src/api/search/entity.ts
@@ -8,7 +8,7 @@ export interface SearchQueryParams {
 
 export interface ShopsParams {
   keyword: string;
-  location: Coords;
+  location?: Coords;
 }
 
 export interface FetchShopsResponse {
@@ -27,8 +27,8 @@ interface Shop {
 }
 
 export interface Coords {
-  latitude: number,
-  longitude: number
+  lng: number;
+  lat: number;
 }
 
 export interface FetchAutoCompleteParams {

diff --git a/src/api/search/index.ts b/src/api/search/index.ts
@@ -15,8 +15,8 @@ export const fetchShops = (params: ShopsParams) => {
   const { keyword, location } = params;
   const url = `/shops?keyword=${keyword}`;
   const requestBody = {
-    x: location?.latitude,
-    y: location?.longitude,
+    x: location?.lat,
+    y: location?.lng,
   };
 
   return searchApi.post<FetchShopsResponse>(url, requestBody);
@@ -26,8 +26,8 @@ export const fetchAutoComplete = (params: FetchAutoCompleteParams) => {
   const { query, location } = params;
   const url = `/shops/auto-complete?query=${query}`;
   const requestBody = {
-    x: location?.latitude,
-    y: location?.longitude,
+    lat: location?.lat,
+    lng: location?.lng,
   };
   return searchApi.post<FetchAutoCompleteResponse>(url, requestBody);
 };
diff --git a/src/api/shop/entity.ts b/src/api/shop/entity.ts
@@ -26,7 +26,11 @@ export interface SearchQueryParams {
 
 export interface ShopsParams {
   keyword: string;
-  location: Coords;
+  location?: Coords;
+}
+export interface Coords {
+  lat: number | undefined;
+  lng: number | undefined;
 }
 
 export interface FetchShopResponse {
@@ -62,10 +66,5 @@ export interface Shop {
   ratingCount: number | null;
   photoToken: string;
   dist: number;
-  category: string; // 추후 카테고리 확인 필요
-}
-
-export interface Coords {
-  lat: number | undefined;
-  lng: number | undefined;
+  category: string;
 }
diff --git a/src/api/shop/index.ts b/src/api/shop/index.ts
@@ -11,12 +11,21 @@ export const fetchShop = async (placeId: string) => {
   return data;
 };
 
-export const fetchShops = (params: ShopsParams) => shopApi.post<FetchShopsResponse>(`/shops?keyword=${params.keyword}`, {
-  lat: params.location?.lat,
-  lng: params.location?.lng,
-});
+export const getfilterShops = (params: FilterShopsParams, location: Coords) => {
+  const url = `/shops/maps?options_friend=${params.options_friend}&options_nearby=${params.options_nearby}&options_scrap=${params.options_scrap}`;
+  const requestBody = {
+    lat: location.lat,
+    lng: location.lng,
+  };
+  return shopApi.post<FilterShopsListResponse>(url, requestBody);
+};
 
-export const getfilterShops = (params: FilterShopsParams, location: Coords) => shopApi.post<FilterShopsListResponse>(`/shops/maps?options_friend=${params.options_friend}&options_nearby=${params.options_nearby}&options_scrap=${params.options_scrap}`, {
-  lat: location.lat,
-  lng: location.lng,
-});
+export const fetchShops = (params: ShopsParams) => {
+  const { location, keyword } = params;
+  const url = `/shops?keyword=${keyword}`;
+  const requestBody = {
+    lat: location?.lat,
+    lng: location?.lng,
+  };
+  return shopApi.post<FetchShopsResponse>(url, requestBody);
+};
diff --git a/src/api/user/entity.ts b/src/api/user/entity.ts
@@ -27,32 +27,27 @@ export interface ModifyParams {
 
 export interface EmailUser {
   account: string;
+  id: number;
   nickname: string;
   email: string;
-  id: number;
-  // 아래 두 파라미터도 확실한 도메인이 정해지면 수정 필요.
-  // oauthType = 'KAKAO' | 'NAVER' | 'GOOGLE'...
-  // userType = 'ADMIN' | 'NORMAL'...
   profileImage: {
     id: number;
     path: string;
     originalName: string;
     url: string;
   }
-  oauthType: string;
-  userType: string;
+
+  oauthType: string; // 'KAKAO' | 'NAVER' | 'GOOGLE'
+  userType: string; // 'ADMIN' | 'NORMAL'...
   userCountResponse: {
     id: number;
     reviewCount: number;
     friendCount: number;
   };
 }
 
-export interface SNSUser {
-  id: number,
-  nickname: string,
-  email: string,
-  profileImage:null
+export interface SNSUser extends Omit<EmailUser, 'account' | 'profileImage'> {
+  profileImage?: EmailUser['profileImage'];
 }
 
 export type User = EmailUser | SNSUser;

diff --git a/src/assets/images/search/defaultImage.png b/src/assets/images/search/defaultImage.png
diff --git a/src/assets/svg/search/phone.svg b/src/assets/svg/search/phone.svg
diff --git a/src/components/common/SideNavigation/index.tsx b/src/components/common/SideNavigation/index.tsx
@@ -4,7 +4,7 @@ import { ReactComponent as BookMarkIcon } from 'assets/svg/home/bookmark.svg';
 import { ReactComponent as GroupIcon } from 'assets/svg/home/group.svg';
 import { useAuth, useClearAuth } from 'store/auth';
 import cn from 'utils/ts/classNames';
-import defaultImage from 'assets/images/follow/default-image.png';
+// import defaultImage from 'assets/images/follow/default-image.png';
 import useBooleanState from 'utils/hooks/useBooleanState';
 import { Link, useLocation } from 'react-router-dom';
 import { useFilterFriend, useFilterNearby, useFilterScrap } from 'store/filter';
@@ -100,7 +100,7 @@ export default function SideNavigation({ selected, placeId }:Props): JSX.Element
           {auth ? (
             <li>
               <img
-                src={auth.profileImage?.url || `${defaultImage}`}
+                // src={auth.profileImage?.url || `${defaultImage}`}
                 alt="프로필 이미지"
                 className={styles['bottom-navigation__profile-image']}
               />

diff --git a/src/pages/Home/components/Map/hooks/useFilterShops.ts b/src/pages/Home/components/Map/hooks/useFilterShops.ts
@@ -13,14 +13,15 @@ const useFilterShops = ({
   const { location } = useGeolocation(OPTIONS);
   const auth = useAuth();
   const enabled = !!(location) && !!auth;
+
   const params: FilterShopsParams = {
     options_friend, options_nearby, options_scrap,
   };
   const {
     isLoading, isError, data, refetch,
   } = useQuery('filterShops', () => getfilterShops(params, {
-    lat: location?.latitude,
-    lng: location?.longitude,
+    lat: location?.lat,
+    lng: location?.lng,
   }), {
     enabled,
   });

diff --git a/src/pages/Home/components/Map/index.tsx b/src/pages/Home/components/Map/index.tsx
@@ -16,7 +16,7 @@ import useCluster from './hooks/useCluster';
 export default function Map(): JSX.Element {
   const { isMobile } = useMediaQuery();
   const { location } = useLocation();
-  const map = useNaverMap(location?.latitude, location?.longitude);
+  const map = useNaverMap(location?.lat, location?.lng);
   const { filterFriendState } = useFilterFriend();
   const { filterScrapState } = useFilterScrap();
   const { filterNearbyState } = useFilterNearby();

diff --git a/src/pages/MyPage/hooks/useMyProfile.ts b/src/pages/MyPage/hooks/useMyProfile.ts
@@ -1,4 +1,4 @@
-import { getFollwers } from 'api/mypage';
+import { getFollowers } from 'api/mypage';
 import { getMe } from 'api/user';
 import { EmailUser } from 'api/user/entity';
 import { useQuery } from 'react-query';
@@ -8,9 +8,10 @@ type Profile = EmailUser & {
     url: string
   },
 };
+
 const useMyProfile = () => {
   const { data: profileData, isLoading } = useQuery('profile', getMe);
-  const { data: followers } = useQuery('myFollowers', getFollwers);
+  const { data: followers } = useQuery('myFollowers', getFollowers);
   const profile:Profile | null = profileData ? profileData.data as EmailUser : null;
   const getTotal = () => (profileData && 'account' in profileData.data ? profileData.data.userCountResponse.reviewCount : 0);
   const followerNumber = followers?.data.content.length;

diff --git a/src/pages/Pin/components/Carousel.tsx b/src/pages/Pin/components/Carousel.tsx
@@ -20,10 +20,6 @@ export default function Carousel({ images }:Props) {
     }
   }, [count]);
 
-  useEffect(() => {
-    setCount(0);
-  }, [images]);
-
   return (
     <div className={styles.carousel}>
       <button className={styles.carousel__left} onClick={() => setCount(count > 0 ? count - 1 : 0)} type="button">{'<'}</button>

diff --git a/src/pages/Search/components/RelatedSearches/RelatedSearches.module.scss b/src/pages/Search/components/RelatedSearches/RelatedSearches.module.scss
@@ -48,6 +48,10 @@
       border-radius: 24px;
       color: #ff7f23;
     }
+
+    @include media.media-breakpoint-down(mobile) {
+      max-width: 343px;
+    }
   }
 
   &__title {

diff --git a/src/pages/Search/components/SearchBar/SearchBar.module.scss b/src/pages/Search/components/SearchBar/SearchBar.module.scss
@@ -24,6 +24,7 @@
       max-width: 767px;
       padding-top: 64px;
       margin: 0 auto;
+      font-size: 35px;
     }
   }
 }
@@ -35,14 +36,26 @@
   border: none;
   height: 62px;
   width: 875px;
-  align-items: center;
   margin-top: 34px;
   margin-right: 16px;
   margin-left: 16px;
   background: #ffffff;
   box-shadow: 2px 3px 12px 1px rgba(0 0 0 / 10%);
   padding-left: 15px;
-  z-index: 6;
+  z-index: 3;
+
+  @include media.media-breakpoint-down(mobile) {
+    max-width: 343px;
+    height: 48px;
+    font-size: 16px;
+  }
+
+  &__form {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
 
   &__input {
     width: 100%;
@@ -63,6 +76,7 @@
   }
 
   &__icon {
+    display: flex;
     width: 34px;
     height: 34px;
     padding: 20px;
@@ -130,6 +144,11 @@
         transform: translate3d(-100%, 0, 0);
       }
     }
+
+    @include media.media-breakpoint-down(mobile) {
+      max-width: 343px;
+      font-size: 16px;
+    }
   }
 
   &__tag {

diff --git a/src/pages/Search/components/SearchBar/SearchInput.tsx b/src/pages/Search/components/SearchBar/SearchInput.tsx
@@ -2,14 +2,14 @@ import { ReactComponent as LensIcon } from 'assets/svg/search/lens.svg';
 import styles from 'pages/Search/components/SearchBar/SearchBar.module.scss';
 import useFetchShops from 'pages/SearchDetails/hooks/useFetchShops';
 import { useNavigate } from 'react-router-dom';
+// import RelatedSearches from '../RelatedSearches';
 
 interface Props {
-  text: string,
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  text: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
 }
-export default function SearchInput({
-  text, onChange,
-}: Props) {
+export default function SearchInput({ text, onChange, onSubmit }: Props) {
   const { isFetching, data: shops, refetch } = useFetchShops(text ?? '');
   const navigate = useNavigate();
 
@@ -34,16 +34,26 @@ export default function SearchInput({
   };
 
   return (
-    <label title="검색어 입력" className={styles['search-bar']} htmlFor="searchBarInput">
-      <input
-        className={styles['search-bar__input']}
-        id="searchBarInput"
-        placeholder="검색어를 입력해주세요."
-        value={text}
-        onChange={onChange}
-        autoComplete="off"
-      />
-      <LensIcon title="검색" className={styles['search-bar__icon']} onClick={handleSearchClick} />
+    <label
+      title="검색어 입력"
+      className={styles['search-bar']}
+      htmlFor="searchBarInput"
+    >
+      <form onSubmit={onSubmit} className={styles['search-bar__form']}>
+        <input
+          className={styles['search-bar__input']}
+          placeholder="검색어를 입력해주세요."
+          id="searchBarInput"
+          autoComplete="off"
+          value={text}
+          onChange={onChange}
+        />
+        <LensIcon
+          title="검색"
+          className={styles['search-bar__icon']}
+          onClick={handleSearchClick}
+        />
+      </form>
     </label>
   );
 }
diff --git a/src/pages/Search/hooks/useSearchingMode.ts b/src/pages/Search/hooks/useSearchingMode.ts
@@ -6,7 +6,8 @@ const useSearchingMode = () => {
   const changeMode = useCallback((event: MouseEvent) => {
     if ((event.target as Element).id === 'searchBarInput') {
       setIsSearching(true);
-    } else if ((event.target as Element).id === 'root') {
+      event.stopPropagation();
+    } else {
       setIsSearching(false);
     }
   }, []);
@@ -17,7 +18,7 @@ const useSearchingMode = () => {
     return () => {
       document.removeEventListener('click', changeMode);
     };
-  }, [changeMode, isSearching]);
+  }, [changeMode]);
 
   return isSearching;
 };