diff --git a/src/App.js b/src/App.js
index 27eafcb..1242da6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,18 @@
 import React from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import Header from './components/Header';  // Adjust the path if necessary
-import Home from './pages/Home';            // Adjust the path if necessary
-import Articles from './pages/Articles';      // Adjust the path if necessary
+import Header from './components/Header';
+import Home from './pages/Home';
+import Articles from './pages/Articles';
 import ArticleView from './pages/ArticleView'
 import Editor from './pages/Editor'
 import Footer from './components/Footer'
 import FileUploader from './pages/Uploader';
 
 import './index.css'
+import AdminArticleManager from './pages/Admin';
+import ProtectedRoute from './components/ProctedRoute';
+import OAuthTokenHandler from './pages/AuthTokenHandler'
+
 function App() {
   return (
     <Router>
@@ -19,7 +23,23 @@ function App() {
           <Route path="/" element={<Home />} />
           <Route path="/article_list" element={<Articles />} />
           <Route path="/article/:id" element={<ArticleView />} />
-          <Route path="/editor/:id" element={<Editor />} />
+          <Route path="/oauth_client" element={<OAuthTokenHandler/>} />
+          <Route
+            path="/editor/:id"
+            element={
+              <ProtectedRoute>
+                <Editor />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/admin"
+            element={
+              <ProtectedRoute>
+                <AdminArticleManager />
+              </ProtectedRoute>
+            }
+          />
         </Routes>
         <Footer />
       </div>
diff --git a/src/assets/profile.png b/src/assets/profile.png
index 1175b60..6f258bf 100644
Binary files a/src/assets/profile.png and b/src/assets/profile.png differ
diff --git a/src/components/CategoryPosts.js b/src/components/CategoryPosts.js
index 83636cb..102dbc3 100644
--- a/src/components/CategoryPosts.js
+++ b/src/components/CategoryPosts.js
@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import PostCard from './PostCard';
 import LoadingSpinner from './LoadingIcon';
 import { API_BASE_URL } from '../__CONF__';
+import LoadingFailSpinner from './ErrorIcon';
 
 function CategoryPosts({ size, mode }) {
   const [selectedCategory, setSelectedCategory] = useState('전체');
@@ -10,6 +11,7 @@ function CategoryPosts({ size, mode }) {
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
   const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
   const categoryRef = useRef(null);
 
   const defaultCategories = ['전체', '백엔드', '프론트엔드', 'CI/CD', '개발 지식'];
@@ -25,7 +27,7 @@ function CategoryPosts({ size, mode }) {
 
   const fetchCategories = async () => {
     try {
-      const response = await fetch(API_BASE_URL+'/categories');
+      const response = await fetch(API_BASE_URL + '/categories');
       const data = await response.json();
       setCategories(['전체', ...data.map(category => category.category_name)]);
     } catch (error) {
@@ -38,15 +40,16 @@ function CategoryPosts({ size, mode }) {
     try {
       let url;
       if (selectedCategory === '전체') {
-        url = API_BASE_URL+`/articles?page=${currentPage}&size=${size}`;
+        url = API_BASE_URL + `/articles?page=${currentPage}&size=${size}`;
       } else {
-        url = API_BASE_URL+`/search/categories/${selectedCategory}?page=${currentPage}&size=${size}`;
+        url = API_BASE_URL + `/search/categories/${selectedCategory}?page=${currentPage}&size=${size}`;
       }
       const response = await fetch(url);
       const data = await response.json();
       setPosts(data.articles);
       setTotalPages(data.totalPage);
     } catch (error) {
+      setError('카테고리를 불러오는 데 실패했습니다.');
       console.error('Failed to fetch posts:', error);
     } finally {
       setLoading(false);
@@ -67,6 +70,9 @@ function CategoryPosts({ size, mode }) {
     setCurrentPage(1);
   };
 
+  if (loading) return <LoadingSpinner/>;
+  if (error) return <LoadingFailSpinner message='서버 통신 문제가 발생했어요'/>;
+
   return (
     <div>
       <h2 className="text-2xl font-bold mt-6 mb-6">카테고리별 게시물</h2>
@@ -94,7 +100,7 @@ function CategoryPosts({ size, mode }) {
       </div>
 
       {loading ? (
-        <LoadingSpinner/>
+        <LoadingSpinner />
       ) : (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
           {posts.map(post => (
diff --git a/src/components/ErrorIcon.js b/src/components/ErrorIcon.js
new file mode 100644
index 0000000..6d33c75
--- /dev/null
+++ b/src/components/ErrorIcon.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+const LoadingFailSpinner = ({ message = '알 수 없는 문제가 발생했어요' }) => {
+  return (
+    <div className="flex flex-col items-center justify-center h-[300px]">
+      <div className="relative w-20 h-20 mb-6">
+        <div className="absolute inset-0 bg-red-500 rounded-full"></div>
+        <div className="absolute inset-0 flex items-center justify-center">
+          <svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </div>
+      </div>
+      <p className="text-lg font-medium text-red-600 mb-4">{message}</p>
+    </div>
+  );
+};
+
+export default LoadingFailSpinner;
\ No newline at end of file
diff --git a/src/components/LoadingIcon.js b/src/components/LoadingIcon.js
index 0532f1e..c3854b7 100644
--- a/src/components/LoadingIcon.js
+++ b/src/components/LoadingIcon.js
@@ -1,26 +1,21 @@
 import React from 'react';
 
-const Loader = ({ size = 'md' }) => {
+const LoadingSpinner = ({ size = 'md', message = '로딩 중이에요!' }) => {
   const sizeClasses = {
-    sm: 'w-5 h-5 border-2',
-    md: 'w-8 h-8 border-3',
-    lg: 'w-12 h-12 border-4',
+    sm: 'w-12 h-12',
+    md: 'w-16 h-16',
+    lg: 'w-20 h-20',
   };
 
   return (
-    <div className="flex justify-center items-center">
-      <div
-        className={`${sizeClasses[size]} border-t-blue-500 border-r-blue-500 border-b-blue-400 border-l-blue-200 rounded-full animate-spin`}
-      ></div>
+    <div className="flex flex-col items-center justify-center h-[300px]">
+      <div className={`relative ${sizeClasses[size]}`}>
+        <div className="absolute inset-0 bg-blue-500 rounded-full opacity-20"></div>
+        <div className="absolute inset-0 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+      </div>
+      <p className="mt-6 text-lg font-medium text-blue-600">{message}</p>
     </div>
   );
 };
 
-export default function LoadingSpinner() {
-  return (
-    <div className="flex flex-col items-center justify-center h-screen bg-gray-100">
-      <Loader size="lg" />
-      <p className="mt-4 text-gray-600 font-medium">🚗 로딩 중이에요!</p>
-    </div>
-  );
-}
\ No newline at end of file
+export default LoadingSpinner;
\ No newline at end of file
diff --git a/src/components/ProctedRoute.js b/src/components/ProctedRoute.js
new file mode 100644
index 0000000..d94728f
--- /dev/null
+++ b/src/components/ProctedRoute.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import AuthHook from '../hook/AuthHook';
+import LoadingSpinner from './LoadingIcon';
+
+const ProtectedRoute = ({ children }) => {
+    const { isAuthenticated, isLoading } = AuthHook();
+    const location = useLocation();
+
+    if (isLoading) {
+        return <LoadingSpinner />;
+    }
+
+    if (!isAuthenticated) {
+        window.location.href = `https://id.nanu.cc/oauth?app_id=6b3bac76-bde8-4681-8c55-0e915d1c03b6&app_name=%EB%8F%99%ED%98%84%20%EA%B8%B0%EC%88%A0%20%EB%B8%94%EB%A1%9C%EA%B7%B8&redirect_uri=https://donghyun.cc/oauth_client`;
+        return null;
+    }
+
+    return children;
+};
+
+export default ProtectedRoute;
diff --git a/src/components/RecentPosts.js b/src/components/RecentPosts.js
index 4820c1f..01f911f 100644
--- a/src/components/RecentPosts.js
+++ b/src/components/RecentPosts.js
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import PostCard from './PostCard';
 import LoadingSpinner from './LoadingIcon';
 import { API_BASE_URL } from '../__CONF__';
+import LoadingFailSpinner from './ErrorIcon';
 
 function RecentPosts({ size }) {
   const [recents, setRecents] = useState([]);
@@ -28,7 +29,7 @@ function RecentPosts({ size }) {
   };
 
   if (loading) return <LoadingSpinner/>;
-  if (error) return <div>Error: {error}</div>;
+  if (error) return <LoadingFailSpinner message='서버 통신 문제가 발생했어요'/>;
 
   return (
     <div>
diff --git a/src/hook/AuthHook.js b/src/hook/AuthHook.js
new file mode 100644
index 0000000..6a7bc3d
--- /dev/null
+++ b/src/hook/AuthHook.js
@@ -0,0 +1,46 @@
+import { useState, useEffect, useCallback } from 'react';
+import OAuthSDK from '../nanuid_auth_sdk'
+
+const useAuthCheck = () => {
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+    const [token, setToken] = useState(null);
+
+    const refreshTokenAndUpdate = useCallback(async () => {
+        const newAccessToken = await OAuthSDK.refreshToken();
+        if (newAccessToken) {
+            setToken(newAccessToken);
+            setIsAuthenticated(true);
+        } else {
+            setToken(null);
+            setIsAuthenticated(false);
+        }
+        return newAccessToken;
+    }, []);
+
+    useEffect(() => {
+        const checkAuth = async () => {
+            setIsLoading(true);
+            const accessToken = OAuthSDK.getAccessToken();
+
+            if (accessToken) {
+                const isExpired = await OAuthSDK.isTokenExpired(accessToken);
+                if (isExpired) {
+                    await refreshTokenAndUpdate(); 
+                } else {
+                    setIsAuthenticated(true);
+                    setToken(accessToken);
+                }
+            } else {
+                await refreshTokenAndUpdate(); 
+            }
+            setIsLoading(false);
+        };
+
+        checkAuth();
+    }, [refreshTokenAndUpdate]);
+
+    return { isAuthenticated, isLoading, token, refreshTokenAndUpdate };
+};
+
+export default useAuthCheck;
diff --git a/src/nanuid_auth_sdk.js b/src/nanuid_auth_sdk.js
new file mode 100644
index 0000000..906cd95
--- /dev/null
+++ b/src/nanuid_auth_sdk.js
@@ -0,0 +1,73 @@
+import axios from 'axios';
+const AUTH_BASE_URL = 'https://auth.nanu.cc';
+
+export const OAuthSDK = {
+    getAccessToken: () => {
+        return document.cookie.replace(/(?:(?:^|.*;\s*)ACCESS\s*=\s*([^;]*).*$)|^.*$/, "$1");
+    },
+
+    setAccessToken: (token, days = 1) => {
+        const expires = new Date(Date.now() + days * 864e5).toUTCString();
+        document.cookie = `ACCESS=${encodeURIComponent(token)}; expires=${expires}; path=/`;
+    },
+
+    getRefreshToken: () => {
+        return localStorage.getItem('REFRESH');
+    },
+
+    setRefreshToken: (token) => {
+        localStorage.setItem('REFRESH', token);
+    },
+
+    isTokenExpired: async (token) => {
+        try {
+            const response = await axios.post(`${AUTH_BASE_URL}/api/mypage`, null, {
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+            return response.status !== 200;
+        } catch (error) {
+            console.error('Error validating token:', error);
+            return true;
+        }
+    },
+
+    refreshToken: async () => {
+        const refreshToken = OAuthSDK.getRefreshToken();
+        if (refreshToken) {
+            try {
+                const response = await axios.post(`${AUTH_BASE_URL}/api/oauth/refresh`, { refresh_token: refreshToken });
+                const newAccessToken = response.data.access_token;
+                OAuthSDK.setAccessToken(newAccessToken);
+                return newAccessToken;
+            } catch (error) {
+                console.error('Token refresh failed:', error);
+                return null;
+            }
+        }
+        return null;
+    },
+
+    checkAuthentication: async () => {
+        const accessToken = OAuthSDK.getAccessToken();
+        if (accessToken) {
+            const isExpired = await OAuthSDK.isTokenExpired(accessToken);
+            if (isExpired) {
+                return await OAuthSDK.refreshToken();
+            }
+            return accessToken;
+        }
+        return await OAuthSDK.refreshToken();
+    },
+
+    logout: () => {
+        document.cookie = 'ACCESS=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+        localStorage.removeItem('REFRESH');
+    },
+
+    setTokens: (accessToken, refreshToken, days = 1) => {
+        OAuthSDK.setAccessToken(accessToken, days);
+        OAuthSDK.setRefreshToken(refreshToken);
+    }
+};
+
+export default OAuthSDK;
\ No newline at end of file
diff --git a/src/pages/Admin.js b/src/pages/Admin.js
new file mode 100644
index 0000000..90ee619
--- /dev/null
+++ b/src/pages/Admin.js
@@ -0,0 +1,166 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import axios from 'axios';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import { Link, useNavigate } from 'react-router-dom';
+import { API_BASE_URL } from '../__CONF__';
+import OAuthSDK from '../nanuid_auth_sdk';
+import LoadingSpinner from '../components/LoadingIcon';
+
+const AdminArticleManager = () => {
+    const [articles, setArticles] = useState([]);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [totalPages, setTotalPages] = useState(1);
+    const [selectedArticle, setSelectedArticle] = useState(null);
+    const navigate = useNavigate();
+
+    const verifyAndFetchArticles = useCallback(async () => {
+        try {
+            const accessToken = await OAuthSDK.checkAuthentication();
+            if (!accessToken) {
+                toast.error('세션이 만료되었습니다. 다시 로그인해 주세요.');
+                navigate('/');
+                return;
+            }
+            await fetchArticles(accessToken);
+        } catch (error) {
+            toast.error('기사를 가져오는 중 오류가 발생했습니다.');
+        }
+    }, [navigate]);
+
+    const fetchArticles = useCallback(async (accessToken) => {
+        try {
+            const response = await axios.get(`${API_BASE_URL}/admin/articles`, {
+                params: { page: currentPage, size: 8 },
+                headers: { 'Authorization': `Bearer ${accessToken}` }
+            });
+            setArticles(response.data.articles);
+            setTotalPages(response.data.totalPage);
+        } catch (error) {
+            console.error('기사 가져오기 오류:', error);
+            throw error;
+        }
+    }, [currentPage]);
+
+
+    useEffect(() => {
+        verifyAndFetchArticles();
+    }, [verifyAndFetchArticles]);
+
+
+    const handleUpdate = async () => {
+        try {
+            const accessToken = await OAuthSDK.checkAuthentication();
+            if (!accessToken) return navigate('/');
+
+            await axios.put(`${API_BASE_URL}/admin/articles/${selectedArticle.article_id}`, {
+                article_name: selectedArticle.article_name,
+                thumbnail_url: selectedArticle.thumbnail_url,
+                article_data_url: selectedArticle.article_data_url,
+                article_view_mode: selectedArticle.article_view_mode,
+                categories: selectedArticle.categorys.map(cat => cat.category_id)
+            }, {
+                headers: { 'Authorization': `Bearer ${accessToken}` }
+            });
+            toast.success('정상적으로 수정을 완료했어요!');
+            setSelectedArticle(null);
+            fetchArticles(accessToken);
+        } catch (error) {
+            toast.error('오류가 발생했어요');
+        }
+    };
+
+    const handleDelete = async (articleId) => {
+        if (window.confirm('정말로 게시글을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다!')) {
+            try {
+                const accessToken = await OAuthSDK.checkAuthentication();
+                if (!accessToken) return navigate('/');
+
+                await axios.delete(`${API_BASE_URL}/admin/articles/${articleId}`, {
+                    headers: { 'Authorization': `Bearer ${accessToken}` }
+                });
+                toast.success('정상적으로 삭제를 완료했어요!');
+                fetchArticles(accessToken);
+            } catch (error) {
+                toast.error('오류가 발생했어요');
+            }
+        }
+    };
+
+    const handlePageChange = (newPage) => {
+        setCurrentPage(newPage);
+    };
+
+    if (!articles.length) {
+        return <LoadingSpinner />;
+    }
+
+    return (
+        <div className="container mx-auto px-4 py-8 mt-16">
+            <ToastContainer />
+            <h1 className="text-2xl font-bold mb-4">게시글 관리</h1>
+            <Link to="/editor/new" className="mb-4 inline-block bg-green-500 text-white px-4 py-2 rounded">
+                새 게시글 작성하기
+            </Link>
+
+            {selectedArticle && (
+                <div className="bg-gray-100 p-4 mb-4 rounded">
+                    <h2 className="text-xl font-bold mb-2">게시글 수정하기</h2>
+                    <input
+                        className="w-full p-2 mb-2 border rounded"
+                        value={selectedArticle.article_name}
+                        onChange={(e) => setSelectedArticle({ ...selectedArticle, article_name: e.target.value })}
+                        placeholder="Article Name"
+                    />
+                    <input
+                        className="w-full p-2 mb-2 border rounded"
+                        value={selectedArticle.thumbnail_url}
+                        onChange={(e) => setSelectedArticle({ ...selectedArticle, thumbnail_url: e.target.value })}
+                        placeholder="Thumbnail URL"
+                    />
+                    <input
+                        className="w-full p-2 mb-2 border rounded"
+                        value={selectedArticle.article_data_url}
+                        onChange={(e) => setSelectedArticle({ ...selectedArticle, article_data_url: e.target.value })}
+                        placeholder="Article Data URL"
+                    />
+                    <select
+                        className="w-full p-2 mb-2 border rounded"
+                        value={selectedArticle.article_view_mode}
+                        onChange={(e) => setSelectedArticle({ ...selectedArticle, article_view_mode: e.target.value })}
+                    >
+                        <option value="PUBLIC">공개</option>
+                        <option value="PRIVATE">비공개</option>
+                    </select>
+                    <button onClick={handleUpdate} className="bg-blue-500 text-white px-4 py-2 rounded mr-2">업데이트하기</button>
+                    <button onClick={() => setSelectedArticle(null)} className="bg-gray-500 text-white px-4 py-2 rounded">취소</button>
+                </div>
+            )}
+
+            {articles.map((article) => (
+                <div key={article.article_id} className="bg-gray-50 rounded-xl px-8 pt-6 pb-8 mb-4">
+                    <h2 className="text-xl font-bold mb-2">{article.article_name}</h2>
+                    <p>최초 게시 일자 : {new Date(article.article_date).toLocaleString()}</p>
+                    <p>현재 공개 여부 : {article.article_view_mode}</p>
+                    <p>카테고리 : {article.categorys.map(cat => cat.category_name).join(', ')}</p>
+                    <button onClick={() => setSelectedArticle(article)} className="bg-yellow-500 text-white px-4 py-2 rounded mr-2 mt-2">정보 수정하기</button>
+                    <button onClick={() => handleDelete(article.article_id)} className="bg-red-500 text-white px-4 py-2 rounded mt-2">삭제하기</button>
+                </div>
+            ))}
+            
+            <div className="flex justify-center mt-4">
+                {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+                    <button
+                        key={page}
+                        onClick={() => handlePageChange(page)}
+                        className={`mx-1 px-3 py-1 rounded ${currentPage === page ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
+                    >
+                        {page}
+                    </button>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default AdminArticleManager;
diff --git a/src/pages/AuthTokenHandler.js b/src/pages/AuthTokenHandler.js
new file mode 100644
index 0000000..828e3a7
--- /dev/null
+++ b/src/pages/AuthTokenHandler.js
@@ -0,0 +1,26 @@
+import React, { useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import LoadingSpinner from '../components/LoadingIcon';
+import OAuthSDK from '../nanuid_auth_sdk';
+
+const OAuthTokenHandler = () => {
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    useEffect(() => {
+        const params = new URLSearchParams(location.search);
+        const accessToken = params.get('ACCESS');
+        const refreshToken = params.get('REFRESH');
+
+        if (accessToken && refreshToken) {
+            OAuthSDK.setTokens(accessToken, refreshToken);
+            navigate('/admin', { replace: true });
+        } else {
+            navigate('/', { replace: true });
+        }
+    }, [navigate, location]);
+
+    return <LoadingSpinner />;
+};
+
+export default OAuthTokenHandler;
diff --git a/src/pages/Editor.js b/src/pages/Editor.js
index 42f1310..ba11c12 100644
--- a/src/pages/Editor.js
+++ b/src/pages/Editor.js
@@ -3,117 +3,221 @@ import { useParams } from 'react-router-dom';
 import MDEditor from '@uiw/react-md-editor';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import axios from 'axios';
+import { API_BASE_URL } from '../__CONF__';
 
 const MarkdownEditor = ({ initialContent, onSave }) => {
   const { postId } = useParams();
-  const [content, setContent] = useState("**Hello world!!!**");
+  const [content, setContent] = useState("");
   const [title, setTitle] = useState("");
-  const [tags, setTags] = useState([]);
-  const [thumbnail, setThumbnail] = useState(null);
-  const [thumbnailPreview, setThumbnailPreview] = useState(null);
-  const [URL, setURL] = useState("");
+  const [thumbnailURL, setThumbnailURL] = useState("");
+  const [categories, setCategories] = useState([]);
+  const [selectedCategories, setSelectedCategories] = useState([]);
+  const [newCategoryName, setNewCategoryName] = useState("");
+  const [fileUrl, setFileUrl] = useState("");
+  const [uploading, setUploading] = useState(false);
 
   useEffect(() => {
     if (initialContent) {
       setContent(initialContent.content);
       setTitle(initialContent.title);
-      setURL(initialContent.URL); 
-      setTags(initialContent.tags);
-      setThumbnail(initialContent.thumbnail);
-      setThumbnailPreview(initialContent.thumbnail ? URL.createObjectURL(initialContent.thumbnail) : null);
+      setThumbnailURL(initialContent.thumbnailURL);
+      setSelectedCategories(initialContent.categories || []);
     } else {
       const savedContent = localStorage.getItem(`draft_${postId}`);
       if (savedContent) {
         const parsedContent = JSON.parse(savedContent);
         setContent(parsedContent.content);
         setTitle(parsedContent.title);
-        setTags(parsedContent.tags);
-        setURL(parsedContent.URL);
-        if (parsedContent.thumbnail) {
-          setThumbnail(parsedContent.thumbnail);
-          setThumbnailPreview(URL.createObjectURL(parsedContent.thumbnail));
-        }
+        setThumbnailURL(parsedContent.thumbnailURL);
+        setSelectedCategories(parsedContent.categories || []);
       }
     }
   }, [initialContent, postId]);
 
+  useEffect(() => {
+    const fetchCategories = async () => {
+      try {
+        const response = await axios.get(API_BASE_URL+'/categories');
+        setCategories(response.data);
+      } catch (error) {
+        toast.error('카테고리 목록을 불러오는 데 실패했습니다.');
+      }
+    };
+    fetchCategories();
+  }, []);
+
   const saveToLocalStorage = useCallback(() => {
-    const contentToSave = { content, title, tags, thumbnail, URL };
+    const contentToSave = { content, title, thumbnailURL, categories: selectedCategories };
     localStorage.setItem(`draft_${postId}`, JSON.stringify(contentToSave));
-    toast.info('브라우저 내에 임시 저장되었습니다.', { position: 'top-right' });
-  }, [content, title, tags, thumbnail, URL, postId]);
+    toast.info('임시 저장되었습니다.');
+  }, [content, title, thumbnailURL, selectedCategories, postId]);
 
-  useEffect(() => {
-    const intervalId = setInterval(saveToLocalStorage, 10000);
-    return () => clearInterval(intervalId);
-  }, [saveToLocalStorage]);
+  const uploadContent = async () => {
+    setUploading(true);
+    const formData = new FormData();
+    const blob = new Blob([content], { type: 'text/markdown' });
+    formData.append('file', blob, 'content.md');
 
-  const handleSave = () => {
-    onSave({ content, title, tags, thumbnail, URL });
-    localStorage.removeItem(`draft_${postId}`);
-    toast.success('저장되었습니다!', { position: 'top-right' });
+    try {
+      const response = await axios.post(API_BASE_URL+'/upload', formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+      setFileUrl(response.data.url);
+      toast.success('파일이 성공적으로 업로드되었습니다!');
+      return response.data.url;
+    } catch (error) {
+      console.error('Error uploading file:', error);
+      toast.error('파일 업로드 중 오류가 발생했습니다.');
+      throw error;
+    } finally {
+      setUploading(false);
+    }
   };
 
-  const handleTagChange = (e) => {
-    setTags(e.target.value.split(',').map(tag => tag.trim()));
+  const handlePublish = async (viewMode) => {
+    try {
+      const contentUrl = await uploadContent();
+      const response = await axios.post(API_BASE_URL+'/admin/articles', {
+        article_date: new Date().toISOString(),
+        article_name: title,
+        thumbnail_url: thumbnailURL,
+        article_data_url: contentUrl,
+        article_view_mode: viewMode,
+        categories: selectedCategories,
+      });
+      toast.success('성공적으로 퍼블리싱되었습니다!');
+      localStorage.removeItem(`draft_${postId}`);
+    } catch (error) {
+      toast.error('퍼블리싱 중 오류가 발생했습니다.');
+    }
+  };
+
+  const handleCategoryToggle = (categoryId) => {
+    setSelectedCategories(prev => 
+      prev.includes(categoryId) 
+        ? prev.filter(id => id !== categoryId)
+        : [...prev, categoryId]
+    );
+  };
+
+  const handleCreateCategory = async () => {
+    if (!newCategoryName.trim()) {
+      toast.error('카테고리 이름을 입력하세요.');
+      return;
+    }
+    try {
+      const response = await axios.post(API_BASE_URL+'/categories', {
+        category_name: newCategoryName
+      });
+      setCategories([...categories, response.data]);
+      setNewCategoryName('');
+      toast.success('새 카테고리가 생성되었습니다.');
+    } catch (error) {
+      toast.error('카테고리 생성에 실패했습니다.');
+    }
   };
 
   return (
-    <div className="container mx-auto px-4 py-12 pt-20">
-      <div className="max-w-3xl mx-auto">
-        <ToastContainer />
-        <h1 className="pt-10 font-bold text-xl">게시글 제목</h1>
+    <div className="container mx-auto px-4 py-12 max-w-4xl mt-16">
+      <ToastContainer position="top-right" autoClose={3000} hideProgressBar={false} />
+      
+      <h1 className="text-3xl font-bold mb-6">게시글 작성</h1>
+      
+      <div className="mb-6">
+        <label className="block text-sm font-medium text-gray-700 mb-2">제목</label>
         <input
           type="text"
           value={title}
           onChange={(e) => setTitle(e.target.value)}
           placeholder="제목을 입력하세요"
-          className="w-full mb-4 p-2 border rounded"
+          className="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
         />
-        <h1 className="pt-2 font-bold text-xl">게시글 태그</h1>
-        <input
-          type="text"
-          value={tags.join(', ')}
-          onChange={handleTagChange}
-          placeholder="태그를 입력하세요 (쉼표로 구분)"
-          className="w-full mb-4 p-2 border rounded"
-        />
-        <h1 className="pt-2 font-bold text-xl">썸네일 링크</h1>
+      </div>
+      
+      <div className="mb-6">
+        <label className="block text-sm font-medium text-gray-700 mb-2">썸네일 URL</label>
         <input
           type="text"
-          value={URL} 
-          onChange={(e) => setURL(e.target.value)}
-          placeholder="썸네일 링크를 입력하세요"
-          className="w-full mb-4 p-2 border rounded"
+          value={thumbnailURL}
+          onChange={(e) => setThumbnailURL(e.target.value)}
+          placeholder="썸네일 URL을 입력하세요"
+          className="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
         />
+      </div>
+      
+      <div className="mb-6">
+        <label className="block text-sm font-medium text-gray-700 mb-2">카테고리</label>
+        <div className="flex flex-wrap gap-2 mb-2">
+          {categories.map((category) => (
+            <button
+              key={category.category_id}
+              onClick={() => handleCategoryToggle(category.category_id)}
+              className={`px-3 py-1 rounded-full text-sm ${
+                selectedCategories.includes(category.category_id)
+                  ? 'bg-blue-500 text-white'
+                  : 'bg-gray-200 text-gray-700'
+              }`}
+            >
+              {category.category_name}
+            </button>
+          ))}
+        </div>
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={newCategoryName}
+            onChange={(e) => setNewCategoryName(e.target.value)}
+            placeholder="새 카테고리 이름"
+            className="flex-grow p-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+          <button
+            onClick={handleCreateCategory}
+            className="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition duration-200"
+          >
+            추가
+          </button>
+        </div>
+      </div>
+      
+      <div className="mb-6">
+        <label className="block text-sm font-medium text-gray-700 mb-2">내용</label>
         <MDEditor
           value={content}
           onChange={setContent}
           preview="edit"
-          className="pt-1"
+          className="border border-gray-300 rounded-lg shadow-sm"
         />
-        
-        <button
-          onClick={handleSave}
-          className="mt-4 bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded"
-        >
-          비공개 상태로 퍼블리싱하기
-        </button>
-        <button
-          onClick={handleSave}
-          className="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-3"
-        >
-          퍼블리싱하기
-        </button>
+      </div>
+      
+      <div className="flex justify-between items-center">
         <button
-          onClick={handleSave}
-          className="mt-4 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded ml-3"
+          onClick={saveToLocalStorage}
+          className="px-6 py-3 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition duration-200"
         >
-          삭제 처리하기
+          임시 저장
         </button>
+        <div>
+          <button
+            onClick={() => handlePublish('PRIVATE')}
+            className="px-6 py-3 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition duration-200 mr-2"
+            disabled={uploading}
+          >
+            비공개 퍼블리싱
+          </button>
+          <button
+            onClick={() => handlePublish('PUBLIC')}
+            className="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200"
+            disabled={uploading}
+          >
+            공개 퍼블리싱
+          </button>
+        </div>
       </div>
     </div>
   );
 };
 
-export default MarkdownEditor;
+export default MarkdownEditor;
\ No newline at end of file