Merge pull request #106 from CheckIt-v3/feat/#105

[feat/#105] 빌드 에러 해결 및 ci/cd

.github/workflows/deploy.yml

@@ -0,0 +1,36 @@
+name: AWS_CICD
+
+on:
+  push:
+    branches: [feat/#105]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout source code
+        uses: actions/checkout@v2
+
+      - name: Install dependencies
+        run: yarn install
+
+	# 빌드
+      - name: Build
+        run: yarn build
+
+	# 배포
+      - name: S3 Deploy 
+        run: aws s3 sync ./build s3://<생성한 bucket 이름>/ --acl bucket-owner-full-control
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_REGION: ${{ secrets.AWS_REGION }}
+
+	# 기존 캐시 무효화
+      - name: Invalidate CloudFront Cache 
+        uses: chetan/invalidate-cloudfront-action@master
+        env:
+          AWS_DISTRIBUTION: ${{ secrets.AWS_DISTRIBUTION_ID }}
+          PATHS: "/index.html"
+        continue-on-error: true

package.json

@@ -48,7 +48,7 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.8.0",
+    "react-icons": "^5.3.0",
     "react-loading-skeleton": "^3.4.0",
     "react-multi-carousel": "^2.8.4",
     "react-query": "^3.39.3",

src/api/config.ts

@@ -1,7 +1,5 @@
 import axios from 'axios'
-
-const BASE_URL = 'http://localhost:8081/api/v1'
-// const BASE_URL = 'http://223.130.159.53:8081/api/v1'
+const BASE_URL = import.meta.env.VITE_REACT_APP_API_KEY
 export const baseInstance = axios.create({
   withCredentials: true,
   baseURL: BASE_URL, // 기본 URL 설정

src/components/Header/LoginHeader.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
 import logo from '../../../public/logo.png'
 import { useNavigate } from 'react-router-dom'
 

src/components/Layout.tsx

@@ -4,7 +4,7 @@ const Layout = () => {
   return (
     <div className="w-full flex justify-center">
       <div className="w-full max-w-[1324px]">
-        <MyHeader/>
+        <MyHeader onSearch={() => {}} />
         <Outlet />
       </div>
     </div>

src/components/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from 'react'
+import { ReactNode, useState } from 'react'
 import ReactDOM from 'react-dom'
 import { useMyContext } from '../Context/MyContext'
 import { baseInstance } from '../../api/config'
@@ -25,7 +25,7 @@ const Modal = ({ onClose, children }: ReadingModalProps) => {
     setIsActive,
   } = useMyContext()
   const access = localStorage.getItem('accessToken')
-  const [congrats, setCongrats] = useState(false)
+  const [_, setCongrats] = useState(false)
 
   const onHandlePages = async () => {
     const requestData = {

src/components/Modal/ModalAtom/Bar.tsx

@@ -1,9 +1,15 @@
 import { useEffect, useState } from 'react'
-import ReturnIcon from '../../../assets/svgs/reset.svg?react'
+import { BsArrowCounterclockwise } from 'react-icons/bs'
 import { baseInstance } from '../../../api/config'
 import { useMyContext } from '../../Context/MyContext'
 
-const Bar = ({ book }) => {
+type Book = {
+  id: number
+  title: string
+  pages: number
+}
+
+const Bar = ({ book }: { book: Book }) => {
   const [initialPercentages, setInitialPercentages] = useState(0)
   const [lastPage, setLastPage] = useState(0)
   // const [newLastPage, setNewLastPage] = useState(0)
@@ -28,10 +34,13 @@ const Bar = ({ book }) => {
       const response = await baseInstance.get(`/readings/percentages?bid=${book.id}`, {
         headers: { Authorization: `Bearer ${access}` },
       })
-
+      if (response.data.data.percentage >= 100) {
+        setPercentages(100)
+      } else {
+        setPercentages(response.data.data.percentage) // 읽은 퍼센트
+      }
       setLastPage(response.data.data.lastPage) // 읽은 페이지
       localStorage.setItem('lastPage', response.data.data.lastPage)
-      setPercentages(response.data.data.percentage) // 읽은 퍼센트
       setInitialPercentages(response.data.data.percentage) //초기 퍼센트 저장
       localStorage.setItem('percentage', response.data.data.percentage)
       setNewLastPage(response.data.data.lastPage) // 초기 페이지 설정
@@ -64,11 +73,11 @@ const Bar = ({ book }) => {
 
   return (
     <div className="flex flex-col mb-3">
-      <div className="flex justify-between mr-4 mb-2 mt-10">
+      <div className="flex justify-between mr-1 mb-2 mt-10">
         <p className="text-xl  ">독서량</p>
         {isEditing && (
           <button onClick={resetHandle}>
-            <ReturnIcon />
+            <BsArrowCounterclockwise size={20} />
           </button>
         )}
       </div>

src/components/Modal/ModalAtom/StarRating.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
-import StarIcon from '../../../assets/svgs/star.svg?react'
+import { TiStarFullOutline } from 'react-icons/ti'
+
 import { useMyContext } from '../../Context/MyContext'
 import { baseInstance } from '../../../api/config'
 const StarRating = () => {
@@ -41,11 +42,13 @@ const StarRating = () => {
       </div>
       <div className="flex space-x-1">
         {[1, 2, 3, 4, 5].map((star) => (
-          <StarIcon
-            className="w-6 h-6 cursor-pointer"
+          <TiStarFullOutline
             key={star}
-            fill={star <= (grading === 0 ? rating : grading) ? '#f6ce0b' : '#e4e4e4'}
-            onClick={() => starHandle(star)}></StarIcon>
+            size={24}
+            color={star <= (grading === 0 ? rating : grading) ? '#f6ce0b' : '#e4e4e4'} // 색상 설정
+            className="cursor-pointer"
+            onClick={() => starHandle(star)}
+          />
         ))}
       </div>
     </div>

src/components/Modal/ModalAtom/StateBtn.tsx

@@ -1,11 +1,12 @@
-import { useState } from 'react'
-import FinishIcon from '../../../assets/svgs/finish.svg?react'
-import BookIcon from '../../../assets/svgs/book.svg?react'
 import { useMyContext } from '../../Context/MyContext'
+import { RiBook3Line } from 'react-icons/ri'
+import { LuFlagTriangleRight } from 'react-icons/lu'
 
-const StateBtn = (modalHandle: () => {}) => {
+
+
+const StateBtn = () => {
   const {
-    newLastPage,
+    // newLastPage,
     setNewLastPage,
     selectedBook,
     setIsEditing,
@@ -28,7 +29,7 @@ const StateBtn = (modalHandle: () => {}) => {
         className={`flex items-center justify-center w-[7rem] h-[2.785rem] px-4 py-2 rounded  ${
           isActive ? 'bg-toggle' : 'bg-inactive'
         }`}>
-        <BookIcon fill={isActive ? '#4ECB71' : '#888888'} />
+        <RiBook3Line size={20} color={isActive ? '#4ECB71' : '#888888'} />
         도서 중
       </button>
 
@@ -41,7 +42,7 @@ const StateBtn = (modalHandle: () => {}) => {
         className={`flex w-[7rem] h-[2.785rem] items-center justify-center px-4 py-2 rounded   ${
           !isActive ? 'bg-toggle' : 'bg-inactive'
         }`}>
-        <FinishIcon stroke={isActive ? '#888888' : '#4ECB71'} />
+        <LuFlagTriangleRight size={22} color={isActive ? '#888888' : '#4ECB71'} />
         완독!
       </button>
     </div>

src/components/Tab/Pannels/ReadBooks.tsx

@@ -4,6 +4,9 @@ import { useMyContext } from '../../Context/MyContext'
 import { baseInstance } from '../../../api/config'
 import { useEffect, useState } from 'react'
 import useInfiniteScroll from '../../../hooks/useInfiniteScroll'
+import Lottie from 'lottie-react'
+import Empty from '../../../assets/lotties/Animation - 1724653336505.json'
+import { useNavigate } from 'react-router-dom'
 
 type BookType = {
   cover_image_url: string
@@ -18,6 +21,7 @@ const ReadBook = () => {
   const [hasMore, setHasMore] = useState<boolean>(true)
   const [isLoading, setIsLoading] = useState<boolean>(true)
   const { isModalOpen, setIsModalOpen, setSelectedBook } = useMyContext()
+  const navigate = useNavigate()
 
   const handleBookClick = (book: any) => {
     setSelectedBook({ ...book, status: 'Read' })
@@ -29,12 +33,9 @@ const ReadBook = () => {
       setIsLoading(true)
       const access = localStorage.getItem('accessToken')
 
-      const response = await baseInstance.get(
-        `/readings?status=READ&page=${page}`,
-        {
-          headers: { Authorization: `Bearer ${access}` },
-        },
-      )
+      const response = await baseInstance.get(`/readings?status=READ&page=${page}`, {
+        headers: { Authorization: `Bearer ${access}` },
+      })
       const readBooks = response.data.bookInfos.content
 
       if (response.data.bookInfos.empty) {
@@ -60,39 +61,58 @@ const ReadBook = () => {
 
   const setTarget = useInfiniteScroll({ hasMore, onLoadMore: loadMore })
 
+  const goBookSearch = () => navigate('/booksearch')
+
   return (
     <div>
-      <div className="grid grid-cols-4 gap-y-14 gap-x-8 mt-16">
-        {isLoading && books.length === 0
-          ? Array.from({ length: 12 }).map((_, index) => (
+      {books.length === 0 ? (
+        <div className="w-full mt-10 flex flex-col justify-center items-center h-dvh">
+          <Lottie
+            animationData={Empty}
+            style={{
+              width: '280px',
+            }}
+          />
+          <p className="text-xl font-semibold text-gray-700">완독한 내역이 없습니다</p>
+          <button
+            className="text-lg mt-4 px-4 py-2 text-btn underline underline-offset-4"
+            onClick={() => {goBookSearch()}}>
+            읽을 책 찾으러 가기
+          </button>
+        </div>
+      ) : (
+        <div className="grid grid-cols-4 gap-y-14 gap-x-8 mt-16">
+          {isLoading && books.length === 0
+            ? Array.from({ length: 12 }).map((_, index) => (
+                <div
+                  key={index}
+                  className="skeleton bg-base-300 w-[19.1875rem] h-[10.25rem] rounded-[2.0625rem] animate-pulse"
+                />
+              ))
+            : books.map((book, index) => (
+                <BookBox
+                  key={index}
+                  img={book.cover_image_url}
+                  title={book.title}
+                  writer={book.author}
+                  onClick={() => handleBookClick(book)}>
+                  {book.grade === 0 ? (
+                    <button className="text-gray-600 pl-6 pt-2">책 리뷰 남기기 {' >'}</button>
+                  ) : (
+                    <StarRate grade={book.grade} />
+                  )}
+                </BookBox>
+              ))}
+          {isLoading &&
+            books.length > 0 &&
+            Array.from({ length: 6 }).map((_, index) => (
               <div
                 key={index}
                 className="skeleton bg-base-300 w-[19.1875rem] h-[10.25rem] rounded-[2.0625rem] animate-pulse"
               />
-            ))
-          : books.map((book, index) => (
-              <BookBox
-                key={index}
-                img={book.cover_image_url}
-                title={book.title}
-                writer={book.author}
-                onClick={() => handleBookClick(book)}>
-                {book.grade === 0 ? (
-                  <button className="text-gray-600 pl-6 pt-2">책 리뷰 남기기 {' >'}</button>
-                ) : (
-                  <StarRate grade={book.grade} />
-                )}
-              </BookBox>
             ))}
-        {isLoading &&
-          books.length > 0 &&
-          Array.from({ length: 6 }).map((_, index) => (
-            <div
-              key={index}
-              className="skeleton bg-base-300 w-[19.1875rem] h-[10.25rem] rounded-[2.0625rem] animate-pulse"
-            />
-          ))}
-      </div>
+        </div>
+      )}
       <div ref={setTarget} className="w-full h-3 bg-transparent"></div>
     </div>
   )

src/components/Tab/Pannels/ReadingBooks.tsx

@@ -4,6 +4,9 @@ import { useMyContext } from '../../Context/MyContext'
 import { baseInstance } from '../../../api/config'
 import { useEffect, useState } from 'react'
 import useInfiniteScroll from '../../../hooks/useInfiniteScroll'
+import Lottie from 'lottie-react'
+import Empty from '../../../assets/lotties/Animation - 1724653336505.json'
+import { useNavigate } from 'react-router-dom'
 
 type BookType = {
   cover_image_url: string
@@ -20,6 +23,7 @@ const ReadingBook = () => {
   const [page, setPage] = useState<number>(1)
   const [hasMore, setHasMore] = useState<boolean>(true)
   const [isLoading, setIsLoading] = useState<boolean>(true)
+  const navigate = useNavigate()
 
   const getReadingBooks = async () => {
     try {
@@ -57,11 +61,27 @@ const ReadingBook = () => {
     setSelectedBook({ ...book, status: 'Reading' })
     setIsModalOpen(true)
   }
+  const goBookSearch = () => navigate('/booksearch')
 
   return (
     <>
       {books.length === 0 && !isLoading ? (
-        <div className="text-center text-2xl mt-16">읽고 있는 책이 없습니다.</div>
+        <div className="w-full mt-10 flex flex-col justify-center items-center h-dvh">
+          <Lottie
+            animationData={Empty}
+            style={{
+              width: '280px',
+            }}
+          />
+          <p className="text-xl font-semibold text-gray-700">독서 중인 책이 없습니다</p>
+          <button
+            className="text-lg mt-4 px-4 py-2 text-btn underline underline-offset-4"
+            onClick={() => {
+              goBookSearch()
+            }}>
+            읽을 책 찾으러 가기
+          </button>
+        </div>
       ) : (
         <div>
           <div className="grid grid-cols-4 gap-y-14 gap-x-8 mt-16">
@@ -102,4 +122,4 @@ const ReadingBook = () => {
   )
 }
 
-export default ReadingBook
+export default ReadingBook