글 작성 및 수정 페이지 구현 (#72)

* fix: (#55) npm run dev 실행 시 발생하는 오류 해결, 라우팅 이슈 해결

* feat: (#55) 옵션에 따라 마감 시간을 가공하여 반환하는 함수 구현

* feat: (#55) 컴포넌트를 열고 닫는 커스텀 훅 구현

* feat: (#55) 글 작성 및 수정 관련 API, 커스텀 쿼리 훅 구현

* feat: (#55) 글 작성 및 수정 폼 구현

* feat: (#55) 글 작성 및 수정 페이지 구현, 페이지 라우팅 구현

* feat: (#55) 글 수정을 위해 url 파라미터를 가져오는 로직 구현

* refactor: (#55) 선택지 TextArea, FileInput 에 name 속성 추가

* refactor: (#55) 선택지 TextArea, FileInput 에 name 속성 변경

* feat: (#55) 글 작성/수정 폼에 이미지 파일 옵션 추가

* feat: (#55) msw로 글 작성/수정 API 모킹

* fix: (#55) form 태그 내에서 임의의 button 누르면 submit 이벤트가 일어나는 오류 해결
submit을 위해 만든 button이 아닌 경우, type='button' 속성을 추가함

* feat: (#55) useMutation 함수 반환값으로 isLoading, isError, error 추가

* feat: (#55) query key 상수화

* fix: (#55) Uncaught SyntaxError: Unexpected token ' in JSON 에러 해결
handler 함수들의 반환 값에 ctx.json 추가

* fix: (#55) 이미지 업로드 후 그림 버튼이 렌더링되는 이슈 해결

* feat: (#55) multipart 데이터 경우에 대한 fetch 함수 구현

* chore: (#55) 불필요한 name 속성 삭제

* chore: (#55) props 추가

* refactor: (#55) PostForm의 data props를 기존의 PostInfo 타입으로 변경

* refactor: (#55) request로 보낼 데이터의 타입을 FormData로 변경

* refactor: (#55) mocking 함수 url, 상태 코드 수정

* fix: (#55) 작성시간인 startTime의 유무에 따라 now값을 선언하여 Invalid Date 에러 해결

* refactor: (#55) mutate props 타입 좁히기

* refactor: (#55) 기준 시간에 마감 시간 옵션을 더해 마감 기한을 반환하는 함수 리팩터링
직관적인 함수명으로 변경
utils/post 로 파일 이동
데이터의 내용을 잘 드러내는 파라미터 이름으로 변경

* refactor: (#55) queryKey 객체의 키 값 대문자로 수정

* refactor: (#55) PostForm 컴포넌트 self-closing-tag 로 변경

* chore: (#55) 불필요한 파일 삭제

* feat: (#55) API 통신 중 에러의 경우 에 대한 처리 추가

* refactor: (#55) error 객체를 props에 추가하여 에러 메시지를 보여주도록 수정

* refactor: (#55) styled component 변수명 수정

* refactor: (#55) onError에서  error 객체 콘솔에 출력

* feat: (#55) 구체적인 마감 시간에 대한 설명 컴포넌트 추가

* feat: (#55) input 또는 textarea를 제어하는 커스텀 훅 구현

* design: (#55) OptionListWrapper css 수정, 반응형 구현

* chore: (#55) 불필요한 코드 삭제

frontend/src/App.tsx

@@ -1,15 +1,22 @@
 import { RouterProvider } from 'react-router-dom';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ThemeProvider } from 'styled-components';
 
 import router from '@routes/router';
 
+import { GlobalStyle } from '@styles/globalStyle';
+import { theme } from '@styles/theme';
+
 const queryClient = new QueryClient();
 
 const App = () => (
- <QueryClientProvider client={queryClient}>
- <RouterProvider router={router} />
- </QueryClientProvider>
+ <ThemeProvider theme={theme}>
+ <GlobalStyle />
+ <QueryClientProvider client={queryClient}>
+ <RouterProvider router={router} />
+ </QueryClientProvider>
+ </ThemeProvider>
 );
 
 export default App;

frontend/src/api/jero/post.ts

@@ -0,0 +1,9 @@
+import { multiPutFetch, multiPostFetch } from '@utils/fetch';
+
+export const createPost = async (newPost: FormData) => {
+ return await multiPostFetch('/posts', newPost);
+};
+
+export const editPost = async (postId: number, updatedPost: FormData) => {
+ return await multiPutFetch(`/posts/${postId}`, updatedPost);
+};

frontend/src/components/PostForm/PostForm.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta } from '@storybook/react';
+
+import { PostInfo } from '@type/post';
+
+import { useCreatePost } from '@hooks/query/post/useCreatePost';
+import { useEditPost } from '@hooks/query/post/useEditPost';
+
+import PostForm from '.';
+
+const meta: Meta<typeof PostForm> = {
+ component: PostForm,
+};
+
+export default meta;
+
+const MOCK_DATA: PostInfo = {
+ postId: 1,
+ title: '당신의 최애 동물에 투표하세요!',
+ writer: { id: 15216, nickname: 'jero' },
+ content:
+ '한자로 견(犬)·구(狗) 등으로 표기한다. 포유류 중 가장 오래된 가축으로 거의 전세계에서 사육되며 약 400여 품종이 있다. 개는 이리·자칼(jackal) 등이 조상이라고 하는데, 이는 개와 교배하여 계대(繼代) 번식의 가능성이 있는 새끼를 낳을 수 있다는 것을 뜻한다. 즉 개에 이들의 혈액이 혼혈될 가능성이 있다는 것이다. 그러나 두개골이나 치아의 구조를 보면 개는 혼합된 것이 아니며, 또 그들 중의 어느 것에서 생긴 것이라고도 여겨지지 않는다. 아마도 개는 오스트레일리아에 야생하는 딩고(dingo)나 남아시아에 반야생상태로 서식하는 개와 흡사한, 절멸된 야생종에서 생긴 것으로 추측된다.',
+ category: [
+ { id: 13215, name: '음식' },
+ { id: 13217, name: '게임' },
+ { id: 13219, name: '연예' },
+ ],
+ startTime: '2023-07-18 12:40',
+ endTime: '2023-08-15 12:40',
+ voteInfo: {
+ selectedOptionId: 1,
+ allPeopleCount: 0,
+ options: [
+ {
+ id: Math.floor(Math.random() * 100000),
+ text: '햄스터가 세상을 구한다.',
+ imageUrl: '',
+ peopleCount: 0,
+ percent: 20,
+ },
+ {
+ id: Math.floor(Math.random() * 100000),
+ text: '강아지가 세상을 구한다.',
+ imageUrl: '',
+ peopleCount: 0,
+ percent: 10,
+ },
+ {
+ id: Math.floor(Math.random() * 100000),
+ text: '고양이가 세상을 구한다.',
+ imageUrl: 'https://source.unsplash.com/random',
+ peopleCount: 0,
+ percent: 10,
+ },
+ ],
+ },
+};
+
+export const NewPost = () => {
+ const { mutate, isError, error } = useCreatePost();
+ return (
+ <>
+ <PostForm mutate={mutate} isError={isError} error={error} />
+ </>
+ );
+};
+
+export const OldPost = () => {
+ const examplePostId = 1;
+ const { mutate, isError, error } = useEditPost(examplePostId);
+ return (
+ <>
+ <PostForm data={MOCK_DATA} mutate={mutate} isError={isError} error={error} />
+ </>
+ );
+};

frontend/src/components/PostForm/constants.ts

@@ -0,0 +1 @@
+export const DEADLINE_OPTION = ['10분', '30분', '1시간', '6시간', '1일'];