店家新增完服務項目後，顧客就可以開始查看預約了！所以今天將開發重點放在顧客角度會看到的頁面都實作完成。

組裝列表頁面(顧客視角)

1. 串接讀取文件的 API

import { collection } from "firebase/firestore";
import { db } from "../firebase";

useEffect(() => {
    async function fetchProducts() {
      try {
        const productsRef = collection(db, "products");
        // 做讀取成功的事...
      } catch (error) {
        console.log(error);
      }
    }
}, []);

2. 製作有資料時的卡片瀑布流
   目前想法就是跟首頁是用同一個 component，視覺上會更一致。排序則是先依照最後更新日期，越新上架的越上面。
   

製作單一服務項目詳情頁

詳情頁面原先在 Flow Chart 設計時，是希望僅聚焦於服務項目的內容上，針對提供該服務項目的店家資訊則是另外頁面。但因現在時間掌控的較不佳，所以就設計為在同一頁面，做好的樣子跟當初設計的 Wireflame 線稿稍微不同～

1. 製作 loading 的 state
   這是以防前兩步 call API 時間過常或出錯時的頁面效果。當 API 一進到呼叫 function 裡即為 true，直到呼叫成功，才會將 isLoading 設為 false，頁面看起來就不會有 loading 的元素～

const [isLoading, setIsLoading] = useState(false);

2. 串接讀取服務項目的 API
   先使用 useParams 抓取服務項目的 id

import { useParams } from "react-router-dom";

const params = useParams();

然後使用該 id 當作參數呼叫 API

import { db } from "../firebase";
import { doc, getDoc } from "firebase/firestore";

useEffect(() => {
    async function fetchProduct() {
      setIsLoading(true);
      const docRef = doc(db, "products", params.productId);
      const docSnap = await getDoc(docRef);
      if (docSnap.exists()) {
        // 做讀取成功的事...
        setIsLoading(false);
      }
    }
    fetchProduct();
}, [params.productId]);

3. 將資料組裝至頁面
   主要區分為三區塊，依序是服務項目的主視覺圖片、服務項目的介紹與提供服務的店家資訊。