refactor: 로그인 / 회원가입 페이지의 TextField를 YDS 컴포넌트로 교체 (#182)

* refactor: 로그인 페이지 YDS 컴포넌트로 대체 * refactor: 회원가입 페이지 YDS 컴포넌트로 리팩토링 * refactor: hiddenfield를 위한 isMarked 추가 * chore: update pnpm lock file local에서도 error를 감지할 수 있도록 pnpm store prune 실행 후 package도 재설치합니다. * refactor: 비밀번호 변경 페이지 PasswordTextField 적용 * refactor: EmailAuth에 SuffixTextField 적용 * refactor: EmailForm에 SuffixTextField 적용 * refactor: CurrentPasswordForm.tsx 매개변수에 cammel case 적용 * refactor: NewPasswordForm.tsx의 2개 이상의 상태 조합을 변수로 추출 --------- Co-authored-by: Hanna922 <[email protected]>
yourssu · May 21, 2024 · 005bf4c · 005bf4c
1 parent 69b5624
commit 005bf4c
Show file tree

Hide file tree

Showing 14 changed files with 2,432 additions and 1,183 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/home/components/ChangePasswordContents/CurrentPasswordForm/CurrentPasswordForm.tsx b/src/home/components/ChangePasswordContents/CurrentPasswordForm/CurrentPasswordForm.tsx
@@ -1,7 +1,6 @@
-import { BoxButton } from '@yourssu/design-system-react';
+import { BoxButton, PasswordTextField } from '@yourssu/design-system-react';
 
 import { useCurrentPasswordForm } from '@/home/components/ChangePasswordContents/CurrentPasswordForm/useCurrentPasswordForm';
-import { PasswordInput } from '@/home/components/ChangePasswordContents/PasswordInput/PasswordInput';
 import { SessionTokenType } from '@/home/types/GetPassword.type';
 
 import {
@@ -17,21 +16,22 @@ interface CurrentPasswordFormProps {
   setSessionToken: ({ sessionToken }: SessionTokenType) => void;
 }
 
-export const CurrentPasswordForm = (Props: CurrentPasswordFormProps) => {
+export const CurrentPasswordForm = (props: CurrentPasswordFormProps) => {
   const { currentPassword, isError, handlePasswordChange, checkCurrentPassword } =
-    useCurrentPasswordForm(Props);
+    useCurrentPasswordForm(props);
 
   return (
     <StyledBoxContainer>
       <StyledTitle>비밀번호 변경</StyledTitle>
       <StyledInputContainer>
         <StyledInputTitle>현재 비밀번호를 입력 해주세요.</StyledInputTitle>
-        <PasswordInput
+        <PasswordTextField
           placeholder="비밀번호를 입력해주세요."
           value={currentPassword}
-          onChangeHandler={handlePasswordChange}
-          isError={isError}
-          errorMessage="비밀번호가 일치하지 않습니다."
+          onChange={(e) => handlePasswordChange(e.target.value)}
+          isNegative={isError}
+          helperLabel={isError ? '비밀번호가 일치하지 않습니다.' : ''}
+          isMarked={true}
         />
       </StyledInputContainer>
       <StyledButtonContainer>

diff --git a/src/home/components/ChangePasswordContents/NewPasswordForm/NewPasswordForm.tsx b/src/home/components/ChangePasswordContents/NewPasswordForm/NewPasswordForm.tsx
@@ -1,7 +1,6 @@
-import { BoxButton } from '@yourssu/design-system-react';
+import { BoxButton, PasswordTextField } from '@yourssu/design-system-react';
 
 import { useNewPasswordForm } from '@/home/components/ChangePasswordContents/NewPasswordForm/useNewPasswordForm';
-import { PasswordInput } from '@/home/components/ChangePasswordContents/PasswordInput/PasswordInput';
 import { SessionTokenType } from '@/home/types/GetPassword.type';
 
 import {
@@ -30,27 +29,34 @@ export const NewPasswordForm = ({ sessionToken }: NewPasswordFormProps) => {
     handleSubmit,
   } = useNewPasswordForm(sessionToken);
 
+  const isNewPasswordFieldNegative = !isFirstRender && isNewPasswordError;
+  const isRepeatPasswordFieldNegative = isNewPasswordCheckError && validationAttempted;
+
   return (
     <StyledBoxContainer>
       <StyledTitle>비밀번호 변경</StyledTitle>
       <StyledInputContainer>
         <StyledInputTitle>새로운 비밀번호를 입력해주세요.</StyledInputTitle>
-        <PasswordInput
+        <PasswordTextField
           placeholder="숫자와 영문자 조합으로 8자 이상 입력해주세요."
           value={newPassword}
-          onChangeHandler={handleNewPasswordChange}
-          isError={!isFirstRender && isNewPasswordError}
-          errorMessage="숫자와 영문자 조합으로 8자 이상 입력해주세요."
+          onChange={(e) => handleNewPasswordChange(e.target.value)}
+          isNegative={isNewPasswordFieldNegative}
+          helperLabel={
+            isNewPasswordFieldNegative ? '숫자와 영문자 조합으로 8자 이상 입력해주세요.' : ''
+          }
+          isMarked={true}
         />
         <StyledInputAnimation
           className={!isNewPasswordError && newPassword.length >= 8 ? 'active' : ''}
         >
           <StyledInputTitle>비밀번호를 한번 더 입력해주세요.</StyledInputTitle>
-          <PasswordInput
+          <PasswordTextField
             value={newPasswordCheck}
-            onChangeHandler={setNewPasswordCheck}
-            isError={isNewPasswordCheckError && validationAttempted}
-            errorMessage="비밀번호가 일치하지 않습니다."
+            onChange={(e) => setNewPasswordCheck(e.target.value)}
+            isNegative={isRepeatPasswordFieldNegative}
+            helperLabel={isRepeatPasswordFieldNegative ? '비밀번호가 일치하지 않습니다.' : ''}
+            isMarked={true}
           />
         </StyledInputAnimation>
       </StyledInputContainer>

diff --git a/src/home/components/ChangePasswordContents/PasswordInput/PasswordInput.style.ts b/src/home/components/ChangePasswordContents/PasswordInput/PasswordInput.style.ts
diff --git a/src/home/components/ChangePasswordContents/PasswordInput/PasswordInput.tsx b/src/home/components/ChangePasswordContents/PasswordInput/PasswordInput.tsx
diff --git a/src/home/components/LoginInput/LoginInput.style.ts b/src/home/components/LoginInput/LoginInput.style.ts
diff --git a/src/home/components/LoginInput/LoginInput.tsx b/src/home/components/LoginInput/LoginInput.tsx
diff --git a/src/home/components/SignupContents/EmailAuth/EmailAuth.tsx b/src/home/components/SignupContents/EmailAuth/EmailAuth.tsx
@@ -1,4 +1,4 @@
-import { BoxButton, PlainButton, SimpleTextField } from '@yourssu/design-system-react';
+import { BoxButton, PlainButton, SuffixTextField } from '@yourssu/design-system-react';
 import { addSeconds, format } from 'date-fns';
 import { Link } from 'react-router-dom';
 
@@ -10,7 +10,6 @@ import { StyledSignupContentContainer, StyledSignupContentTitle } from '../Signu
 import {
   StyledPlainButtonContainer,
   StyledEmailAuthParagraph,
-  StyledTimerSuffix,
   StyledErrorText,
 } from './EmailAuth.style';
 
@@ -31,10 +30,12 @@ export const EmailAuth = ({ email, onConfirm }: EmailAuthProps) => {
           {'입력한 메일로\n인증 메일이 발송되었습니다.\n\n메일 내에 있는 인증 버튼을 클릭해주세요.'}
         </StyledEmailAuthParagraph>
         <div>
-          <SimpleTextField
+          <SuffixTextField
             value={email}
             disabled
-            suffix={authed && <StyledTimerSuffix>{leftTimeToString()}</StyledTimerSuffix>}
+            suffix={authed ? leftTimeToString() : ''}
+            // 추후 스타일 적용 필요
+            // suffix={authed && <StyledTimerSuffix>{leftTimeToString()}</StyledTimerSuffix>}
           />
         </div>
         {error && <StyledErrorText>{error}</StyledErrorText>}

diff --git a/src/home/components/SignupContents/EmailForm/EmailForm.tsx b/src/home/components/SignupContents/EmailForm/EmailForm.tsx
@@ -1,4 +1,4 @@
-import { BoxButton, PlainButton, SimpleTextField } from '@yourssu/design-system-react';
+import { BoxButton, PlainButton, SuffixTextField } from '@yourssu/design-system-react';
 
 import { EMAIL_DOMAIN } from '@/constants/email.constant';
 import { EmailFormProps } from '@/home/components/SignupContents/EmailForm/EmailForm.type.ts';
@@ -13,7 +13,6 @@ import {
 import {
   StyledButtonsContainer,
   StyledEmailFieldWrapper,
-  StyledEmailSuffix,
   StyledPlainButtonWrapper,
   StyledTextFieldLabel,
 } from './EmailForm.style';
@@ -27,13 +26,13 @@ export const EmailForm = ({ onConfirm }: EmailFormProps) => {
       <div>
         <StyledTextFieldLabel>숭실대학교 메일을 입력해주세요.</StyledTextFieldLabel>
         <StyledEmailFieldWrapper>
-          <SimpleTextField
+          <SuffixTextField
             value={email}
             onChange={onChange}
             isNegative={!!emailError}
             helperLabel={emailError}
             placeholder="ppushoong"
-            suffix={<StyledEmailSuffix>{EMAIL_DOMAIN}</StyledEmailSuffix>}
+            suffix={EMAIL_DOMAIN}
             autoFocus
           />
         </StyledEmailFieldWrapper>