From 539a150b3104bb14048eef74654ba30e9cf3f372 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=86=8C=EC=9A=B8=EC=B9=98=ED=82=A8?= <90738604+soulchicken@users.noreply.github.com> Date: Thu, 12 Oct 2023 19:28:52 +0900 Subject: [PATCH 01/12] =?UTF-8?q?Feat:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=ED=99=94=EB=A9=B4=EC=97=90=20=EB=BF=8C?= =?UTF-8?q?=EB=A6=AC=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[character_id]/[post_id]/index.tsx | 53 +++++++++++++++++-- 1 file changed, 49 insertions(+), 4 deletions(-) diff --git a/src/pages/community/[character_id]/[post_id]/index.tsx b/src/pages/community/[character_id]/[post_id]/index.tsx index 438b489..2984677 100644 --- a/src/pages/community/[character_id]/[post_id]/index.tsx +++ b/src/pages/community/[character_id]/[post_id]/index.tsx @@ -4,11 +4,24 @@ import SEO from '@/components/common/head/SEO'; import { useEffect, useState } from 'react'; import { useRouter } from 'next/router'; import { findBoardsById } from '@/utils/api/boards'; +import Loading from '@/components/common/dialog/Loading'; +import color from '@/styles/color'; -const Board = () => { +interface PostData { + characterId : number + content : string + createdAt : number + id : number + title : string + updatedAt : string + writerId : number + writerName : string +} + +const Post = () => { const router = useRouter(); const { character_id: characterId, post_id: postId } = router.query; - const [post, setPost] = useState({}); + const [post, setPost] = useState(); useEffect(() => { if (typeof characterId === 'string' && typeof postId === 'string') { findBoardsById(characterId, postId).then((data) => { @@ -25,13 +38,26 @@ const Board = () => { <>
- 게시글이 만들어질 예정입니다. +
+ {post ? ( +
+ {/* TODO: 게시글 쓴 사람의 이미지가 필요함 */} +
+
{post.writerName}
+
{post.createdAt}
+
+
{post.title}
+
{post.content}
+
+ ) + : } +
); }; -export default Board; +export default Post; const pageCSS = css` height: 100vh; @@ -41,3 +67,22 @@ const pageCSS = css` align-items: center; padding: 0.5rem; `; + +const postCSS = css` +`; + +const titleCSS = css` + font-size: 1rem; + font-weight:bold; + color:${color.black}; +`; + +const contentCSS = css` + font-size: 0.75rem; + color:${color.gray}; +`; + +const postInfoCSS = css` + font-size: 0.75rem; + color:${color.gray}; +`; From 90e92e7120b354404d9edf2df2ab62cde2d1157e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=86=8C=EC=9A=B8=EC=B9=98=ED=82=A8?= <90738604+soulchicken@users.noreply.github.com> Date: Thu, 12 Oct 2023 19:46:52 +0900 Subject: [PATCH 02/12] =?UTF-8?q?Feat:=20createdAt=20=EC=8B=9C=EA=B0=84?= =?UTF-8?q?=EC=9D=84=20=ED=8C=8C=EC=8B=B1=ED=95=98=EB=8A=94=20util=20?= =?UTF-8?q?=ED=95=A8=EC=88=98=20=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[character_id]/[post_id]/index.tsx | 6 ++-- src/utils/services/date.ts | 30 +++++++++++++++++++ 2 files changed, 34 insertions(+), 2 deletions(-) create mode 100644 src/utils/services/date.ts diff --git a/src/pages/community/[character_id]/[post_id]/index.tsx b/src/pages/community/[character_id]/[post_id]/index.tsx index 2984677..fdd3bca 100644 --- a/src/pages/community/[character_id]/[post_id]/index.tsx +++ b/src/pages/community/[character_id]/[post_id]/index.tsx @@ -6,11 +6,12 @@ import { useRouter } from 'next/router'; import { findBoardsById } from '@/utils/api/boards'; import Loading from '@/components/common/dialog/Loading'; import color from '@/styles/color'; +import { postDateParse } from '@/utils/services/date'; interface PostData { characterId : number content : string - createdAt : number + createdAt : string id : number title : string updatedAt : string @@ -27,6 +28,7 @@ const Post = () => { findBoardsById(characterId, postId).then((data) => { console.log(data); setPost(data); + console.log(postDateParse(data.createdAt)); console.log(post); }).catch((error) => { console.error('Error fetching post:', error); @@ -44,7 +46,7 @@ const Post = () => { {/* TODO: 게시글 쓴 사람의 이미지가 필요함 */}
{post.writerName}
-
{post.createdAt}
+
{postDateParse(post.createdAt)}
{post.title}
{post.content}
diff --git a/src/utils/services/date.ts b/src/utils/services/date.ts new file mode 100644 index 0000000..68299d2 --- /dev/null +++ b/src/utils/services/date.ts @@ -0,0 +1,30 @@ +// eslint-disable-next-line import/prefer-default-export +export const postDateParse = (data: string) => { + const now = new Date(); + const date = new Date(data); + const diff = now.getTime() - date.getTime(); + + const ONE_MINUTE = 60 * 1000; + const ONE_HOUR = 60 * ONE_MINUTE; + const ONE_DAY = 24 * ONE_HOUR; + + if (diff < ONE_HOUR) { + const minutes = Math.floor(diff / ONE_MINUTE); + return `${minutes}분 전`; + } + + if (diff < ONE_DAY) { + const hours = Math.floor(diff / ONE_HOUR); + return `${hours}시간 전`; + } + + const currentYear = now.getFullYear(); + const postYear = date.getFullYear(); + const formattedMonth = (date.getMonth() + 1).toString().padStart(2, '0'); + const formattedDay = date.getDate().toString().padStart(2, '0'); + + if (currentYear === postYear) { + return `${formattedMonth}/${formattedDay}`; + } + return `${postYear}년`; +}; From ac2e3ffd54eae5e1e64cc7361acab49bba125316 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=86=8C=EC=9A=B8=EC=B9=98=ED=82=A8?= <90738604+soulchicken@users.noreply.github.com> Date: Thu, 12 Oct 2023 19:59:19 +0900 Subject: [PATCH 03/12] =?UTF-8?q?Feat:=20=EA=B2=8C=EC=8B=9C=EA=B8=80?= =?UTF-8?q?=EC=97=90=20=ED=95=84=EC=9A=94=ED=95=9C=20=EC=8B=9C=EA=B0=84=20?= =?UTF-8?q?=ED=8C=8C=EC=8B=B1=20util=20=ED=95=A8=EC=88=98=20=EC=A0=9C?= =?UTF-8?q?=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[character_id]/[post_id]/index.tsx | 21 +++++++++++++------ src/utils/services/date.ts | 19 +++++++++++++++++ 2 files changed, 34 insertions(+), 6 deletions(-) diff --git a/src/pages/community/[character_id]/[post_id]/index.tsx b/src/pages/community/[character_id]/[post_id]/index.tsx index fdd3bca..f6f5718 100644 --- a/src/pages/community/[character_id]/[post_id]/index.tsx +++ b/src/pages/community/[character_id]/[post_id]/index.tsx @@ -6,7 +6,7 @@ import { useRouter } from 'next/router'; import { findBoardsById } from '@/utils/api/boards'; import Loading from '@/components/common/dialog/Loading'; import color from '@/styles/color'; -import { postDateParse } from '@/utils/services/date'; +import { postDetailDateParse } from '@/utils/services/date'; interface PostData { characterId : number @@ -26,10 +26,7 @@ const Post = () => { useEffect(() => { if (typeof characterId === 'string' && typeof postId === 'string') { findBoardsById(characterId, postId).then((data) => { - console.log(data); setPost(data); - console.log(postDateParse(data.createdAt)); - console.log(post); }).catch((error) => { console.error('Error fetching post:', error); }); @@ -45,8 +42,8 @@ const Post = () => {
{/* TODO: 게시글 쓴 사람의 이미지가 필요함 */}
-
{post.writerName}
-
{postDateParse(post.createdAt)}
+
{post.writerName}
+
{postDetailDateParse(post.createdAt)}
{post.title}
{post.content}
@@ -85,6 +82,18 @@ const contentCSS = css` `; const postInfoCSS = css` + padding-top: 0.2rem; + padding-bottom: 0.2rem; +`; + +const writerNameCSS = css` font-size: 0.75rem; + font-weight:bold; + color:${color.black}; + padding-bottom: 0.2rem; +`; + +const dateCSS = css` + font-size: 0.6rem; color:${color.gray}; `; diff --git a/src/utils/services/date.ts b/src/utils/services/date.ts index 68299d2..13073f7 100644 --- a/src/utils/services/date.ts +++ b/src/utils/services/date.ts @@ -1,4 +1,23 @@ // eslint-disable-next-line import/prefer-default-export +export const postDetailDateParse = (data: string) => { + const date = new Date(data); + const now = new Date(); + + const currentYear = now.getFullYear(); + const postYear = date.getFullYear(); + + const formattedMonth = (date.getMonth() + 1).toString().padStart(2, '0'); + const formattedDay = date.getDate().toString().padStart(2, '0'); + const formattedHour = date.getHours().toString().padStart(2, '0'); + const formattedMinute = date.getMinutes().toString().padStart(2, '0'); + + if (currentYear === postYear) { + return `${formattedMonth}/${formattedDay} ${formattedHour}:${formattedMinute}`; + } + const lastTwoDigitsOfYear = postYear.toString().slice(-2); // 연도의 마지막 두 자리 + return `${lastTwoDigitsOfYear}/${formattedMonth}/${formattedDay} ${formattedHour}:${formattedMinute}`; +}; + export const postDateParse = (data: string) => { const now = new Date(); const date = new Date(data); From d67c5e187d21bf76125061124a94e2d3ddd91bc5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=86=8C=EC=9A=B8=EC=B9=98=ED=82=A8?= <90738604+soulchicken@users.noreply.github.com> Date: Thu, 12 Oct 2023 20:10:16 +0900 Subject: [PATCH 04/12] =?UTF-8?q?Feat:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?= =?UTF-8?q?=EB=82=B4=EC=9A=A9=20CSS=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 컴포넌트화가 필요합니다 --- .../[character_id]/[post_id]/index.tsx | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/pages/community/[character_id]/[post_id]/index.tsx b/src/pages/community/[character_id]/[post_id]/index.tsx index f6f5718..7b1b210 100644 --- a/src/pages/community/[character_id]/[post_id]/index.tsx +++ b/src/pages/community/[character_id]/[post_id]/index.tsx @@ -9,12 +9,12 @@ import color from '@/styles/color'; import { postDetailDateParse } from '@/utils/services/date'; interface PostData { - characterId : number + characterId : string content : string createdAt : string id : number title : string - updatedAt : string + updatedAt : string | null writerId : number writerName : string } @@ -45,8 +45,10 @@ const Post = () => {
{post.writerName}
{postDetailDateParse(post.createdAt)}
-
{post.title}
-
{post.content}
+
+
{post.title}
+
{post.content}
+
) : } @@ -74,6 +76,8 @@ const titleCSS = css` font-size: 1rem; font-weight:bold; color:${color.black}; + + padding-bottom: 0.3rem `; const contentCSS = css` @@ -82,8 +86,7 @@ const contentCSS = css` `; const postInfoCSS = css` - padding-top: 0.2rem; - padding-bottom: 0.2rem; + padding: 0.2rem 0 0.2rem 0; `; const writerNameCSS = css` @@ -97,3 +100,7 @@ const dateCSS = css` font-size: 0.6rem; color:${color.gray}; `; + +const postMainCSS = css` + padding: 0.2rem 0 0.2rem 0; +`; From 9518a8e114370194bab3e72628192fe28247d3a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=86=8C=EC=9A=B8=EC=B9=98=ED=82=A8?= <90738604+soulchicken@users.noreply.github.com> Date: Thu, 12 Oct 2023 20:13:46 +0900 Subject: [PATCH 05/12] =?UTF-8?q?Refactor:=20post=20type=20=EC=84=A0?= =?UTF-8?q?=EC=96=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../community/[character_id]/[post_id]/index.tsx | 12 +----------- src/pages/community/[character_id]/index.tsx | 3 ++- src/types/post.d.ts | 10 ++++++++++ 3 files changed, 13 insertions(+), 12 deletions(-) create mode 100644 src/types/post.d.ts diff --git a/src/pages/community/[character_id]/[post_id]/index.tsx b/src/pages/community/[character_id]/[post_id]/index.tsx index 7b1b210..b96a479 100644 --- a/src/pages/community/[character_id]/[post_id]/index.tsx +++ b/src/pages/community/[character_id]/[post_id]/index.tsx @@ -7,17 +7,7 @@ import { findBoardsById } from '@/utils/api/boards'; import Loading from '@/components/common/dialog/Loading'; import color from '@/styles/color'; import { postDetailDateParse } from '@/utils/services/date'; - -interface PostData { - characterId : string - content : string - createdAt : string - id : number - title : string - updatedAt : string | null - writerId : number - writerName : string -} +import { PostData } from '@/types/post'; const Post = () => { const router = useRouter(); diff --git a/src/pages/community/[character_id]/index.tsx b/src/pages/community/[character_id]/index.tsx index 484b904..3742b83 100644 --- a/src/pages/community/[character_id]/index.tsx +++ b/src/pages/community/[character_id]/index.tsx @@ -4,10 +4,11 @@ import SEO from '@/components/common/head/SEO'; import { useEffect, useState } from 'react'; import { findAllBoards } from '@/utils/api/boards'; import { useRouter } from 'next/router'; +import { PostData } from '@/types/post'; const Board = () => { const router = useRouter(); - const [postList, setPostList] = useState([]); + const [postList, setPostList] = useState([]); const { character_id: characterId } = router.query; useEffect(() => { if (characterId && typeof characterId === 'string') { diff --git a/src/types/post.d.ts b/src/types/post.d.ts new file mode 100644 index 0000000..16b1432 --- /dev/null +++ b/src/types/post.d.ts @@ -0,0 +1,10 @@ +export interface PostData { + characterId : string + content : string + createdAt : string + id : number + title : string + updatedAt : string | null + writerId : number + writerName : string +} From d059af3b827e585b81a67d2dd0543e698a5d7cab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=86=8C=EC=9A=B8=EC=B9=98=ED=82=A8?= <90738604+soulchicken@users.noreply.github.com> Date: Thu, 12 Oct 2023 20:26:46 +0900 Subject: [PATCH 06/12] =?UTF-8?q?Feat:=20=EC=BA=90=EB=A6=AD=ED=84=B0=20?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=EB=A5=BC=20=EB=B0=9B=EC=95=84=EC=98=A4?= =?UTF-8?q?=EB=8A=94=20API=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../community/[character_id]/[post_id]/index.tsx | 4 ++-- src/pages/community/[character_id]/index.tsx | 4 ++-- src/pages/community/index.tsx | 5 ++--- src/utils/api/boards.ts | 13 +++++++++---- src/utils/axiosInstance/boardInstance.ts | 2 +- 5 files changed, 16 insertions(+), 12 deletions(-) diff --git a/src/pages/community/[character_id]/[post_id]/index.tsx b/src/pages/community/[character_id]/[post_id]/index.tsx index b96a479..31729e4 100644 --- a/src/pages/community/[character_id]/[post_id]/index.tsx +++ b/src/pages/community/[character_id]/[post_id]/index.tsx @@ -3,7 +3,7 @@ import BottomNavBar from '@/components/common/bottomNavBar/BottomNavBar'; import SEO from '@/components/common/head/SEO'; import { useEffect, useState } from 'react'; import { useRouter } from 'next/router'; -import { findBoardsById } from '@/utils/api/boards'; +import { findPostById } from '@/utils/api/boards'; import Loading from '@/components/common/dialog/Loading'; import color from '@/styles/color'; import { postDetailDateParse } from '@/utils/services/date'; @@ -15,7 +15,7 @@ const Post = () => { const [post, setPost] = useState(); useEffect(() => { if (typeof characterId === 'string' && typeof postId === 'string') { - findBoardsById(characterId, postId).then((data) => { + findPostById(characterId, postId).then((data) => { setPost(data); }).catch((error) => { console.error('Error fetching post:', error); diff --git a/src/pages/community/[character_id]/index.tsx b/src/pages/community/[character_id]/index.tsx index 3742b83..f516f6e 100644 --- a/src/pages/community/[character_id]/index.tsx +++ b/src/pages/community/[character_id]/index.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import BottomNavBar from '@/components/common/bottomNavBar/BottomNavBar'; import SEO from '@/components/common/head/SEO'; import { useEffect, useState } from 'react'; -import { findAllBoards } from '@/utils/api/boards'; +import { findBoardById } from '@/utils/api/boards'; import { useRouter } from 'next/router'; import { PostData } from '@/types/post'; @@ -12,7 +12,7 @@ const Board = () => { const { character_id: characterId } = router.query; useEffect(() => { if (characterId && typeof characterId === 'string') { - findAllBoards(characterId).then((data) => { + findBoardById(characterId).then((data) => { setPostList(data); console.log(data); console.log(postList); diff --git a/src/pages/community/index.tsx b/src/pages/community/index.tsx index 6335a4f..7992517 100644 --- a/src/pages/community/index.tsx +++ b/src/pages/community/index.tsx @@ -2,12 +2,11 @@ import { css } from '@emotion/react'; import BottomNavBar from '@/components/common/bottomNavBar/BottomNavBar'; import SEO from '@/components/common/head/SEO'; import { useEffect } from 'react'; -import { findAllBoards, findBoardsById } from '@/utils/api/boards'; +import { findAllBoards } from '@/utils/api/boards'; const Community = () => { useEffect(() => { - findAllBoards('1'); - findBoardsById('1', '1'); + findAllBoards().then((data) => console.log(data)); }, []); return ( diff --git a/src/utils/api/boards.ts b/src/utils/api/boards.ts index f2604d2..c990e8e 100644 --- a/src/utils/api/boards.ts +++ b/src/utils/api/boards.ts @@ -1,11 +1,16 @@ import boardInstance from '@/utils/axiosInstance/boardInstance'; -export const findAllBoards = async (characterId: string) => { - const result = await boardInstance.get(characterId); +export const findAllBoards = async () => { + const result = await boardInstance.get('/characters'); return result.data; }; -export const findBoardsById = async (characterId: string, postId: string) => { - const result = await boardInstance.get(`${characterId}/${postId}`); +export const findBoardById = async (characterId: string) => { + const result = await boardInstance.get(`boards/${characterId}`); + return result.data; +}; + +export const findPostById = async (characterId: string, postId: string) => { + const result = await boardInstance.get(`boards/${characterId}/${postId}`); return result.data; }; diff --git a/src/utils/axiosInstance/boardInstance.ts b/src/utils/axiosInstance/boardInstance.ts index 7339e3f..572318f 100644 --- a/src/utils/axiosInstance/boardInstance.ts +++ b/src/utils/axiosInstance/boardInstance.ts @@ -2,7 +2,7 @@ import axios, { AxiosError } from 'axios'; import { getSession } from 'next-auth/react'; const boardInstance = axios.create({ - baseURL: `${process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:8080/'}api/boards/`, + baseURL: `${process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:8080/'}api/`, // headers: { 'Content-Type': 'application/json' }, }); From c18e1b1eb65d2e4ba0b1a9f471cbd657d5484562 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=86=8C=EC=9A=B8=EC=B9=98=ED=82=A8?= <90738604+soulchicken@users.noreply.github.com> Date: Thu, 12 Oct 2023 20:29:39 +0900 Subject: [PATCH 07/12] =?UTF-8?q?Refactor:=20axios=20=EC=9D=B8=EC=8A=A4?= =?UTF-8?q?=ED=84=B4=EC=8A=A4=EB=AA=85=20=EB=B3=80=EA=B2=BD=20(board=20->?= =?UTF-8?q?=20webServer)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/api/boards.ts | 8 ++++---- .../{boardInstance.ts => webServerInstance.ts} | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) rename src/utils/axiosInstance/{boardInstance.ts => webServerInstance.ts} (77%) diff --git a/src/utils/api/boards.ts b/src/utils/api/boards.ts index c990e8e..104a210 100644 --- a/src/utils/api/boards.ts +++ b/src/utils/api/boards.ts @@ -1,16 +1,16 @@ -import boardInstance from '@/utils/axiosInstance/boardInstance'; +import webServerInstance from '@/utils/axiosInstance/webServerInstance'; export const findAllBoards = async () => { - const result = await boardInstance.get('/characters'); + const result = await webServerInstance.get('/characters'); return result.data; }; export const findBoardById = async (characterId: string) => { - const result = await boardInstance.get(`boards/${characterId}`); + const result = await webServerInstance.get(`boards/${characterId}`); return result.data; }; export const findPostById = async (characterId: string, postId: string) => { - const result = await boardInstance.get(`boards/${characterId}/${postId}`); + const result = await webServerInstance.get(`boards/${characterId}/${postId}`); return result.data; }; diff --git a/src/utils/axiosInstance/boardInstance.ts b/src/utils/axiosInstance/webServerInstance.ts similarity index 77% rename from src/utils/axiosInstance/boardInstance.ts rename to src/utils/axiosInstance/webServerInstance.ts index 572318f..5ec5fc9 100644 --- a/src/utils/axiosInstance/boardInstance.ts +++ b/src/utils/axiosInstance/webServerInstance.ts @@ -1,12 +1,12 @@ import axios, { AxiosError } from 'axios'; import { getSession } from 'next-auth/react'; -const boardInstance = axios.create({ +const webServerInstance = axios.create({ baseURL: `${process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:8080/'}api/`, // headers: { 'Content-Type': 'application/json' }, }); -boardInstance.interceptors.response.use((response) => response, (error: AxiosError) => { +webServerInstance.interceptors.response.use((response) => response, (error: AxiosError) => { console.error('ERROR', error.toJSON()); if (error.response && error.response.status === 401) { console.error('ERROR', error.toJSON()); @@ -14,7 +14,7 @@ boardInstance.interceptors.response.use((response) => response, (error: AxiosErr return Promise.reject(error); }); -boardInstance.interceptors.request.use( +webServerInstance.interceptors.request.use( async (config) => { const session = await getSession(); const token = session?.accessToken; @@ -29,4 +29,4 @@ boardInstance.interceptors.request.use( (error) => Promise.reject(error), ); -export default boardInstance; +export default webServerInstance; From dc34f10de859090b6caccce1f16a4f1f2ca79b15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=86=8C=EC=9A=B8=EC=B9=98=ED=82=A8?= <90738604+soulchicken@users.noreply.github.com> Date: Thu, 12 Oct 2023 20:39:51 +0900 Subject: [PATCH 08/12] =?UTF-8?q?Refactor:=20characterInfo=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EC=84=A0=EC=96=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/community/index.tsx | 7 +++++-- src/types/characterInfo.d.ts | 9 +++++++++ 2 files changed, 14 insertions(+), 2 deletions(-) create mode 100644 src/types/characterInfo.d.ts diff --git a/src/pages/community/index.tsx b/src/pages/community/index.tsx index 7992517..5b87dc8 100644 --- a/src/pages/community/index.tsx +++ b/src/pages/community/index.tsx @@ -1,13 +1,16 @@ import { css } from '@emotion/react'; import BottomNavBar from '@/components/common/bottomNavBar/BottomNavBar'; import SEO from '@/components/common/head/SEO'; -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import { findAllBoards } from '@/utils/api/boards'; +import { CharacterInfo } from '@/types/characterInfo'; const Community = () => { + const [characterInfoList, setCharacterInfoList] = useState([]); useEffect(() => { - findAllBoards().then((data) => console.log(data)); + findAllBoards().then((data) => setCharacterInfoList(data)); }, []); + console.log(characterInfoList); return ( <> diff --git a/src/types/characterInfo.d.ts b/src/types/characterInfo.d.ts new file mode 100644 index 0000000..48b8472 --- /dev/null +++ b/src/types/characterInfo.d.ts @@ -0,0 +1,9 @@ +export interface CharacterInfo { + backgroundUrl: string, + characterId: string, + hashtags: string, + id: number, + name: string, + profileUrl: string, + stateMessage: string +} From bd3398c69a007854249ce1e097744f66a31348be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=86=8C=EC=9A=B8=EC=B9=98=ED=82=A8?= <90738604+soulchicken@users.noreply.github.com> Date: Thu, 12 Oct 2023 20:56:52 +0900 Subject: [PATCH 09/12] =?UTF-8?q?Feat:=20community=20Header=20=EB=B6=80?= =?UTF-8?q?=EB=B6=84=20UI=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/community/index.tsx | 40 +++++++++++++++++++++++++++++++---- 1 file changed, 36 insertions(+), 4 deletions(-) diff --git a/src/pages/community/index.tsx b/src/pages/community/index.tsx index 5b87dc8..980c4a2 100644 --- a/src/pages/community/index.tsx +++ b/src/pages/community/index.tsx @@ -4,11 +4,18 @@ import SEO from '@/components/common/head/SEO'; import { useEffect, useState } from 'react'; import { findAllBoards } from '@/utils/api/boards'; import { CharacterInfo } from '@/types/characterInfo'; +import Loading from '@/components/common/dialog/Loading'; +import SectionTitle from '@/components/common/sectionTitle/SectionTitle'; +import SearchBar from '@/components/common/searchBar/SearchBar'; const Community = () => { const [characterInfoList, setCharacterInfoList] = useState([]); useEffect(() => { - findAllBoards().then((data) => setCharacterInfoList(data)); + findAllBoards() + .then((data) => setCharacterInfoList(data)) + .catch((error) => { + console.error('Error fetching post:', error); + }); }, []); console.log(characterInfoList); @@ -16,9 +23,23 @@ const Community = () => { <>
- 커뮤니티 기능은 추후 제공될 예정입니다. +
+
+ Community + +
+
+
+ {characterInfoList ? ( + characterInfoList.map((characterInfo) => ( +
+ {characterInfo.name} +
+ )) + ) : } +
+
- ); }; @@ -30,5 +51,16 @@ const pageCSS = css` flex-direction: column; justify-content: space-between; align-items: center; - padding: 0.5rem; + padding: 0.625rem; + padding-bottom: 0; +`; + +const titleSectionCSS = css` + width:100%; + display:flex; + justify-content:space-between; + align-items: center; + padding-left: 1.25rem; + padding-right: 0.6rem; + padding-top: 0.6rem; `; From 56084c47228bcdc5758d946257d4971f2b7ba973 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=86=8C=EC=9A=B8=EC=B9=98=ED=82=A8?= <90738604+soulchicken@users.noreply.github.com> Date: Thu, 12 Oct 2023 21:09:44 +0900 Subject: [PATCH 10/12] =?UTF-8?q?Refactor:=20=EA=B2=8C=EC=8B=9C=ED=8C=90?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/community/BoardList.tsx | 38 +++++++++++++++++ src/pages/community/index.tsx | 56 +++++++++----------------- 2 files changed, 56 insertions(+), 38 deletions(-) create mode 100644 src/components/community/BoardList.tsx diff --git a/src/components/community/BoardList.tsx b/src/components/community/BoardList.tsx new file mode 100644 index 0000000..38b6591 --- /dev/null +++ b/src/components/community/BoardList.tsx @@ -0,0 +1,38 @@ +import { css } from '@emotion/react'; +import { useEffect, useState } from 'react'; +import { CharacterInfo } from '@/types/characterInfo'; +import { findAllBoards } from '@/utils/api/boards'; +import Loading from '../common/dialog/Loading'; + +const BoardList = () => { + const [characterInfoList, setCharacterInfoList] = useState([]); + useEffect(() => { + findAllBoards() + .then((data) => setCharacterInfoList(data)) + .catch((error) => { + console.error('Error fetching post:', error); + }); + }, []); + + return ( +
+ {characterInfoList ? ( + characterInfoList.map((characterInfo) => ( +
+ {characterInfo.name} +
+ )) + ) : } +
+ ); +}; + +export default BoardList; + +const boardListWrapperCSS = css` + display: flex; + flex-direction: column; + word-break: keep-all; + padding: 0.375rem; + padding-top: 1.25rem; +`; diff --git a/src/pages/community/index.tsx b/src/pages/community/index.tsx index 980c4a2..aa087f9 100644 --- a/src/pages/community/index.tsx +++ b/src/pages/community/index.tsx @@ -1,48 +1,28 @@ import { css } from '@emotion/react'; import BottomNavBar from '@/components/common/bottomNavBar/BottomNavBar'; import SEO from '@/components/common/head/SEO'; -import { useEffect, useState } from 'react'; -import { findAllBoards } from '@/utils/api/boards'; -import { CharacterInfo } from '@/types/characterInfo'; -import Loading from '@/components/common/dialog/Loading'; import SectionTitle from '@/components/common/sectionTitle/SectionTitle'; import SearchBar from '@/components/common/searchBar/SearchBar'; +import BoardList from '@/components/community/BoardList'; -const Community = () => { - const [characterInfoList, setCharacterInfoList] = useState([]); - useEffect(() => { - findAllBoards() - .then((data) => setCharacterInfoList(data)) - .catch((error) => { - console.error('Error fetching post:', error); - }); - }, []); - console.log(characterInfoList); +const Community = () => ( + <> + +
+
+
+ Community + +
+
+
+ +
+ +
+ +); - return ( - <> - -
-
-
- Community - -
-
-
- {characterInfoList ? ( - characterInfoList.map((characterInfo) => ( -
- {characterInfo.name} -
- )) - ) : } -
- -
- - ); -}; export default Community; const pageCSS = css` From fccd2e91a04d68d87455689b566b8cb7e08deb11 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=86=8C=EC=9A=B8=EC=B9=98=ED=82=A8?= <90738604+soulchicken@users.noreply.github.com> Date: Fri, 13 Oct 2023 22:07:41 +0900 Subject: [PATCH 11/12] =?UTF-8?q?Feat:=20=EA=B2=8C=EC=8B=9C=ED=8C=90=20?= =?UTF-8?q?=EC=A7=84=EC=9E=85=20=EB=B2=84=ED=8A=BC=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/community/BoardList.tsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/components/community/BoardList.tsx b/src/components/community/BoardList.tsx index 38b6591..890e610 100644 --- a/src/components/community/BoardList.tsx +++ b/src/components/community/BoardList.tsx @@ -3,9 +3,13 @@ import { useEffect, useState } from 'react'; import { CharacterInfo } from '@/types/characterInfo'; import { findAllBoards } from '@/utils/api/boards'; import Loading from '../common/dialog/Loading'; +import FriendInfo from '../friends/friend/FriendInfo'; +import FriendWrapper from '../friends/friend/FriendWrapper'; const BoardList = () => { const [characterInfoList, setCharacterInfoList] = useState([]); + console.log(characterInfoList); + useEffect(() => { findAllBoards() .then((data) => setCharacterInfoList(data)) @@ -19,7 +23,18 @@ const BoardList = () => { {characterInfoList ? ( characterInfoList.map((characterInfo) => (
- {characterInfo.name} + + +
)) ) : } From c887e24e97ca60f22c242337dbcc17cfecc4a43b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=86=8C=EC=9A=B8=EC=B9=98=ED=82=A8?= <90738604+soulchicken@users.noreply.github.com> Date: Fri, 13 Oct 2023 22:11:17 +0900 Subject: [PATCH 12/12] =?UTF-8?q?Style:=20=EA=B2=8C=EC=8B=9C=ED=8C=90=20?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=EC=9D=84=20=EC=99=BC?= =?UTF-8?q?=EC=AA=BD=20=EC=9C=84=20=EC=A0=95=EB=A0=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/community/BoardList.tsx | 1 - src/pages/community/index.tsx | 7 ++++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/community/BoardList.tsx b/src/components/community/BoardList.tsx index 890e610..a9fbb1f 100644 --- a/src/components/community/BoardList.tsx +++ b/src/components/community/BoardList.tsx @@ -8,7 +8,6 @@ import FriendWrapper from '../friends/friend/FriendWrapper'; const BoardList = () => { const [characterInfoList, setCharacterInfoList] = useState([]); - console.log(characterInfoList); useEffect(() => { findAllBoards() diff --git a/src/pages/community/index.tsx b/src/pages/community/index.tsx index aa087f9..d6934f8 100644 --- a/src/pages/community/index.tsx +++ b/src/pages/community/index.tsx @@ -15,7 +15,7 @@ const Community = () => ( -
+
@@ -44,3 +44,8 @@ const titleSectionCSS = css` padding-right: 0.6rem; padding-top: 0.6rem; `; + +const mainCSS = css` + width: 100%; + height: 100%; +`;