[Feat] 인기 급상승 서점 및 서점 리뷰 정렬

src/api/zip.api.ts

@@ -50,9 +50,9 @@ export const likeZip = async (bookstoreId: number) => {
 };
 
 // 서점 상세 정보
-export const getZipDetail = async (bookstoreId: number, type: string) => {
+export const getZipDetail = async (bookstoreId: number, type: string, sortFiled: string) => {
   try {
-    const response = await instance.get(`api/bookstores/${bookstoreId}/details?type=${type}`);
+    const response = await instance.get(`api/bookstores/${bookstoreId}/details?type=${type}&sortFiled?=${sortFiled}`);
     if (response.status == 200) {
       return response.data;
     }
@@ -82,3 +82,15 @@ export const postBookstoreReview = async (review_img: File, review: postReview)
     console.log(error);
   }
 };
+
+// 인기 급상승 독립 서점
+export const getTrendZip = async () => {
+  try {
+    const response = await instance.get('/api/bookstores/trending');
+    if (response.status === 200) {
+      return response.data;
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};

src/components/Home/Ranking.tsx

@@ -1,5 +1,8 @@
+import { useEffect, useState } from 'react';
+import { getTrendZip } from '../../api/zip.api';
+
 const Ranking = () => {
-  const name = [
+  const [bookstores, setBookstores] = useState([
     '게으른 정원',
     '고요서사',
     '스토리지북앤필름',
@@ -10,10 +13,16 @@ const Ranking = () => {
     '책방서로',
     '북소리서점',
     '책밥서점',
-  ];
+  ]);
+
+  useEffect(() => {
+    getTrendZip().then((data) => {
+      setBookstores(data.data);
+    });
+  }, []);
 
-  const left = name.slice(0, 5);
-  const right = name.slice(5, 10);
+  const left = bookstores.slice(0, 5);
+  const right = bookstores.slice(5, 10);
 
   return (
     <div>

src/components/Zip/ZipInfo.tsx

@@ -80,7 +80,7 @@ const ZipInfo = ({ bookstoreInfo }: ZipInfoProps) => {
           <div className="flex h-6 w-6 items-center justify-center rounded-full bg-bg" onClick={handleLike}>
             <FaHeart className={`h-3 w-3 ${isLiked ? 'fill-orange' : 'fill-white'}`} />
           </div>
-          <p className="text-[12px] text-gray_1">12</p>
+          <p className="text-[12px] text-gray_1">{bookstoreInfo.likedCount}</p>
         </div>
       </div>
       <p className="flex self-start break-keep text-[13px] leading-4 text-gray_1">{bookstoreInfo.description}</p>

src/components/Zip/ZipReview.tsx

@@ -19,7 +19,7 @@ const ZipReview = ({ review }: ZipReviewProps) => {
         {/* 별점 */}
         <div className="flex items-center gap-1">
           <FaStar className="h-[12px] w-[12px] fill-[#D9D9D9]" />
-          <p className="text-[13px] font-bold text-white">4</p>
+          <p className="text-[13px] font-bold text-white">{review.rating}</p>
         </div>
       </div>
       {/* 사진 및 리뷰 */}

src/model/zip.model.ts

@@ -23,6 +23,7 @@ export interface zipPreview {
   name: string;
   phone: string;
   rating: number;
+  likedCount: number;
 }
 
 // 리뷰 받아올 때

src/pages/Zip/ZipDetail.tsx

@@ -11,6 +11,7 @@ import { getZipDetail } from '../../api/zip.api';
 import { bookstoreReview, zipPreview } from '../../model/zip.model';
 import NoBookStoreResult from '../../components/Zip/NoBookStoreResult';
 import { BookDetailInfo } from '../../model/booksnap.model';
+import { set } from 'lodash';
 
 interface ZipDetailProps {
   currentState: string;
@@ -26,18 +27,19 @@ const ZipDetail = ({ currentState, id }: ZipDetailProps) => {
   const [reviewList, setReviewList] = useState<bookstoreReview[]>([]);
   const [bookList, setBookList] = useState<BookDetailInfo[]>([]);
   const [filteredBookList, setFilteredBookList] = useState<BookDetailInfo[]>([]);
+  const [filter, setFilter] = useState<'createdAt' | 'rating'>('createdAt');
 
   const handleWriteReview = () => {
     // setBottomSheet(({ currentState }) => <ZipDetail currentState={currentState} id={id} />, '서점 상세 정보');
     nav('create-review', { state: { id: id, name: bookstoreInfo?.name } });
   };
 
   useEffect(() => {
-    getZipDetail(id, 'reviews').then((data) => {
+    getZipDetail(id, 'reviews', filter).then((data) => {
       setBookstoreInfo(data.data.bookstoreDetail);
       setReviewList(data.data.reviewList);
     });
-  }, []);
+  }, [filter]);
 
   const handleFilterChange = (selected: string) => {
     console.log(selected);
@@ -46,7 +48,7 @@ const ZipDetail = ({ currentState, id }: ZipDetailProps) => {
 
   useEffect(() => {
     const detail = type === '리뷰' ? 'reviews' : 'books';
-    getZipDetail(id, detail).then((data) => {
+    getZipDetail(id, detail, filter).then((data) => {
       setBookstoreInfo(data.data.bookstoreDetail);
       if (data.data.reviewList) {
         setReviewList(data.data.reviewList);
@@ -82,8 +84,15 @@ const ZipDetail = ({ currentState, id }: ZipDetailProps) => {
           <div>
             <div className="mt-5 flex justify-between text-[13px]">
               <div className="flex items-center gap-4">
-                <p className="text-orange">• 최신 순</p>
-                <p className="text-white">• 별점 순</p>
+                <p
+                  className={filter === 'createdAt' ? 'text-orange' : 'text-white'}
+                  onClick={() => setFilter('createdAt')}
+                >
+                  • 최신 순
+                </p>
+                <p className={filter === 'rating' ? 'text-orange' : 'text-white'} onClick={() => setFilter('rating')}>
+                  • 별점 순
+                </p>
               </div>
               <ButtonShort type="review" onClick={handleWriteReview} />
             </div>