feat: 베스트 내용 바로 api 연동될 수 있게 리팩토링 & 스터디 카테고리 추가 (#39)

Nubblee · Nov 4, 2024 · 10ab6b6 · 10ab6b6
1 parent ed4759b
commit 10ab6b6
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 51 deletions.
diff --git a/src/components/BestContents.tsx b/src/components/BestContents.tsx
@@ -1,37 +1,27 @@
-import React from 'react'
 import styled from '@emotion/styled'
 import colors from '@/constants/color'
 import { fontSize, fontWeight } from '@/constants/font'
 import { Heart } from 'lucide-react'
 
-const coteContents = [
-	{
-		id: 1,
-		title: 'Recoil, Justand',
-		userName: '손성오',
-		likes: 72,
-	},
-	{
-		id: 2,
-		title: 'Next.js 공부하는 법',
-		userName: '박지영',
-		likes: 68,
-	},
-	{
-		id: 3,
-		title: 'React.FC를 꼭 써야...',
-		userName: '김수민',
-		likes: 57,
-	},
-]
+interface ContentItem {
+	id: number
+	title: string
+	userName: string
+	likes: number
+}
+
+interface BestContentsProps {
+	title: string
+	content: ContentItem[]
+}
 
-const BestContents = () => {
+const BestContents = ({ title, content }: BestContentsProps) => {
 	return (
 		<Container>
-			<div className="title">베스트 스터디 내용</div>
+			<div className="title">{title}</div>
 			<Ranking>
 				<ol>
-					{coteContents.map(({ id, title, userName, likes }) => (
+					{content.map(({ id, title, userName, likes }) => (
 						<li key={id} className="list-container">
 							<div>
 								{id}. <span>{title}</span>

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -12,6 +12,48 @@ import { formatDate } from '@/utils/formatDate'
 import defaultImage from '@/assets/defaultImage.jpeg'
 import Loading from '@components/Loading'
 
+const coteContents = [
+	{
+		id: 1,
+		title: 'Lv1. 다트게임',
+		userName: '김수민',
+		likes: 72,
+	},
+	{
+		id: 2,
+		title: 'Lv1. 문자열 뒤의 n글자',
+		userName: '박지영',
+		likes: 68,
+	},
+	{
+		id: 3,
+		title: 'Lv1. 체육복',
+		userName: '손성오',
+		likes: 57,
+	},
+]
+
+const studyContents = [
+	{
+		id: 1,
+		title: 'Recoil, Justand',
+		userName: '손성오',
+		likes: 72,
+	},
+	{
+		id: 2,
+		title: 'Next.js 공부하는 법',
+		userName: '박지영',
+		likes: 68,
+	},
+	{
+		id: 3,
+		title: 'React.FC를 꼭 써야...',
+		userName: '김수민',
+		likes: 57,
+	},
+]
+
 interface Post {
 	createdAt: string
 	description: string
@@ -21,7 +63,7 @@ interface Post {
 	username: string
 }
 
-const Home: React.FC = () => {
+const Home = () => {
 	const { isLogin } = useAuthStore()
 	const navigate = useNavigate()
 	const location = useLocation()
@@ -32,6 +74,7 @@ const Home: React.FC = () => {
 	const initialTab = (queryParams.get('tab') as 'cote' | 'study') || 'cote'
 	const [selectedTab, setSelectedTab] = useState<'cote' | 'study'>(initialTab)
 	const [selectedLv, setSelectedLv] = useState<string | null>(null)
+	const [selectedStudy, setSelectedStudy] = useState<string | null>(null)
 	const [loading, setLoading] = useState(true)
 
 	useEffect(() => {
@@ -82,7 +125,7 @@ const Home: React.FC = () => {
 				// console.log(res.data.posts)
 				setStudyBoards(res.data.posts)
 				const endTime = performance.now()
-				const duration = endTime - startTime
+				// const duration = endTime - startTime
 				// console.log(`Study API 호출 소요 시간: ${duration.toFixed(2)}ms`)
 			} catch (error) {
 				console.log('스터디 게시글 가져오기 에러------->', error)
@@ -170,38 +213,51 @@ const Home: React.FC = () => {
 							{loading ? (
 								<Loading />
 							) : (
-								<ul>
-									{studyBoards
-										.map((data) => (
-											<Link
-												to={`/postDetail/스터디/@${data.username}/${encodeURIComponent(data.title)}/${data.id}`}
-												key={data.id}
+								<div>
+									<div className="category">
+										{['CS', 'Next.js'].map((study) => (
+											<CategoryItem
+												key={study}
+												isSelected={selectedStudy === study}
+												onClick={() => setSelectedStudy(study)}
 											>
-												<li className="post-list">
-													<img
-														src={data.thumbnailUrl !== '' ? data.thumbnailUrl : defaultImage}
-														alt={data.title}
-													/>
-													<div>
-														<div className="post-info">
-															<div className="author">{data.username}</div>
-															<div className="date">{data.createdAt.slice(0, 10)}</div>
+												{study}
+											</CategoryItem>
+										))}
+									</div>
+									<ul>
+										{studyBoards
+											.map((data) => (
+												<Link
+													to={`/postDetail/스터디/@${data.username}/${encodeURIComponent(data.title)}/${data.id}`}
+													key={data.id}
+												>
+													<li className="post-list">
+														<img
+															src={data.thumbnailUrl !== '' ? data.thumbnailUrl : defaultImage}
+															alt={data.title}
+														/>
+														<div>
+															<div className="post-info">
+																<div className="author">{data.username}</div>
+																<div className="date">{data.createdAt.slice(0, 10)}</div>
+															</div>
+															<div className="title">{data.title}</div>
+															<div className="content">{data.description}</div>
 														</div>
-														<div className="title">{data.title}</div>
-														<div className="content">{data.description}</div>
-													</div>
-												</li>
-											</Link>
-										))
-										.reverse()}
-								</ul>
+													</li>
+												</Link>
+											))
+											.reverse()}
+									</ul>
+								</div>
 							)}
 						</div>
 					)}
 				</PostContainer>
 				<BestContentsContainer>
-					<BestContents />
-					<BestContents />
+					<BestContents title={'베스트 코딩 테스트'} content={coteContents} />
+					<BestContents title={'베스트 스터디 내용'} content={studyContents} />
 				</BestContentsContainer>
 			</ContentContainer>
 		</Container>