From 50ec52ab6e97493b373bd79deb1e9e56bf8211cb Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Wed, 27 May 2026 02:05:08 +0900
Subject: [PATCH] feat(saju-ui-v2): PrimaryButton + GhostButton + InputRow

---
 src/pages/saju/_shell/GhostButton.jsx   | 18 ++++++++++++++
 src/pages/saju/_shell/InputRow.jsx      | 32 +++++++++++++++++++++++++
 src/pages/saju/_shell/PrimaryButton.jsx | 22 +++++++++++++++++
 3 files changed, 72 insertions(+)
 create mode 100644 src/pages/saju/_shell/GhostButton.jsx
 create mode 100644 src/pages/saju/_shell/InputRow.jsx
 create mode 100644 src/pages/saju/_shell/PrimaryButton.jsx

diff --git a/src/pages/saju/_shell/GhostButton.jsx b/src/pages/saju/_shell/GhostButton.jsx
new file mode 100644
index 0000000..1a13fb0
--- /dev/null
+++ b/src/pages/saju/_shell/GhostButton.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import hexA from './helpers/hexA';
+
+export default function GhostButton({
+  children, color = '#1F2A44', onClick, full = true, style = {}, type = 'button',
+}) {
+  return (
+    <button type={type} onClick={onClick} style={{
+      width: full ? '100%' : 'auto', padding: '13px 22px',
+      background: 'transparent', color, border: `1px solid ${hexA(color, 0.4)}`,
+      borderRadius: 12, fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em',
+      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
+      ...style,
+    }}>
+      {children}
+    </button>
+  );
+}
diff --git a/src/pages/saju/_shell/InputRow.jsx b/src/pages/saju/_shell/InputRow.jsx
new file mode 100644
index 0000000..ce7402a
--- /dev/null
+++ b/src/pages/saju/_shell/InputRow.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+export default function InputRow({
+  label, name, type = 'text', value, onChange, placeholder, error, children,
+}) {
+  return (
+    <div style={{
+      display: 'flex', alignItems: 'center', padding: '12px 14px',
+      borderBottom: '1px solid rgba(31,42,68,0.06)', gap: 12,
+    }}>
+      <label htmlFor={name} style={{
+        width: 80, fontSize: 12, color: '#6B6B6B', fontWeight: 700, letterSpacing: '-0.01em',
+      }}>{label}</label>
+      <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8 }}>
+        {children || (
+          <input
+            id={name} name={name} type={type} value={value} onChange={onChange}
+            placeholder={placeholder}
+            style={{
+              flex: 1, padding: '8px 10px', border: '1px solid rgba(31,42,68,0.12)',
+              borderRadius: 8, background: '#FBF7EF',
+              fontSize: 13, color: '#1F2A44', fontFamily: 'inherit',
+            }}
+          />
+        )}
+        {error && (
+          <span style={{ fontSize: 11, color: '#C04A4A', fontWeight: 700 }}>{error}</span>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/saju/_shell/PrimaryButton.jsx b/src/pages/saju/_shell/PrimaryButton.jsx
new file mode 100644
index 0000000..b72c85a
--- /dev/null
+++ b/src/pages/saju/_shell/PrimaryButton.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import hexA from './helpers/hexA';
+
+export default function PrimaryButton({
+  children, color = '#1F2A44', onClick, full = true, style = {}, gold = true, type = 'button',
+}) {
+  return (
+    <button type={type} onClick={onClick} style={{
+      width: full ? '100%' : 'auto', padding: '14px 22px',
+      background: color, color: '#F7F2E8',
+      border: 'none', borderRadius: 12,
+      fontSize: 15, fontWeight: 700, letterSpacing: '-0.01em',
+      boxShadow: gold
+        ? `0 2px 0 ${hexA(color, 0.4)}, 0 6px 18px ${hexA(color, 0.25)}, inset 0 1px 0 rgba(212,175,55,0.4)`
+        : '0 4px 14px rgba(31,42,68,0.18)',
+      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
+      ...style,
+    }}>
+      {children}
+    </button>
+  );
+}