[feat] #162 게시글 등록 페이지 / 게시글 수정 페이지

src/app/(board)/article/[articleid]/edit-article/page.tsx

@@ -1,3 +1,95 @@
-export default function EditArticlePage() {
-  return <div>EditArticlePage</div>;
-}
+'use client';
+import React, { useState, useEffect } from 'react';
+import ArticleForm from '@/app/(board)/article/_components/ArticleForm';
+import { useRouter } from 'next/navigation';
+import { ROUTES } from '@/constants/routes';
+import { getArticleByIdForClient } from '@/lib/apis/article';
+import { ArticleResponse } from '@/lib/apis/article/type';
+import { useArticleStore } from '@/store/useArticleStore';
+import { toast } from 'react-toastify';
+
+export default function EditArticlePage({
+  params,
+}: {
+  params: { articleid?: string };
+}) {
+  const router = useRouter();
+  const { setArticle } = useArticleStore();
+  const [article, setArticleState] = useState<ArticleResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchArticle = async () => {
+      setLoading(true);
+      try {
+        if (!params?.articleid) {
+          setError('게시글 ID가 제공되지 않았습니다.');
+          return;
+        }
+
+        const articleId = parseInt(params.articleid);
+        if (isNaN(articleId) || articleId <= 0) {
+          setError('유효하지 않은 게시글 ID입니다.');
+          return;
+        }
+
+        const response = await getArticleByIdForClient({ articleId });
+        if (response) {
+          setArticleState(response);
+        } else {
+          setError('게시글을 불러오는데 실패했습니다.');
+        }
+      } catch (err) {
+        if (err instanceof Error && err.message.includes('401')) {
+          setError('인증 정보가 유효하지 않습니다. 다시 로그인해 주세요.');
+          toast.error('인증 정보가 유효하지 않습니다. 다시 로그인해 주세요.');
+        } else {
+          setError('게시글을 불러오는데 실패했습니다.');
+          toast.error('게시글을 불러오는데 실패했습니다.');
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchArticle();
+  }, [params]);
+
+  if (loading) {
+    return <div>로딩 중...</div>;
+  }
+
+  if (error || !article) {
+    return <div>{error || '게시글을 찾을 수 없습니다.'}</div>;
+  }
+
+  const handleSubmit = async (
+    success: boolean,
+    message?: string,
+    articleId?: number
+  ) => {
+    if (success && articleId) {
+      const updatedArticle = await getArticleByIdForClient({ articleId });
+      if (updatedArticle) {
+        setArticle(updatedArticle);
+      }
+      router.push(ROUTES.ARTICLE(articleId));
+      router.refresh();
+    } else {
+      toast.error(message || '게시글 수정에 실패했습니다.');
+      router.push(ROUTES.HOME);
+    }
+  };
+
+  return (
+    <ArticleForm
+      title="게시글 수정"
+      initialTitle={article.title || ''}
+      initialContents={article.content || ''}
+      initialImageUrl={article.image || null}
+      articleId={parseInt(params.articleid ?? '0')}
+      onSubmit={handleSubmit}
+    />
+  );
+}

src/app/(board)/article/_components/ArticleForm.tsx

@@ -0,0 +1,123 @@
+'use client';
+import React, { useState } from 'react';
+import Button from '@/components/common/Button';
+import InputBase from '@/components/common/Input/InputBase';
+import InputTextarea from '@/components/common/Input/InputTextarea';
+import FileInput from '@/app/(board)/article/_components/FileInput';
+import { postArticle, patchArticleById } from '@/lib/apis/article';
+import { ArticleBody, ArticleResponse } from '@/lib/apis/article/type';
+import { toast } from 'react-toastify';
+
+interface ArticleFormProps {
+  title: string;
+  initialTitle?: string;
+  initialContents?: string;
+  initialImageUrl?: string | null;
+  articleId?: number;
+  onSubmit: (success: boolean, message?: string, articleId?: number) => void;
+}
+
+const ArticleForm = ({
+  title,
+  initialTitle = '',
+  initialContents = '',
+  initialImageUrl = null,
+  articleId,
+  onSubmit,
+}: ArticleFormProps) => {
+  const [formTitle, setTitle] = useState(initialTitle);
+  const [formContents, setContents] = useState(initialContents);
+  const [imageUrl, setImageUrl] = useState<string | null>(initialImageUrl);
+
+  const handleSubmit = async () => {
+    if (!formTitle.trim()) {
+      toast.error('제목은 필수로 작성해주세요.');
+      return;
+    }
+
+    if (!formContents.trim()) {
+      toast.error('내용은 필수로 작성해주세요.');
+      return;
+    }
+
+    const body: ArticleBody = {
+      title: formTitle.trim(),
+      content: formContents.trim(),
+      image: imageUrl,
+    };
+
+    try {
+      const response: ArticleResponse | null = articleId
+        ? await patchArticleById({ articleId, body })
+        : await postArticle({ body });
+
+      if (response && response.id) {
+        onSubmit(true, '게시글이 등록되었습니다.', response.id);
+        toast.success('게시글이 등록되었습니다.');
+      } else {
+        onSubmit(false, '게시글 처리에 실패했습니다.');
+        toast.error('게시글 처리에 실패했습니다.');
+      }
+    } catch {
+      onSubmit(false, '게시글 처리 중 오류가 발생했습니다.');
+      toast.error('게시글 처리 중 오류가 발생했습니다.');
+    }
+  };
+
+  return (
+    <div>
+      <section className="laptop:px-6 m-auto mt-14 mb-14 min-h-full max-w-[1248px] p-4">
+        <div className="mb-10 flex items-center justify-between">
+          <h2 className="tablet:text-xl-bold text-2lg-medium">{title}</h2>
+          <Button
+            variant="primary"
+            styleType="filled"
+            size="lg"
+            radius="sm"
+            className="tablet:min-w-[184px] tablet:opacity-100 tablet:inline hidden opacity-0"
+            onClick={handleSubmit}
+          >
+            등록
+          </Button>
+        </div>
+        <div className="border-gray-750/10 mb-10 w-full border-1"></div>
+        <InputBase
+          title="제목"
+          type="text"
+          value={formTitle}
+          placeholder="제목을 입력해주세요.*"
+          onChange={(e) => setTitle(e.target.value)}
+          className="w-full"
+          containerClassName="mt-3 h-[48px] bg-slate-800 mb-10"
+        />
+        <InputTextarea
+          title="내용"
+          variant="box"
+          value={formContents}
+          placeholder="내용을 입력해주세요.*"
+          onChange={(e) => setContents(e.target.value)}
+          className="h-[240px] w-full overflow-y-auto whitespace-normal"
+          inputClassName="mt-3 bg-slate-800 mb-10 h-[240px] px-6 py-4"
+        />
+        <FileInput
+          title="이미지"
+          initialUrl={imageUrl}
+          onChange={(url) => setImageUrl(url)}
+          containerClassName="mb-10"
+        />
+        <Button
+          variant="primary"
+          styleType="filled"
+          size="lg"
+          radius="sm"
+          className="tablet:opacity-0 tablet:hidden mb-10 block w-full opacity-100"
+          onClick={handleSubmit}
+        >
+          등록
+        </Button>
+      </section>
+    </div>
+  );
+};
+
+export default ArticleForm;

src/app/(board)/article/_components/FileInput.tsx

@@ -0,0 +1,124 @@
+'use client';
+import React, { useState } from 'react';
+import Image from 'next/image';
+import { useMutation } from '@tanstack/react-query';
+import { toast } from 'react-toastify';
+import IconRenderer from '@/components/common/Icons/IconRenderer';
+import Spinner from '@/components/common/Loading/Spinner';
+import postImage from '@/lib/apis/uploadImage';
+
+interface FileInputProps {
+  title?: string;
+  initialUrl?: string | null;
+  onChange?: (url: string | null) => void;
+  containerClassName?: string;
+  inputClassName?: string;
+  iconClassName?: string;
+}
+
+const FileInput = ({
+  title,
+  initialUrl = null,
+  onChange,
+  containerClassName = '',
+  inputClassName = '',
+  iconClassName = '',
+}: FileInputProps) => {
+  const [imgUrl, setImgUrl] = useState<string | null>(initialUrl);
+
+  const MAX_IMAGE_SIZE = 4.2 * 1024 * 1024;
+  const ALLOWED_TYPES = ['image/png', 'image/jpeg', 'image/jpg'];
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: (file: File) => postImage(file),
+    onSuccess: (url) => {
+      setImgUrl(url);
+      if (onChange) onChange(url);
+    },
+    onError: () => {
+      setImgUrl(null);
+      if (onChange) onChange(null);
+      toast.error('이미지 업로드 중 오류가 발생했습니다.');
+    },
+  });
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files ? e.target.files[0] : null;
+
+    if (!file) return;
+
+    if (!ALLOWED_TYPES.includes(file.type)) {
+      setImgUrl(null);
+      if (onChange) onChange(null);
+      e.target.value = '';
+      toast.error('이미지 파일만 업로드할 수 있습니다. (.png, .jpg, .jpeg)');
+      return;
+    }
+
+    if (file.size > MAX_IMAGE_SIZE) {
+      setImgUrl(null);
+      if (onChange) onChange(null);
+      e.target.value = '';
+      toast.error('이미지는 4.2MB 이하여야 합니다.');
+      return;
+    }
+
+    mutate(file);
+  };
+
+  const handleRemoveImage = () => {
+    setImgUrl(null);
+    if (onChange) onChange(null);
+    toast.success('이미지가 삭제되었습니다.');
+    const input = document.getElementById('file-input') as HTMLInputElement;
+    if (input) input.value = '';
+  };
+
+  return (
+    <div className="flex w-full flex-col">
+      {title && (
+        <label className="mb-2 block text-sm text-gray-400">{title}</label>
+      )}
+      <div
+        className={`tablet:h-[240px] tablet:w-[240px] relative flex h-[160px] w-[160px] cursor-pointer items-center justify-center rounded-xl bg-slate-800 transition-colors duration-300 hover:bg-slate-600 ${containerClassName}`}
+      >
+        {isPending ? (
+          <Spinner size={48} />
+        ) : imgUrl ? (
+          <div className="relative h-full w-full">
+            <Image
+              src={imgUrl}
+              alt="업로드된 이미지"
+              fill
+              sizes="240px"
+              className="rounded-xl object-cover opacity-50"
+            />
+            <IconRenderer
+              name="XIcon"
+              size={60}
+              className="hover:bg-danger/70 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full text-gray-400 transition-colors duration-300 hover:text-gray-200"
+              onClick={handleRemoveImage}
+            />
+          </div>
+        ) : (
+          <>
+            <input
+              id="file-input"
+              type="file"
+              accept="image/png,image/jpeg,image/jpg"
+              className={`absolute h-full w-full cursor-pointer opacity-0 ${inputClassName}`}
+              onChange={handleFileChange}
+            />
+            <IconRenderer
+              name="PlusIcon"
+              size={56}
+              className={`text-gray-400 ${iconClassName}`}
+            />
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default FileInput;

src/app/(board)/article/add-article/page.tsx

@@ -1,3 +1,23 @@
+'use client';
+import ArticleForm from '@/app/(board)/article/_components/ArticleForm';
+import { useRouter } from 'next/navigation';
+import { ROUTES } from '@/constants/routes';
+import { toast } from 'react-toastify';
+
 export default function AddArticlePage() {
-  return <div>AddArticlePage</div>;
-}
+  const router = useRouter();
+
+  const handleSubmit = (
+    success: boolean,
+    message?: string,
+    articleId?: number
+  ) => {
+    if (success && articleId) {
+      router.push(ROUTES.ARTICLE(articleId));
+    } else {
+      toast.error(message || '게시글 등록에 실패했습니다.');
+    }
+  };
+
+  return <ArticleForm title="게시글 쓰기" onSubmit={handleSubmit} />;
+}

src/app/(user)/mypage/_components/AccountUpdateButton.tsx

@@ -35,10 +35,10 @@ const AccountUpdateButton = ({ name, image }: AccountUpdateButtonProps) => {
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['user'] });
-      toast.success('계정 정보가 성공적으로 업데이트되었습니다.');
+      toast.success('개인 정보가 수정되었습니다.');
     },
     onError: () => {
-      toast.error('계정 정보 업데이트에 실패했습니다.');
+      toast.error('개인 정보 수정에 실패했습니다.');
     },
   });