Merge pull request #470 from KEEPER31337/feature/게시글_설정_및_업로드_모달_기능_#469

Feature/게시글 설정 및 업로드 모달 기능 #469
KEEPER31337 · Jul 24, 2023 · 7f8f536 · 7f8f536
2 parents 58b2c18 + 11f6887
commit 7f8f536
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 13 deletions.
diff --git a/src/api/dto.ts b/src/api/dto.ts
@@ -91,6 +91,20 @@ export interface CommentInfo {
   dislikeCount: number;
 }
 
+export interface UploadPostSettings {
+  isNotice?: boolean;
+  isSecret?: boolean;
+  isTemp?: boolean;
+  allowComment?: boolean;
+  password?: string;
+}
+
+export interface UploadPost extends UploadPostSettings {
+  title: string;
+  content: string;
+  categoryId: string;
+}
+
 export interface FileInfo {
   id: number;
   name: string;

diff --git a/src/pages/BoardWrite/BoardWrite.tsx b/src/pages/BoardWrite/BoardWrite.tsx
@@ -6,11 +6,13 @@ import StandardInput from '@components/Input/StandardInput';
 import StandardEditor from '@components/Editor/StandardEditor';
 import FileUploader from '@components/Uploader/FileUploader';
 import OutlinedButton from '@components/Button/OutlinedButton';
+import { UploadPostSettings } from '@api/dto';
 import SettingUploadModal from './Modal/SettingUploadModal';
 
 const BoardWrite = () => {
   const boardName = '자유게시판'; // TODO 게시판 이름 불러오기
   const editorRef = useRef<Editor>();
+  const [postSettingInfo, setPostSettingInfo] = useState<UploadPostSettings | null>(null);
   const [settingModalOpen, setSettingModalOpen] = useState(false);
 
   const handleCompleteButtonClick = () => {
@@ -49,7 +51,12 @@ const BoardWrite = () => {
         <OutlinedButton>임시저장</OutlinedButton>
         <OutlinedButton onClick={handleCompleteButtonClick}>작성완료</OutlinedButton>
       </div>
-      <SettingUploadModal open={settingModalOpen} onClose={handleSettingModalClose} />
+      <SettingUploadModal
+        open={settingModalOpen}
+        onClose={handleSettingModalClose}
+        postSettingInfo={postSettingInfo}
+        setPostSettingInfo={setPostSettingInfo}
+      />
     </div>
   );
 };

diff --git a/src/pages/BoardWrite/Modal/SettingUploadModal.tsx b/src/pages/BoardWrite/Modal/SettingUploadModal.tsx
@@ -3,19 +3,30 @@ import { Checkbox, FormControlLabel, FormGroup } from '@mui/material';
 import StandardInput from '@components/Input/StandardInput';
 import ActionModal from '@components/Modal/ActionModal';
 import ImageUploader from '@components/Uploader/ImageUploader';
+import { UploadPostSettings } from '@api/dto';
 
 interface SettingUploadModalProps {
   open: boolean;
   onClose: () => void;
+  postSettingInfo: UploadPostSettings | null;
+  setPostSettingInfo: React.Dispatch<React.SetStateAction<UploadPostSettings | null>>;
 }
 
-const SettingUploadModal = ({ open, onClose }: SettingUploadModalProps) => {
+const SettingUploadModal = ({ open, onClose, postSettingInfo, setPostSettingInfo }: SettingUploadModalProps) => {
   const [, setThumbnail] = useState<Blob>();
 
   const handleActionButonClick = () => {
     // TODO
   };
 
+  const handleCheckBoxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, checked } = e.target;
+    setPostSettingInfo((prev) => ({
+      ...prev,
+      [name]: checked,
+    }));
+  };
+
   return (
     <ActionModal
       open={open}
@@ -29,20 +40,40 @@ const SettingUploadModal = ({ open, onClose }: SettingUploadModalProps) => {
       </div>
       <FormGroup>
         <span>
-          <FormControlLabel control={<Checkbox />} label="공지" />
-          <FormControlLabel control={<Checkbox />} label="댓글 허용" />
+          <FormControlLabel
+            control={
+              <Checkbox checked={Boolean(postSettingInfo?.isNotice)} name="isNotice" onChange={handleCheckBoxChange} />
+            }
+            label="공지"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={Boolean(postSettingInfo?.allowComment)}
+                name="allowComment"
+                onChange={handleCheckBoxChange}
+              />
+            }
+            label="댓글 허용"
+          />
         </span>
         <span className="flex items-center">
-          <FormControlLabel control={<Checkbox />} label="비밀글" />
-          {/* TODO 비밀글 체크 시에만 렌더링 되도록 처리 */}
-          <StandardInput
-            value=""
-            type="password"
-            placeholder="게시글 비밀번호"
-            onChange={() => {
-              // TODO
-            }}
+          <FormControlLabel
+            control={
+              <Checkbox checked={Boolean(postSettingInfo?.isSecret)} name="isSecret" onChange={handleCheckBoxChange} />
+            }
+            label="비밀글"
           />
+          {postSettingInfo?.isSecret && (
+            <StandardInput
+              value=""
+              type="password"
+              placeholder="게시글 비밀번호"
+              onChange={() => {
+                // TODO
+              }}
+            />
+          )}
         </span>
       </FormGroup>
     </ActionModal>