feat(web): add badge state management and URL utility

Add BadgeProvider context for badge customization state and URL
constructor for badge API query parameters.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: wontory

apps/web/src/stores/badge-context.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import {
+  createContext,
+  type Dispatch,
+  type SetStateAction,
+  useContext,
+  useState,
+} from 'react'
+
+type BadgeState = {
+  slug: string
+  setSlug: Dispatch<SetStateAction<string>>
+  text: string
+  setText: Dispatch<SetStateAction<string>>
+  highlight: boolean
+  setHighlight: Dispatch<SetStateAction<boolean>>
+  textColor: string
+  setTextColor: Dispatch<SetStateAction<string>>
+  iconColor: string
+  setIconColor: Dispatch<SetStateAction<string>>
+  bgColor: string
+  setBgColor: Dispatch<SetStateAction<string>>
+}
+
+const BadgeContext = createContext<BadgeState | null>(null)
+
+export function BadgeProvider({ children }: { children: React.ReactNode }) {
+  const [slug, setSlug] = useState('')
+  const [text, setText] = useState('')
+  const [highlight, setHighlight] = useState(false)
+  const [textColor, setTextColor] = useState('000000')
+  const [iconColor, setIconColor] = useState('')
+  const [bgColor, setBgColor] = useState('')
+
+  return (
+    <BadgeContext.Provider
+      value={{
+        slug,
+        setSlug,
+        text,
+        setText,
+        highlight,
+        setHighlight,
+        textColor,
+        setTextColor,
+        iconColor,
+        setIconColor,
+        bgColor,
+        setBgColor,
+      }}
+    >
+      {children}
+    </BadgeContext.Provider>
+  )
+}
+
+export const useBadgeState = () => {
+  const context = useContext(BadgeContext)
+  if (!context) {
+    throw new Error('useBadgeState must be used within a BadgeProvider')
+  }
+  return context
+}

apps/web/src/utils/construct-badge-url.ts

@@ -0,0 +1,18 @@
+export const constructBadgeUrl = (
+  slug: string,
+  text: string,
+  highlight: boolean,
+  textColor: string,
+  iconColor: string,
+  bgColor: string,
+): string => {
+  const params = new URLSearchParams()
+  if (slug) params.append('slug', slug)
+  if (text) params.append('text', text)
+  if (highlight) params.append('highlight', 'true')
+  if (textColor) params.append('textColor', textColor)
+  if (iconColor) params.append('iconColor', iconColor)
+  if (bgColor) params.append('bgColor', bgColor)
+  const queryString = params.toString()
+  return `/api/badge${queryString ? `?${queryString}` : ''}`
+}