[Feature/#7] 회원가입/로그인 UI 구현

package.json

@@ -19,6 +19,7 @@
     "react-dom": "^19.2.0",
     "react-hook-form": "^7.71.1",
     "react-router-dom": "^7.12.0",
+    "sonner": "^2.0.7",
     "tailwindcss": "^4.1.18",
     "zod": "^4.3.5",
     "zustand": "^5.0.10"
@@ -27,6 +28,7 @@
     "@commitlint/cli": "^20.3.1",
     "@commitlint/config-conventional": "^20.3.1",
     "@eslint/js": "^9.39.2",
+    "@tailwindcss/forms": "^0.5.11",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",

src/App.tsx

@@ -1,11 +1,17 @@
 import "./App.css";
 
 import { RouterProvider } from "react-router-dom";
+import { Toaster } from "sonner";
 
 import router from "./routes/routes";
 
 function App() {
-  return <RouterProvider router={router} />;
+  return (
+    <>
+      <RouterProvider router={router} />
+      <Toaster richColors position="top-center" />
+    </>
+  );
 }
 
 export default App;

src/components/auth/CommonAuthInput.tsx

@@ -21,6 +21,7 @@ type TCommonAuthInputProps = {
   buttonText?: string;
   buttonOnclick?: () => void;
   short?: boolean;
+  timer?: string;
 } & InputHTMLAttributes<HTMLInputElement>;
 
 const CommonAuthInput = React.forwardRef<
@@ -41,6 +42,7 @@ const CommonAuthInput = React.forwardRef<
       buttonOnclick,
       short,
       validationState,
+      timer,
       ...rest
     }: TCommonAuthInputProps,
     ref,
@@ -56,7 +58,9 @@ const CommonAuthInput = React.forwardRef<
     return (
       <div className="flex flex-col w-full gap-2 relative">
         {title && (
-          <div className={`font-body1 text-brand-900 select-none`}>{title}</div>
+          <div className={`font-label text-brand-900 select-none ml-1 mb-2`}>
+            {title}
+          </div>
         )}
 
         <div className="relative w-full">
@@ -65,52 +69,55 @@ const CommonAuthInput = React.forwardRef<
             type={inputType === "phoneNum" ? "text" : inputType}
             placeholder={placeholder}
             value={value}
-            className={`w-full h-[54px] px-5 bg-brand-200 border rounding-15 text-body1 text-brand-900
-                        placeholder:text-text-placeholder focus:outline-none transition-colors duration-200
+            className={`w-full h-14 px-5 bg-gray-50 border-transparent rounded-2xl text-body1 text-brand-900
+                        placeholder:text-text-placeholder focus:outline-none focus:bg-white focus:ring-2 focus:ring-logo-1/30 transition-all duration-200
                         ${
                           error
-                            ? "border-status-red caret-status-red"
+                            ? "ring-2 ring-status-red bg-status-red/5"
                             : validation
-                              ? "border-brand-500"
-                              : "border-brand-400 focus:border-status-blue focus:ring-1 focus:ring-status-blue"
+                              ? "ring-2 ring-logo-1 bg-white"
+                              : "hover:bg-gray-100"
+                        }
+                        ${
+                          button || short || validationState || timer
+                            ? "pr-25"
+                            : "pr-5"
                         }
-                        ${button || short || validationState ? "pr-[100px]" : "pr-5"}
                         `}
+            {...rest}
             onChange={(e) => {
               const rawValue = e.target.value;
               const formatted =
                 type === "phoneNum" ? formatInputNumber(rawValue) : rawValue;
 
               if (rest.onChange) {
-                rest.onChange({
-                  ...e,
-                  target: {
-                    ...e.target,
-                    value: formatted,
-                  },
-                });
+                e.target.value = formatted;
+                rest.onChange(e);
               }
             }}
-            {...rest}
           />
           {type === "password" && (
             <button
               type="button"
               onClick={handleTogglePassword}
-              className="absolute right-4 top-1/2 -translate-y-1/2 flex items-center justify-center w-[24px] h-[24px]"
+              className="absolute right-4 top-1/2 -translate-y-1/2 flex items-center justify-center w-6 h-6"
             >
-              {showPassword ? <EyeIcon /> : <EyeOffIcon />}
+              {showPassword ? (
+                <EyeIcon className="w-5 h-auto text-text-auth-sub" />
+              ) : (
+                <EyeOffIcon className="w-5 h-auto text-text-auth-sub" />
+              )}
             </button>
           )}
-          {(button || validationState) && (
+          {(button || validationState || timer) && (
             <div className="absolute right-2 top-1/2 -translate-y-1/2">
               {button && (
                 <Button
                   size="small"
                   children={buttonText}
                   disabled={type === "code" ? false : error || !validation}
                   variant={validation ? "dark" : "custom"}
-                  className={`!py-1 !px-3 !text-[12px] h-[36px]`}
+                  className={`py-1! px-3! h-full`}
                   onClick={buttonOnclick}
                   type="button"
                 />
@@ -121,18 +128,21 @@ const CommonAuthInput = React.forwardRef<
                   children={validationState}
                   disabled={!validation}
                   variant={validation ? "dark" : "custom"}
-                  className={`!py-1 !px-3 !text-[12px] h-[36px] cursor-default`}
+                  className={`py-1! px-3! h-full cursor-default`}
                 />
               )}
+              {timer && (
+                <span className="text-status-red font-body2 mr-3">{timer}</span>
+              )}
             </div>
           )}
           {short && (
-            <div className="absolute right-0 top-0 h-full w-[80px] bg-transparent" />
+            <div className="absolute right-0 top-0 h-full w-20 bg-transparent" />
           )}
         </div>
 
         {error && errorMessage && (
-          <div className="font-caption text-status-red pl-[4px]">
+          <div className="font-caption text-status-red pl-1">
             {errorMessage}
           </div>
         )}

src/components/auth/OnboardingIntro.tsx

@@ -30,12 +30,9 @@ export default function OnboardingIntro() {
 
   return (
     <div className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden text-white">
-      {/* 슬라이드 패널 */}
       <IntroSlide1 isActive={currentSlide === 0} />
       <IntroSlide2 isActive={currentSlide === 1} />
       <IntroSlide3 isActive={currentSlide === 2} />
-
-      {/* 인디케이터 */}
       <div className="absolute bottom-12 z-20 flex gap-3">
         {[0, 1, 2].map((index) => (
           <button

src/components/auth/intro/IntroSlide1.tsx

@@ -7,9 +7,11 @@ export default function IntroSlide1({ isActive }: { isActive: boolean }) {
         isActive ? "opacity-100 z-10" : "opacity-0 z-0"
       }`}
     >
-      <div className="flex h-full w-full items-center justify-center">
-        <div className="flex h-96 w-96 items-center justify-center">
-          <SymbolWhite className="h-full w-full" />
+      <div className="flex h-full w-full items-center justify-center relative">
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-120 h-120 bg-white/15 blur-[90px] rounded-full pointer-events-none" />
+
+        <div className="flex h-96 w-96 items-center justify-center relative z-10 transform hover:scale-105 transition-transform duration-700 ease-out">
+          <SymbolWhite className="h-full w-full drop-shadow-xl" />
         </div>
       </div>
     </div>