#1 Feat: Feed Components 생성

package.json

@@ -17,7 +17,8 @@
     "react-hook-form": "^7.51.0",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.21.3",
-    "recharts": "^2.12.2"
+    "recharts": "^2.12.2",
+    "swiper": "^11.0.7"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",

src/components/Category.tsx

@@ -1,7 +1,9 @@
 import { css } from '@emotion/react'
-import categoriesArray from './Sample/Sample'
+import categories from './Sample/Sample'
+// import { Swiper, SwiperSlide } from 'swiper/react'
+import 'swiper/css'
 
-const category = css`
+const categoryBox = css`
   display: flex;
   align-items: center;
   background-color: #f3f0f0;
@@ -11,19 +13,19 @@ const category = css`
   margin-bottom: 20px;
   ul {
     list-style: none;
+    padding: 0;
+    margin: auto;
     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 css={categoryBox}>
+      <ul>{categories.map((list, id) => id < 4 && <li key={id}>{list}</li>)}</ul>
     </div>
   )
 }

src/components/Feed.tsx

@@ -0,0 +1,114 @@
+import { css } from '@emotion/react'
+import { useState } from 'react'
+
+const feedBox = css`
+  background: #f8f6f6;
+  width: 80%;
+  height: 172px;
+  border-radius: 6px;
+  margin-bottom: 30px;
+`
+const bookTitle = css`
+  display: flex;
+  align-items: center;
+  background-color: #f3f0f0;
+  width: 100%;
+  height: 30px;
+  border-radius: 6px;
+  span {
+    font-size: 16px;
+    margin: auto;
+  }
+`
+
+const bookInfo = css`
+  display: flex;
+  width: 93%;
+  height: 100px;
+  margin-top: 15px;
+  span {
+    width: 70%;
+    font-size: 13px;
+    margin-top: 15px;
+    margin-left: 15px;
+  }
+`
+
+const skeletonImg = css`
+  background: #d9d9d9;
+  display: inline-block;
+  width: 72px;
+  height: 97px;
+`
+
+const userInfo = css`
+  display: flex;
+  align-items: center;
+  justify-content: right;
+  width: 100%;
+  height: 30px;
+  font-size: 13px;
+  span {
+    margin-right: 10px;
+    &:last-child {
+      margin-right: 15px;
+    }
+  }
+  img {
+    width: 15px;
+    margin-top: 2px;
+    margin-left: 10px;
+    margin-right: 5px;
+  }
+`
+
+interface User {
+  nickname: string
+  date: string
+}
+
+interface FeedProps {
+  user: User
+}
+
+const Feed: React.FC<FeedProps> = ({ user }) => {
+  const [imageSrc, setImageSrc] = useState('../assets/images/free-icon-love.png')
+
+  const oneLine: string = '한 줄 평이 여기에 표시됩니다. 한 줄 평이 여기에 표시됩니다.'
+  const like: number = 0
+
+  const handleToggle = () => {
+    // 좋아요 하트 아이콘
+    setImageSrc(prev => {
+      if (prev === '../assets/images/free-icon-love.png') {
+        return '../assets/images/free-icon-love-fill.png'
+      } else {
+        return '../assets/images/free-icon-love.png'
+      }
+    })
+  }
+
+  return (
+    <div css={feedBox}>
+      <div css={bookTitle}>
+        <span>책 제목</span>
+      </div>
+
+      <div css={bookInfo}>
+        <div css={skeletonImg}>
+          <img></img>
+        </div>
+        <span>"{oneLine}"</span>
+      </div>
+
+      <div css={userInfo}>
+        <span>{user.nickname}</span>
+        <span>{user.date}</span>
+        <img src={imageSrc} onClick={handleToggle} />
+        <span>{like}</span>
+      </div>
+    </div>
+  )
+}
+
+export default Feed

src/components/Sample/FeedSample.tsx

@@ -0,0 +1,16 @@
+const users = [
+  { nickname: '초코', date: '2023-07-25' },
+  { nickname: '바나나', date: '2024-01-15' },
+  { nickname: '딸기우유', date: '2024-02-07' },
+  { nickname: '안녕하세요', date: '2022-04-15' },
+  { nickname: '호이쨔아아아', date: '2022-04-15' },
+  { nickname: '언제나함께라면', date: '2022-04-15' },
+  { nickname: '프로바이오유산균', date: '2022-04-15' },
+  { nickname: '프론트백엔드개발자', date: '2022-04-15' },
+  { nickname: '굿모닝우유와함께한잔', date: '2022-04-15' },
+  { nickname: '아메리카노헤이즐넛맛추', date: '2022-04-15' },
+  { nickname: '가나다라마바사아자차카타', date: '2022-04-15' },
+  { nickname: '가나다라마바사아자차카타파', date: '2022-04-15' },
+  { nickname: '가나다라마바사아자차카타파하', date: '2022-04-15' },
+]
+export default users

src/components/Sample/Sample.tsx

@@ -1,2 +1,3 @@
-const categoriesArray = Array(10).fill(['카테고리'])
-export default categoriesArray
+let categories: string[] = ['전체']
+categories = categories.concat(Array(10).fill('카테고리'))
+export default categories

src/components/Search.tsx

@@ -13,7 +13,7 @@ const search = css`
     width: 100%;
     height: 30px;
     text-align: center;
-    border: 1px solid #836565;
+    border: 2px solid #836565;
     position: absolute;
     &:focus {
       outline: none;

src/pages/Readinglog.tsx

@@ -1,13 +1,21 @@
 import Search from '../components/Search'
 import Topbar from '../components/Topbar'
 import Category from '../components/Category'
+import Feed from '../components/Feed'
+import users from '../components/Sample/FeedSample'
 
 const ReadingLog = () => {
   return (
     <div>
       <Topbar />
       <Search placeholder="책 제목으로 검색하기" />
       <Category />
+      {users.map((user, id) => (
+        <span key={id}>
+          <Feed user={user} />
+        </span>
+      ))}
+      <br />
     </div>
   )
 }

src/styles/globalStyles.ts

@@ -6,7 +6,7 @@ export const globalStyles = css`
   }
 
   div {
-    background: silver;
+    /* background: silver; */
     width: 393px;
     height: 100vh;
     margin: auto;