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

Closed
wants to merge 3 commits into from
Closed

[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;
}
Comment on lines +17 to +20
Copy link
Contributor

Choose a reason for hiding this comment

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

비밀번호가 빈 문자열일 때, 에러 메시지를 출력하지 않는 방식이 아닌 비밀번호는 필수 입력 정보예요라는 메시지를 띄워주는 건 어떨까요? border도 빨간색으로 주고요. 물론 비밀번호를 입력하지 않으면 버튼이 비활성화돼서 링크를 생성할 수 없지만, 에러 메시지와 border만으로도 강조할 수 있어서 사용자가 필수 입력 정보를 놓칠 일은 없을 것 같아요. 웹 접근성 측면에서도 스크린 리더가 비밀번호가 빈 문자열일 때, 해당 에러 메시지를 읽어주는 것이 좋지 않을까 싶어서 건의해 봅니다.

스크린샷 2024-12-29 오전 4 04 55

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