Merge pull request #12 from hayoung123/feature/tabUI

Feature/tab UI

sidedish/src/component/BestSidedish/BestSidedish.jsx

@@ -21,9 +21,19 @@ const BestSidedish = () => {
     setFocusedCategory(parsedData[0].id);
   };
 
+  const handleFocusedCategory = (categoryId) => {
+    setFocusedCategory(categoryId);
+  };
+
   return (
     <div>
-      {bestList && <BestTabList bestList={bestList} />}
+      {bestList && (
+        <BestTabList
+          bestList={bestList}
+          focusedCategory={focusedCategory}
+          handleFocusedCategory={handleFocusedCategory}
+        />
+      )}
       {focusedCategory && <BestSidedishList focusedCategory={focusedCategory} />}
     </div>
   );

sidedish/src/component/BestSidedish/BestSidedishList/BestSidedishItem.jsx

@@ -12,7 +12,7 @@ const BestSidedishItem = ({
         <span className="normalPrice">{n_price}</span>
         <span className="salePrice">{s_price}</span>
       </div>
-      {badge.length &&
+      {badge &&
         badge.map((item, i) => (
           <div key={i} className="badge">
             {item}

sidedish/src/component/BestSidedish/BestSidedishList/BestSidedishList.jsx

@@ -3,9 +3,9 @@ import BestSidedishItem from 'component/BestSidedish/BestSidedishList/BestSidedi
 import useFetch from 'hooks/useFetch';
 
 const BestSidedishList = ({ focusedCategory }) => {
-  console.log('id: ', focusedCategory);
   const { data, loading } = useFetch(
-    `https://h3rb9c0ugl.execute-api.ap-northeast-2.amazonaws.com/develop/baminchan/best/${focusedCategory}`
+    `https://h3rb9c0ugl.execute-api.ap-northeast-2.amazonaws.com/develop/baminchan/best/${focusedCategory}`,
+    focusedCategory
   );
 
   const bestSidedishList = data

sidedish/src/component/BestSidedish/BestTabList/BestTab.jsx

@@ -0,0 +1,26 @@
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+const BestTab = ({ id, title, focusedCategory, handleFocusedCategory }) => {
+  const [focused, setFocused] = useState(false);
+
+  useEffect(() => {
+    focusedCategory === id ? setFocused(true) : setFocused(false);
+  }, [focusedCategory]);
+
+  const handleClick = () => {
+    handleFocusedCategory(id);
+  };
+
+  return (
+    <Tab focused={focused} onClick={handleClick}>
+      {title}
+    </Tab>
+  );
+};
+
+export default BestTab;
+
+const Tab = styled.div`
+  background-color: ${({ focused }) => focused && 'skyblue'};
+`;

sidedish/src/component/BestSidedish/BestTabList/BestTabList.jsx

@@ -1,7 +1,16 @@
 import React from 'react';
+import BestTab from 'component/BestSidedish/BestTabList/BestTab';
 
-const BestTabList = ({ bestList }) => {
-  const bestTabList = bestList.map((item) => <div key={item.id}>{item.title}</div>);
+const BestTabList = ({ bestList, focusedCategory, handleFocusedCategory }) => {
+  const bestTabList = bestList.map(({ id, title }) => (
+    <BestTab
+      key={id}
+      id={id}
+      title={title}
+      focusedCategory={focusedCategory}
+      handleFocusedCategory={handleFocusedCategory}
+    />
+  ));
 
   return <div>{bestTabList}</div>;
 };

sidedish/src/hooks/useFetch.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
-const useFetch = (url) => {
+const useFetch = (url, ...targets) => {
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(false);
 
@@ -18,7 +18,7 @@ const useFetch = (url) => {
 
   useEffect(() => {
     fetchData(url);
-  }, []);
+  }, [...targets]);
 
   return { data, loading };
 };