기본 레이아웃 포팅

portone-io · Jun 13, 2024 · ddc66ed · ddc66ed
1 parent b14502f
commit ddc66ed
Show file tree

Hide file tree

Showing 21 changed files with 563 additions and 211 deletions.
diff --git a/src/entry-client.tsx b/src/entry-client.tsx
@@ -2,7 +2,7 @@
 import "pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css";
 import "@unocss/reset/tailwind.css";
 import "uno.css";
-import "./global.css";
+import "./styles/global.css";
 
 import { mount, StartClient } from "@solidjs/start/client";
 

diff --git a/src/layouts/gnb/Dropdown.tsx b/src/layouts/gnb/Dropdown.tsx
@@ -1,60 +1,56 @@
-import { useSignal } from "@preact/signals";
-import type React from "preact/compat";
+import { createSignal, For, type JSXElement } from "solid-js";
 
-import { useSystemVersion } from "#state/system-version";
-import { useServerFallback } from "~/misc/useServerFallback";
+import { useSystemVersion } from "~/state/system-version";
 import type { SystemVersion } from "~/type";
 
 export interface DropdownProps {
-  children: React.ReactNode;
+  children: JSXElement;
   link: string | Record<SystemVersion, string>;
   items: DropdownItem[];
   serverSystemVersion: SystemVersion;
 }
 export interface DropdownItem {
-  label: React.ReactNode;
+  label: JSXElement;
   link: string;
   systemVersion?: SystemVersion;
 }
-export default function Dropdown({
-  children,
-  link,
-  items,
-  serverSystemVersion,
-}: DropdownProps) {
-  const showItemsSignal = useSignal(false);
-  const systemVersion = useServerFallback(
-    useSystemVersion(),
-    serverSystemVersion,
-  );
+export default function Dropdown(props: DropdownProps) {
+  const [showItems, setShowItems] = createSignal(false);
+  const { systemVersion } = useSystemVersion();
+
   return (
     <div
       class="relative h-full inline-flex flex-col cursor-default items-center"
-      onMouseEnter={() => (showItemsSignal.value = true)}
-      onMouseLeave={() => (showItemsSignal.value = false)}
+      onMouseEnter={() => setShowItems(true)}
+      onMouseLeave={() => setShowItems(false)}
     >
       <a
         class="h-full inline-flex items-center"
-        href={typeof link === "string" ? link : link[systemVersion]}
+        href={
+          typeof props.link === "string"
+            ? props.link
+            : props.link[systemVersion()]
+        }
       >
-        {children}
+        {props.children}
       </a>
       <div class="relative w-full">
-        {showItemsSignal.value && (
+        {showItems() && (
           <div class="absolute w-max flex flex-col border bg-white py-2 shadow-lg">
-            {items.map(({ label, link, systemVersion }, i) => (
-              <a
-                key={i}
-                class="inline-flex items-center gap-2 px-4 py-2 hover:bg-slate-1"
-                data-system-version={systemVersion}
-                href={link}
-              >
-                {label}
-                {link.startsWith("https://") && (
-                  <i class="i-ic-baseline-launch opacity-40" />
-                )}
-              </a>
-            ))}
+            <For each={props.items}>
+              {(item) => (
+                <a
+                  class="inline-flex items-center gap-2 px-4 py-2 hover:bg-slate-1"
+                  data-system-version={systemVersion}
+                  href={item.link}
+                >
+                  {item.label}
+                  {item.link.startsWith("https://") && (
+                    <i class="i-ic-baseline-launch opacity-40" />
+                  )}
+                </a>
+              )}
+            </For>
           </div>
         )}
       </div>

diff --git a/src/layouts/gnb/Gnb.tsx b/src/layouts/gnb/Gnb.tsx
@@ -0,0 +1,151 @@
+import { useLocation } from "@solidjs/router";
+import { clsx } from "clsx";
+import { createMemo, untrack } from "solid-js";
+
+import { useSidebarContext } from "~/layouts/sidebar/context";
+import { useSystemVersion } from "~/state/system-version";
+import type { Lang } from "~/type";
+
+import Dropdown from "./Dropdown";
+import Logo from "./Logo";
+import styles from "./mobile-nav.module.css";
+import MobileMenuButton from "./MobileMenuButton";
+import VersionSwitch from "./VersionSwitch";
+
+interface Props {
+  lang: Lang;
+  navAsMenu: boolean;
+}
+
+const ko = {
+  developers: "개발자센터",
+  "sdk-playground": "SDK 놀이터",
+  console: "관리자 콘솔",
+  language: "언어",
+};
+const en: typeof ko = {
+  developers: "Developers",
+  "sdk-playground": "SDK Playground",
+  console: "Admin Console",
+  language: "Language",
+};
+
+export default function Gnb(props: Props) {
+  const location = useLocation();
+  const t = createMemo(() => (props.lang === "ko" ? ko : en));
+  const { systemVersion } = useSystemVersion();
+  const serverSystemVersion = untrack(systemVersion);
+  const sidebarContext = useSidebarContext();
+
+  return (
+    <>
+      <style>
+        {`
+        [data-selected-system-version="v1"] [data-system-version="v2"],
+        [data-selected-system-version="v2"] [data-system-version="v1"] {
+          display: none;
+        }
+        `}
+      </style>
+      <div class="h-14">
+        <header
+          data-selected-system-version={systemVersion()}
+          class="fixed h-inherit w-full flex items-center justify-between border-b bg-white z-gnb"
+        >
+          <div class="h-full flex flex-grow items-center pl-4 md:pl-6">
+            <div class="h-full flex flex-grow items-center bg-white z-gnb-body md:flex-grow-0">
+              <a
+                class="h-full inline-flex items-center"
+                href={`/docs/${props.lang}`}
+              >
+                <div class="flex items-center gap-2">
+                  <Logo class="w-22" />
+                  <span class="break-keep">{t()["developers"]}</span>
+                </div>
+              </a>
+              <div class="mx-6 md:ml-[70px]">
+                <VersionSwitch />
+              </div>
+            </div>
+            <div
+              class={clsx(
+                "flex gap-6 md:h-full items-center",
+                props.navAsMenu
+                  ? "nav-as-menu <md:(absolute inset-x-0 bottom-0 px-12 py-6 rounded-b-md transition-transform transform duration-300 flex-col items-start bg-white data-[open]:(translate-y-full shadow-lg))>"
+                  : "<md:hidden",
+              )}
+              data-open={sidebarContext.get()}
+            >
+              <Dropdown
+                serverSystemVersion={serverSystemVersion}
+                link={{ v1: "/api/rest-v1", v2: "/api/rest-v2" }}
+                items={[
+                  {
+                    label: "REST API V1",
+                    link: "/api/rest-v1",
+                    systemVersion: "v1",
+                  },
+                  {
+                    label: "REST API V2",
+                    link: "/api/rest-v2",
+                    systemVersion: "v2",
+                  },
+                  // { label: "GraphQL API", link: "/api/graphql" },
+                  {
+                    label: t()["sdk-playground"],
+                    link: "https://sdk-playground.portone.io/",
+                  },
+                ]}
+              >
+                <span
+                  class={clsx(
+                    location.pathname.startsWith("/api") && "nav-active",
+                  )}
+                >
+                  API & SDK
+                </span>
+              </Dropdown>
+              {props.lang === "ko" && [
+                <a
+                  class="h-full inline-flex items-center"
+                  href="/release-notes"
+                >
+                  <span
+                    class={clsx(
+                      location.pathname.startsWith("/release-notes") &&
+                        styles.navActive,
+                    )}
+                  >
+                    릴리즈 노트
+                  </span>
+                </a>,
+                <a class="h-full inline-flex items-center" href="/blog">
+                  <span
+                    class={clsx(
+                      location.pathname.startsWith("/blog") && styles.navActive,
+                    )}
+                  >
+                    기술 블로그
+                  </span>
+                </a>,
+              ]}
+            </div>
+          </div>
+          <div class="hidden h-full items-center gap-4 pr-6 md:flex">
+            <a
+              class="inline-flex items-center gap-1"
+              href="https://admin.portone.io/"
+            >
+              <span>{t()["console"]}</span>
+              <i class="i-ic-baseline-launch"></i>
+            </a>
+            {/* <a href={`/docs/${lang === "ko" ? "en" : "ko"}`}>
+              {lang === "ko" ? "🇺🇸 English" : "🇰🇷 한국어"}
+            </a> */}
+          </div>
+          <MobileMenuButton />
+        </header>
+      </div>
+    </>
+  );
+}
diff --git a/src/layouts/gnb/Logo.astro b/src/layouts/gnb/Logo.astro
diff --git a/src/layouts/gnb/Logo.tsx b/src/layouts/gnb/Logo.tsx
@@ -0,0 +1,16 @@
+import type { JSX } from "solid-js";
+
+interface Props extends JSX.SvgSVGAttributes<SVGSVGElement> {}
+
+export default function Logo(props: Props) {
+  return (
+    <svg viewBox="0 0 100 29" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="m43.9921 10.9461v-2.96172h-2.3712s-.001 2.96172 0 2.96172c-.3821.0049-2.0076 0-2.1894 0-4.6597 0-6.1355 1.7608-6.1491 1.9259.0029-.033-.0049-1.3234-.0049-1.9249h-2.3556v11.9121h2.3566l.0019-7.4141c.0282-1.2224 1.0053-2.0697 2.0698-2.3204.6358-.1497 1.3261-.2488 1.9794-.2497 1.6129-.002 2.6774-.003 4.2903-.0039v5.3171c0 1.5499-.0515 3.3213 1.5059 4.1832.6164.3411 1.3271.4305 2.0212.4596.1507.0068 2.6084.0408 2.6084.0272v-.0038l2.3041.0038v-1.9443c-1.6294 0-2.797.1001-4.4215-.0136-.4774-.0331-.9771-.1817-1.2814-.551-.488-.5937-.3665-1.5518-.3665-2.267v-5.2112h5.8711l2.4558-1.9259h-8.3269z"></path>
+      <path d="m23.0485 10.7422h-.5512c-3.7274 0-6.6926 2.8685-6.6926 6.1664 0 3.297 2.6473 6.1665 6.6926 6.1665h.5512c4.2641 0 6.6926-2.8685 6.6926-6.1665 0-3.297-2.938-6.1664-6.6926-6.1664zm4.335 6.1664c0 2.2388-1.607 4.2551-4.4283 4.2551h-.3646c-2.6764 0-4.4283-2.0172-4.4283-4.2551 0-2.2388 1.9619-4.2551 4.4283-4.2551h.3646c2.4849 0 4.4283 2.0173 4.4283 4.2551z"></path>
+      <path d="m15.7603 10.6325c-.246-2.12026-1.3951-3.42428-3.4047-4.11225-.9051-.309-1.8394-.44018-2.79212-.44213h-9.56348v16.79978h2.32452v-6.3724h.44624c2.0698 0 4.14058.033 6.21038.0194.63679-.0039 1.27646-.0418 1.91036-.1127.8701-.0972 1.7033-.3459 2.4713-.7774 1.7714-.996 2.6522-2.8062 2.3975-5.0013zm-4.3312 3.7061c-.592.2002-1.2269.2439-1.84423.2546-2.25452.0388-4.66459.0155-6.92008.0145-.09625 0-.1925-.0145-.30819-.0243v-6.58616h.33833c2.26618 0 4.68695-.02624 6.95313.01652.62614.01166 1.27454.14673 1.86954.36827 1.2648.47128 1.9415 1.51781 1.9269 2.95107-.0146 1.441-.734 2.5702-2.0163 3.0045z"></path>
+      <path d="m84.2777 13.4166c-.4025-.7609-.9673-1.3497-1.6945-1.7675-.7282-.4169-1.6635-.6569-2.5919-.6569-2.3848 0-3.3463 1.1194-3.7119 1.7529v-1.7529h-2.3575v11.8645h2.3575v-6.7087c0-1.5314 1.2036-3.3076 2.9925-3.3076.9702 0 1.8821.3129 2.4305.9386.5473.6258.8215 1.5178.8215 2.6761v6.4016h2.3575v-6.765c0-1.0232-.2012-1.9152-.6027-2.6761z"></path>
+      <path d="m63.497 5.88281h-.7612c-5.1478 0-9.2436 3.95484-9.2436 8.59379 0 4.6389 3.6574 8.5937 9.2436 8.5937h.7612c5.8896 0 9.2437-3.9548 9.2437-8.5937 0-4.63895-4.057-8.59379-9.2437-8.59379zm-.2547 15.27709h-.2508c-4.2184 0-7.1417-3.1094-7.1417-6.6921s3.2549-6.69211 7.1417-6.69211h.2508c3.916 0 7.1418 3.10941 7.1418 6.69211s-2.6949 6.6921-7.1418 6.6921z"></path>
+      <path d="m96.5554 19.7907c-.7554.8278-1.887 1.3662-3.3434 1.3662h-.3646c-2.2788 0-3.8858-1.4624-4.3136-3.2786h11.3912c.0486-.3196.0739-.6461.0739-.9775 0-3.297-2.938-6.1664-6.6926-6.1664h-.5512c-3.7274 0-6.6926 2.8684-6.6926 6.1664s2.6473 6.1664 6.6926 6.1664h.5512c2.9322 0 4.9971-1.3565 6.0004-3.2765h-2.7503zm-3.708-7.145h.3646c2.132 0 3.8645 1.4858 4.3137 3.3213h-8.9909c.453-1.8355 2.1962-3.3213 4.3126-3.3213z"></path>
+    </svg>
+  );
+}
diff --git a/src/layouts/gnb/MobileMenuButton.tsx b/src/layouts/gnb/MobileMenuButton.tsx
@@ -1,18 +1,23 @@
-import { sidebarOpenSignal } from "~/state/sidebar";
+import { untrack } from "solid-js";
+
+import { useSidebarContext } from "~/layouts/sidebar/context";
 
 const MobileMenuButton = () => {
-  const sidebarOpen = sidebarOpenSignal.value;
+  const { get: sidebarOpen, set: setSidebarOpen } = useSidebarContext();
+
   return (
     <div class="h-full flex md:hidden">
       <button
         class="px-4"
-        onClick={() => (sidebarOpenSignal.value = !sidebarOpenSignal.value)}
+        onClick={() => setSidebarOpen(!untrack(sidebarOpen))}
       >
-        {sidebarOpen ? (
-          <i class="i-ic-baseline-close block text-2xl"></i>
-        ) : (
-          <i class="i-ic-baseline-menu block text-2xl"></i>
-        )}
+        <i
+          class="block text-2xl"
+          classList={{
+            "i-ic-baseline-close": sidebarOpen(),
+            "i-ic-baseline-menu": !sidebarOpen(),
+          }}
+        />
       </button>
     </div>
   );