Merge pull request #55 from Nubblee/feature/mainPage-39

[�Design] 홈페이지 디자인 수정
Nubblee · Sep 21, 2024 · 68287c8 · 68287c8
2 parents fd212a1 + 9db6282
commit 68287c8
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 15 deletions.
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -65,6 +65,7 @@ const SwiperContainer = styled.div`
 	background-color: ${colors.mainGray};
 	border-radius: 10px;
 	box-shadow: 0px 5px 5px -3px rgba(255, 255, 255, 0.5);
+	padding-top: 16px;
 
 	.swiper-pagination {
 		bottom: 10px !important;

diff --git a/src/components/BestContents.tsx b/src/components/BestContents.tsx
@@ -50,8 +50,8 @@ const BestContents = () => {
 }
 
 const Container = styled.div`
-	width: 344px;
-	height: 181px;
+	width: 280px;
+	height: 160px;
 	background-color: ${colors.mainGray};
 	border-radius: 10px;
 	box-shadow: 0px 5px 5px -3px rgba(255, 255, 255, 0.5);
@@ -60,7 +60,7 @@ const Container = styled.div`
 
 	.title {
 		color: ${colors.primaryBlue};
-		font-size: ${fontSize.xl};
+		font-size: ${fontSize.lg};
 		font-weight: ${fontWeight.semiBold};
 		margin-bottom: 22px;
 	}
@@ -69,7 +69,7 @@ const Ranking = styled.div`
 	.list-container {
 		display: flex;
 		justify-content: space-between;
-		font-size: ${fontSize.lg};
+		font-size: ${fontSize.sm};
 		font-weight: ${fontWeight.semiBold};
 		margin-bottom: 18px;
 

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -5,6 +5,7 @@ import Banner from '@components/Banner'
 import colors from '@/constants/color'
 import { fontSize, fontWeight } from '@/constants/font'
 import { useNavigate } from 'react-router-dom'
+import { useAuthStore } from '@/stores/authStore'
 
 const postData = [
 	{
@@ -66,6 +67,7 @@ const postData = [
 ]
 
 const Home: React.FC = () => {
+	const { isLogin } = useAuthStore()
 	const navigate = useNavigate()
 	return (
 		<Container>
@@ -77,14 +79,16 @@ const Home: React.FC = () => {
 							<div>코딩테스트</div>
 							<div>스터디</div>
 						</div>
-						<button
-							className="write-btn"
-							onClick={() => {
-								navigate('/write')
-							}}
-						>
-							+ 글쓰기
-						</button>
+						{isLogin && (
+							<button
+								className="write-btn"
+								onClick={() => {
+									navigate('/write')
+								}}
+							>
+								+ 글쓰기
+							</button>
+						)}
 					</div>
 					<div className="category">
 						<div>Lv.0</div>
@@ -123,7 +127,7 @@ const Container = styled.div`
 	width: 100%;
 	height: 100%;
 	background-color: ${colors.bgBlack};
-	max-width: 1280px;
+	max-width: 1080px;
 	margin: 20px auto;
 `
 const ContentContainer = styled.div`
@@ -137,8 +141,9 @@ const PostContainer = styled.div`
 	border-right: 1px solid ${colors.white};
 
 	.newest-posts {
-		max-height: 800px;
-		overflow-y: scroll;
+		padding-right: 60px;
+		max-height: 80%;
+		overflow-y: auto;
 	}
 
 	.menu {

diff --git a/src/styles/GlobalStyles.tsx b/src/styles/GlobalStyles.tsx
@@ -196,6 +196,7 @@ const GlobalStyles = () => (
 				height: 100%;
 				width: 100%;
 				overflow-y: auto;
+				background-color: ${colors.bgBlack};
 			}
 		`}
 	/>