v0.13.0 릴리즈

src/ui/components/InfoModal.tsx

@@ -0,0 +1,52 @@
+import type { InfoModalType } from "../types/info";
+import { LicenseContent, OssContent, ShortcutsContent, TermsContent } from "../pages/InfoPages";
+
+const getInfoModalTitle = (type: InfoModalType) => {
+  switch (type) {
+    case "terms":
+      return "이용약관";
+    case "license":
+      return "라이선스";
+    case "oss":
+      return "오픈소스 목록";
+    case "shortcuts":
+      return "단축키";
+    default:
+      return "";
+  }
+};
+
+const InfoModalContent = ({ type }: { type: InfoModalType }) => {
+  switch (type) {
+    case "terms":
+      return <TermsContent />;
+    case "license":
+      return <LicenseContent />;
+    case "oss":
+      return <OssContent />;
+    case "shortcuts":
+      return <ShortcutsContent />;
+    default:
+      return null;
+  }
+};
+
+export const InfoModal = ({ type, onClose }: { type: InfoModalType; onClose: () => void }) => {
+  const title = getInfoModalTitle(type);
+  return (
+    <div className="info-modal" role="dialog" aria-modal="true" aria-label={title}>
+      <div className="info-modal-backdrop" onClick={onClose} />
+      <div className="info-modal-content">
+        <div className="info-modal-header">
+          <h3 className="info-modal-title">{title}</h3>
+          <button type="button" className="ghost" onClick={onClose} aria-label={`${title} 닫기`}>
+            닫기
+          </button>
+        </div>
+        <div className="info-modal-body">
+          <InfoModalContent type={type} />
+        </div>
+      </div>
+    </div>
+  );
+};

src/ui/components/MobileMenus.tsx

@@ -0,0 +1,120 @@
+import type { ReactNode } from "react";
+import type { Account, Visibility } from "../../domain/types";
+import type { MastodonApi } from "../../services/MastodonApi";
+import type { OAuthClient } from "../../services/OAuthClient";
+import { AccountAdd } from "./AccountAdd";
+import { ComposeBox } from "./ComposeBox";
+
+type MobileComposeMenuProps = {
+  open: boolean;
+  onClose: () => void;
+  composeAccount: Account | null;
+  composeAccountSelector: ReactNode;
+  api: MastodonApi;
+  onSubmit: (params: {
+    text: string;
+    visibility: Visibility;
+    inReplyToId?: string;
+    files: File[];
+    spoilerText: string;
+  }) => Promise<boolean>;
+  replyingTo: { id: string; summary: string } | null;
+  onCancelReply: () => void;
+  mentionText: string | null;
+};
+
+export const MobileComposeMenu = ({
+  open,
+  onClose,
+  composeAccount,
+  composeAccountSelector,
+  api,
+  onSubmit,
+  replyingTo,
+  onCancelReply,
+  mentionText
+}: MobileComposeMenuProps) => {
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <div className="mobile-menu">
+      <div className="mobile-menu-backdrop" onClick={onClose} />
+      <div className="mobile-menu-panel panel">
+        <div className="mobile-menu-header">
+          <h3>글쓰기</h3>
+          <button
+            type="button"
+            className="ghost"
+            onClick={onClose}
+            aria-label="글쓰기 닫기"
+          >
+            닫기
+          </button>
+        </div>
+        {composeAccount ? (
+          <ComposeBox
+            accountSelector={composeAccountSelector}
+            account={composeAccount}
+            api={api}
+            onSubmit={onSubmit}
+            replyingTo={replyingTo}
+            onCancelReply={onCancelReply}
+            mentionText={mentionText}
+          />
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+type MobileMenuProps = {
+  open: boolean;
+  onClose: () => void;
+  onOpenSettings: () => void;
+  oauth: OAuthClient;
+};
+
+export const MobileMenu = ({ open, onClose, onOpenSettings, oauth }: MobileMenuProps) => {
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <div className="mobile-menu">
+      <div className="mobile-menu-backdrop" onClick={onClose} />
+      <div className="mobile-menu-panel panel">
+        <div className="mobile-menu-header">
+          <h3>메뉴</h3>
+          <button type="button" className="ghost" onClick={onClose} aria-label="메뉴 닫기">
+            닫기
+          </button>
+        </div>
+        <div className="mobile-menu-actions">
+          <button
+            type="button"
+            className="button-with-icon"
+            onClick={() => {
+              onOpenSettings();
+              onClose();
+            }}
+          >
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M4 6h16" />
+              <circle cx="9" cy="6" r="2" />
+              <path d="M4 12h16" />
+              <circle cx="15" cy="12" r="2" />
+              <path d="M4 18h16" />
+              <circle cx="8" cy="18" r="2" />
+            </svg>
+            설정 열기
+          </button>
+        </div>
+        <div className="mobile-menu-section">
+          <AccountAdd oauth={oauth} />
+        </div>
+      </div>
+    </div>
+  );
+};