From 4ccb2aaab691e58d38a8b243eb0e0da8361f19fc Mon Sep 17 00:00:00 2001 From: leechan Date: Mon, 16 Dec 2024 00:17:34 +0900 Subject: [PATCH 01/10] =?UTF-8?q?[Refactor]=20=ED=95=84=EC=9A=94=EC=97=86?= =?UTF-8?q?=EB=8A=94=20=EB=B6=80=EB=B6=84=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/http.api.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/apis/http.api.ts b/src/apis/http.api.ts index 56772c4..30383c7 100644 --- a/src/apis/http.api.ts +++ b/src/apis/http.api.ts @@ -1,4 +1,4 @@ -import axios, { AxiosInstance, AxiosRequestConfig, AxiosHeaders } from 'axios'; +import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'; import { getToken, removeToken } from '@/utils/token'; // 토큰 유틸리티 함수 import import { logout } from '@/store/slices/authSlice'; import { store } from '@/store/store'; From a01829fee2eacbb9aee15a8dfdedb92d8c415dc7 Mon Sep 17 00:00:00 2001 From: leechan Date: Mon, 16 Dec 2024 00:18:10 +0900 Subject: [PATCH 02/10] =?UTF-8?q?[Feat]=20main=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=20question=20=EC=BB=A8=ED=85=90=EC=B8=A0=20api=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/mainpost.api.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 src/apis/mainpost.api.ts diff --git a/src/apis/mainpost.api.ts b/src/apis/mainpost.api.ts new file mode 100644 index 0000000..f0b2766 --- /dev/null +++ b/src/apis/mainpost.api.ts @@ -0,0 +1,13 @@ +import httpClient from '@/apis/http.api'; + +export const fetchPosts = async () => { + try { + console.log('Requesting posts...'); + const response = await httpClient.get('/api/main'); + console.log('Response data:', response.data); + return response.data; + } catch (error) { + console.error('Error fetching posts:', error); + throw error; + } +}; From 61727d20c715b366eca575d30ca9d637c964856b Mon Sep 17 00:00:00 2001 From: leechan Date: Mon, 16 Dec 2024 00:29:19 +0900 Subject: [PATCH 03/10] =?UTF-8?q?[Feat]=20=EB=A9=94=EC=9D=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20question=20=EC=BB=A8=ED=85=90=EC=B8=A0=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=20=EA=B4=80=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/types/postdata.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 src/types/postdata.ts diff --git a/src/types/postdata.ts b/src/types/postdata.ts new file mode 100644 index 0000000..e357de7 --- /dev/null +++ b/src/types/postdata.ts @@ -0,0 +1,12 @@ +export interface PostData { + id: number; + title: string; + content: string; + solved: number; + nickname: string; + created_at: string; + comment_count: number; + like_count: number; + view: number; + tags: string | null; +} From 7eb959c0725f63eac09de3fa90faa7c93a353ac8 Mon Sep 17 00:00:00 2001 From: leechan Date: Mon, 16 Dec 2024 00:35:51 +0900 Subject: [PATCH 04/10] =?UTF-8?q?[Feat]=20=EC=A7=88=EB=AC=B8=20=EC=BB=A8?= =?UTF-8?q?=ED=85=90=EC=B8=A0=20solve,=20problem=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84,=20=ED=83=80=EC=9D=B4=ED=8B=80=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20->=20Header=20=EB=B6=80=EB=B6=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/QuestionButton.tsx | 99 +++++++++++++++++++++++++++++++ src/components/QuestionTitle.tsx | 18 ++++++ 2 files changed, 117 insertions(+) create mode 100644 src/components/QuestionButton.tsx create mode 100644 src/components/QuestionTitle.tsx diff --git a/src/components/QuestionButton.tsx b/src/components/QuestionButton.tsx new file mode 100644 index 0000000..d59f66a --- /dev/null +++ b/src/components/QuestionButton.tsx @@ -0,0 +1,99 @@ +import styled from 'styled-components'; + +const ProblemBox = styled.div` + height: 20px; + width: 77px; + + .group { + height: 20px; + left: 0; + position: relative; /* fixed → relative로 수정 */ + top: 0; + } + + .overlap-group { + background-color: #d9d9d9; + border-radius: 30px; + height: 20px; + position: relative; + width: 77px; + } + + .text-wrapper { + color: #ffffff; + font-family: 'Pretendard-ExtraBold', Helvetica; + font-size: 10px; + height: 13px; + left: 13px; + line-height: 12px; + position: absolute; + text-align: center; + top: 3px; + white-space: nowrap; + width: 50px; + } +`; + +const SolveBox = styled.div` + height: 20px; + width: 77px; + + .group { + height: 20px; + left: 0; + position: relative; /* fixed → relative로 수정 */ + top: 0; + } + + .overlap-group { + background-color: #c9ffce; + border-radius: 30px; + height: 20px; + position: relative; + width: 77px; + } + + .text-wrapper { + color: #007c0c; + font-family: 'Pretendard-ExtraBold', Helvetica; + font-size: 10px; + height: 13px; + left: 13px; + line-height: 12px; + position: absolute; + text-align: center; + top: 4px; + white-space: nowrap; + width: 50px; + } +`; + +export const ProblemButton = () => { + return ( + +
+
+
problem
+
+
+ + ); +}; + +export const SolveButton = () => { + return ( + +
+
+
solve
+
+
+ + ); +}; + +const QuestionButton = ({ solved }: { solved: number }) => { + return solved === 1 ? : ; +}; + +export default QuestionButton; diff --git a/src/components/QuestionTitle.tsx b/src/components/QuestionTitle.tsx new file mode 100644 index 0000000..da892d2 --- /dev/null +++ b/src/components/QuestionTitle.tsx @@ -0,0 +1,18 @@ +import styled from 'styled-components'; + +const TitleContainer = styled.div` + font-family: 'Pretendard-SemiBold', Helvetica; + font-size: 10px; + color: #000; + margin-left: 8px; +`; + +interface TitleProps { + text: string; +} + +function QuestionTitle({ text }: TitleProps) { + return {text}; +} + +export default QuestionTitle; From 7bc152dece89f3eba5ae4b57a820f89f9d60df59 Mon Sep 17 00:00:00 2001 From: leechan Date: Mon, 16 Dec 2024 00:36:17 +0900 Subject: [PATCH 05/10] =?UTF-8?q?[Feat]=20=EB=A9=94=EC=9D=B8=20=EC=A7=88?= =?UTF-8?q?=EB=AC=B8=20=EC=BB=A8=ED=85=90=EC=B8=A0=20Header=20=EB=B6=80?= =?UTF-8?q?=EB=B6=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/QuestionHeader.tsx | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 src/components/QuestionHeader.tsx diff --git a/src/components/QuestionHeader.tsx b/src/components/QuestionHeader.tsx new file mode 100644 index 0000000..42675db --- /dev/null +++ b/src/components/QuestionHeader.tsx @@ -0,0 +1,25 @@ +import styled from 'styled-components'; +import QuestionButton from './QuestionButton'; +import QuestionTitle from './QuestionTitle'; + +const HeaderContainer = styled.div` + display: flex; + align-items: center; + gap: 8px; +`; + +interface QuestionHeaderProps { + solved: number; + title: string; +} + +function QuestionHeader({ solved, title }: QuestionHeaderProps) { + return ( + + + + + ); +} + +export default QuestionHeader; From 57ba8442735a3c6139144edcfe372d1fcc820364 Mon Sep 17 00:00:00 2001 From: leechan Date: Mon, 16 Dec 2024 00:36:40 +0900 Subject: [PATCH 06/10] =?UTF-8?q?[Feat]=20=EB=A9=94=EC=9D=B8=20=EC=A7=88?= =?UTF-8?q?=EB=AC=B8=20=EC=BB=A8=ED=85=90=EC=B8=A0=20=EB=B0=94=EB=94=94=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20(=EC=A7=88=EB=AC=B8=20=EB=82=B4=EC=9A=A9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/QuestionBody.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/components/QuestionBody.tsx diff --git a/src/components/QuestionBody.tsx b/src/components/QuestionBody.tsx new file mode 100644 index 0000000..9829628 --- /dev/null +++ b/src/components/QuestionBody.tsx @@ -0,0 +1,19 @@ +import styled from 'styled-components'; + +const BodyContainer = styled.div` + font-family: 'Pretendard-ExtraLight', Helvetica; + font-size: 10px; + line-height: 1.5; + color: #333; + margin-top: 8px; +`; + +interface QuestionBodyProps { + content: string; +} + +function QuestionBody({ content }: QuestionBodyProps) { + return {content}; +} + +export default QuestionBody; From b245fa90e188b4d47e2b6796e0770fcf0c538b85 Mon Sep 17 00:00:00 2001 From: leechan Date: Mon, 16 Dec 2024 00:37:06 +0900 Subject: [PATCH 07/10] =?UTF-8?q?[Feat]=20=EC=A7=88=EB=AC=B8=20=EC=BB=A8?= =?UTF-8?q?=ED=85=90=EC=B8=A0=20=ED=83=9C=EA=B7=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/QuesitonTag.tsx | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 src/components/QuesitonTag.tsx diff --git a/src/components/QuesitonTag.tsx b/src/components/QuesitonTag.tsx new file mode 100644 index 0000000..de55c2a --- /dev/null +++ b/src/components/QuesitonTag.tsx @@ -0,0 +1,34 @@ +import styled from 'styled-components'; + +// Styled Components +const TagsContainer = styled.div` + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 12px; +`; + +const TagItem = styled.div` + background-color: #deffe2; + color: #858585; + font-family: 'Pretendard-ExtraLight', Helvetica; + font-size: 8px; + padding: 4px 8px; + border-radius: 12px; +`; + +interface TagsProps { + tags: string[]; +} + +function QuestionTag({ tags }: TagsProps) { + return ( + + {tags.map((tag, index) => ( + {tag} + ))} + + ); +} + +export default QuestionTag; From e0f0286be76e77b5e77a3058fcba421afb2894c7 Mon Sep 17 00:00:00 2001 From: leechan Date: Mon, 16 Dec 2024 00:37:59 +0900 Subject: [PATCH 08/10] =?UTF-8?q?[Feat]=20=EC=A7=88=EB=AC=B8=20=EC=BB=A8?= =?UTF-8?q?=ED=85=90=EC=B8=A0=20=EC=9C=A0=EC=A0=80=20=EA=B5=AC=ED=98=84,?= =?UTF-8?q?=20=EC=A2=8B=EC=95=84=EC=9A=94,=20=EB=8B=B5=EB=B3=80,=20?= =?UTF-8?q?=EA=B2=8C=EC=8B=9C=EB=AC=BC=20=EC=A1=B0=ED=9A=8C=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20->=20Bottom=20=EB=B6=80=EB=B6=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/QuestionUser.tsx | 25 ++++++++++++ src/components/QuestionUtil.tsx | 69 +++++++++++++++++++++++++++++++++ 2 files changed, 94 insertions(+) create mode 100644 src/components/QuestionUser.tsx create mode 100644 src/components/QuestionUtil.tsx diff --git a/src/components/QuestionUser.tsx b/src/components/QuestionUser.tsx new file mode 100644 index 0000000..7140476 --- /dev/null +++ b/src/components/QuestionUser.tsx @@ -0,0 +1,25 @@ +import styled from 'styled-components'; + +const UserContainer = styled.div` + font-family: 'Pretendard-ExtraLight', Helvetica; + font-size: 10px; + color: #666; + display: flex; + gap: 8px; +`; + +interface QuestionUserProps { + nickname: string; + time: string; +} + +function QuestionUser({ nickname, time }: QuestionUserProps) { + return ( + + {nickname} + {time} + + ); +} + +export default QuestionUser; diff --git a/src/components/QuestionUtil.tsx b/src/components/QuestionUtil.tsx new file mode 100644 index 0000000..3687cfe --- /dev/null +++ b/src/components/QuestionUtil.tsx @@ -0,0 +1,69 @@ +import { useState } from 'react'; +import styled from 'styled-components'; +import { + ChatBubbleOvalLeftEllipsisIcon, + EyeIcon, +} from '@heroicons/react/24/outline'; +import { HeartIcon as SolidHeartIcon } from '@heroicons/react/24/solid'; +import { HeartIcon as OutlineHeartIcon } from '@heroicons/react/24/outline'; + +// Styled Components +const UtilContainer = styled.div` + display: flex; + gap: 12px; + font-family: 'Pretendard-ExtraLight', Helvetica; + font-size: 10px; + color: #666; +`; + +const IconWrapper = styled.span` + display: flex; + align-items: center; + gap: 4px; + cursor: pointer; + user-select: none; + + svg { + width: 16px; + height: 16px; + } +`; + +interface QuestionUtilProps { + likes: number; + comments: number; + views: number; +} + +function QuestionUtil({ likes, comments, views }: QuestionUtilProps) { + const [isLiked, setIsLiked] = useState(false); + const [likeCount, setLikeCount] = useState(likes); + + const toggleLike = () => { + setIsLiked(!isLiked); + setLikeCount((prev) => (isLiked ? prev - 1 : prev + 1)); + }; + + return ( + + + {isLiked ? ( + + ) : ( + + )} + {likeCount} + + + + {comments} + + + + {views} + + + ); +} + +export default QuestionUtil; From ed9b61bc6966dfa43fed5565ded7cef3c75b266f Mon Sep 17 00:00:00 2001 From: leechan Date: Mon, 16 Dec 2024 00:38:12 +0900 Subject: [PATCH 09/10] =?UTF-8?q?[Feat]=20=EB=A9=94=EC=9D=B8=20=EC=A7=88?= =?UTF-8?q?=EB=AC=B8=20=EC=BB=A8=ED=85=90=EC=B8=A0=20=EB=B0=94=ED=85=80=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/QuestionBottom.tsx | 35 +++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 src/components/QuestionBottom.tsx diff --git a/src/components/QuestionBottom.tsx b/src/components/QuestionBottom.tsx new file mode 100644 index 0000000..da776ad --- /dev/null +++ b/src/components/QuestionBottom.tsx @@ -0,0 +1,35 @@ +import styled from 'styled-components'; +import QuestionUser from './QuestionUser'; +import QuestionUtil from './QuestionUtil'; + +const BottomContainer = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 12px; +`; + +interface QuestionBottomProps { + nickname: string; + time: string; + likes: number; + comments: number; + views: number; +} + +function QuestionBottom({ + nickname, + time, + likes, + comments, + views, +}: QuestionBottomProps) { + return ( + + + + + ); +} + +export default QuestionBottom; From cfb8c0438003b9fe3106167a7f1d54847e3f4ed5 Mon Sep 17 00:00:00 2001 From: leechan Date: Mon, 16 Dec 2024 00:39:00 +0900 Subject: [PATCH 10/10] =?UTF-8?q?[Feat]=20=EB=A9=94=EC=9D=B8=20=EC=A7=88?= =?UTF-8?q?=EB=AC=B8=20=EC=BB=A8=ED=85=90=EC=B8=A0=20=ED=97=A4=EB=8D=94,?= =?UTF-8?q?=20=EB=B0=94=EB=94=94,=20=ED=83=9C=EA=B7=B8,=20=EB=B0=94?= =?UTF-8?q?=ED=85=80=EC=9D=84=20=EB=8B=A4=20=EB=B3=B4=EC=97=AC=EC=A7=80?= =?UTF-8?q?=EA=B2=8C=20=ED=95=98=EB=8A=94=20=EB=A9=94=EC=9D=B8=20=EC=A7=88?= =?UTF-8?q?=EB=AC=B8=20=EC=BB=A8=ED=85=90=EC=B8=A0=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/QuestionBox.tsx | 63 ++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 src/components/QuestionBox.tsx diff --git a/src/components/QuestionBox.tsx b/src/components/QuestionBox.tsx new file mode 100644 index 0000000..69d60d8 --- /dev/null +++ b/src/components/QuestionBox.tsx @@ -0,0 +1,63 @@ +import { useEffect, useState } from 'react'; +import styled from 'styled-components'; +import QuestionBody from './QuestionBody'; +import QuestionHeader from './QuestionHeader'; +import QuestionTag from './QuesitonTag'; +import QuestionBottom from './QuestionBottom'; +import { fetchPosts } from '@/apis/mainpost.api'; +import { PostData } from '@/types/postdata'; + +const QuestionBoxContainer = styled.div` + display: flex; + flex-direction: column; + gap: 20px; +`; + +const QuestionItem = styled.div` + margin: 10px; +`; + +function QuestionBox() { + const [posts, setPosts] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + const loadPosts = async () => { + try { + const data = await fetchPosts(); + setPosts(data); + } catch (err) { + setError('데이터를 불러오는 중 오류가 발생했습니다.'); + } finally { + setLoading(false); + } + }; + + loadPosts(); + }, []); + + if (loading) return
데이터를 불러오는 중...
; + if (error) return
{error}
; + + return ( + + {posts.map((post) => ( + + + + {post.tags && } + + + ))} + + ); +} + +export default QuestionBox;