fix(blog): 한글 글 경로와 모바일 쉘 정렬 수정

Author: dev-wooyeon

blog/services/post-repository.test.ts

@@ -97,6 +97,12 @@ ${'x'.repeat(5000)}
     expect(await getFeedData(privateSlug)).toBeNull();
   });
 
+  it('resolves percent-encoded slugs', () => {
+    const slug = '말하는-구조를-잃어버린-것-같았다';
+
+    expect(getFolderSlug(encodeURIComponent(slug))).toBe(slug);
+  });
+
   it('returns null for non-existent posts folder slug', () => {
     expect(getFolderSlug('missing-folder-slug')).toBeNull();
   });

blog/services/post-repository.ts

@@ -16,6 +16,14 @@ const shouldLogContentIssues = process.env.NODE_ENV !== 'test';
 const slugToFolderCache = new Map<string, string>();
 let cachedSortedFeedData: FeedData[] | null = null;
 
+function normalizeSlug(slug: string): string {
+  try {
+    return decodeURIComponent(slug);
+  } catch {
+    return slug;
+  }
+}
+
 function logContentIssue(message: string): void {
   if (!shouldLogContentIssues) {
     return;
@@ -252,15 +260,17 @@ function loadMetadata(folderPath: string): FeedFrontmatter | null {
 
 // Get folder path from slug (using cache or scanning)
 export function getFolderSlug(slug: string): string | null {
+  const normalizedSlug = normalizeSlug(slug);
+
   // Check cache first
-  if (slugToFolderCache.has(slug)) {
-    return slugToFolderCache.get(slug)!;
+  if (slugToFolderCache.has(normalizedSlug)) {
+    return slugToFolderCache.get(normalizedSlug)!;
   }
 
   // Populate slug cache by loading full feed index first
   getSortedFeedData({ includePrivate: true });
-  if (slugToFolderCache.has(slug)) {
-    return slugToFolderCache.get(slug)!;
+  if (slugToFolderCache.has(normalizedSlug)) {
+    return slugToFolderCache.get(normalizedSlug)!;
   }
 
   if (isProduction) {
@@ -272,7 +282,7 @@ export function getFolderSlug(slug: string): string | null {
 
   for (const folderPath of allFolders) {
     const metadata = loadMetadata(folderPath);
-    if (metadata?.slug === slug) {
+    if (metadata?.slug === normalizedSlug) {
       return folderPath;
     }
   }

site/shell/AppShell/AppShell.test.tsx

@@ -8,7 +8,7 @@ vi.mock('next/navigation', () => ({
 }));
 
 describe('AppShell', () => {
-  it('keeps Archive and Resume visible with external links in the identity rail', () => {
+  it('keeps primary navigation and external links available', () => {
     const { container } = render(
       <AppShell>
         <main>content</main>
@@ -27,10 +27,9 @@ describe('AppShell', () => {
       primaryNavigation.queryByRole('link', { name: 'Tech' })
     ).not.toBeInTheDocument();
     expect(screen.getAllByLabelText('Ark 외부 링크')).toHaveLength(1);
-    expect(container.querySelector('.ark-site-identity')).toContainElement(
+    expect(container.querySelector('footer')).toContainElement(
       screen.getByLabelText('Ark 외부 링크')
     );
-    expect(container.querySelector('footer')).toBeNull();
     expect(
       container.querySelector('[data-page-layout="home"]')
     ).toBeInTheDocument();

site/shell/AppShell/AppShell.tsx

@@ -84,11 +84,14 @@ export default function AppShell({ children }: AppShellProps) {
               ark
             </Link>
           </header>
-          <ExternalLinks />
         </aside>
 
         <div className="ark-site-content">{children}</div>
 
+        <footer className="ark-site-footer">
+          <ExternalLinks />
+        </footer>
+
         <nav aria-label="Ark 주요 탐색" className="ark-site-navigation">
           {PRIMARY_LINKS.map((item) => {
             const isActive = item.isActive(pathname);

styles/globals.css

@@ -60,6 +60,12 @@
   min-width: 0;
 }
 
+.ark-site-footer {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: end;
+}
+
 .ark-home-statement {
   max-width: 34rem;
   margin: 0;
@@ -164,7 +170,7 @@
 .ark-site-external-links {
   display: flex;
   flex-direction: column;
-  margin-top: auto;
+  margin-top: 0;
   pointer-events: auto;
 }
 

styles/viewport/mobile.css

@@ -9,7 +9,8 @@
     grid-template-areas:
       'identity'
       'navigation'
-      'content';
+      'content'
+      'footer';
     row-gap: var(--space-4);
     min-height: auto;
   }
@@ -38,6 +39,10 @@
     grid-area: content;
   }
 
+  .ark-site-footer {
+    grid-area: footer;
+  }
+
   .ark-site-navigation {
     grid-area: navigation;
     flex-direction: row;
@@ -77,7 +82,6 @@
   }
 
   .ark-site-grid[data-page-layout='home'] .ark-site-external-links {
-    grid-area: external;
     display: flex;
     flex-direction: column;
     align-self: end;
@@ -87,6 +91,48 @@
     margin-bottom: var(--space-8);
   }
 
+  .ark-site-grid[data-page-layout='home'] .ark-site-footer {
+    grid-area: external;
+    align-self: end;
+    justify-self: start;
+    margin-bottom: var(--space-8);
+  }
+
+  .ark-site-grid[data-page-layout='content'] {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      'identity navigation'
+      'content content'
+      'footer footer';
+    column-gap: var(--space-4);
+  }
+
+  .ark-site-grid[data-page-layout='content'] .ark-site-navigation {
+    grid-area: navigation;
+    flex-direction: row;
+    align-self: center;
+    justify-self: end;
+    gap: var(--space-4);
+    padding-top: 0;
+  }
+
+  .ark-site-grid[data-page-layout='content'] .ark-site-content {
+    grid-area: content;
+  }
+
+  .ark-site-grid[data-page-layout='content'] .ark-site-footer {
+    grid-area: footer;
+    border-top: 1px solid var(--color-divider);
+    padding-top: var(--space-6);
+    padding-bottom: var(--space-2);
+  }
+
+  .ark-site-grid[data-page-layout='content'] .ark-site-external-links {
+    flex-direction: row;
+    justify-content: center;
+    gap: var(--space-4);
+  }
+
   .ark-site-grid[data-page-layout='home'] .ark-site-content {
     grid-area: content;
     align-self: start;