Feature: 게시글 작성 버튼 생성

src/components/community/PostHeader.tsx

@@ -28,7 +28,7 @@ const PostHeader = () => {
           characterInfo
             ? (
               <CharacterInfo
-                profileImageUrl="/leeyj.png"
+                profileImageUrl={characterInfo.profileImageUrl}
                 characterName={`${characterInfo.characterName} 게시판`}
                 hashTag={characterInfo.hashTag}
                 link={`/community/${characterInfo.characterId}`}

src/components/community/WriteButton.tsx

@@ -0,0 +1,55 @@
+import color from '@/styles/color';
+import PostWriteIcon from '@/components/icons/PostWriteIcon';
+import { css } from '@emotion/react';
+import { useRouter } from 'next/router';
+
+const WriteButton = () => {
+  const router = useRouter();
+  const { character_id: characterId } = router.query;
+
+  const buttonHandler = () => {
+    if (characterId && typeof characterId === 'string') {
+      router.push(`/community/${characterId}/edit`);
+    }
+  };
+
+  return (
+    <button onClick={buttonHandler} css={buttonCSS} type="button">
+      <PostWriteIcon color={color.black} />
+      <span css={textCSS}>글쓰기</span>
+    </button>
+  );
+};
+
+export default WriteButton;
+
+const buttonCSS = css`
+  position: fixed;
+  top: 80%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 10rem;
+  z-index: 5;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+
+  padding: 0.5rem;
+  border: none;
+  border-radius: 1rem;
+
+  background-color: ${color.offWhite};
+  color: ${color.black};
+
+  &:active, &:hover {
+    background-color: ${color.lightGray};
+  }
+
+`;
+
+const textCSS = css`
+  font-size: 1rem;
+`;

src/components/icons/PostWriteIcon.tsx

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { IconProps } from '@/types/icon';
+
+const PostWriteIcon: FC<IconProps> = ({ color }) => (
+  <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16 8H14V5H11V3H14V0H16V3H19V5H16V8Z" fill={color} />
+    <path d="M18 10H16V13H5.334C4.90107 12.9988 4.47964 13.1393 4.134 13.4L2 15V3H9V1H2C0.89543 1 0 1.89543 0 3V19L4.8 15.4C5.14582 15.1396 5.56713 14.9992 6 15H16C17.1046 15 18 14.1046 18 13V10Z" fill={color} />
+  </svg>
+);
+
+export default PostWriteIcon;

src/pages/community/[character_id]/index.tsx

@@ -3,12 +3,14 @@ import BottomNavBar from '@/components/common/bottomNavBar/BottomNavBar';
 import SEO from '@/components/common/head/SEO';
 import PostList from '@/components/community/PostList';
 import CommunityHeader from '@/components/community/CommunityHeader';
+import WriteButton from '@/components/community/WriteButton';
 
 const Board = () => (
   <>
     <SEO title="Community - Board" />
     <section css={pageCSS}>
       <CommunityHeader />
+      <WriteButton />
       <PostList />
     </section>
     <BottomNavBar pageName="Community" />