TeamATM · soulchicken · Oct 18, 2023 · Oct 18, 2023 · Oct 18, 2023 · Oct 18, 2023
diff --git a/public/default-user.png b/public/default-user.png
diff --git a/src/components/common/searchBar/SearchBar.tsx b/src/components/common/searchBar/SearchBar.tsx
@@ -60,7 +60,7 @@ const SearchBar = () => {
     <div css={searchBarCSS}>
       <input css={inputCSS} value={searchText} onChange={changeHandler} onKeyPress={keyPressHandler} type="text" placeholder="search" />
       <button css={buttonCSS} type="button" onClick={clickHandler}>
-        <SearchIcon />
+        <SearchIcon color={color.greenGray} />
       </button>
       {toastMessages.map((toast) => (
         <Toast

diff --git a/src/components/community/BoardList.tsx b/src/components/community/BoardList.tsx
@@ -27,7 +27,7 @@ const BoardList = () => {
               linkUrl={`/community/${characterInfo.code}`}
             >
               <FriendInfo
-                characterName={characterInfo.name}
+                characterName={`${characterInfo.name} 게시판`}
                 // TODO: 백엔드는 이미지를 뿌려라!
                 // imageUrl={characterInfo.profileUrl}
                 message={`임시 정보 입니다. ${characterInfo.hashtags}`}

diff --git a/src/components/community/CommunityHeader.tsx b/src/components/community/CommunityHeader.tsx
@@ -31,7 +31,7 @@ const CommunityHeader = () => {
             ? (
               <CharacterInfo
                 imageUrl="/leeyj.png"
-                characterName={characterInfo.name}
+                characterName={`${characterInfo.name} 게시판`}
                 hashTag={characterInfo.hashtags}
                 link="/community"
               />

diff --git a/src/components/community/PostHeader.tsx 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<CharacterInfoType>();
+  useEffect(() => {
+    if (characterId && typeof characterId === 'string') {
+      findCharacterById(characterId)
+        .then((data) => setCharacterInfo(data))
+        .catch((error) => {
+          console.error('Error fetching post:', error);
+        });
+    }
+  }, [characterId]);
+  return (
+    <header css={headerCSS}>
+      {/* TODO: 캐릭터의 정보, 이미지가 필요합니다. */}
+      <span css={characterInfoCSS}>
+        {
+          characterInfo
+            ? (
+              <CharacterInfo
+                imageUrl="/leeyj.png"
+                characterName={`${characterInfo.name} 게시판`}
+                hashTag={characterInfo.hashtags}
+                link={`/community/${characterInfo.code}`}
+              />
+            )
+            : <Loading />
+        }
+      </span>
+    </header>
+  );
+};
+
+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
@@ -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 = () => (
+  <ul css={ulCSS}>
+    <li title="좋아요" css={liCSS}>
+      <HeartIcon color={color.black} />
+      <div css={statusCSS}>1</div>
+    </li>
+    <li title="댓글" css={liCSS}>
+      <CommentIcon color={color.black} />
+      <div css={statusCSS}>3</div>
+    </li>
+    <li title="신고" css={liCSS}>
+      <ReportIcon color={color.black} />
+      <div css={statusCSS}>신고</div>
+    </li>
+  </ul>
+);
+
+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
@@ -1,8 +1,5 @@
 import { FC } from 'react';
-
-interface IconProps {
-  color: string
-}
+import { IconProps } from '@/types/icon';
 
 const BackwordIcon: FC<IconProps> = ({ color }) => (
   <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

diff --git 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<IconProps> = ({ color }) => (
   <svg width="26" height="26" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">

diff --git 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<IconProps> = ({ color }) => (
   <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g id="Comment">

diff --git 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<IconProps> = ({ color }) => (
   <svg width="26" height="26" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">

diff --git 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<IconProps> = ({ color }) => (
   <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g id="Heart">

diff --git 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<IconProps> = ({ color }) => (
   <svg width="26" height="26" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">

diff --git 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<IconProps> = ({ color }) => (
   <svg width="26" height="26" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M21.2926 10.0235C22.0826 10.8136 22.0826 12.0944 21.2926 12.8845C20.5026 13.6745 19.2217 13.6745 18.4316 12.8845C17.6416 12.0944 17.6416 10.8136 18.4316 10.0235C19.2217 9.23349 20.5026 9.23349 21.2926 10.0235" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />

diff --git a/src/components/icons/ReportIcon.tsx b/src/components/icons/ReportIcon.tsx
@@ -0,0 +1,10 @@
+import { IconProps } from '@/types/icon';
+import { FC } from 'react';
+
+const ReportIcon: FC<IconProps> = ({ color }) => (
+  <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path id="Icon Shape" fillRule="evenodd" clipRule="evenodd" d="M15 7.5C15 11.6421 11.6421 15 7.5 15C3.35786 15 0 11.6421 0 7.5C0 3.35786 3.35786 0 7.5 0C11.6421 0 15 3.35786 15 7.5ZM11.4561 12.3388C10.3786 13.2208 9.00108 13.75 7.5 13.75C4.04822 13.75 1.25 10.9518 1.25 7.5C1.25 5.99892 1.77918 4.62144 2.66116 3.54393C2.66823 3.55174 2.67553 3.55941 2.68306 3.56694L11.4331 12.3169C11.4406 12.3245 11.4483 12.3318 11.4561 12.3388ZM12.3388 11.4561C12.3318 11.4483 12.3245 11.4406 12.3169 11.4331L3.56694 2.68306C3.55941 2.67553 3.55174 2.66823 3.54393 2.66116C4.62144 1.77918 5.99892 1.25 7.5 1.25C10.9518 1.25 13.75 4.04822 13.75 7.5C13.75 9.00108 13.2208 10.3786 12.3388 11.4561Z" fill={color} />
+  </svg>
+);
+
+export default ReportIcon;
diff --git 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<IconProps> = ({ color }) => (
   <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="6.05928" cy="6.0594" r="3.69331" stroke="#949BA5" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-    <path d="M10.7373 10.7374L8.67065 8.67072" stroke="#949BA5" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <circle cx="6.05928" cy="6.0594" r="3.69331" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M10.7373 10.7374L8.67065 8.67072" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 );
 

diff --git 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<IconProps> = ({ color }) => (
   <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">

diff --git 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 (
     <>
       <SEO title="Community - Post" />
+      <PostHeader />
       <section css={pageCSS}>
         <div css={postCSS}>
           {post ? (
             <div>
               {/* TODO: 게시글 쓴 사람의 이미지가 필요함 */}
               <div css={postInfoCSS}>
-                <div css={writerNameCSS}>{post.writerName}</div>
-                <div css={dateCSS}>{postDetailDateParse(post.createdAt)}</div>
+                <Image src="/default-user.png" alt="user-profile" width={26} height={26} />
+                <div css={css`padding-left: 0.5rem;`}>
+                  <div css={writerNameCSS}>{post.writerName}</div>
+                  <div css={dateCSS}>{postDetailDateParse(post.createdAt)}</div>
+                </div>
               </div>
               <div css={postMainCSS}>
                 <div css={titleCSS}>{post.title}</div>
                 <div css={contentCSS}>{post.content}</div>
               </div>
+              <PostStatus />
             </div>
           )
             : <Loading />}
         </div>
+        <DivideLine />
+        <div css={css`font-size:0.8rem;`}>덧글은 추후에 제공될 예정입니다 :)</div>
       </section>
       <BottomNavBar pageName="Community" />
     </>
@@ -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
@@ -0,0 +1,3 @@
+export interface IconProps {
+  color: string
+}