diff --git a/src/components/ClubPost/ClubPost.tsx b/src/components/ClubPost/ClubPost.tsx index 1b607a60..596f44bc 100644 --- a/src/components/ClubPost/ClubPost.tsx +++ b/src/components/ClubPost/ClubPost.tsx @@ -13,23 +13,23 @@ import { } from './ClubPost.style'; interface ClubPostProps { - clubId?: string; - postId?: string; - title?: string; - content?: string; - author?: string; + clubId: string; + postId: string; + title: string; + content: string; + author: string; imageUrl?: string; - postDate?: string; + postDate: string; } const ClubPost = ({ - clubId = '1', - postId = '1', - title = '제목입니다', - content = '내용이니다. 이것은 최대 25자로 보여져야 합니다', - author = '닉네임', + clubId, + postId, + title, + content, + author, imageUrl, - postDate = '2023/12/23', + postDate, }: ClubPostProps) => { const navigate = useNavigate(); const hasImage = Boolean(imageUrl); diff --git a/src/pages/club/ClubPostWritePage/ClubPostWritePage.style.ts b/src/pages/club/ClubPostWritePage/ClubPostWritePage.style.ts index e69de29b..e7cd45f1 100644 --- a/src/pages/club/ClubPostWritePage/ClubPostWritePage.style.ts +++ b/src/pages/club/ClubPostWritePage/ClubPostWritePage.style.ts @@ -0,0 +1,61 @@ +import Theme from '@/styles/Theme'; +import styled from '@emotion/styled'; + +import { ClubHomePageContainer, ClubHomeTopWrapper } from '../ClubHomePage/ClubHomePage.style'; + +const ClubPostWritePageContainer = styled(ClubHomePageContainer)``; + +const ClubPostWriteTopWrapper = styled(ClubHomeTopWrapper)``; + +const ContentWrapper = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 0.5rem; + width: 100%; + padding: 1rem; +`; + +const ButtonWrapper = styled.div` + display: flex; + justify-content: start; + width: 100%; +`; + +const TitleStyled = styled.input` + width: 100%; + height: 2.5rem; + padding: 0.3rem; + border: 1px solid ${Theme.color.tSeparator}; +`; + +const ContentStyled = styled.textarea` + width: 100%; + height: 20rem; + padding: 0.5rem 0.3rem; + border: 1px solid ${Theme.color.tSeparator}; +`; + +const FileInputWrapper = styled.div` + display: flex; + justify-content: start; + width: 100%; + padding: 0.5rem; +`; + +const ErrorMessageStyled = styled.span` + font-size: ${Theme.fontSize.smallContent}; + color: ${Theme.color.tRed}; +`; + +export { + ClubPostWritePageContainer, + ClubPostWriteTopWrapper, + ContentWrapper, + ButtonWrapper, + TitleStyled, + ContentStyled, + FileInputWrapper, + ErrorMessageStyled, +}; diff --git a/src/pages/club/ClubPostWritePage/ClubPostWritePage.tsx b/src/pages/club/ClubPostWritePage/ClubPostWritePage.tsx index 85ca9b0b..dce51e8a 100644 --- a/src/pages/club/ClubPostWritePage/ClubPostWritePage.tsx +++ b/src/pages/club/ClubPostWritePage/ClubPostWritePage.tsx @@ -1,5 +1,94 @@ +import ClubHeader from '@/components/ClubHeader/ClubHeader'; +import Button from '@/components/common/Button/Button'; +import ClubBanner from '@/components/common/ClubBanner/ClubBanner'; + +import { SubmitHandler, useForm } from 'react-hook-form'; +import { useParams } from 'react-router-dom'; + +import { + ButtonWrapper, + ClubPostWritePageContainer, + ClubPostWriteTopWrapper, + ContentStyled, + ContentWrapper, + ErrorMessageStyled, + FileInputWrapper, + TitleStyled, +} from './ClubPostWritePage.style'; + +interface ClubPostWriteValue { + image: File; + title: string; + content: string; +} + const ClubPostWritePage = () => { - return
ClubPostWritePage
; + const { clubId } = useParams(); + const { + register, + handleSubmit, + formState: { errors }, + } = useForm({ + defaultValues: { + title: '', + content: '', + image: undefined, + }, + }); + if (!clubId) throw new Error('클럽 ID를 찾을 수 없습니다'); + + const onSubmit: SubmitHandler = () => {}; + + return ( + <> + + + + + +
+ + +