diff --git a/src/components/community/PostHeader.tsx b/src/components/community/PostHeader.tsx index 61835e8..0ce6c29 100644 --- a/src/components/community/PostHeader.tsx +++ b/src/components/community/PostHeader.tsx @@ -28,7 +28,7 @@ const PostHeader = () => { characterInfo ? ( { + const router = useRouter(); + const { character_id: characterId } = router.query; + + const buttonHandler = () => { + if (characterId && typeof characterId === 'string') { + router.push(`/community/${characterId}/edit`); + } + }; + + return ( + + ); +}; + +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; +`; diff --git a/src/components/icons/PostWriteIcon.tsx b/src/components/icons/PostWriteIcon.tsx new file mode 100644 index 0000000..0c510a1 --- /dev/null +++ b/src/components/icons/PostWriteIcon.tsx @@ -0,0 +1,11 @@ +import { FC } from 'react'; +import { IconProps } from '@/types/icon'; + +const PostWriteIcon: FC = ({ color }) => ( + + + + +); + +export default PostWriteIcon; diff --git a/src/pages/community/[character_id]/index.tsx b/src/pages/community/[character_id]/index.tsx index c2a6158..b493b1a 100644 --- a/src/pages/community/[character_id]/index.tsx +++ b/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 = () => ( <>
+