🧪 Test: 2차 테스트 배포

kw-bookmedicine · Mar 16, 2024 · fdec95d · fdec95d
2 parents 3d75fa2 + 5d94e0b
commit fdec95d
Show file tree

Hide file tree

Showing 42 changed files with 2,057 additions and 643 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+REACT_APP_API_URL=https://api.bookpharmacy.store
diff --git a/.gitignore b/.gitignore
@@ -11,8 +11,12 @@
 # production
 /build
 
+localhost-key.pem
+localhost.pem
+
 # misc
 .DS_Store
+.env
 .env.local
 .env.development
 .env.development.local

diff --git a/package.json b/package.json
@@ -12,6 +12,8 @@
 		"react-hook-form": "^7.49.3",
 		"react-router-dom": "6",
 		"react-scripts": "5.0.1",
+		"react-slick": "^0.30.2",
+		"slick-carousel": "^1.8.1",
 		"styled-components": "^6.1.6",
 		"styled-reset": "^4.5.1",
 		"swiper": "^11.0.5",

diff --git a/src/App.js b/src/App.js
@@ -29,7 +29,8 @@ import LoginFindResult from './pages/IdFindResult';
 import PasswordFind from './pages/PasswordFind';
 import PasswordFindResult from './pages/PasswordFindResult';
 import IdFind from './pages/IdFind';
-import LoginContextProvider, { LoginContext } from './contexts/LoginContextProvider';
+import LoginContextProvider from './contexts/LoginContextProvider';
+import SearchResult from './pages/SearchResult';
 
 function App() {
 	// 브라우저 새로고침 스크롤 이벤트
@@ -40,47 +41,48 @@ function App() {
 	}, []);
 
 	https: return (
-    <BrowserRouter>
-      <LoginContextProvider>
-        <div className="App">
-          <GlobalStyles />
-          <ScrollTop />
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/logout" element={<Home />} />
-            <Route path="/main" element={<Main />} />
-            <Route path="/feed" element={<Feed />} />
-            <Route path="/search" element={<Search />} />
-            <Route path="/mypage" element={<Mypage />} />
-            <Route path="/myfeed" element={<MyFeed />} />
-            <Route path="/edit" element={<Edit />} />
-            <Route path="/edit/:page" element={<UserInfo />} />
+		<BrowserRouter>
+			<LoginContextProvider>
+				<div className="App">
+					<GlobalStyles />
+					<ScrollTop />
+					<Routes>
+						<Route path="/" element={<Home />} />
+						<Route path="/logout" element={<Home />} />
+						<Route path="/main" element={<Main />} />
+						<Route path="/feed" element={<Feed />} />
+						<Route path="/search" element={<Search />} />
+						<Route path="/search/result/:title" element={<SearchResult />} />
+						<Route path="/mypage" element={<Mypage />} />
+						<Route path="/myfeed" element={<MyFeed />} />
+						<Route path="/edit" element={<Edit />} />
+						<Route path="/edit/:page" element={<UserInfo />} />
 
-            <Route element={<LoginLayout />}>
-              <Route path="/id-find" element={<IdFind />} />
-              <Route path="/id-find-result" element={<LoginFindResult />} />
-              <Route path="/password-find" element={<PasswordFind />} />
-              <Route
-                path="/password-find-result"
-                element={<PasswordFindResult />}
-              />
-            </Route>
-            <Route path="/test" element={<Registration />} />
-            <Route path="/login" element={<Login />} />
-            <Route path="/signup" element={<Join />} />
-            <Route path="/signup/1" element={<Signup2 />} />
-            <Route path="/signup/2" element={<Signup3 />} />
-            {/* <Route path="/find/user/info/:page" element={<FindUserInfo />} /> */}
-            <Route path="/test" element={<Registration />} />
+						<Route element={<LoginLayout />}>
+							<Route path="/id-find" element={<IdFind />} />
+							<Route path="/id-find-result" element={<LoginFindResult />} />
+							<Route path="/password-find" element={<PasswordFind />} />
+							<Route
+								path="/password-find-result"
+								element={<PasswordFindResult />}
+							/>
+						</Route>
+						<Route path="/test" element={<Registration />} />
+						<Route path="/login" element={<Login />} />
+						<Route path="/signup" element={<Join />} />
+						<Route path="/signup/1" element={<Signup2 />} />
+						<Route path="/signup/2" element={<Signup3 />} />
+						{/* <Route path="/find/user/info/:page" element={<FindUserInfo />} /> */}
+						<Route path="/test" element={<Registration />} />
 
-            <Route path="/book-detail" element={<BookDetail />} />
-            <Route path="/book/list/:title" element={<BookList />} />
-            <Route path="/book/:title/:category" element={<SmallCategory />} />
-          </Routes>
-        </div>
-      </LoginContextProvider>
-    </BrowserRouter>
-  );
+						<Route path="/book-detail" element={<BookDetail />} />
+						<Route path="/book/list/:title" element={<BookList />} />
+						<Route path="/book/:title/:category" element={<SmallCategory />} />
+					</Routes>
+				</div>
+			</LoginContextProvider>
+		</BrowserRouter>
+	);
 }
 
 export default App;
diff --git a/src/assets/closeIconRound.svg b/src/assets/closeIconRound.svg
diff --git a/src/assets/icons8-별-30 (1).png b/src/assets/icons8-별-30 (1).png
diff --git a/src/assets/icons8-빈별-30 (2).png b/src/assets/icons8-빈별-30 (2).png
diff --git a/src/assets/icons8-스타-반-빈-30.png b/src/assets/icons8-스타-반-빈-30.png
diff --git a/src/components/BookCard.js b/src/components/BookCard.js
@@ -1,16 +1,22 @@
+import { Link } from 'react-router-dom';
+
 // Styles
 import styles from '../styles/BookCard.module.css';
 
-const BookCard = ({ title, author }) => {
+const BookCard = ({ title, author, img, isbn }) => {
 	return (
 		<>
-			<div className={styles['card_container']}>
-				<div className={styles['book_img']}></div>
-				<div className={styles['book_info_wrapper']}>
-					<div className={styles['book_title']}>{title}</div>
-					<div className={styles['book_author']}>{author}</div>
+			<Link to={`/book-detail?isbn=${isbn}`}>
+				<div className={styles['card_container']}>
+					<div className={styles['book_img']}>
+						<img className={styles['book_thumbnail']} src={img} alt="썸네일" />
+					</div>
+					<div className={styles['book_info_wrapper']}>
+						<div className={styles['book_title']}>{title}</div>
+						<div className={styles['book_author']}>{author}</div>
+					</div>
 				</div>
-			</div>
+			</Link>
 		</>
 	);
 };

diff --git a/src/components/BookDetailCard.jsx b/src/components/BookDetailCard.jsx
@@ -1,52 +1,99 @@
-import React, { useState, useEffect } from 'react';
-import { Link, useSearchParams } from 'react-router-dom';
+import React from 'react';
+import { Link } from 'react-router-dom';
 
 //COMPONENTS
 import HashTag from '../components/HashTag';
 
 //STYLES
 import '../styles/BookDetailCard.css';
 
-const BookDetailCard = ({ title, author, imageUrl }) => {
-	const [searchParams, setSearchParams] = useSearchParams();
-	const bookTitle = searchParams.get('title');
-	// console.log('title:', bookTitle);
+const BookDetailCard = ({
+	title,
+	author,
+	imageUrl,
+	isbn,
+	bookKeywordList,
+	type,
+}) => {
+	let cardType = ['expModal'].includes(type) ? type : '';
 
-	// useEffect(() => {
-	// 	setSearchParams({ who: 'bb' });
-	// });
+	const renderCard = (type) => {
+		if (type === 'expModal') {
+			return (
+				<>
+					<div className="expModal_bookCard_container">
+						<div className="expModal_bookCard_wrapper">
+							<div className="expModal_bookCard_left_wrapper">
+								<div className="expModal_left_img_wrapper">
+									<img
+										className="expModal_img_wrapper_thumbnail"
+										src={imageUrl}
+										alt="썸네일"
+									/>
+								</div>
+							</div>
 
-	return (
-		<>
-			<Link to={'/book-detail'}>
-				<div className="bookCard_container">
-					<div className="bookCard_wrapper">
-						<div className="bookCard_left_wrapper">
-							<div className="left_img_wrapper">
-								<img
-									className="img_wrapper_thumbnail"
-									src={imageUrl}
-									alt="썸네일"
-								/>
+							<div className="expModal_bookCard_right_wrapper">
+								<div className="expModal_bookCard_right_up_wrapper">
+									<div className="expModal_right_up_title" title={title}>
+										{title}
+									</div>
+									<div className="expModal_right_up_author">{author}</div>
+								</div>
+
+								<div className="expModal_bookCard_right_bottom_wrapper"></div>
 							</div>
 						</div>
-						<div className="bookCard_right_wrapper">
-							<div className="bookCard_right_up_wrapper">
-								<div className="right_up_title" title={title}>
-									{title}
+					</div>
+				</>
+			);
+		} else {
+			return (
+				<>
+					<Link to={`/book-detail?isbn=${isbn}`}>
+						<div className="bookCard_container">
+							<div className="bookCard_wrapper">
+								<div className="bookCard_left_wrapper">
+									<div className="left_img_wrapper">
+										<img
+											className="img_wrapper_thumbnail"
+											src={imageUrl}
+											alt="썸네일"
+										/>
+									</div>
+								</div>
+
+								<div className="bookCard_right_wrapper">
+									<div className="bookCard_right_up_wrapper">
+										<div className="right_up_title" title={title}>
+											{title}
+										</div>
+										<div className="right_up_author">{author}</div>
+									</div>
+
+									<div className="bookCard_right_bottom_wrapper">
+										{bookKeywordList.map((keyword, idx) => {
+											return (
+												<HashTag
+													key={`${isbn}keyword-${idx}`}
+													text={keyword.name}
+													type="sm-category"
+												/>
+											);
+										})}
+									</div>
 								</div>
-								<div className="right_up_author">{author}</div>
-							</div>
-							<div className="bookCard_right_bottom_wrapper">
-								<HashTag text={'행복'} type="sm-category" />
-								<HashTag text={'해피니스'} type="sm-category" />
-								<HashTag text={'클로버'} type="sm-category" />
-								<HashTag text={'해쉬태그4'} type="sm-category" />
 							</div>
 						</div>
-					</div>
-				</div>
-			</Link>
+					</Link>
+				</>
+			);
+		}
+	};
+
+	return (
+		<>
+			<div>{renderCard(cardType)}</div>
 		</>
 	);
 };

diff --git a/src/components/BookListSlide.js b/src/components/BookListSlide.js
@@ -1,4 +1,6 @@
 import { useState, useEffect } from 'react';
+import Slider from 'react-slick';
+import { Swiper, SwiperSlide } from 'swiper/react';
 import axios from 'axios';
 
 // COMPONENTS
@@ -7,23 +9,57 @@ import BookCard from './BookCard';
 
 // STYLES
 import styles from '../styles/BookListSlide.module.css';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import { set } from 'react-hook-form';
+
+const BookListSlide = ({
+	list,
+	bigCategory,
+	midCategoryTitle,
+	title,
+	author,
+	imageUrl,
+}) => {
+	var settings = {
+		dots: true,
+		infinite: false,
+		speed: 500,
+		slidesToShow: 1,
+		slidesToScroll: 1,
+	};
 
-const BookListSlide = ({ bigCategory, midCategoryTitle, author }) => {
 	return (
 		<>
-			<div className={styles['container']}>
-				<Title bigCategory={bigCategory} title={midCategoryTitle} />
-				<div className={styles['slide']}>
-					<BookCard title={'책 제목'} author={author} />
-					<BookCard title={'책 제목'} author={author} />
-					<BookCard title={'책 제목'} author={'저자'} />
-					<BookCard title={'책 제목'} author={'저자'} />
-					<BookCard title={'책 제목'} author={'저자'} />
-					<BookCard title={'책 제목'} author={'저자'} />
-					<BookCard title={'책 제목'} author={'저자'} />
-					<BookCard title={'책 제목'} author={'저자'} />
+			<section className={styles['swiper-container']}>
+				<div className={styles['container']}>
+					<Swiper
+						spaceBetween={20}
+						slidesPerView={7}
+						slidesOffsetBefore={0}
+						id={'my-swiper'}
+					>
+						<div className={styles['slide']}>
+							{list.map((item) => {
+								return (
+									<SwiperSlide key={item.isbn}>
+										<BookCard
+											key={item.isbn}
+											title={item.title}
+											author={item.author}
+											img={item.imageUrl}
+											isbn={item.isbn}
+										/>
+									</SwiperSlide>
+								);
+							})}
+						</div>
+					</Swiper>
 				</div>
-			</div>
+			</section>
 		</>
 	);
 };

diff --git a/src/components/Button.jsx b/src/components/Button.jsx
@@ -39,7 +39,7 @@ const Button = ({ text, type }) => {
 	};
 
 	const renderButton = (url, type) => {
-		if (type === 'add' || type === 'delete') {
+		if (type === 'add' || type === 'delete' || type === 'exp') {
 			return <button className={styles[`Btn-${type}`]}>{text}</button>;
 		} else {
 			if (type === 'logout') {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		REACT_APP_API_URL=https://api.bookpharmacy.store