import React, { useState, useCallback } from "react"; import { RefreshCw, Copy, Check, Heart } from "lucide-react"; var LANG = (typeof navigator !== "undefined" ? navigator.language : "ko").slice(0, 2); var T = { ko: { title: "컬러 팔레트", generate: "새 팔레트", copied: "복사됨!", saved: "저장된 팔레트", tap: "탭하면 복사", empty: "마음에 드는 팔레트를 저장하세요" }, en: { title: "Color Palette", generate: "New Palette", copied: "Copied!", saved: "Saved Palettes", tap: "Tap to copy", empty: "Save your favorite palettes" }, ja: { title: "カラーパレット", generate: "新しいパレット", copied: "コピー!", saved: "保存済み", tap: "タップでコピー", empty: "お気に入りのパレットを保存しましょう" }, zh: { title: "配色方案", generate: "新方案", copied: "已复制!", saved: "已保存", tap: "点击复制", empty: "保存你喜欢的配色" }, }; var t = T[LANG] || T.en; function randomColor() { var h = Math.floor(Math.random() * 360); var s = 50 + Math.floor(Math.random() * 40); var l = 35 + Math.floor(Math.random() * 35); return "hsl(" + h + "," + s + "%," + l + "%)"; } function hslToHex(hsl) { var m = hsl.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/); if (!m) return "#000000"; var h = parseInt(m[1]) / 360; var s = parseInt(m[2]) / 100; var l = parseInt(m[3]) / 100; var r, g, b; if (s === 0) { r = g = b = l; } else { var q = l < 0.5 ? l * (1 + s) : l + s - l * s; var p = 2 * l - q; function hue2rgb(p2, q2, t2) { if (t2 < 0) t2 += 1; if (t2 > 1) t2 -= 1; if (t2 < 1/6) return p2 + (q2 - p2) * 6 * t2; if (t2 < 1/2) return q2; if (t2 < 2/3) return p2 + (q2 - p2) * (2/3 - t2) * 6; return p2; } r = hue2rgb(p, q, h + 1/3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1/3); } var toHex = function(x) { var hex = Math.round(x * 255).toString(16); return hex.length === 1 ? "0" + hex : hex; }; return "#" + toHex(r) + toHex(g) + toHex(b); } function genPalette() { return [randomColor(), randomColor(), randomColor(), randomColor(), randomColor()]; } export default function App() { var [colors, setColors] = useState(genPalette); var [saved, setSaved] = useSharedStorage("palettes_v2", []); var [copiedIdx, setCopiedIdx] = useState(null); var generate = useCallback(function() { setColors(genPalette()); setCopiedIdx(null); }, []); var copyColor = useCallback(function(idx) { var hex = hslToHex(colors[idx]); try { navigator.clipboard.writeText(hex); } catch(e) {} setCopiedIdx(idx); setTimeout(function() { setCopiedIdx(null); }, 1500); }, [colors]); var savePalette = useCallback(function() { var hexes = colors.map(hslToHex); setSaved(function(prev) { return [{ id: Date.now(), colors: hexes }, ...(prev || []).slice(0, 9)]; }); }, [colors, setSaved]); return (

{t.title}

{t.tap}

{colors.map(function(color, i) { var hex = hslToHex(color); var isCopied = copiedIdx === i; return ( ); })}

{(saved || []).length > 0 && (

{t.saved}

{(saved || []).map(function(palette) { return (

{palette.colors.map(function(c, i) { return

; })}

); })}

)}

); }

Color Palette

Color Palette

reviews