Merge pull request #60 from hanguswls/feature/4-save-post

글 저장 기능 구현 (#4)

Author: hanguswls

FRONT/src/pages/CreatePost/CreatePost.tsx

@@ -8,26 +8,54 @@ import Button from "../../components/Button/Button";
 import NicknamePasswordInput from "./components/NicknamePasswordInput/NicknamePasswordInput";
 import TagWrapper from "./components/TagWrapper/TagWrapper";
 import MarkdownEditor from "./components/MarkdownEditor/MarkdownEditor";
+import useCreatePost from "./hooks/useCreatePost";
+import useMarkdownEditor from "./hooks/useMarkdownEditor";
 
 function CreatePost() {
+  const { post, handlePostChange, handleSaveButtonClick } = useCreatePost();
+  const { handleIconButtonClick, handleFileUpload, textareaRef, fileInputRef } = useMarkdownEditor({
+    initialMarkdown: post.content,
+    imageIds: post.imageIds,
+    onContentChange: (value: string) => handlePostChange('content', value),
+    onImageIdsChange: (value: number[]) => handlePostChange('imageIds', value),
+  });
   const { data } = useQuery<ApiResponse<Category[]>>({
     queryKey: ["categories"],
     queryFn: () => fetchCategories(),
   });
 
   return (
     <CreatePostContainer>
-      <CategorySelector categories={data?.data as Category[]} />
-      <PostTitleInput placeholder="제목을 입력하세요" />
-      <MarkdownEditor />
+      <CategorySelector
+        categories={data?.data as Category[]}
+        onCategorySelect={(id) => handlePostChange('categoryId', id)}
+      />
+      <PostTitleInput
+        placeholder="제목을 입력하세요"
+        value={post.title}
+        onChange={(e) => handlePostChange('title', e.target.value)} 
+      />
+      <MarkdownEditor
+        markdown={post.content}
+        onChange={(value) => handlePostChange('content', value)}
+        onIconButtonClick={handleIconButtonClick}
+        textareaRef={textareaRef}
+        fileInputRef={fileInputRef}
+        onFileUpload={handleFileUpload}
+      />
       <TagWrapper/>
-      <NicknamePasswordInput />
+      <NicknamePasswordInput
+        author={post.author}
+        password={post.password}
+        onAuthorChange={(value) => handlePostChange('author', value)}
+        onPasswordChange={(value) => handlePostChange('password', value)}
+      />
       <ButtonGroup>
         <Button content='임시저장' type='Primary' handleButtonClick={()=>{}} />
-        <Button content='저장하기' type='Primary' handleButtonClick={()=>{}} />
+        <Button content='저장' type='Primary' handleButtonClick={handleSaveButtonClick} />
       </ButtonGroup>
     </CreatePostContainer>
   );
 }
 
-export default CreatePost;
+export default CreatePost;

FRONT/src/pages/CreatePost/components/CategorySelector/CategorySelector.tsx

@@ -11,12 +11,18 @@ import {
 } from "./CategorySelector.style";
 import { Category } from "../../../../types/category";
 
-function CategorySelector({ categories }: { categories: Category[] }) {
+interface CategorySelectorProps {
+  categories: Category[],
+  onCategorySelect: (id: number) => void,
+}
+
+function CategorySelector({ categories, onCategorySelect}: CategorySelectorProps) {
   const [selectedCategory, setSelectedCategory] = useState<Category | null>(null);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
   const handleSelect = (category: Category) => {
     setSelectedCategory(category);
+    if (category.id) onCategorySelect(category.id);
     setIsDropdownOpen(false);
     console.log(category.id);
   };

FRONT/src/pages/CreatePost/components/MarkdownEditor/MarkdownEditor.tsx

@@ -4,18 +4,25 @@ import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import CodeBlock from "./CodeBlock";
 import ToolBar from "../ToolBar/ToolBar";
-import useMarkdownEditor from "./useMarkdownEditor";
 
-function MarkdownEditor() {
-  const {
-    markdown,
-    handleMarkdownChange,
-    handleIconButtonClick,
-    handleFileUpload,
-    textareaRef,
-    fileInputRef,
-  } = useMarkdownEditor();
-  
+interface MarkdownEditorProps {
+  markdown: string,
+  textareaRef: React.RefObject<HTMLTextAreaElement>,
+  fileInputRef: React.RefObject<HTMLInputElement>,
+  onChange: (value: string) => void,
+  onIconButtonClick: (action: string) => void,
+  onFileUpload: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+function MarkdownEditor({
+  markdown,
+  onChange,
+  onIconButtonClick,
+  textareaRef,
+  fileInputRef,
+  onFileUpload,
+}: MarkdownEditorProps) {
+
   const markdownGrammar = `# 제목\n## 부제목\n*기울임* _기울임_\n**굵게** __굵게__\n[링크](https://www.google.com)\n![이미지](이미지 주소)\n> 인용문\n* 순서가 없는 목록\n- 순서가 없는 목록\n1. 순서가 있는 목록\n1) 순서가 있는 목록\n띄어쓰기 3번 하고 목록 => 하위목록\n--- 수평선 *** 수평선\n\`한 줄 코드\`\n\`\`\`\n코드블럭\n\`\`\`\n여러 줄의 공백\n&nbsp;\n&nbsp;\n`;
   const [viewMode, setViewMode] = useState<'write' | 'preview'>('write');
 
@@ -24,14 +31,14 @@ function MarkdownEditor() {
       <ToolBar
         viewMode={viewMode}
         setViewMode={setViewMode}
-        handleIconButtonClick={handleIconButtonClick}
+        onIconButtonClick={onIconButtonClick}
         handleAddPhotoClick={() => fileInputRef.current?.click()}
       />
       {viewMode === "write" ? (
         <Editor
           ref={textareaRef}
           value={markdown}
-          onChange={(e) => handleMarkdownChange(e.target.value)}
+          onChange={(e) => onChange(e.target.value)}
           placeholder={markdownGrammar}
         />
       ) : (
@@ -53,7 +60,7 @@ function MarkdownEditor() {
         accept="image/*"
         style={{ display: "none" }}
         ref={fileInputRef}
-        onChange={handleFileUpload}
+        onChange={onFileUpload}
       />
     </Container>
   );

FRONT/src/pages/CreatePost/components/MarkdownEditor/useMarkdownEditor.ts

@@ -1,22 +1,27 @@
-import { useState } from 'react';
 import { InputContainer, StyledInput } from './NicknamePasswordInput.style';
 
-function NicknamePasswordInput() {
-  const [nickname, setNickname] = useState('');
-  const [password, setPassword] = useState('');
+interface NicknamePasswordInput {
+  author: string,
+  password: string,
+  onAuthorChange: (value: string) => void;
+  onPasswordChange: (value: string) => void;
+}
 
+function NicknamePasswordInput({author, password, onAuthorChange, onPasswordChange}: NicknamePasswordInput) {
   return (
     <InputContainer>
       <StyledInput
         placeholder="닉네임을 입력하세요"
-        value={nickname}
-        onChange={(e) => setNickname(e.target.value)}
+        value={author}
+        onChange={(e) => onAuthorChange(e.target.value)}
+        required
       />
       <StyledInput
         type="password"
         placeholder="비밀번호를 입력하세요"
         value={password}
-        onChange={(e) => setPassword(e.target.value)}
+        onChange={(e) => onPasswordChange(e.target.value)}
+        required
       />
     </InputContainer>
   );

FRONT/src/pages/CreatePost/components/NicknamePasswordInput/NicknamePasswordInput.tsx

@@ -10,34 +10,34 @@ import linkIcon from "@_assets/icons/toolbar/link.svg";
 type ToolBarProps = {
   viewMode: "write" | "preview";
   setViewMode: (mode: "write" | "preview") => void;
-  handleIconButtonClick: (action: string) => void;
+  onIconButtonClick: (action: string) => void;
   handleAddPhotoClick: () => void;
 };
 
-function ToolBar({ viewMode, setViewMode, handleIconButtonClick, handleAddPhotoClick }: ToolBarProps) {
+function ToolBar({ viewMode, setViewMode, onIconButtonClick, handleAddPhotoClick }: ToolBarProps) {
   return (
     <ToolBarContainer>
       <Group>
-        <IconButton onClick={() => handleIconButtonClick("bold")}>
+        <IconButton onClick={() => onIconButtonClick("bold")}>
           <img src={boldIcon} alt="굵게" />
         </IconButton>
-        <IconButton onClick={() => handleIconButtonClick("italic")}>
+        <IconButton onClick={() => onIconButtonClick("italic")}>
           <img src={italicIcon} alt="기울이기" />
         </IconButton>
-        <IconButton onClick={() => handleIconButtonClick("underline")}>
+        <IconButton onClick={() => onIconButtonClick("underline")}>
           <img src={underlineIcon} alt="밑줄" />
         </IconButton>
         <Separator />
         <IconButton onClick={handleAddPhotoClick}>
           <img src={addPhotoIcon} alt="사진 추가" />
         </IconButton>
-        <IconButton onClick={() => handleIconButtonClick("quote")}>
+        <IconButton onClick={() => onIconButtonClick("quote")}>
           <img src={quoteIcon} alt="인용문 추가" />
         </IconButton>
-        <IconButton onClick={() => handleIconButtonClick("code")}>
+        <IconButton onClick={() => onIconButtonClick("code")}>
           <img src={codeIcon} alt="코드 추가" />
         </IconButton>
-        <IconButton onClick={() => handleIconButtonClick("link")}>
+        <IconButton onClick={() => onIconButtonClick("link")}>
           <img src={linkIcon} alt="링크 추가" />
         </IconButton>
       </Group>

FRONT/src/pages/CreatePost/components/ToolBar/ToolBar.tsx

@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { createPost } from '@_services/createPostApi';
+import { useNavigate } from 'react-router-dom';
+import { CreatePostParams } from '../../../types/post';
+
+function useCreatePost() {
+  const navigate = useNavigate();
+  const [post, setPost] = useState<CreatePostParams>({
+    title: '',
+    content: '',
+    author: '',
+    password: '',
+    categoryId: 0,
+    hashTagIds: [],
+    imageIds: [],
+  });
+
+  const handlePostChange = (field: keyof CreatePostParams, value: string | number | number[]) => {
+    setPost((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const handleMarkdownChange = (markdown: string) => {
+    handlePostChange('content', markdown);
+  };
+
+  const mutation = useMutation({
+    mutationFn: (newPost: CreatePostParams) => createPost(newPost),
+    onSuccess: () => navigate('/'),
+    onError: () =>  alert("저장에 실패하였습니다.")
+  });
+
+  const validateRequiredFields = () => {
+    const missingFields = [];
+
+    if (!post['title']) missingFields.push('제목');
+    if (!post['content']) missingFields.push('내용');
+    if (!post['author']) missingFields.push('닉네임');
+    if (!post['password']) missingFields.push('비밀번호');
+    if (!post['categoryId']) missingFields.push('카테고리');
+
+    if (missingFields.length > 0) {
+      alert(`${missingFields.join(' ,')} 항목을 입력해주세요`);
+      return false;
+    }
+    return true
+  }
+
+  const handleSaveButtonClick = () => {
+    if (validateRequiredFields()) {
+      mutation.mutate(post);
+    }
+  };
+
+  return {
+    post,
+    handlePostChange,
+    handleMarkdownChange,
+    handleSaveButtonClick,
+  };
+};
+
+export default useCreatePost;