Merge pull request #104 from CheckIt-v3/feat/#102

[Feat/#102]: 로그인,회원가입 수정 / 라우터 정리 / 서스펜스 적용

Router.tsx

@@ -0,0 +1,73 @@
+import { createBrowserRouter } from 'react-router-dom'
+import { lazy, Suspense } from 'react'
+import { ClipLoader } from 'react-spinners'
+
+import Layout from './src/components/Layout'
+import LayoutWithoutHeader from './src/components/LayoutWithoutHeader' // 새로운 레이아웃
+const MainPage = lazy(() => import('./src/pages/MainPage'))
+const LoginPage = lazy(() => import('./src/pages/LoginPage'))
+const SignUpPage = lazy(() => import('./src/pages/SignUpPage'))
+const MyPage = lazy(() => import('./src/pages/MyPage'))
+const SearchPage = lazy(() => import('./src/pages/SearchPage'))
+const BookInfoPage = lazy(() => import('./src/pages/BookInfoPage'))
+const ChoosePage = lazy(() => import('./src/pages/ChoosePage'))
+const Statistics = lazy(() => import('./src/pages/Statistics'))
+const BookStackPage = lazy(() => import('./src/pages/BookStackPage'))
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: (
+      <Suspense
+        fallback={
+          <div
+            style={{
+              width: '100%',
+              height: '67.5rem',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}>
+            <ClipLoader color="black" size={28} />
+          </div>
+        }>
+        <LayoutWithoutHeader /> 
+      </Suspense>
+    ),
+    children: [
+      { path: '/', element: <MainPage /> },
+      { path: '/login', element: <LoginPage /> },
+      { path: '/signup', element: <SignUpPage /> },
+    ],
+  },
+  {
+    path: '/',
+    element: (
+      <Suspense
+        fallback={
+          <div
+            style={{
+              width: '100%',
+              height: '67.5rem',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}>
+            <ClipLoader color="black"  size={28} />
+          </div>
+        }>
+        <Layout /> 
+      </Suspense>
+    ),
+    children: [
+      { path: '/mypage', element: <MyPage /> },
+      { path: '/booksearch', element: <SearchPage /> },
+      { path: '/book/:id', element: <BookInfoPage /> },
+      { path: '/choose', element: <ChoosePage /> },
+      { path: '/activity', element: <Statistics /> },
+      { path: '/stack', element: <BookStackPage /> },
+    ],
+  },
+])
+
+export default router

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@clerk/clerk-react": "^5.4.2",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
@@ -54,6 +55,7 @@
     "react-router-dom": "^6.9.0",
     "react-scripts": "^5.0.1",
     "react-slick": "^0.29.0",
+    "react-spinners": "^0.14.1",
     "react-three-fiber": "^6.0.13",
     "react-toastify": "^9.1.3",
     "slick-carousel": "^1.8.1",

src/App.tsx

@@ -1,51 +1,12 @@
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
-// import WishShelf from './pages/WishShelf'
-// import ReadingShelf from './pages/ReadingShelf'
-// import EndShelf from './pages/EndShelf'
-import Statistics from './pages/Statistics'
-// import BookSearch from './pages/BookSearch'
-import MainPage from './pages/MainPage'
-import LoginPage from './pages/LoginPage'
-import SignUpPage from './pages/SignUpPage'
-import SearchPage from './pages/SearchPage'
-import BookStackPage from './pages/BookStackPage'
-import ChoosePage from './pages/ChoosePage'
-import BookShelfPage from './pages/BookShelfPage'
-import MyPage from './pages/MyPage'
-import BookInfoPage from './pages/BookInfoPage'
-import Layout from './components/Layout'
 import { QueryClient, QueryClientProvider } from 'react-query'
+import { RouterProvider } from 'react-router-dom'
+import router from '../Router'
 
 function App() {
   const queryClient = new QueryClient()
   return (
     <QueryClientProvider client={queryClient}>
-      <Router>
-        <Layout>
-          <Routes>
-            {/* 원준 */}
-            <Route path="/" element={<MainPage />} />
-            <Route path="/stack" element={<BookStackPage />} />
-            {/* 우희 */}
-            <Route path="/booksearch" element={<SearchPage />} />
-            <Route path="/book/:id" element={<BookInfoPage />} />
-            <Route path="/login" element={<LoginPage />} />
-            <Route path="/signup" element={<SignUpPage />} />
-            {/* 선재 */}
-            {/* <Route path="/wish" element={<WishShelf />} />
-        <Route path="/reading" element={<ReadingShelf />} />
-        <Route path="/finish" element={<EndShelf />} /> */}
-            <Route path="/shelf" element={<BookShelfPage />} />
-            {/* 추후 담당자 */}
-            {/* <Route path="/activity" element={<Statistics />} />
-        <Route path="/BookStack" element={<BookStackPage />} /> */}
-            <Route path="/choose" element={<ChoosePage />} />
-            {/* <Route path="/stack" element={< />} /> */}
-
-            <Route path="/mypage" element={<MyPage />} />
-          </Routes>
-        </Layout>
-      </Router>
+      <RouterProvider router={router} />
     </QueryClientProvider>
   )
 }

src/api/config.ts

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

src/components/Header/LoginHeader.tsx

@@ -12,17 +12,15 @@ const LoginHeader: FC = () => {
 
   const imageStyle = {
     width: 'auto',
-    height: '144px',
+    height: '80px',
   }
 
   const goToMain = () => {
     navigate('/')
   }
 
   return (
-    <div
-      className="fixed top-0 left-1/2 transform -translate-x-1/2 z-50 flex items-center justify-between w-full px-4"
-      style={headerStyle}>
+    <div className="flex items-center justify-between w-full p-4" style={headerStyle}>
       {/* <div className="opacity-0 invisible">
         <button className="text-black font-bold text-2xl px-4 py-2 mb-8 rounded-md">로그인</button>
         <button className="text-black font-bold px-4 text-2xl py-2 mb-8 rounded-md">

src/components/Header/MyHeader.tsx

@@ -3,15 +3,14 @@ import logo from '../../../public/logo.png'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { baseInstance } from '../../api/config'
 import SearchBar from '../search/SearchBar'
-import axios from 'axios'
-import Swal from 'sweetalert2'
 
 const MyHeader: FC<{ onSearch: (query: string) => void }> = ({ onSearch }) => {
   const navigate = useNavigate()
   const location = useLocation()
   const [isLogoutClicked, setIsLogoutClicked] = useState(false)
   const [searchQuery, setSearchQuery] = useState<string>('')
   const userName = localStorage.getItem('userName')
+
   const handleLogout = async () => {
     setIsLogoutClicked(true)
 
@@ -43,8 +42,8 @@ const MyHeader: FC<{ onSearch: (query: string) => void }> = ({ onSearch }) => {
     }
   }
 
-  const goToWish = () => {
-    navigate('/shelf')
+  const goToMyPage = () => {
+    navigate('/mypage')
   }
 
   const goToStatistic = () => {
@@ -67,9 +66,7 @@ const MyHeader: FC<{ onSearch: (query: string) => void }> = ({ onSearch }) => {
   }
 
   return (
-    <div
-      className="fixed top-0 left-0 right-0 z-50 flex items-center justify-between w-full px-4"
-      style={headerStyle}>
+    <div className="flex items-center justify-between w-full px-4" style={headerStyle}>
       <div className="flex justify-start items-center">
         <img
           src={logo}
@@ -86,7 +83,7 @@ const MyHeader: FC<{ onSearch: (query: string) => void }> = ({ onSearch }) => {
         style={{ fontFamily: 'Noto Sans KR' }}>
         <p className="text-sm py-2 mb-8 rounded-md">{userName}</p>
         <p className="text-black text-sm px-2 py-2 mb-8 rounded-md">|</p>
-        <button className="text-black  text-sm py-2 mb-8 rounded-md" onClick={goToWish}>
+        <button className="text-black  text-sm py-2 mb-8 rounded-md" onClick={goToMyPage}>
           내 서재
         </button>
         <p className="text-black text-sm px-2 py-2 mb-8 rounded-md">|</p>

src/components/Layout.tsx

@@ -1,7 +1,12 @@
-const Layout = ({ children }) => {
+import { Outlet } from 'react-router-dom'
+import MyHeader from './Header/MyHeader'
+const Layout = () => {
   return (
     <div className="w-full flex justify-center">
-      <div className="w-full max-w-[1324px]">{children}</div>
+      <div className="w-full max-w-[1324px]">
+        <MyHeader/>
+        <Outlet />
+      </div>
     </div>
   )
 }

src/components/LayoutWithoutHeader.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from 'react-router-dom'
+
+const LayoutWithoutHeader = () => {
+  return (
+    <div className="w-full flex justify-center">
+      <div className="w-full max-w-[1324px]">
+        <Outlet />
+      </div>
+    </div>
+  )
+}
+
+export default LayoutWithoutHeader

src/components/Tab/Pannels/ReadBooks.tsx

@@ -1,7 +1,7 @@
 import BookBox from '../../shelf/BookBox'
 import StarRate from '../../shelf/StarRate'
 import { useMyContext } from '../../Context/MyContext'
-import axios from 'axios'
+import { baseInstance } from '../../../api/config'
 import { useEffect, useState } from 'react'
 import useInfiniteScroll from '../../../hooks/useInfiniteScroll'
 
@@ -29,8 +29,8 @@ const ReadBook = () => {
       setIsLoading(true)
       const access = localStorage.getItem('accessToken')
 
-      const response = await axios.get(
-        `http://localhost:8081/api/v1/readings?status=READ&page=${page}`,
+      const response = await baseInstance.get(
+        `/readings?status=READ&page=${page}`,
         {
           headers: { Authorization: `Bearer ${access}` },
         },

src/components/main/StartNavigator.tsx

@@ -1,17 +1,21 @@
+import React from 'react'
+
 interface StartNavigatorProps {
   onClick: () => void
+  text: string
+
 }
 
-export default function StartNavigator({ onClick }: StartNavigatorProps) {
-  return (
-    <div className="fixed left-1/2 bottom-8 transform -translate-x-1/2 z-50">
-      <button
-        onClick={onClick}
-        className="w-80 h-16 rounded-full bg-opacity-80 bg-black flex items-center justify-center shadow-md drop-shadow-lg transform transition-transform transition-shadow duration-300 hover:scale-105 hover:shadow-2xl">
-        <div className="text-white text-3xl font-semibold" style={{ fontFamily: 'Noto Sans KR' }}>
-          시작하기
-        </div>
-      </button>
-    </div>
-  )
-}
+const StartNavigator: React.FC<StartNavigatorProps> = ({ onClick, text }) => (
+  <div className="fixed left-1/2 bottom-8 transform -translate-x-1/2 z-50">
+    <button
+      onClick={onClick}
+      className="w-80 h-16 rounded-full bg-opacity-80 bg-black flex items-center justify-center shadow-md drop-shadow-lg transform transition-transform transition-shadow duration-300 hover:scale-105 hover:shadow-2xl">
+      <div className="text-white text-3xl" style={{ fontFamily: 'Noto Sans KR' }}>
+        {text}
+      </div>
+    </button>
+  </div>
+)
+
+export default StartNavigator

src/components/search/swiper/SearchHistory/SearchHistorySwipe.tsx

@@ -19,8 +19,8 @@ const SearchHistorySwipe = ({ recentSearches, onSearch }: SearchHistorySwipeProp
   }
 
   return (
-    <div className="p-8 pt-[120px]">
-      <p className="text-xl font-bold pt-8 pb-4">최근 히스토리</p>
+    <div className="p-8 ">
+      <p className="text-xl font-bold pb-4">최근 히스토리</p>
       <StyledSwiper
         slidesPerView={5}
         spaceBetween={10}

src/components/shelf/PageRecord.tsx

@@ -4,7 +4,10 @@ type PageRecordProps = {
   lastPage: number
 }
 
-const PageRecord = ({ pages, percentages,lastPage }: PageRecordProps) => {
+const PageRecord = ({ pages, percentages, lastPage }: PageRecordProps) => {
+  if (percentages >= 100) {
+    percentages = 100
+  }
   return (
     <>
       <div className="w-36 bg-neutral-200 rounded-3xl mt-[3rem]">

src/components/statistics/Stack.tsx

@@ -6,6 +6,7 @@ import { Html, Text } from '@react-three/drei'
 import { Group, Object3D } from 'three'
 import { baseInstance } from '../../api/config'
 import BookInfoModal from './BookModal'
+import BookInfo from '../Modal/ModalAtom/BookInfo';
 
 interface BookProps {
   model: Object3D
@@ -85,8 +86,7 @@ const Stack: React.FC = () => {
           },
         })
         .then((response) => {
-          // 'response.data' 대신 'response.data.bookInfos'를 사용합니다.
-          const fetchedBooks = response.data.bookInfos.map((bookData: BookData) => {
+          const fetchedBooks = response.data.bookInfos.content?.map((bookData: BookData) => {
             return {
               model: model.clone(),
               thickness: bookData.pages / 2000,

src/index.tsx

@@ -1,13 +1,27 @@
-import ReactDOM from 'react-dom';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-import "./index.css";
-import 'tailwindcss/tailwind.css';
+import { createRoot } from 'react-dom/client'
+import App from './App'
+import reportWebVitals from './reportWebVitals'
+import './index.css'
+import 'tailwindcss/tailwind.css'
+import { ClerkProvider } from '@clerk/clerk-react'
 
-ReactDOM.render(
-  <App />,
-  document.getElementById('root')
-);
+const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
 
+if (!PUBLISHABLE_KEY) {
+  throw new Error('Missing Clerk Publishable Key')
+}
 
-reportWebVitals();
+const domNode = document.getElementById('root')
+if (!domNode) {
+  throw new Error('Root element not found')
+}
+
+const root = createRoot(domNode)
+
+root.render(
+  <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
+    <App />
+  </ClerkProvider>,
+)
+
+reportWebVitals()