Merge pull request #118 from JJongBin/develop

restaurants page에서 쿼리를 이용한 데이터 사용

src/components/BestRestaurantItem/index.tsx

@@ -42,7 +42,9 @@ const BestRestaurantItem = () => {
             <button onClick={changeStar} ref={starRef}></button>
             <span>가고싶다</span>
           </RestaurantLike> */}
-          <IconButton img={unstar} event={changeStar}></IconButton>
+          <IconButton img={unstar} event={changeStar}>
+            가고싶다
+          </IconButton>
           <address>서울특별시 강남구 미왕빌딩</address>
           <RestaurantSubInfo>
             <small>영업시간</small>

src/components/IconButton/index.tsx

@@ -6,13 +6,14 @@ import { textSpanContainsPosition } from 'typescript';
 interface IconButtonType {
   event: (e: any) => void;
   img: string;
+  children: string;
 }
 
-const IconButton = ({ event, img }: IconButtonType) => {
+const IconButton = ({ children, event, img }: IconButtonType) => {
   return (
     <IconButtonStyle img={img} onClick={event}>
       <button></button>
-      <span>가고싶다</span>
+      <span>{children}</span>
     </IconButtonStyle>
   );
 };

src/components/RestaurantItem/index.tsx

@@ -8,19 +8,24 @@ import {
   RestaurantScore,
   RestaurantSubInfo,
 } from './restaurant.styled';
+import { infoType } from '@/components/Restaurants';
 
-const Restaurant = () => {
+interface RestaurantType {
+  info: infoType;
+}
+
+const Restaurant = ({ info }: RestaurantType) => {
   return (
     <RestaurantItem>
       <RestaurantLink to="/">
         <figure>
           <RestaurantImg src={`${food}`} alt="food" />
           <RestaurantInfo>
             <p>
-              <RestaurantName>음식점 이름</RestaurantName>
-              <RestaurantScore>4.5</RestaurantScore>
+              <RestaurantName>{info.name}</RestaurantName>
+              <RestaurantScore>{info.score}</RestaurantScore>
             </p>
-            <RestaurantSubInfo>{`${'지역'} - ${'음식종류'}`}</RestaurantSubInfo>
+            <RestaurantSubInfo>{`${info.address} - ${info.category}`}</RestaurantSubInfo>
           </RestaurantInfo>
         </figure>
       </RestaurantLink>

src/components/Restaurants/index.tsx

@@ -4,24 +4,39 @@ import {
   RestaurantsTitle,
   RestaurantsList,
 } from './restaurants.styled';
+import { getTopScore8PostDocs } from '@/firebase/request';
+import { useState, useRef, useEffect } from 'react';
 
 interface restaurantChecker {
   title: string;
 }
 
+export interface infoType {
+  id: string;
+  address: string;
+  category: string;
+  name: string;
+  score: number;
+}
+
 const Restaurants = ({ title }: restaurantChecker) => {
+  const [restaurants, setRestaurants] = useState<Array<infoType>>([]);
+  const restaurantsRef = useRef<HTMLUListElement>(null);
+
+  useEffect(() => {
+    getTopScore8PostDocs().then((res) => {
+      console.log(res);
+      setRestaurants(res);
+    });
+  }, []);
+
   return (
     <RestaurantsContent>
       <RestaurantsTitle>{`평점이 높은 ${title}`}</RestaurantsTitle>
-      <RestaurantsList>
-        <Restaurant />
-        <Restaurant />
-        <Restaurant />
-        <Restaurant />
-        <Restaurant />
-        <Restaurant />
-        <Restaurant />
-        <Restaurant />
+      <RestaurantsList ref={restaurantsRef}>
+        {restaurants.map((restaurant) => (
+          <Restaurant key={restaurant.id} info={restaurant} />
+        ))}
       </RestaurantsList>
     </RestaurantsContent>
   );

src/components/ReviewWrite/index.tsx

@@ -19,7 +19,11 @@ import { faPlus, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { Button } from '@/components';
 import theme from '@/styles/theme';
 import { useState, useRef } from 'react';
-import { postReviewDocs, postImage } from '@/firebase/request';
+import {
+  postReviewDocs,
+  postImage,
+  postRestaurantsDocs,
+} from '@/firebase/request';
 import { useAppSelector } from '@/store/hooks';
 
 const ReviewWrite = () => {
@@ -88,6 +92,26 @@ const ReviewWrite = () => {
     URL.revokeObjectURL(fileName);
   };
 
+  // const restaurants = [
+  //   { address: '강남구', name: '까스까스', category: '일식', score: 4.0 },
+  //   { address: '강남구', name: '빽다방', category: '카페', score: 4.5 },
+  //   { address: '강남구', name: '육쌈냉면', category: '한식', score: 3.5 },
+  //   { address: '가로수길', name: '좋은초밥', category: '일식', score: 4.5 },
+  //   { address: '가로수길', name: '오늘의 초밥', category: '일식', score: 4.8 },
+  //   { address: '가로수길', name: '맛나분식', category: '분식', score: 4.9 },
+  //   { address: '홍대', name: '무지개맥주', category: '주점', score: 4.9 },
+  //   { address: '홍대', name: '도미노', category: '양식', score: 4.2 },
+  //   { address: '홍대', name: '홍콩반점', category: '중식', score: 4.0 },
+  //   { address: '이태원', name: '피자헛', category: '양식', score: 4.3 },
+  //   { address: '이태원', name: '우동전문', category: '일식', score: 4.1 },
+  //   { address: '건대', name: '빕스', category: '양식', score: 3.9 },
+  //   { address: '건대', name: '쿠우쿠우', category: '일식', score: 5.0 },
+  //   { address: '신촌', name: '1943', category: '주점', score: 4.5 },
+  //   { address: '삼청', name: '인생맥주', category: '주점', score: 4.1 },
+  //   { address: '종로', name: '소주한잔', category: '주점', score: 4.2 },
+  //   { address: '종로', name: '오늘동', category: '일식', score: 4.8 },
+  // ];
+
   const craeteReview = async () => {
     // 현재 시간
     const today = new Date();
@@ -116,6 +140,11 @@ const ReviewWrite = () => {
       text,
       score,
     });
+
+    // 데이터 집어넣는 부분
+    // restaurants.forEach(async (obj) => {
+    //   await postRestaurantsDocs(obj);
+    // });
   };
 
   // 리뷰 db에서 불러오기

src/firebase/request.ts

@@ -10,6 +10,7 @@ import { Posts } from './type';
 import { Reviews } from './type';
 import { getErrorMessage } from '@/utils';
 import { getStorage, ref, uploadBytes } from 'firebase/storage';
+import { query, orderBy, limit, where } from 'firebase/firestore';
 
 const createCollection = <T = DocumentData>(collectionName: string) => {
   return collection(db, collectionName) as CollectionReference<T>;
@@ -19,7 +20,23 @@ const postsCol = createCollection<Posts>('posts');
 
 export const getPostDocs = async () => {
   const postDocs = await getDocs(postsCol);
-  const postData = postDocs.docs.map((x) => x.data());
+  const postData = postDocs.docs.map((x) => ({ ...x.data(), id: x.id }));
+  return postData;
+};
+
+export const getTopScore8PostDocs = async () => {
+  const q = query(
+    postsCol,
+    // where('category', '==', '주점'),
+    orderBy('score', 'desc'),
+    limit(8),
+  );
+  const postDocs = await getDocs(q);
+  const postData = postDocs.docs.map((x) => ({
+    ...x.data(),
+    id: x.id,
+  }));
+
   return postData;
 };
 
@@ -65,3 +82,19 @@ export const postImage = async (file: any) => {
     console.log(getErrorMessage('파일이 정상적으로 업로드되지 않았습니다.'));
   }
 };
+
+// restaurant data 넣기 (임시)
+export const postRestaurantsDocs = async ({
+  address,
+  category,
+  name,
+  score,
+}: Posts) => {
+  const docRef = await addDoc(collection(db, 'posts'), {
+    address,
+    category,
+    name,
+    score,
+  });
+  console.log('Document written with ID: ', docRef.id);
+};