[Feat] Category Components 생성

src/components/Category.tsx

@@ -0,0 +1,31 @@
+import { css } from '@emotion/react'
+import categoriesArray from './Sample/Sample'
+
+const category = css`
+  display: flex;
+  align-items: center;
+  background-color: #f3f0f0;
+  width: 80%;
+  height: 33px;
+  border-radius: 6px;
+  margin-bottom: 20px;
+  ul {
+    list-style: none;
+    li {
+      margin-right: 10px;
+      float: left;
+    }
+  }
+`
+const Category = () => {
+  return (
+    <div css={category}>
+      <ul>
+        <li>전체</li>
+        {categoriesArray.map((list, id) => id < 3 && <li key={id}>{list}</li>)}
+      </ul>
+    </div>
+  )
+}
+
+export default Category

src/components/Sample/Sample.tsx

@@ -0,0 +1,2 @@
+const categoriesArray = Array(10).fill(['카테고리'])
+export default categoriesArray

src/pages/Readinglog.tsx

@@ -1,11 +1,13 @@
 import Search from '../components/Search'
 import Topbar from '../components/Topbar'
+import Category from '../components/Category'
 
 const ReadingLog = () => {
   return (
     <div>
       <Topbar />
       <Search placeholder="책 제목으로 검색하기" />
+      <Category />
     </div>
   )
 }