Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 10 commits into from
May 21, 2024
3,155 changes: 2,341 additions & 814 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR 변경사항은 아니긴한데 저만 CurrentPasswordForm prop 매개변수 이름이 Props인게 거슬리나요🤔
매개변수도 변수이니 카멜케이스 적용해서 props가 어떤지 ㅎㅎ..

Copy link
Collaborator Author

@fecapark fecapark May 21, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

매의 눈 이시네용
말씀하신대로 PR 변경사항은 아닌데 , 같이 커밋 날릴게요

placeholder="비밀번호를 입력해주세요."
value={currentPassword}
onChangeHandler={handlePasswordChange}
isError={isError}
errorMessage="비밀번호가 일치하지 않습니다."
onChange={(e) => handlePasswordChange(e.target.value)}
isNegative={isError}
helperLabel={isError ? '비밀번호가 일치하지 않습니다.' : ''}
isMarked={true}
/>
</StyledInputContainer>
<StyledButtonContainer>
Expand Down
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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>
Expand Down

This file was deleted.

This file was deleted.

14 changes: 0 additions & 14 deletions src/home/components/LoginInput/LoginInput.style.ts

This file was deleted.

87 changes: 0 additions & 87 deletions src/home/components/LoginInput/LoginInput.tsx

This file was deleted.

9 changes: 5 additions & 4 deletions src/home/components/SignupContents/EmailAuth/EmailAuth.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -10,7 +10,6 @@ import { StyledSignupContentContainer, StyledSignupContentTitle } from '../Signu
import {
StyledPlainButtonContainer,
StyledEmailAuthParagraph,
StyledTimerSuffix,
StyledErrorText,
} from './EmailAuth.style';

Expand All @@ -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>}
Expand Down
7 changes: 3 additions & 4 deletions src/home/components/SignupContents/EmailForm/EmailForm.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -13,7 +13,6 @@ import {
import {
StyledButtonsContainer,
StyledEmailFieldWrapper,
StyledEmailSuffix,
StyledPlainButtonWrapper,
StyledTextFieldLabel,
} from './EmailForm.style';
Expand All @@ -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>
Expand Down
Loading