🧪 Test: vercel 배포 test

🧪 Test: vercel 배포 test

src/App.js

@@ -20,6 +20,9 @@ import SmallCategory from './pages/SmallCategory';
 import Edit from './pages/Edit';
 import UserInfo from './pages/UserInfo';
 
+// 처방전 관련 페이지들
+import Counseling from './pages/Counseling';
+
 // STYLE
 import GlobalStyles from './styles/GlobalStyles';
 import './App.css';
@@ -58,6 +61,8 @@ function App() {
 						<Route path="/edit" element={<Edit />} />
 						<Route path="/edit/:page" element={<UserInfo />} />
 
+						<Route path="/counseling" element={<Counseling />} />
+
 						<Route element={<LoginLayout />}>
 							<Route path="/id-find" element={<IdFind />} />
 							<Route path="/id-find-result" element={<LoginFindResult />} />

src/components/Header.js

@@ -27,7 +27,7 @@ const Header = () => {
 							<Link to={'/main'}>HOME</Link>
 						</li>
 						<li>
-							<Link to={'/feed'}>FEED</Link>
+							<Link to={'/counseling'}>고민상담</Link>
 						</li>
 						<li>
 							<Link to={'/search'}>SEARCH</Link>

src/components/Prescription/CounselingView.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+// STYLE
+import '../../styles/Counseling/CounselingView.css';
+
+const CounselingView = () => {
+	return (
+		<>
+			<div className="cnsView_container">
+				<div className="cns_user_wrapper">
+					<div className="cns_user_left_wrapper"></div>
+					<div className="cns_user_right_wrapper">
+						<div className="cns_user_name">날개없는 새</div>
+						<div className="cns_feed_date">2024.03.22</div>
+					</div>
+				</div>
+				<div className="user_cns_text_wrapper">
+					<div className="user_cns_text">새로운 곳에 적응하기 힘들어요</div>
+				</div>
+				<div className="cns_to_prscr_btn">
+					<Link to={'/worry'}>
+						<button className="convert_prscr">진단서 보기</button>
+					</Link>
+				</div>
+			</div>
+		</>
+	);
+};
+
+export default CounselingView;

src/pages/Counseling.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+// COMPONENTS
+import Header from '../components/Header';
+import Footer from '../components/Footer';
+import CnsFeed from '../components/Prescription/CounselingView';
+
+// STYLES
+import '../styles/Counseling.css';
+
+const Counseling = () => {
+	return (
+		<>
+			<Header />
+			<div className="counseling_content">
+				<div className="counseling_category_wrapper">
+					<div className="cns_category_title">분야 선택</div>
+					<div className="cns_category_content_wrapper">
+						<div>1</div>
+						<div>2</div>
+						<div>3</div>
+						<div>4</div>
+						<div>5</div>
+					</div>
+				</div>
+				<div className="counseling_feed_wrapper">
+					<div className="view_feed">안녕</div>
+					<CnsFeed />
+				</div>
+			</div>
+			<Footer />
+		</>
+	);
+};
+
+export default Counseling;

src/styles/Counseling.css

@@ -0,0 +1,45 @@
+.counseling_content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	max-width: 1440px;
+}
+
+.counseling_category_wrapper {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: 100%;
+	height: 110px;
+}
+
+.cns_category_title {
+	width: 100%;
+	font-family: var(--basic-font);
+	font-size: 20px;
+	font-style: normal;
+	font-weight: 700;
+	height: auto;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin: 40px;
+}
+
+.cns_category_content_wrapper {
+	display: grid;
+	grid-template-columns: repeat(5, 1fr);
+	margin: 0 40px;
+	height: auto;
+	gap: 90px;
+}
+
+.counseling_feed_wrapper {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: 100%;
+	margin-top: 30px;
+	justify-content: center;
+	height: 60vh;
+}

src/styles/Counseling/CounselingView.css

@@ -0,0 +1,78 @@
+.cnsView_container {
+	display: flex;
+	flex-direction: column;
+	width: 800px;
+	height: 200px;
+	border-radius: 15px;
+	padding: 20px 30px;
+	margin: 20px 0;
+
+	/* Drop Shadow */
+	box-shadow: 4px 4px 18px 0px rgba(119, 119, 119, 0.25);
+}
+
+.cns_user_wrapper {
+	display: flex;
+	justify-content: flex-start;
+	width: 100%;
+	height: 30px;
+	align-items: center;
+}
+
+.cns_user_left_wrapper {
+	width: 30px;
+	height: 30px;
+	background-color: #d9d9d9;
+	border-radius: 100%;
+	margin-right: 5px;
+}
+
+.cns_user_right_wrapper {
+	display: flex;
+	flex-direction: column;
+}
+
+.cns_user_name {
+	font-family: var(--basic-font);
+	font-size: 14px;
+	font-weight: 700;
+	font-style: normal;
+}
+
+.cns_feed_date {
+	font-family: var(--basic-font);
+	font-size: 10px;
+	font-weight: 300;
+	font-style: normal;
+	margin-top: 3px;
+}
+
+.user_cns_text_wrapper {
+	width: 100%;
+	height: 100px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-family: var(--basic-font);
+	font-weight: 700;
+	font-style: normal;
+	font-size: 24px;
+}
+
+.cns_to_prscr_btn {
+	display: flex;
+	width: 100%;
+	height: 30px;
+	justify-content: flex-end;
+}
+
+.convert_prscr {
+	width: 120px;
+	height: 35px;
+	padding: 8px 12px;
+	background-color: #a4d6de;
+	font-family: var(--basic-font);
+	font-size: 14px;
+	font-weight: 400;
+	border-radius: 5px;
+}