ark/site/shell/AppShell/AppShell.tsx at 926269855f2afdb20cef160bc2cf777582e490e6 · dev-wooyeon/ark · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import type { ReactNode } from 'react';
import { personalInfo } from '@/resume/model/resume-data';
import { SITE_FEED_PATH } from '@/site/config/site';

interface AppShellProps {
  children: ReactNode;
}

interface ExternalLinkItem {
  href: string;
  label: string;
}

const EXTERNAL_LINKS: ExternalLinkItem[] = [
  {
    href: personalInfo.github,
    label: 'GitHub',
  },
  {
    href: `mailto:${personalInfo.email}`,
    label: 'Email',
  },
  {
    href: SITE_FEED_PATH,
    label: 'RSS',
  },
];

const PRIMARY_LINKS = [
  {
    href: '/resume',
    label: 'Resume',
    isActive: (pathname: string) => pathname.startsWith('/resume'),
  },
  {
    href: '/archive',
    label: 'Archive',
    isActive: (pathname: string) =>
      pathname.startsWith('/archive') ||
      pathname.startsWith('/engineering') ||
      pathname.startsWith('/life') ||
      pathname.startsWith('/blog/'),
  },
];

function ExternalLinks() {
  return (
    <nav aria-label="Ark 외부 링크" className="ark-site-external-links">
      {EXTERNAL_LINKS.map((item) => (
        <a
          key={item.label}
          href={item.href}
          className="ark-site-external-link transition-colors hover:text-[var(--color-text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]"
        >
          {item.label}
        </a>
      ))}
    </nav>
  );
}

export default function AppShell({ children }: AppShellProps) {
  const pathname = usePathname();

  return (
    <div className="ark-site-shell bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">
      <div
        data-page-scroll-container
        data-page-scroll-mode="document"
        data-page-layout={pathname === '/' ? 'home' : 'content'}
        className="ark-site-grid"
      >
        <aside className="ark-site-identity">
          <header>
            <Link
              href="/"
              aria-label="ark 홈으로 이동"
              className="ark-site-brand-link transition-colors hover:text-[var(--color-text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]"
            >
              {pathname !== '/' ? (
                <img
                  src="/brand/graphite-blossom-mark.svg"
                  alt=""
                  aria-hidden="true"
                  className="ark-site-brand-mark"
                />
              ) : null}
              <span>ark</span>
            </Link>
          </header>
        </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);

            return (
              <Link
                key={item.href}
                href={item.href}
                aria-current={isActive ? 'page' : undefined}
                className="ark-site-primary-link transition-colors hover:text-[var(--color-text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]"
              >
                {item.label}
              </Link>
            );
          })}
        </nav>
      </div>
    </div>
  );
}