[MARKUP] LanguageSelector 컴포넌트 퍼블리싱 #19

src/app/(start-view)/layout.tsx

@@ -8,14 +8,14 @@ export default function Layout({
     children: React.ReactNode;
 }>) {
     return (
-        <div className='flex flex-col items-center justify-center h-screen bg-(--color-main) gap-10 px-9'>
+        <div className='flex flex-col items-center justify-center h-screen bg-(--color-main) gap-6 px-9'>
             <Image
                 src={logoImage}
-                width={200}
-                height={200} 
+                width={180}
+                height={180} 
                 alt="Logo"
             />
-            <div className='bg-white w-full rounded-lg px-6 py-12'>
+            <div className='bg-white w-full rounded-lg px-6 py-8'>
                 {children}
             </div>
         </div>

src/app/(start-view)/signup/page.tsx

@@ -1,7 +1,79 @@
+"use client";
+
+import AuthInput from "@/components/user/AuthInput"
+import PrimaryButton from "@/components/common/PrimaryButton"
+import LanguageSelector from "@/components/user/LanguageSelector";
+import { useState } from "react";
+
 export default function Page() {
+  const [email, setEmail] = useState("");
+  const [nickname, setNickname] = useState("");
+  const [password, setPassword] = useState("");
+  const [passwordCheck, setPasswordCheck] = useState("");
+  const [language, setLanguage] = useState("");
+
+
+  function handleSubmit(e?: React.FormEvent) {
+    if (e) e.preventDefault();
+
+    // 실제 회원가입 요청 처리
+    console.log("회원가입 요청:", { email, nickname, password, language });
+  }
+
   return (
-    <h1 className="text-3xl font-bold">
-      회원가입 영역
-    </h1>
-  )
+    <div className="flex flex-col justify-start gap-7">
+      <h1 className="text-lg font-bold text-center">
+        회원가입
+      </h1>
+
+      <form onSubmit={handleSubmit} className="flex flex-col gap-6">
+        <AuthInput
+          label="이메일"
+          type="text"
+          value={email}
+          placeholder="이메일을 입력하세요"
+          required
+          rightAddon
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <AuthInput
+          label="닉네임"
+          type="text"
+          value={nickname}
+          placeholder="닉네임을 입력하세요"
+          required
+          rightAddon
+          onChange={(e) => setNickname(e.target.value)}
+        />
+        <AuthInput
+          label="비밀번호"
+          type="password"
+          value={password}
+          placeholder="비밀번호를 입력하세요"
+
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <AuthInput
+          label="비밀번호 확인"
+          type="password"
+          value={passwordCheck}
+          placeholder="비밀번호를 다시 입력하세요"
+          required
+          onChange={(e) => setPasswordCheck(e.target.value)}
+        />
+
+        <LanguageSelector
+          selectedLanguage={language}
+          onChangeLanguage={setLanguage}
+        />
+
+        <div className="flex justify-center mt-2">
+          <PrimaryButton
+            label="회원가입"
+            onClick={handleSubmit}
+          />
+        </div>
+      </form>
+    </div>
+  );
 }

src/components/user/LanguageItem.tsx

@@ -0,0 +1,27 @@
+import { Check } from "lucide-react";
+
+interface LanguageItemProps {
+    language: string;
+    label: string;
+    selected: boolean;
+    onClick: () => void;
+}
+
+export default function LanguageItem({
+    label,
+    selected,
+    onClick,
+}: LanguageItemProps) {
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            className={`w-full h-8 text-xs p-2 rounded-md flex justify-between items-center
+                ${selected ? "bg-gray-100 text-(--color-main) font-semibold" : "bg-white font-normal"}
+            `}
+        >
+            <span>{label}</span>
+            {selected && <span className="text-(--color-main) font-bold"><Check className="w-4 h-4" /></span>}
+        </button>
+    );
+}

src/components/user/LanguageSelector.tsx

@@ -0,0 +1,33 @@
+import LanguageItem from "./LanguageItem";
+
+interface LanguageSelectorProps {
+    selectedLanguage: string;
+    onChangeLanguage: (lang: string) => void;
+}
+
+export default function LanguageSelector({
+    selectedLanguage,
+    onChangeLanguage,
+}: LanguageSelectorProps) {
+    return (
+        <div className="flex flex-col items-start justify-start gap-2">
+            <label className="text-sm font-medium flex items-center gap-1">
+                언어<span className="text-red-500">*</span>
+            </label>
+            <div className="relative w-full">
+                <LanguageItem
+                    language="ko"
+                    label="한국어"
+                    selected={selectedLanguage === "ko"}
+                    onClick={() => onChangeLanguage("ko")}
+                />
+                <LanguageItem
+                    language="en"
+                    label="English"
+                    selected={selectedLanguage === "en"}
+                    onClick={() => onChangeLanguage("en")}
+                />
+            </div>
+        </div>
+    );
+}