🧪 Test: 1차 릴리즈 Vercel 배포

kw-bookmedicine · Apr 2, 2024 · 17d845d · 17d845d
2 parents 2ffb2bd + cb28e05
commit 17d845d
Show file tree

Hide file tree

Showing 62 changed files with 2,799 additions and 714 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+	"cSpell.words": ["myworry", "prscr"]
+}
diff --git a/public/icon/art_icon.png b/public/icon/art_icon.png
diff --git a/public/icon/general_icon.png b/public/icon/general_icon.png
diff --git a/public/icon/history_icon.png b/public/icon/history_icon.png
diff --git a/public/icon/language_icon.png b/public/icon/language_icon.png
diff --git a/public/icon/literature_icon.png b/public/icon/literature_icon.png
diff --git a/public/icon/pharmacy_icon.png b/public/icon/pharmacy_icon.png
diff --git a/public/icon/pharmacy_icon_2.png b/public/icon/pharmacy_icon_2.png
diff --git a/public/icon/philosophy_icon.png b/public/icon/philosophy_icon.png
diff --git a/public/icon/religion_icon.png b/public/icon/religion_icon.png
diff --git a/public/icon/science_icon.png b/public/icon/science_icon.png
diff --git a/public/icon/search_icon.png b/public/icon/search_icon.png
diff --git a/public/icon/search_icon_light.png b/public/icon/search_icon_light.png
diff --git a/public/icon/social_icon.png b/public/icon/social_icon.png
diff --git a/public/icon/tech_icon.png b/public/icon/tech_icon.png
diff --git a/public/index.html b/public/index.html
@@ -2,14 +2,14 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+		<link rel="icon" href="%PUBLIC_URL%/logo_2x.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="theme-color" content="#000000" />
 		<meta
 			name="description"
 			content="Web site created using create-react-app"
 		/>
-		<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+		<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo_2x.png" />
 		<!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-		<title>React App</title>
+		<title>책국</title>
 	</head>
 	<body>
 		<noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/loading_thumbnail_x4.png b/public/loading_thumbnail_x4.png
diff --git a/public/logo_2x.png b/public/logo_2x.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,25 +1,25 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+	"short_name": "React App",
+	"name": "Create React App Sample",
+	"icons": [
+		{
+			"src": "favicon.ico",
+			"sizes": "64x64 32x32 24x24 16x16",
+			"type": "image/x-icon"
+		},
+		{
+			"src": "logo192.png",
+			"type": "image/png",
+			"sizes": "192x192"
+		},
+		{
+			"src": "logo512.png",
+			"type": "image/png",
+			"sizes": "512x512"
+		}
+	],
+	"start_url": ".",
+	"display": "standalone",
+	"theme_color": "#000000",
+	"background_color": "#ffffff"
 }
diff --git a/src/App.js b/src/App.js
@@ -13,7 +13,6 @@ import Login from './pages/Login';
 import Join from './pages/Join';
 import Signup2 from './pages/Signup2';
 import Signup3 from './pages/Signup3';
-import FindUserInfo from './pages/FindUserInfo';
 import Registration from './pages/Registration';
 import BookList from './pages/BookList';
 import SmallCategory from './pages/SmallCategory';
@@ -22,6 +21,11 @@ import UserInfo from './pages/UserInfo';
 
 // 처방전 관련 페이지들
 import Counseling from './pages/Counseling';
+import MyWorry from './pages/MyWorry';
+import WorryDetail from './pages/WorryDetail';
+import PrescriptionWrite from './pages/PrescriptionWrite';
+import PrescriptionWriteStep2 from './pages/PrescriptionWriteStep2';
+import PrescriptionDetail from './pages/Prescription/PrescriptionDetail';
 
 // STYLE
 import GlobalStyles from './styles/GlobalStyles';
@@ -54,15 +58,32 @@ function App() {
 						<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 path="/counseling" element={<Counseling />} />
+						<Route path="/worry/detail" element={<WorryDetail />} />
+						<Route path="/prescription/write" element={<PrescriptionWrite />} />
+						<Route
+							path="/prescription/write/2"
+							element={<PrescriptionWriteStep2 />}
+						/>
+						<Route
+							path="/prescription/detail"
+							element={<PrescriptionDetail />}
+						/>
+						<Route path="/myworry" element={<MyWorry />} />
 
+						{/* 회원가입 및 로그인 */}
 						<Route element={<LoginLayout />}>
 							<Route path="/id-find" element={<IdFind />} />
 							<Route path="/id-find-result" element={<LoginFindResult />} />
@@ -72,14 +93,15 @@ function App() {
 								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 />} />

diff --git a/src/assets/loading_test_img.png b/src/assets/loading_test_img.png
diff --git a/src/assets/loading_thumbnail_x4.png b/src/assets/loading_thumbnail_x4.png
diff --git a/src/assets/myworry-category-literature.png b/src/assets/myworry-category-literature.png
diff --git a/src/components/BookCard.js b/src/components/BookCard.js
@@ -9,11 +9,15 @@ const BookCard = ({ title, author, img, isbn }) => {
 			<Link to={`/book-detail?isbn=${isbn}`}>
 				<div className={styles['card_container']}>
 					<div className={styles['book_img']}>
-						<img className={styles['book_thumbnail']} src={img} alt="썸네일" />
+						<img className={styles['book_thumbnail']} src={img} />
 					</div>
 					<div className={styles['book_info_wrapper']}>
-						<div className={styles['book_title']}>{title}</div>
-						<div className={styles['book_author']}>{author}</div>
+						<div className={styles['book_title']} title={title}>
+							{title}
+						</div>
+						<div className={styles['book_author']} title={author}>
+							{author}
+						</div>
 					</div>
 				</div>
 			</Link>

diff --git a/src/components/BookDetailCard.jsx b/src/components/BookDetailCard.jsx
@@ -1,6 +1,9 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
+// ASSETS
+import loading_thumbnail from '../assets/loading_thumbnail_x4.png';
+
 //COMPONENTS
 import HashTag from '../components/HashTag';
 
@@ -16,6 +19,7 @@ const BookDetailCard = ({
 	type,
 }) => {
 	let cardType = ['expModal'].includes(type) ? type : '';
+	// let image = imageUrl === ' ' ? console.log(imageUrl) : console.log(imageUrl);
 
 	const renderCard = (type) => {
 		if (type === 'expModal') {
@@ -27,8 +31,8 @@ const BookDetailCard = ({
 								<div className="expModal_left_img_wrapper">
 									<img
 										className="expModal_img_wrapper_thumbnail"
-										src={imageUrl}
-										alt="썸네일"
+										src={imageUrl === '' ? loading_thumbnail : imageUrl}
+										// alt="썸네일"
 									/>
 								</div>
 							</div>
@@ -57,8 +61,8 @@ const BookDetailCard = ({
 									<div className="left_img_wrapper">
 										<img
 											className="img_wrapper_thumbnail"
-											src={imageUrl}
-											alt="썸네일"
+											src={imageUrl === '' ? loading_thumbnail : imageUrl}
+											// alt="썸네일"
 										/>
 									</div>
 								</div>

diff --git a/src/components/BookListSlide.js b/src/components/BookListSlide.js
@@ -1,10 +1,10 @@
-import { useState, useEffect } from 'react';
-import Slider from 'react-slick';
+import React from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import axios from 'axios';
+
+// ASSETS
+import loading_thumbnail from '../assets/loading_thumbnail_x4.png';
 
 // COMPONENTS
-import Title from './ArrowTitle';
 import BookCard from './BookCard';
 
 // STYLES
@@ -14,24 +14,8 @@ 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 = ({ list }) => {
 	return (
 		<>
 			<section className={styles['swiper-container']}>
@@ -50,7 +34,9 @@ const BookListSlide = ({
 											key={item.isbn}
 											title={item.title}
 											author={item.author}
-											img={item.imageUrl}
+											img={
+												item.imageUrl === '' ? loading_thumbnail : item.imageUrl
+											}
 											isbn={item.isbn}
 										/>
 									</SwiperSlide>

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,5 +1,8 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React, { useEffect } from 'react';
+import { Link, NavLink, useLocation } from 'react-router-dom';
+
+// SERVICE
+import api from '../services/api';
 
 // COMPONENTS
 import Btn from '../components/Button';
@@ -9,12 +12,35 @@ import '../styles/Header.css';
 
 const Header = () => {
 	const logout = () => {
-		let token = localStorage.getItem('token');
-		console.log('logout!');
-		localStorage.clear();
+		api.get('/logout').then((res) => {
+			console.log(res.data);
+		});
 		// window.location.replace('http://localhost:3000/');
 	};
 
+	// 현재 url 주소 불러옴
+	const location = useLocation();
+
+	// 해당하는 주소 url일 때, 적용될 스타일
+	const activeStyle = {
+		color: '#000',
+		fontWeight: 700,
+	};
+
+	// 고민상담페이지 -> 처방전 작성까지 주소
+	let prscrLocation = [
+		'/worry/detail',
+		'/prescription/write',
+		'/prescription/write/2',
+		'/prescription/detail',
+	];
+
+	// 검색페이지 -> 책 정보 상세보기 페이지까지 주소
+	let bookLocation = ['/book-detail', '/book/list', '/book'];
+
+	// 마이페이지 -> 내 정보 수정
+	let myLocation = ['/edit', '/edit/nickname', '/edit/password', '/edit/job'];
+
 	return (
 		<div className="head">
 			<header>
@@ -24,23 +50,71 @@ const Header = () => {
 				<nav className="header_list_wrapper">
 					<ul className="header_list">
 						<li>
-							<Link to={'/main'}>HOME</Link>
+							<NavLink
+								style={({ isActive }) => (isActive ? activeStyle : {})}
+								to={'/main'}
+							>
+								HOME
+							</NavLink>
+						</li>
+						<li>
+							<NavLink
+								style={({ isActive }) => (isActive ? activeStyle : {})}
+								// to={'/simplePrscr'}
+								to={'/feed'}
+							>
+								한 줄 처방
+							</NavLink>
 						</li>
 						<li>
-							<Link to={'/counseling'}>고민상담</Link>
+							<NavLink
+								style={({ isActive }) =>
+									isActive
+										? activeStyle
+										: prscrLocation.includes(location.pathname)
+										? activeStyle
+										: {}
+								}
+								to={'/counseling'}
+							>
+								고민상담
+							</NavLink>
 						</li>
 						<li>
-							<Link to={'/search'}>SEARCH</Link>
+							<NavLink
+								style={({ isActive }) =>
+									isActive
+										? activeStyle
+										: bookLocation.includes(location.pathname)
+										? activeStyle
+										: {}
+								}
+								to={'/search'}
+							>
+								SEARCH
+							</NavLink>
 						</li>
 						<li>
-							<Link to={'/mypage'}>MYPAGE</Link>
+							<NavLink
+								style={({ isActive }) =>
+									isActive
+										? activeStyle
+										: myLocation.includes(location.pathname)
+										? activeStyle
+										: {}
+								}
+								to={'/mypage'}
+							>
+								MYPAGE
+							</NavLink>
 						</li>
 					</ul>
 				</nav>
 				<div className="head_btn__logout">
 					<Btn
 						onClick={() => {
 							logout();
+							// window.location.replace('/');
 						}}
 						text={'로그아웃'}
 						type="logout"