diff --git a/public/default-user.png b/public/default-user.png new file mode 100644 index 0000000..3fcd6fe Binary files /dev/null and b/public/default-user.png differ diff --git a/src/components/common/searchBar/SearchBar.tsx b/src/components/common/searchBar/SearchBar.tsx index fec9324..2980526 100644 --- a/src/components/common/searchBar/SearchBar.tsx +++ b/src/components/common/searchBar/SearchBar.tsx @@ -60,7 +60,7 @@ const SearchBar = () => {
{toastMessages.map((toast) => ( { linkUrl={`/community/${characterInfo.code}`} > { ? ( diff --git a/src/components/community/PostHeader.tsx b/src/components/community/PostHeader.tsx new file mode 100644 index 0000000..439a0b7 --- /dev/null +++ b/src/components/community/PostHeader.tsx @@ -0,0 +1,64 @@ +import { useEffect, useState } from 'react'; +import { css } from '@emotion/react'; +import color from '@/styles/color'; +import { useRouter } from 'next/router'; +import { findCharacterById } from '@/utils/api/character'; +import { CharacterInfo as CharacterInfoType } from '@/types/characterInfo'; +import CharacterInfo from '@/components/chat/characterHeader/CharacterInfo'; +import Loading from '../common/dialog/Loading'; + +const PostHeader = () => { + const router = useRouter(); + const { character_id: characterId } = router.query; + const [characterInfo, setCharacterInfo] = useState(); + useEffect(() => { + if (characterId && typeof characterId === 'string') { + findCharacterById(characterId) + .then((data) => setCharacterInfo(data)) + .catch((error) => { + console.error('Error fetching post:', error); + }); + } + }, [characterId]); + return ( +
+ {/* TODO: 캐릭터의 정보, 이미지가 필요합니다. */} + + { + characterInfo + ? ( + + ) + : + } + +
+ ); +}; + +export default PostHeader; + +const headerCSS = css` + position: sticky; + top: 0; + z-index: 100; // 채팅보다 위에 존재해야하기 때문에 필요함 + width: 100%; + max-width: 400px; + padding: 1rem 1rem; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + background-color: ${color.white}; +`; + +const characterInfoCSS = css` + display: flex; + flex-direction: row; + align-items: center; +`; diff --git a/src/components/community/postDetail/PostStatus.tsx b/src/components/community/postDetail/PostStatus.tsx new file mode 100644 index 0000000..7ed829f --- /dev/null +++ b/src/components/community/postDetail/PostStatus.tsx @@ -0,0 +1,45 @@ +import { css } from '@emotion/react'; +import HeartIcon from '@/components/icons/HeartIcon'; +import CommentIcon from '@/components/icons/CommentIcon'; +import ReportIcon from '@/components/icons/ReportIcon'; +import color from '@/styles/color'; + +const PostStatus = () => ( +
    +
  • + +
    1
    +
    • +
  • + +
    3
    +
    • +
  • + +
    신고
    +
    • +
+); + +export default PostStatus; + +const ulCSS = css` + display: flex; + flex-direction: row; + align-items: center; + gap: 0.25rem; + padding-top: 1rem; +`; + +const liCSS = css` + display: flex; + flex-direction: row; + align-items: center; + gap: 0.25rem; +`; + +const statusCSS = css` + font-size: 0.75rem; + font-weight: bold; + color: ${color.black}; +`; diff --git a/src/components/icons/BackwordIcon.tsx b/src/components/icons/BackwordIcon.tsx index dc16242..5f0630e 100644 --- a/src/components/icons/BackwordIcon.tsx +++ b/src/components/icons/BackwordIcon.tsx @@ -1,8 +1,5 @@ import { FC } from 'react'; - -interface IconProps { - color: string -} +import { IconProps } from '@/types/icon'; const BackwordIcon: FC = ({ color }) => ( diff --git a/src/components/icons/ChatIcon.tsx b/src/components/icons/ChatIcon.tsx index f830cae..7926709 100644 --- a/src/components/icons/ChatIcon.tsx +++ b/src/components/icons/ChatIcon.tsx @@ -1,8 +1,5 @@ import { FC } from 'react'; - -interface IconProps { - color: string -} +import { IconProps } from '@/types/icon'; const ChatIcon: FC = ({ color }) => ( diff --git a/src/components/icons/CommentIcon.tsx b/src/components/icons/CommentIcon.tsx index 9c5d40f..6d34c14 100644 --- a/src/components/icons/CommentIcon.tsx +++ b/src/components/icons/CommentIcon.tsx @@ -1,8 +1,6 @@ import { FC } from 'react'; +import { IconProps } from '@/types/icon'; -interface IconProps { - color: string -} const CommentIcon: FC = ({ color }) => ( diff --git a/src/components/icons/CommunityIcon.tsx b/src/components/icons/CommunityIcon.tsx index dc9ebd3..3a575e2 100644 --- a/src/components/icons/CommunityIcon.tsx +++ b/src/components/icons/CommunityIcon.tsx @@ -1,8 +1,5 @@ import { FC } from 'react'; - -interface IconProps { - color: string -} +import { IconProps } from '@/types/icon'; const CommunityIcon: FC = ({ color }) => ( diff --git a/src/components/icons/HeartIcon.tsx b/src/components/icons/HeartIcon.tsx index 98a871a..eb8b258 100644 --- a/src/components/icons/HeartIcon.tsx +++ b/src/components/icons/HeartIcon.tsx @@ -1,8 +1,6 @@ import { FC } from 'react'; +import { IconProps } from '@/types/icon'; -interface IconProps { - color: string -} const HeartIcon: FC = ({ color }) => ( diff --git a/src/components/icons/HomeIcon.tsx b/src/components/icons/HomeIcon.tsx index 4b34ee5..b901110 100644 --- a/src/components/icons/HomeIcon.tsx +++ b/src/components/icons/HomeIcon.tsx @@ -1,8 +1,5 @@ import { FC } from 'react'; - -interface IconProps { - color: string -} +import { IconProps } from '@/types/icon'; const HomeIcon: FC = ({ color }) => ( diff --git a/src/components/icons/ProfileIcon.tsx b/src/components/icons/ProfileIcon.tsx index 15ffc8c..3ab672c 100644 --- a/src/components/icons/ProfileIcon.tsx +++ b/src/components/icons/ProfileIcon.tsx @@ -1,8 +1,6 @@ import { FC } from 'react'; +import { IconProps } from '@/types/icon'; -interface IconProps { - color: string -} const ProfileIcon: FC = ({ color }) => ( diff --git a/src/components/icons/ReportIcon.tsx b/src/components/icons/ReportIcon.tsx new file mode 100644 index 0000000..312d69b --- /dev/null +++ b/src/components/icons/ReportIcon.tsx @@ -0,0 +1,10 @@ +import { IconProps } from '@/types/icon'; +import { FC } from 'react'; + +const ReportIcon: FC = ({ color }) => ( + + + +); + +export default ReportIcon; diff --git a/src/components/icons/SearchIcon.tsx b/src/components/icons/SearchIcon.tsx index 4fc4079..acb4b4a 100644 --- a/src/components/icons/SearchIcon.tsx +++ b/src/components/icons/SearchIcon.tsx @@ -1,7 +1,10 @@ -const SearchIcon = () => ( +import { FC } from 'react'; +import { IconProps } from '@/types/icon'; + +const SearchIcon: FC = ({ color }) => ( - - + + ); diff --git a/src/components/icons/SettingIcon.tsx b/src/components/icons/SettingIcon.tsx index 7a4ec0c..e95d225 100644 --- a/src/components/icons/SettingIcon.tsx +++ b/src/components/icons/SettingIcon.tsx @@ -1,8 +1,5 @@ import { FC } from 'react'; - -interface IconProps { - color: string -} +import { IconProps } from '@/types/icon'; const SettingIcon: FC = ({ color }) => ( diff --git a/src/pages/community/[character_id]/[post_id]/index.tsx b/src/pages/community/[character_id]/[post_id]/index.tsx index 31729e4..e3b76be 100644 --- a/src/pages/community/[character_id]/[post_id]/index.tsx +++ b/src/pages/community/[character_id]/[post_id]/index.tsx @@ -8,6 +8,10 @@ import Loading from '@/components/common/dialog/Loading'; import color from '@/styles/color'; import { postDetailDateParse } from '@/utils/services/date'; import { PostData } from '@/types/post'; +import PostHeader from '@/components/community/PostHeader'; +import Image from 'next/image'; +import PostStatus from '@/components/community/postDetail/PostStatus'; +import DivideLine from '@/components/common/divideLine/DivideLine'; const Post = () => { const router = useRouter(); @@ -17,6 +21,7 @@ const Post = () => { if (typeof characterId === 'string' && typeof postId === 'string') { findPostById(characterId, postId).then((data) => { setPost(data); + console.log(data); }).catch((error) => { console.error('Error fetching post:', error); }); @@ -26,23 +31,30 @@ const Post = () => { return ( <> +
{post ? (
{/* TODO: 게시글 쓴 사람의 이미지가 필요함 */}
-
{post.writerName}
-
{postDetailDateParse(post.createdAt)}
+ user-profile +
+
{post.writerName}
+
{postDetailDateParse(post.createdAt)}
+
{post.title}
{post.content}
+
) : }
+ +
덧글은 추후에 제공될 예정입니다 :)
@@ -54,20 +66,21 @@ const pageCSS = css` height: 100vh; display: flex; flex-direction: column; - justify-content: space-between; align-items: center; - padding: 0.5rem; + padding: 0 3rem; `; const postCSS = css` + width: 100%; + padding: 1rem 0; `; const titleCSS = css` font-size: 1rem; - font-weight:bold; + font-weight: bold; color:${color.black}; - padding-bottom: 0.3rem + padding-bottom: 1rem; `; const contentCSS = css` @@ -77,11 +90,12 @@ const contentCSS = css` const postInfoCSS = css` padding: 0.2rem 0 0.2rem 0; + display: flex; + flex-direction: row; `; const writerNameCSS = css` - font-size: 0.75rem; - font-weight:bold; + font-size: 0.9rem; color:${color.black}; padding-bottom: 0.2rem; `; @@ -92,5 +106,5 @@ const dateCSS = css` `; const postMainCSS = css` - padding: 0.2rem 0 0.2rem 0; + padding: 1.25rem 0 0.2rem 0; `; diff --git a/src/types/icon.d.ts b/src/types/icon.d.ts new file mode 100644 index 0000000..a6e5983 --- /dev/null +++ b/src/types/icon.d.ts @@ -0,0 +1,3 @@ +export interface IconProps { + color: string +}