- {displayTitle}
- {!isTypingComplete && (
-
- )}
+ setIsTypingComplete(true)}
+ />
{timeToRead} min read
+ {isAdmin && (
+
+ )}
diff --git a/app/entities/post/write/BlogForm.tsx b/app/entities/post/write/BlogForm.tsx
index 3e0c1ac..96ed907 100644
--- a/app/entities/post/write/BlogForm.tsx
+++ b/app/entities/post/write/BlogForm.tsx
@@ -11,29 +11,20 @@ import CreateSeriesOverlayContainer from '@/app/entities/series/CreateSeriesOver
import UploadImageContainer from '@/app/entities/post/write/UploadImageContainer';
import PostMetadataForm from '@/app/entities/post/write/PostMetadataForm';
import usePost from '@/app/hooks/post/usePost';
+import LoadingSpinner from '../../common/Loading/LoadingSpinner';
const MDEditor = dynamic(() => import('@uiw/react-md-editor'), { ssr: false });
const BlogForm = () => {
const params = useSearchParams();
const slug = params.get('slug');
+ const isEditMode = Boolean(slug);
const {
- title,
- subTitle,
- submitLoading,
- seriesLoading,
- seriesId,
+ formData,
+ setFormData,
+ uiState,
seriesList,
- content,
- setTitle,
- setSubTitle,
- setContent,
- setSeriesId,
- setIsPrivate,
- isPrivate,
- tags,
- setTags,
uploadedImages,
setUploadedImages,
overwriteDraft,
@@ -41,35 +32,43 @@ const BlogForm = () => {
clearDraftInStore,
submitHandler,
postBody,
- errors,
handleLinkCopy,
} = usePost(slug || '');
const [createSeriesOpen, setCreateSeriesOpen] = useState(false);
- useBlockNavigate({ title, content: content || '' });
+ useBlockNavigate({ title: formData.title, content: formData.content || '' });
return (
+ setTitle(e.target.value)}
- title={title}
- onSubTitleChange={(e) => setSubTitle(e.target.value)}
- subTitle={subTitle}
- seriesLoading={seriesLoading}
+ onTitleChange={(e) => setFormData({ title: e.target.value })}
+ title={formData.title}
+ onSubTitleChange={(e) => setFormData({ subTitle: e.target.value })}
+ subTitle={formData.subTitle}
+ seriesLoading={uiState.seriesLoading}
series={seriesList}
callbackfn={(s) => ({
value: s._id,
label: s.title,
})}
- defaultSeries={setSeriesId}
- seriesId={seriesId}
+ defaultSeries={(value) => {
+ if (typeof value === 'function') {
+ setFormData({ seriesId: value(formData.seriesId) });
+ } else if (value !== undefined) {
+ setFormData({ seriesId: value });
+ }
+ }}
+ seriesId={formData.seriesId}
onClickNewSeries={() => setCreateSeriesOpen(true)}
onClickOverwrite={overwriteDraft}
clearDraft={clearDraftInStore}
- tags={tags}
- setTags={setTags}
- isPrivate={isPrivate}
- onPrivateChange={(isPrivate) => setIsPrivate(isPrivate)}
+ tags={formData.tags}
+ setTags={(tags: string[]) => setFormData({ tags })}
+ isPrivate={formData.isPrivate}
+ onPrivateChange={(isPrivate: boolean) => setFormData({ isPrivate })}
/>
{
setFormData({ content: value })}
height={500}
visibleDragbar={false}
/>
@@ -91,14 +90,30 @@ const BlogForm = () => {
setUploadedImages={setUploadedImages}
onClick={handleLinkCopy}
/>
-
+
+ )}
+
+ );
+};
+
+const LoadingBackdrop = ({ children }: { children?: React.ReactNode }) => {
+ return (
+ + 글 {slug ? '수정' : '작성'} +
+
+ 수정할 글을 불러오고 있습니다.
+
+ {children}
);
};
diff --git a/app/hooks/post/usePost.ts b/app/hooks/post/usePost.ts
index 3c5b1f4..b1cf8c8 100644
--- a/app/hooks/post/usePost.ts
+++ b/app/hooks/post/usePost.ts
@@ -10,19 +10,40 @@ import { useRouter } from 'next/navigation';
import useDraft from '@/app/hooks/post/useDraft';
import { validatePost } from '@/app/lib/utils/validate/validate';
+interface FormData {
+ title: string;
+ subTitle: string;
+ content: string | undefined;
+ seriesId: string;
+ tags: string[];
+ isPrivate: boolean;
+}
+
+interface UIState {
+ submitLoading: boolean;
+ seriesLoading: boolean;
+ errors: string[];
+}
+
const usePost = (slug = '') => {
- const [submitLoading, setSubmitLoading] = useState