SKRR-11 design: 클럽 게시글 작성 페이지 디자인 구현 (#243)

* feat: 글 작성 페이지 구현

* design: 글 작성 페이지 디자인 수정

* fix: 더미값 삭제

* design: 작서완료 버튼 padding 게시판 페이지와 맞춤

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);

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,
+};

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 <div>ClubPostWritePage</div>;
+  const { clubId } = useParams();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ClubPostWriteValue>({
+    defaultValues: {
+      title: '',
+      content: '',
+      image: undefined,
+    },
+  });
+  if (!clubId) throw new Error('클럽 ID를 찾을 수 없습니다');
+
+  const onSubmit: SubmitHandler<ClubPostWriteValue> = () => {};
+
+  return (
+    <>
+      <ClubHeader clubId={clubId} />
+      <ClubPostWritePageContainer>
+        <ClubPostWriteTopWrapper>
+          <ClubBanner withdrawClubButton clubId={clubId} bannerSize="small" />
+        </ClubPostWriteTopWrapper>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <ContentWrapper>
+            <ButtonWrapper>
+              <Button buttonText="작성 완료" />
+            </ButtonWrapper>
+            <TitleStyled
+              {...register('title', {
+                required: '제목 입력은 필수입니다.',
+                minLength: {
+                  value: 2,
+                  message: '2글자 이상 입력해주세요.',
+                },
+                maxLength: {
+                  value: 30,
+                  message: '30자 이상 입력할 수 없습니다.',
+                },
+              })}
+              placeholder="제목을 입력해주세요."
+            />
+            <ErrorMessageStyled>{errors?.title ? errors.title.message : ''}</ErrorMessageStyled>
+            <ContentStyled
+              {...register('content', {
+                required: '내용 입력은 필수입니다.',
+                minLength: {
+                  value: 2,
+                  message: '2글자 이상 입력해주세요.',
+                },
+                maxLength: {
+                  value: 1000,
+                  message: '1000자 이상 입력할 수 없습니다.',
+                },
+              })}
+              placeholder="내용을 입력해주세요."
+            />
+            <ErrorMessageStyled>{errors?.content ? errors.content.message : ''}</ErrorMessageStyled>
+            <FileInputWrapper>
+              <input type="file" accept=".jpg, .jpeg, .png, .heic" />
+            </FileInputWrapper>
+          </ContentWrapper>
+        </form>
+      </ClubPostWritePageContainer>
+    </>
+  );
 };
 
 export default ClubPostWritePage;