Feat: 검색 필터링 구현 및 api 연결 (#48)

* feat: 필터링 로직 구현

* feat: getFilterList 함수 가져옴

* feat: 바텀시트 외부 클릭시 상태 저장 안하도록 로직 변경

* feat: userData 받아와서 default 카테고리 설정하기 임시 로직

* feat: 검색 디폴트 필터링 구현

* feat: 필터링 로직 변경

* feat: 필터링 로직 변경

* feat: placeCard 누르면 이동

* feat: 하트 버튼 disabled

* fix: PlaceCard contentid 옵셔널 제거

* feat: placecard 주소 말줄임표 처리

* feat: 장소 리스트 컨테이너 마진 바텀 주기

* fix: padding으로 변경

* feat: 디폴트 카테고리 로직

* fix: debounce 시간 축소

src/apis/public/search.ts

@@ -1,7 +1,7 @@
 // 검색 관련 공공 데이터 API
 
 import { Response } from '@/types/public';
-import { SearchItem } from '@/types/search';
+import { BarrierFreeItem, SearchItem } from '@/types/search';
 
 import { publicDataClient } from '..';
 
@@ -13,6 +13,11 @@ interface searchKeywordParams {
   contentTypeId: number;
 }
 
+interface BarrierFreeInfoParams {
+  MobileOS: 'IOS' | 'AND' | 'WIN' | 'ETC';
+  contentId: number;
+}
+
 export const getSearchKeyword = async (paramsInfo: searchKeywordParams) => {
   let params = `MobileApp=UNITRIP&_type=json&arrange=O&serviceKey=${import.meta.env.VITE_PUBLIC_DATA_SERVICE_KEY}`;
 
@@ -31,3 +36,22 @@ export const getSearchKeyword = async (paramsInfo: searchKeywordParams) => {
   );
   return items;
 };
+
+export const getBarrierFreeInfo = async (paramsInfo: BarrierFreeInfoParams) => {
+  let params = `MobileApp=UNITRIP&_type=json&serviceKey=${import.meta.env.VITE_PUBLIC_DATA_SERVICE_KEY}`;
+
+  for (const [key, value] of Object.entries(paramsInfo)) {
+    params += `&${key}=${value}`;
+  }
+
+  const {
+    data: {
+      response: {
+        body: { items },
+      },
+    },
+  } = await publicDataClient.get<Response<BarrierFreeItem[]>>(
+    `/detailWithTour1?${params}`,
+  );
+  return items;
+};

src/apis/search.ts

@@ -0,0 +1,6 @@
+import client from '.';
+
+export const getUserInfoSearchPage = async () => {
+  const { data } = await client.get(`/search`);
+  return data;
+};

src/components/BottomSheet.tsx

@@ -8,6 +8,7 @@ interface BottomSheetProps {
   closeBottomSheet: () => void;
   height: string;
 
+  onClickButton?: () => void;
   buttonText?: string;
   noButton?: boolean;
   bottomSheetCss?: SerializedStyles;
@@ -21,6 +22,7 @@ interface BottomSheetProps {
  * @param buttonText button text
  * @param noButton button 여부
  * @param bottomSheetCss 바텀시트 css 오버라이딩
+ * @param onClickButton 아래 버튼 클릭 함수
  * @param sheetBackgroundCss 바텀시트 배경 css 오버라이딩
  */
 const BottomSheet = (props: BottomSheetProps) => {
@@ -32,6 +34,7 @@ const BottomSheet = (props: BottomSheetProps) => {
     bottomSheetCss,
     sheetBackgroundCss,
     children,
+    onClickButton,
   } = props;
 
   document.body.style.overflow = 'hidden';
@@ -62,6 +65,7 @@ const BottomSheet = (props: BottomSheetProps) => {
           <div
             css={buttonCotainerCss}
             onClick={() => {
+              onClickButton && onClickButton();
               closeBottomSheet();
               document.body.style.overflow = '';
             }}>

src/components/PlaceCard.tsx

@@ -13,31 +13,52 @@ interface PlaceCardProps {
   placeName: string;
   address: string;
   imgSrc: string;
+  isHeart: boolean;
   onClickHeart?: () => void;
+  contentid: string;
+  buttonDisabled?: boolean;
 }
 
 /**
  * @param placeName 장소 이름
  * @param address 주소
  * @param imgSrc 대표 사진
+ * @param isHeart 하트 여부
  * @param onClickHeart 하트 눌렀을 때 실행 함수
+ * @param contentid 컨텐츠 ID
  */
 
 const PlaceCard = (props: PlaceCardProps) => {
-  const { placeName, address, imgSrc, onClickHeart = () => {} } = props;
-
-  const [isHeart, setIsHeart] = useState(false);
+  const {
+    placeName,
+    address,
+    imgSrc,
+    isHeart: isHeartData,
+    onClickHeart = () => {},
+    contentid,
+    buttonDisabled,
+  } = props;
+
+  const [isHeart, setIsHeart] = useState(isHeartData);
 
   const handleOnClick = () => {
     setIsHeart((prev) => !prev);
     onClickHeart();
   };
 
   return (
-    <Link to="" css={cardContainerCss(imgSrc, placeName)}>
+    <Link to={`/${contentid}`} css={cardContainerCss(imgSrc, placeName)}>
       <div css={backgroundCss}>
-        <button type="button" onClick={handleOnClick} css={iconCss}>
-          {isHeart ? <HeartFillMonoIcon /> : <HeartMonoIcon />}
+        <button
+          type="button"
+          onClick={handleOnClick}
+          css={iconCss}
+          disabled={buttonDisabled}>
+          {isHeart ? (
+            <HeartFillMonoIcon />
+          ) : (
+            !buttonDisabled && <HeartMonoIcon />
+          )}
         </button>
         <p css={titleCss}>{placeName}</p>
         {address && (
@@ -79,6 +100,7 @@ const backgroundCss = css`
   background: linear-gradient(
     180deg,
     rgb(0 0 0 / 0%) 0%,
+    rgb(0 0 0 / 34%) 100% rgb(0 0 0 / 0%) 0%,
     rgb(0 0 0 / 34%) 100%
   );
 
@@ -94,7 +116,6 @@ const titleCss = css`
   text-align: left;
   white-space: nowrap;
   text-overflow: ellipsis;
-
   ${FONTS.H3};
 `;
 
@@ -108,7 +129,12 @@ const addressCss = css`
   ${FONTS.Small1};
 
   & > span {
+    overflow: hidden;
+
     padding-top: 0.1rem;
+
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 `;
 

src/components/ToastMessage.tsx

@@ -40,11 +40,10 @@ const fadeout = keyframes`
 
 const rootContainer = css`
   position: fixed;
-  left: 0;
   bottom: 7.5rem;
+  left: 0;
 
   width: 100%;
-
   padding: 0 2rem;
 `;
 

src/constants/facilities.tsx

@@ -88,6 +88,7 @@ import {
   WheelChairInAcitveIcon,
   WheelChairSelectedIcon,
 } from '@/assets/icon';
+import { BarrierFreeItem } from '@/types/search';
 
 export interface Facility {
   name: string;
@@ -262,3 +263,28 @@ export const INFANT_FACILITIES: Facility[] = [
     selected: <BabySpareChairSelectedIcon />,
   },
 ];
+
+export const MAP_FACILITIES_API_KEY: Record<string, keyof BarrierFreeItem> = {
+  휠체어: 'wheelchair',
+  출입통로: 'exit',
+  엘리베이터: 'elevator',
+  화장실: 'restroom',
+  '수화 안내': 'signguide',
+  '유도·안내': 'guidesystem',
+  자막: 'videoguide',
+  유모차: 'stroller',
+  수유실: 'lactationroom',
+  '유아용 의자': 'babysparechair',
+  관람석: 'auditorium',
+  '점형/선형 블록': 'braileblock',
+  안내견: 'helpdog',
+  '안내 요원': 'guidehuman',
+  오디오가이드: 'audioguide',
+  '큰 활자': 'bigprint',
+  '점자 표지판': 'brailepromotion',
+  주차장: 'parking',
+  대중교통: 'route',
+  접근로: 'publictransport',
+  매표소: 'ticketoffice',
+  홍보물: 'promotion',
+};

src/types/search.ts

@@ -20,3 +20,35 @@ export interface SearchItem {
   createdtime: string;
   firstimage: string;
 }
+
+export interface BarrierFreeItem {
+  wheelchair: string;
+  exit: string;
+  elevator: string;
+  restroom: string;
+  guidesystem: string;
+  blindhandicapetc: string;
+  signguide: string;
+  videoguide: string;
+  hearingroom: string;
+  hearinghandicapetc: string;
+  stroller: string;
+  lactationroom: string;
+  babysparechair: string;
+  infantsfamilyetc: string;
+  auditorium: string;
+  room: string;
+  handicapetc: string;
+  braileblock: string;
+  helpdog: string;
+  guidehuman: string;
+  audioguide: string;
+  bigprint: string;
+  brailepromotion: string;
+  contentid: string;
+  parking: string;
+  route: string;
+  publictransport: string;
+  ticketoffice: string;
+  promotion: string;
+}

src/views/Detail/components/review/SelectedCategory.tsx

@@ -65,25 +65,24 @@ const containerCss = css`
 
 const selectedCategoryContainerCss = css`
   display: flex;
-  align-items: center;
   gap: 2rem;
+  align-items: center;
+  overflow: auto;
 
   padding: 0 0 0.94rem 1.9rem;
-
-  overflow: auto;
 `;
 
 const buttonCss = css`
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
 
   width: 100%;
-
   padding: 1.2rem 0;
 
-  color: ${COLORS.brand1};
   background-color: ${COLORS.gray0};
+
+  color: ${COLORS.brand1};
   ${FONTS.Body1}
 `;
 
@@ -97,6 +96,5 @@ const categoryNameCss = css`
 const facilitiesContainerCss = css`
   display: flex;
   gap: 1rem;
-
   overflow: auto;
 `;