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.

Sign up for GitHub

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

[FE] refactor: 리뷰 url 생성 폼의 setState 전달 및 비밀번호 에러 메세지 렌더링 방식 변경 #996

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

[FE] refactor: 리뷰 url 생성 폼의 setState 전달 및 비밀번호 에러 메세지 렌더링 방식 변경 #996

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1382e49
refactor: url 생성 폼의 비밀번호 input에 대한 에러 메세지 트리거 이벤트를 onChange로 변경
ImxYJL Dec 9, 2024
edf7e9e
refactor: 폼의 setState 함수를 Wrapper로 감싸는 형태로로 자식 컴포넌트에게 전달
ImxYJL Dec 9, 2024
93331a8
fix: 핸들러 이름 전달 오타 수정
ImxYJL Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 6 additions & 14 deletions frontend/src/hooks/usePasswordValidation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,12 @@ const PASSWORD_LENGTH_ERROR_MESSAGE = `${MIN_PASSWORD_INPUT}자부터 ${MAX_PASS

const usePasswordValidation = (password: string) => {
const [passwordErrorMessage, setPasswordErrorMessage] = useState('');
const [isBlurredOnce, setIsBlurredOnce] = useState(false);

const initializeIsBlurredOnce = () => {
setIsBlurredOnce(false);
};

const validatePassword = () => {
if (!password) {
setPasswordErrorMessage('');
return;
}
if (!isWithinLengthRange(password, MAX_PASSWORD_INPUT, MIN_PASSWORD_INPUT)) {
return setPasswordErrorMessage(PASSWORD_LENGTH_ERROR_MESSAGE);
}
Expand All @@ -28,19 +27,12 @@ const usePasswordValidation = (password: string) => {
return setPasswordErrorMessage('');
};

const handlePasswordBlur = () => {
setIsBlurredOnce(true);
validatePassword();
};

useEffect(() => {
if (isBlurredOnce) validatePassword();
}, [password, isBlurredOnce]);
validatePassword();
}, [password]);

return {
passwordErrorMessage,
handlePasswordBlur,
initializeIsBlurredOnce,
};
};

Expand Down
4 changes: 1 addition & 3 deletions frontend/src/pages/HomePage/components/Inputs/InputField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { Dispatch, SetStateAction } from 'react';

import { EssentialPropsWithChildren } from '@/types';

import * as S from '../URLGeneratorForm/styles';
Expand All @@ -14,7 +12,7 @@ interface InputFieldProps {
export interface InputValueProps {
id: string;
value: string;
setValue: Dispatch<SetStateAction<string>>;
setValue: (value: string) => void;
}

const InputField = ({
Expand Down
9 changes: 1 addition & 8 deletions frontend/src/pages/HomePage/components/Inputs/PasswordField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { useEffect } from 'react';

import { EyeButton, Input } from '@/components';
import { useEyeButton, usePasswordValidation } from '@/hooks';
import { MAX_PASSWORD_INPUT, MIN_PASSWORD_INPUT } from '@/pages/HomePage/utils/validateInput';
Expand All @@ -12,11 +10,7 @@ import { InputField } from '.';

const PasswordField = ({ id, value: password, setValue: setPassword }: InputValueProps) => {
const { isOff, handleEyeButtonToggle } = useEyeButton();
const { passwordErrorMessage, handlePasswordBlur, initializeIsBlurredOnce } = usePasswordValidation(password);

useEffect(() => {
initializeIsBlurredOnce();
}, [initializeIsBlurredOnce]);
const { passwordErrorMessage } = usePasswordValidation(password);

return (
<InputField
Expand All @@ -29,7 +23,6 @@ const PasswordField = ({ id, value: password, setValue: setPassword }: InputValu
<Input
id={id}
value={password}
onBlur={handlePasswordBlur}
type={isOff ? 'password' : 'text'}
$style={{ width: '100%', paddingRight: '3rem' }}
onChange={(event) => {
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pages/HomePage/components/Inputs/ProjectNameField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { InputValueProps } from './InputField';

import { InputField } from './';

const ProjectNameField = ({ id, value: revieweeName, setValue: setRevieweeName }: InputValueProps) => {
const ProjectNameField = ({ id, value: revieweeName, setValue: setProjectName }: InputValueProps) => {
const [errorMessage, setErrorMessage] = useState('');

useEffect(() => {
Expand All @@ -23,7 +23,7 @@ const ProjectNameField = ({ id, value: revieweeName, setValue: setRevieweeName }
value={revieweeName}
type="text"
onChange={(event) => {
setRevieweeName(event.target.value);
setProjectName(event.target.value);
}}
/>
</InputField>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pages/HomePage/components/Inputs/RevieweeNameField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { InputValueProps } from './InputField';

import { InputField } from '.';

const RevieweeNameField = ({ id, value: projectName, setValue: setProjectName }: InputValueProps) => {
const RevieweeNameField = ({ id, value: projectName, setValue: setRevieweeName }: InputValueProps) => {
const [errorMessage, setErrorMessage] = useState('');

useEffect(() => {
Expand All @@ -23,7 +23,7 @@ const RevieweeNameField = ({ id, value: projectName, setValue: setProjectName }:
value={projectName}
type="text"
onChange={(event) => {
setProjectName(event.target.value);
setRevieweeName(event.target.value);
}}
/>
</InputField>
Expand Down
14 changes: 11 additions & 3 deletions frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,12 +73,20 @@ const URLGeneratorForm = () => {
openModal(MODAL_KEYS.confirm);
}, DEBOUNCE_TIME);

const handleInputChange = (setter: React.Dispatch<React.SetStateAction<string>>) => (value: string) => {
setter(value);
};

return (
<S.URLGeneratorForm>
<FormLayout title="함께한 팀원으로부터 리뷰를 받아보세요!" direction="column">
<RevieweeNameField id={INPUT_ID.revieweeName} value={revieweeName} setValue={setRevieweeName} />
<ProjectNameField id={INPUT_ID.projectName} value={projectName} setValue={setProjectName} />
<PasswordField id={INPUT_ID.password} value={password} setValue={setPassword} />
<RevieweeNameField
id={INPUT_ID.revieweeName}
value={revieweeName}
setValue={handleInputChange(setRevieweeName)}
/>
<ProjectNameField id={INPUT_ID.projectName} value={projectName} setValue={handleInputChange(setProjectName)} />
<PasswordField id={INPUT_ID.password} value={password} setValue={handleInputChange(setPassword)} />
<Button
type="button"
styleType={isFormValid ? 'primary' : 'disabled'}
Expand Down
Loading