[feat] 회원가입 페이지 qa 완료

components/Button/Button.module.scss

@@ -29,11 +29,11 @@
   }
 
   &.disabled {
-    @apply bg-g2 text-g3;
+    @apply bg-g2 text-g4;
   }
 
   &.noBg {
-    @apply bg-g0 border border-solid border-r1 rounded-[2px] text-r1 font-bold;
+    @apply bg-g0 border border-solid border-r1 rounded-[2px] text-r1 font-semibold;
   }
 
   &.none {

components/Input/Input.module.scss

@@ -1,5 +1,5 @@
 .input {
-  @apply border-g4 border-solid border-[1px] rounded-[2px] w-full h-[48px] focus:border-g6 placeholder-g4 pl-[12px] font-pretendard font-normal;
+  @apply border-g4 border-solid border-[1px] rounded-[2px] w-full h-[48px] focus:border-g6 placeholder-[#BDBDBD] pl-[12px] font-pretendard font-normal;
 
   &.error {
     @apply border-a1;

components/Input/Input.tsx

@@ -21,7 +21,7 @@ function Input({ placeholder, register, type, error, maxLength, disabled, fixedW
     }
     return type;
   }, [type, isPasswordShow]);
-  const [inputValue, setInputValue] = useState(fixedWord || '' as string);
+  const [inputValue, setInputValue] = useState(fixedWord || ('' as string));
 
   const togglePasswordVisibility = () => {
     setIsPasswordShow((state) => !state);

components/Modal/Modal.module.scss

@@ -9,7 +9,7 @@
 }
 
 .overlay {
-  @apply bg-[rgba(0,0,0,0.2)] w-full h-full fixed top-0 z-[1000] max-w-[440px] min-w-[320px];
+  @apply bg-[rgba(0,0,0,0.8)] w-full h-full fixed top-0 z-[1000] max-w-[440px] min-w-[320px];
 }
 
 .full {

components/Modal/ModalBox.tsx

@@ -125,15 +125,18 @@ function Modal({
         ) : (
           <div>
             <h2>{title}</h2>
-            <p className={`${buttonType === 'wrapper' && 'text-r1'}`} dangerouslySetInnerHTML={{ __html: content }} />
+            <p
+              className={`${buttonType === 'wrapper' && 'text-r1'} mt-[4px]`}
+              dangerouslySetInnerHTML={{ __html: content }}
+            />
           </div>
         )}
         {buttonType && buttonType !== 'none' && buttonType !== 'wrapper' ? (
           <div className="mt-[20px] flex gap-x-2 items-center justify-center">{renderButton()}</div>
         ) : (
           <>
             <div className="mt-[10] flex flex-col items-center justify-center space-y-[10px]">{renderButton()}</div>
-            <Button onClick={handleCustomEvent} color="r1" size="lg" _className="mt-[20px]">
+            <Button onClick={handleCustomEvent} color="r1" size="lg" _className="mt-[20px] font-semibold">
               {customButtonName}
             </Button>
           </>

components/Radio/Radio.tsx

@@ -45,11 +45,11 @@ function Radio({ options, selectedOption, onChange, register }: RadioProps) {
                 type="radio"
                 value={option.value}
                 defaultChecked={index === 0}
-                className="form-radio text-indigo-600 h-4 w-4 hidden"
+                className="hidden w-4 h-4 text-indigo-600 form-radio"
                 {...register}
                 onChange={handleChange}
               />
-              <span>{option.label}</span>
+              <span className="font-[500]">{option.label}</span>
             </label>
           ))}
         </fieldset>

components/Select/Select.tsx

@@ -37,7 +37,7 @@ const customStyles: StylesConfig<Option, boolean, GroupBase<Option>> = {
   }),
   placeholder: (provided) => ({
     ...provided,
-    color: '#777777',
+    color: '#bdbdbd',
   }),
   menu: (provided) => ({
     ...provided,

pages/signup/step1.tsx

@@ -103,7 +103,7 @@ export default function SignUp() {
       openModal({
         props: {
           title: 'Check Your Mail Box',
-          content: `A verification has just been sent to<br/> <b>${data.email}<b>`,
+          content: `A verification has just been sent to<br/> <b class="font-semibold">${data.email}<b>`,
           buttonType: 'outline',
           buttonName: 'Resend link',
           handleClose: async () => {
@@ -223,7 +223,7 @@ export default function SignUp() {
             <div className="flex mb-[6px] justify-center mr-[41px]">
               <p className="text-[14px]">{signUpTranslation.t('checkMember')}</p>
               <button
-                className="text-[16px] text-r1 ml-1 underline"
+                className="text-[16px] text-r1 ml-1 underline font-semibold"
                 onClick={() => {
                   Router.push('/login');
                 }}

pages/signup/step3.tsx

@@ -24,15 +24,15 @@ export const getStaticProps = async ({ locale }: GetStaticPropsContext) => ({
 
 const options = [
   {
-    label: 'male',
+    label: 'Male',
     value: 'male',
   },
   {
-    label: 'female',
+    label: 'Female',
     value: 'female',
   },
   {
-    label: 'other',
+    label: 'Other',
     value: 'other',
   },
 ];
@@ -44,7 +44,7 @@ const monthList = Array.from({ length: 12 }, (_, index) => ({
 
 // Year List
 const currentYear = new Date().getFullYear();
-const yearList = Array.from({ length: 10 }, (_, index) => ({
+const yearList = Array.from({ length: 80 }, (_, index) => ({
   value: currentYear - index,
   label: `${currentYear - index}`,
 }));
@@ -119,7 +119,7 @@ export default function SignUp() {
           {signUpTranslation.t('step3Title')}
         </Typography>
       </div>
-      <form onSubmit={handleSubmit(onSubmit)} className="grid gap-y-[30px]">
+      <form onSubmit={handleSubmit(onSubmit)} className="grid gap-y-[30px] mb-[80px]">
         <section>
           <p className="text-[16px] text-g7 font-semibold mb-[8px]">{signUpTranslation.t('name')}</p>
           <div className="mb-[8px]">
@@ -150,6 +150,7 @@ export default function SignUp() {
         <section>
           <p className="text-[16px] text-g7 font-semibold mb-[8px]">{signUpTranslation.t('aboutYou')}</p>
           <Textarea placeholder={signUpTranslation.t('introduce') as string} register={register('introduce')} />
+          <div className="text-right text-[14px] text-g5 mt-[4px]">{watch('introduce')?.length} / 1000 byte</div>
         </section>
         <div className="fixed bottom-0 w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max">
           <div className="w-full">

public/locales/en/signup.json

@@ -1,5 +1,5 @@
 {
-  "createAccount": "Create Account",
+  "createAccount": "Create account",
   "emailPlaceholder": "Your email",
   "acceptAll": "Accept all",
   "14over": "I'm 14 or over",

public/locales/ko/signup.json

@@ -1,5 +1,5 @@
 {
-  "createAccount": "Create Account",
+  "createAccount": "Create account",
   "emailPlaceholder": "Your email",
   "acceptAll": "Accept all",
   "14over": "I'm 14 or over",