From 25be94413a9e370c51c086d33b7eba96e66f3bab Mon Sep 17 00:00:00 2001
From: OhSeChan <seb_s19@naver.com>
Date: Fri, 18 Oct 2024 18:01:00 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=94=BC=EB=93=9C=EB=B3=84=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9D=B4=EB=8F=99?=
 =?UTF-8?q?=EC=9D=84=20=EC=9C=84=ED=95=9C=20LNB=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Post/LNB/LNB.styled.ts | 28 +++++++++++++++
 src/components/Post/LNB/LNB.tsx       | 52 +++++++++++++++++++++++++++
 src/pages/PostPage/PostPage.styled.ts | 12 +++++++
 src/pages/PostPage/PostPage.tsx       | 15 +++++---
 4 files changed, 103 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Post/LNB/LNB.styled.ts
 create mode 100644 src/components/Post/LNB/LNB.tsx
 create mode 100644 src/pages/PostPage/PostPage.styled.ts

diff --git a/src/components/Post/LNB/LNB.styled.ts b/src/components/Post/LNB/LNB.styled.ts
new file mode 100644
index 0000000..fd3e516
--- /dev/null
+++ b/src/components/Post/LNB/LNB.styled.ts
@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import theme from '@styles/theme';
+
+export const LNBContainer = styled.nav`
+	display: flex;
+	width: 680px;
+	height: ${theme.units.spacing.space48};
+	cursor: pointer;
+`;
+
+export const LNBItemContainer = styled.div<{ active?: boolean }>`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 170px;
+	border-bottom: 2px solid
+		${({ active }) =>
+			active ? theme.color.border.iPrimary : theme.color.border.tertiary};
+	font-weight: ${({ active }) =>
+		active
+			? theme.typography.fontWeight.semiBold
+			: theme.typography.fontWeight.regular};
+
+	&:hover {
+		background-color: ${theme.color.bg.iSecondaryHover};
+		transition: background-color 0.2s ease-in-out;
+	}
+`;
diff --git a/src/components/Post/LNB/LNB.tsx b/src/components/Post/LNB/LNB.tsx
new file mode 100644
index 0000000..3c16c6a
--- /dev/null
+++ b/src/components/Post/LNB/LNB.tsx
@@ -0,0 +1,52 @@
+import { useNavigate } from 'react-router-dom';
+import { PATH } from '@constants/path';
+import type { FeedMenuType } from '@type/feed';
+import * as S from './LNB.styled';
+
+interface LNBItemProps {
+	label: string;
+	active?: boolean;
+	onClick: () => void;
+}
+
+interface LNBProps {
+	selected: FeedMenuType;
+}
+
+type LNBItem = { label: string; type: FeedMenuType }[];
+
+const LNB_ITEMS: LNBItem = [
+	{ label: '일반 게시글', type: 'normal' },
+	{ label: '일정 조율', type: 'scheduling' },
+	{ label: '투표', type: 'vote' },
+	{ label: '자료 수집', type: 'collect' },
+];
+
+const LNBItem = ({ label, active, onClick }: LNBItemProps) => (
+	<S.LNBItemContainer active={active} onClick={onClick}>
+		{label}
+	</S.LNBItemContainer>
+);
+
+const LNB = ({ selected }: LNBProps) => {
+	const navigate = useNavigate();
+
+	const handleItemClick = (type: FeedMenuType) => {
+		navigate(`${PATH.POST}?type=${type}`);
+	};
+
+	return (
+		<S.LNBContainer>
+			{LNB_ITEMS.map(({ label, type }) => (
+				<LNBItem
+					key={type}
+					label={label}
+					onClick={() => handleItemClick(type)}
+					active={selected === type}
+				/>
+			))}
+		</S.LNBContainer>
+	);
+};
+
+export default LNB;
diff --git a/src/pages/PostPage/PostPage.styled.ts b/src/pages/PostPage/PostPage.styled.ts
new file mode 100644
index 0000000..aba5808
--- /dev/null
+++ b/src/pages/PostPage/PostPage.styled.ts
@@ -0,0 +1,12 @@
+import { styled } from 'styled-components';
+import theme from '@styles/theme';
+
+export const Container = styled.div`
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: ${theme.units.spacing.space32};
+	width: 100%;
+	height: 100%;
+	padding-top: ${theme.units.spacing.space24};
+`;
diff --git a/src/pages/PostPage/PostPage.tsx b/src/pages/PostPage/PostPage.tsx
index c03b957..8515a35 100644
--- a/src/pages/PostPage/PostPage.tsx
+++ b/src/pages/PostPage/PostPage.tsx
@@ -1,10 +1,17 @@
 import { useLocation } from 'react-router-dom';
+import LNB from '@components/Post/LNB/LNB';
+import type { FeedMenuType } from '@type/feed';
+import * as S from './PostPage.styled';
 
 const PostPage = () => {
-	const location = useLocation();
-	const queryParams = new URLSearchParams(location.search);
-	const feedType = queryParams.get('type');
+	const { search } = useLocation();
+	const feedType = new URLSearchParams(search).get('type') as FeedMenuType;
 
-	return <div>{feedType}</div>;
+	return (
+		<S.Container>
+			<LNB selected={feedType} />
+		</S.Container>
+	);
 };
+
 export default PostPage;