UI: #5 리뷰 반영 디자인 수정

GU-99 · Jul 6, 2024 · dd56760 · dd56760
1 parent 8d34d71
commit dd56760
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 21 deletions.
diff --git a/src/components/common/ValidationInput.tsx b/src/components/common/ValidationInput.tsx
@@ -63,7 +63,7 @@ export default function ValidationInput({
       )}
       <div
         className={`flex h-30 items-center rounded-lg border px-6 text-sm ${
-          errors ? 'border-2 border-[#FF0000]' : 'border-input'
+          errors ? 'border-2 border-error' : 'border-input'
         }`}
       >
         <div className="flex h-full w-full flex-row items-center gap-8">
@@ -72,29 +72,29 @@ export default function ValidationInput({
             {...register}
             type={type === 'password' && showPassword ? 'text' : type}
             placeholder={placeholder}
-            className={`h-full bg-inherit outline-none placeholder:text-emphasis ${isButtonInput ? 'w-[90%]' : 'w-full'}`}
+            className="h-full flex-grow bg-inherit outline-none placeholder:text-default"
           />
+          {type === 'password' && (
+            <div className="flex h-20 w-20 items-center text-gray-400">
+              {showPassword ? (
+                <RiEyeFill className="h-15 w-15 cursor-pointer" onClick={handleTogglePassword} />
+              ) : (
+                <RiEyeOffFill className="h-15 w-15 cursor-pointer" onClick={handleTogglePassword} />
+              )}
+            </div>
+          )}
           {isButtonInput && (
             <button
               type="button"
-              className="flex h-20 w-90 items-center justify-center rounded bg-sub px-8 font-bold shadow-md"
+              className="flex h-20 w-75 items-center justify-center rounded bg-sub px-8 font-bold shadow-md"
               onClick={onButtonClick}
             >
               {buttonLabel}
             </button>
           )}
         </div>
-        {type === 'password' && (
-          <div className="absolute right-0 flex items-center pr-8 text-gray-400">
-            {showPassword ? (
-              <RiEyeFill className="h-15 w-15 cursor-pointer" onClick={handleTogglePassword} />
-            ) : (
-              <RiEyeOffFill className="h-15 w-15 cursor-pointer" onClick={handleTogglePassword} />
-            )}
-          </div>
-        )}
       </div>
-      {errors && <p className="mt-[.5rem] text-sm text-[#FF0000]">{errors}</p>}
+      {errors && <p className="mt-[.5rem] text-sm text-error">{errors}</p>}
     </div>
   );
 }
diff --git a/src/globals.css b/src/globals.css
@@ -35,6 +35,7 @@
     --color-main: #237700;
     --color-sub: #e1f4d9;
     --color-close: #be0000;
+    --color-error: #ff0000;
     --color-contents-box: #fdfdfd;
     --color-disable: #c2c2c2;
     --color-selected: #c2c2c2;
@@ -57,7 +58,6 @@
     --text-color-default: #2c2c2c;
     --text-color-emphasis: #5e5e5e;
     --text-color-category: #b1b1b1;
-    --text-color-error: #be0000;
     --text-color-blue: #0909e7;
 
     /* border color */
@@ -96,6 +96,7 @@
   .selected::before {
     @apply absolute left-0 top-0 block h-30 w-3 bg-main content-[''];
   }
+
   .auth-btn {
     @apply flex h-30 items-center justify-center rounded-lg bg-sub px-8 font-bold;
   }

diff --git a/src/index.css b/src/index.css
diff --git a/src/layouts/page/AuthLayout.tsx b/src/layouts/page/AuthLayout.tsx
@@ -3,7 +3,7 @@ import AuthGULogo from '@/assets/auth_logo.svg';
 
 export default function AuthLayout() {
   return (
-    <div className="flex h-[100vh] flex-row items-center justify-evenly bg-main">
+    <div className="flex h-screen flex-row items-center justify-evenly bg-main">
       <img src={AuthGULogo} alt="Auth GU Logo" />
       <main className="font-emphasis flex h-[90vh] flex-col overflow-y-scroll rounded-2xl bg-[white] p-30 scrollbar-hide">
         <Outlet />

diff --git a/src/pages/user/SignUpPage.tsx b/src/pages/user/SignUpPage.tsx
@@ -235,7 +235,7 @@ export default function SignUpPage() {
               // eslint-disable-next-line react/no-array-index-key
               <div key={index} className="flex h-30 items-center rounded-lg border border-input px-6 text-sm">
                 <div className="flex h-full w-full flex-row items-center gap-8">
-                  <div className="flex w-[90%] items-center overflow-hidden border-transparent bg-inherit">
+                  <div className="flex flex-grow items-center overflow-hidden border-transparent bg-inherit">
                     <a href={`http://${item}`} target="_blank" rel="noreferrer">
                       {item}
                     </a>
@@ -262,7 +262,7 @@ export default function SignUpPage() {
                 onBlur={handleBlur}
                 onChange={handleLinkChange}
                 type="text"
-                className="w-[90%] bg-inherit outline-none placeholder:text-emphasis"
+                className="flex flex-grow bg-inherit outline-none placeholder:text-emphasis"
               />
               <button
                 type="button"

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -47,14 +47,14 @@ export default {
         default: 'var(--text-color-default)',
         emphasis: 'var(--text-color-emphasis)',
         category: 'var(--text-color-category)',
-        error: 'var(--text-color-error)',
         blue: 'var(--text-color-blue)',
       },
       colors: {
         main: 'var(--color-main)',
         sub: 'var(--color-sub)',
         close: 'var(--color-close)',
         'contents-box': 'var(--color-contents-box)',
+        error: 'var(--color-error)',
         disable: 'var(--color-disable)',
         selected: 'var(--color-selected)',
         scroll: 'var(--color-scroll)',