웹 페이지 프론트엔드 UI 수정

- 모바일에서 봤을 때 UI/UX 이상하고 불편했던 부분 수정
 - 블로그 글 모바일 크기 시 리스트 아래로 글이 내려가는 부분 수정
 - 전체 배경 이어 붙이기가 아닌 고정으로 스크롤 시에도 어색하지 않게 수정

src/pages/blog/Blog.jsx

@@ -5,7 +5,7 @@ import './Blog.css';
 const renderInline = (text) => {
     const normalized = text.replace(/<br\s*\/?>/gi, '\n');
     const pattern =
-        /(!\[[^\]]*\]\([^)]+\)|\[[^\]]+\]\([^)]+\)|\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`)/g;
+        /(!\[[^\]]*\]\([^)]+\)|\[[^\]]+\]\([^)]+\)|\*\*[^*]+\*\*|\*[^*]+\*|~~[^~]+~~|`[^`]+`)/g;
     const segments = normalized.split('\n');
 
     return segments.flatMap((segment, segmentIndex) => {
@@ -48,6 +48,9 @@ const renderInline = (text) => {
             if (part.startsWith('*')) {
                 return <em key={`${part}-${index}`}>{part.replace(/\*/g, '')}</em>;
             }
+            if (part.startsWith('~~')) {
+                return <del key={`${part}-${index}`}>{part.replace(/~~/g, '')}</del>;
+            }
             if (part.startsWith('`')) {
                 return <code key={`${part}-${index}`}>{part.replace(/`/g, '')}</code>;
             }
@@ -123,6 +126,18 @@ const renderMarkdown = (body) => {
             return;
         }
 
+        if (line.startsWith('###### ')) {
+            blocks.push({ type: 'h6', value: line.replace(/^######\s+/, '') });
+            return;
+        }
+        if (line.startsWith('##### ')) {
+            blocks.push({ type: 'h5', value: line.replace(/^#####\s+/, '') });
+            return;
+        }
+        if (line.startsWith('#### ')) {
+            blocks.push({ type: 'h4', value: line.replace(/^####\s+/, '') });
+            return;
+        }
         if (line.startsWith('### ')) {
             blocks.push({ type: 'h3', value: line.replace(/^###\s+/, '') });
             return;
@@ -146,6 +161,9 @@ const renderMarkdown = (body) => {
         if (block.type === 'h1') return <h1 key={index}>{block.value}</h1>;
         if (block.type === 'h2') return <h2 key={index}>{block.value}</h2>;
         if (block.type === 'h3') return <h3 key={index}>{block.value}</h3>;
+        if (block.type === 'h4') return <h4 key={index}>{block.value}</h4>;
+        if (block.type === 'h5') return <h5 key={index}>{block.value}</h5>;
+        if (block.type === 'h6') return <h6 key={index}>{block.value}</h6>;
         if (block.type === 'list')
             return (
                 <ul key={index}>
@@ -202,6 +220,7 @@ const Blog = () => {
 
     const [selectedCategory, setSelectedCategory] = useState('전체');
     const [page, setPage] = useState(1);
+    const [showList, setShowList] = useState(false);
     const pageSize = 10;
     const filteredPosts = useMemo(() => {
         if (selectedCategory === '전체') return posts;
@@ -250,7 +269,15 @@ const Blog = () => {
             </header>
 
             <div className="blog-grid">
-                <aside className="blog-list">
+                <button
+                    type="button"
+                    className="blog-toggle-list"
+                    onClick={() => setShowList((prev) => !prev)}
+                    aria-label="글 목록 토글"
+                >
+                    ☰
+                </button>
+                <aside className={`blog-list ${showList ? 'is-visible' : ''}`}>
                     <div className="blog-category-filter">
                         {['전체', ...categoryNames, '기타'].map((name) => (
                             <button
@@ -272,7 +299,10 @@ const Blog = () => {
                             className={`blog-list__item${
                                 post.slug === activeSlug ? ' is-active' : ''
                             }`}
-                            onClick={() => setActiveSlug(post.slug)}
+                            onClick={() => {
+                                setActiveSlug(post.slug);
+                                setShowList(false); // 모바일에서 글 선택 시 리스트 숨김
+                            }}
                         >
                             <p className="blog-list__title">{post.title}</p>
                             <p className="blog-list__excerpt">{post.excerpt}</p>