[FE] 참여한 사람 입력 시 자음이 분리되는 버그와 리펙터링 #889

pakxe · 2024-12-31T04:47:50Z

issue

close [FE] 참여한 사람 입력 시 자음이 분리되는 버그 #884

구현 목적

이름 유효성 검사 유틸 함수를 수정하면서, 기존에 이 함수를 사용하던 로직에서 버그가 발생했습니다.
이름 상태와 유효성 검사가 반복되므로 이를 훅으로 분리합니다.
참여한 사람이 중복되는 경우 에러 메세지를 띄워줍니다.

구현 사항

1. 이름 유효성 검사 유틸 함수를 수정하면서, 기존에 이 함수를 사용하던 로직에서 버그가 발생했습니다. && 이름 상태와 유효성 검사가 반복되므로 이를 훅으로 분리합니다.

다음에도 같은 문제가 생기지 않도록 막고, 중복되는 로직을 하나로 해 원천을 두기 위해서 이름 입력에 대한 로직을 훅으로 분리했습니다.

const useMemberName = (defaultNickname?: string) => {
  const [name, setName] = useState<Nickname>(defaultNickname ?? '');
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [canSubmit, setCanSubmit] = useState(false);

// 이름 변경에 대한 핸들러
  const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const name = event.target.value;
    const {memberName: nicknameResult, isValid, errorMessage: errorMessageResult} = validateMemberName(name);
    setErrorMessage(errorMessageResult);

    if (isValid || name.length === 0) {
      setName(nicknameResult);
      setCanSubmit(isValid);
    }
  };

// 추가 버튼을 누르면 입력 창이 초기화되어야 하므로 이를 위한 클리어 
  const clearNickname = () => {
    setName('');
    setErrorMessage(null);
    setCanSubmit(false);
  };

// 이름과 에러 메세지, 다음 스텝으로 넘어갈 수 있는지 여부 등 반환
  return {errorMessage, canSubmit, name, handleNameChange, clearNickname};
};

3. 참여한 사람이 중복되는 경우 에러 메세지를 띄워줍니다.

기존에는 같은 이름을 추가하려고 하면 추가는 안되지만 에러메세지가 안떴습니다.
그래서 에러 메세지가 뜨도록 반환부에 로직을 적어주었습니다.

return {
    errorMessage: isDuplicate(
      allMembers.map(({name}) => name),
      name,
    )
      ? ERROR_MESSAGE.memberNameDuplicate
      : errorMessage,

github-actions · 2024-12-31T04:49:14Z

Test Results

135 tests 135 ✅ 7s ⏱️
25 suites 0 💤
25 files 0 ❌

Results for commit fd6a799.

github-actions · 2024-12-31T04:49:51Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-hcegywsfpw.chromatic.com/

github-actions · 2024-12-31T05:03:51Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-fiqfyxuygt.chromatic.com/

jinhokim98

고생했어요 웨디! dev.haengdong.pro를 테스트해보다가 버그가 있어서 이슈로 만들어 놨었는데 마침 웨디가 해결해주셨네요!! 감사합니다

jinhokim98 · 2025-01-01T03:30:13Z

client/src/hooks/useMemberName.ts

-
-const useSetNicknameStep = () => {
-  const [nickname, setNickname] = useState<Nickname>('');
+const useMemberName = (defaultNickname?: string) => {


여기는 member name이고 clearNickname이라고 함수 이름이 지어져 있어요! 이 둘을 통일 시켜도 좋을 것 같습니다~

오!! 그게 맞겠네요. 감사합니다.
nickname으로 두고 작업하다가 nickname이 회원의 이름이라는 의미에 더 가까워서 너무 범위가 좁은 것 같아 이후에 수정하였는데, 바뀌지 않고 남아있었네요 ..ㅎㅎ

jinhokim98 · 2025-01-01T03:32:03Z

client/src/constants/rule.ts

@@ -3,7 +3,7 @@ const EVENT_PASSWORD_LENGTH = 4;
 const RULE = {
  maxEventNameLength: 30,
  maxEventPasswordLength: EVENT_PASSWORD_LENGTH,
-  maxMemberNameLength: 4,
+  maxMemberNameLength: 8,


이거에 대한 이슈가 있었던 걸로 기억해요! 해결해주셔서 감사합니다~
#626 이 이슈도 연결시켜놓을게요

jinhokim98 · 2025-01-01T03:33:18Z

client/src/utils/isDuplicate.ts

+const isDuplicate = (arr: string[], target: string) => {
+  return arr.includes(target);
+};


isDuplicate라는 util을 따로 만드신 이유가 궁금해요

매우매우 사소하지만, isDuplicated 가 조금 더 명확할 것 같긴 해요~!

정말 미세먼지만큼 사소한거긴 한데, includes말고 다른 포함 로직을 사용하게될 수도 있지 않을까해서 보통 이런 유틸도 분리시켜놓는 버릇이 있습니다...

soi-ha

리팩토링 해주신 덕분에 추후 코드 읽기가 더 편해질 것 같네요! 버그 수정 또한 인지하고 있던 부분이라 Issue로 만들어뒀었는데 반영해주시고! 고마워용~😆

soi-ha · 2025-01-03T02:34:25Z

client/src/hooks/useMemberName.ts

+    setCanSubmit(false);
+  };
+
+  return {errorMessage, canSubmit, name, handleNameChange, clearNickname};


코드가 훨씬 잘 읽히는 것 같아요! 👍

soi-ha · 2025-01-03T02:41:09Z

client/src/hooks/useMembersStep.ts

@@ -124,11 +119,16 @@ const useMembersStep = ({billInfo, setBillInfo, currentMembers, setStep}: Props)
  };

  return {
-    errorMessage,
-    nameInput,
+    errorMessage: isDuplicate(


오! 이 부분을 저도 인지하고 Issue로 만들어뒀었는데, 해결해주셨군요! 고마워용

프로덕션이 안되서 dev로 행사를 만들다가 알게되었습니다.... ㅎㅎ..

Todari

고생많았습니다!!!
그저 대 웨 디

Todari · 2025-01-03T04:13:43Z

client/src/pages/event/create/guest/SetNickNameStep.tsx


 import {FixedButton, Input} from '@HDesign/index';

-type SetEventNamePageProps = UseSetNicknameStepProps & {
+type SetNicknameStepProps = Pick<ReturnType<typeof useCreateGuestEventData>, 'nicknameProps'>['nicknameProps'] & {


항상 느끼는 건데, 유틸리티 타입을 늘 맛있게 사용하시는 것 같아욘
우리도 다들 유틸리티 타입들을 사용하다 보니, 가독성에 문제점 느끼거나 필요를 느낀다면 나중에 어떤 상황에 유틸리티 타입을 쓸지, 타입을 별도로 선언하는것이 나을지 컨벤션을 정해봐도 좋을 것 같네요!! 물론 아직 그정도는 아니라고 생각해요~!

어떤 유틸타입을 쓰는 지도 규칙을 정해두고 사용하면 더 읽기가 쉬워지죠. 좋은 것 같아요 👍

개인적으로는 다음과 같은 규칙을 적용해서 타입을 사용하려고 노력하고 있습니다.

훅의 반환 데이터에 의존적인 타입이라면 ReturnType을 사용

훅의 반환 데이터가 지엽적이지 않고 serviceType 중 하나라면 typeof 훅이 아니라 serviceType을 조합하여 사용

최대한 하나의 타입 원천을 의존하도록 함

Todari · 2025-01-03T04:14:24Z

client/src/utils/isDuplicate.ts

+const isDuplicate = (arr: string[], target: string) => {
+  return arr.includes(target);
+};


매우매우 사소하지만, isDuplicated 가 조금 더 명확할 것 같긴 해요~!

github-actions · 2025-01-03T05:41:57Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-twwueggnkb.chromatic.com/

pakxe added 11 commits December 31, 2024 13:12

feat: 닉네임 길이 8자로 늘림

9157d59

feat: 반복되는 닉네임 상태와 유효성 검증을 수행하는 useMemberName 훅 구현

2af0f33

feat: 이름 입력 관리를 훅 사용으로 대체하여 같은 로직 반복 제거

8a5aa00

feat: 상수를 사용하도록 수정

9e642ba

chore: 임시로 props 매칭하여 넘기도록 함

6aeedb6

chore: 불필요해진 파일 제거

8817576

chore: 철자 수정

17c2f12

chore: 사용하지 않는 import 제거

f9c9edf

feat: 중복 이름이면 에러 메세지 띄우도록 함

01d7a48

feat: 이름 중복 시 출력할 에러 메세지 선언

767dd7c

feat: 중복 요소 확인 유틸 분리

fd6a799

pakxe added 🖥️ FE Frontend 🚧 refactor refactoring 🚨 bug bug labels Dec 31, 2024

pakxe added this to the v3.1.0 milestone Dec 31, 2024

pakxe self-assigned this Dec 31, 2024

pakxe linked an issue Dec 31, 2024 that may be closed by this pull request

[FE] 참여한 사람 입력 시 자음이 분리되는 버그 #884

Closed

pakxe changed the base branch from main to fe-dev December 31, 2024 04:52

fix: props로 받는 타입 정의

e781f54

pakxe changed the title ~~[FE] 모바일 사파리, 크롬에서 참여한 사람 입력 시 자음이 분리되는 버그와 리펙터링~~ [FE] 참여한 사람 입력 시 자음이 분리되는 버그와 리펙터링 Dec 31, 2024

jinhokim98 approved these changes Jan 1, 2025

View reviewed changes

This was linked to issues Jan 1, 2025

[FE] 멤버 이름의 길이가 8로 수정된 것을 반영 #626

Open

[FE] 지출 내역 인원 변동 입력 버그 #894

Open

soi-ha approved these changes Jan 3, 2025

View reviewed changes

Todari approved these changes Jan 3, 2025

View reviewed changes

pakxe added 2 commits January 3, 2025 14:39

rename: nickname -> memberName으로 변경

2c41a0b

rename: isDuplicate -> isDuplicated로 변경

5d2142f

jinhokim98 merged commit f19a331 into fe-dev Jan 3, 2025
2 checks passed

jinhokim98 deleted the feature/#884 branch January 3, 2025 06:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] 참여한 사람 입력 시 자음이 분리되는 버그와 리펙터링 #889

[FE] 참여한 사람 입력 시 자음이 분리되는 버그와 리펙터링 #889

pakxe commented Dec 31, 2024 •

edited

Loading

github-actions bot commented Dec 31, 2024

github-actions bot commented Dec 31, 2024

github-actions bot commented Dec 31, 2024

jinhokim98 left a comment

jinhokim98 Jan 1, 2025

pakxe Jan 3, 2025

jinhokim98 Jan 1, 2025

jinhokim98 Jan 1, 2025

Todari Jan 3, 2025

pakxe Jan 3, 2025

soi-ha left a comment

soi-ha Jan 3, 2025

soi-ha Jan 3, 2025

pakxe Jan 3, 2025

Todari left a comment

Todari Jan 3, 2025

pakxe Jan 3, 2025

Todari Jan 3, 2025

github-actions bot commented Jan 3, 2025

[FE] 참여한 사람 입력 시 자음이 분리되는 버그와 리펙터링 #889

[FE] 참여한 사람 입력 시 자음이 분리되는 버그와 리펙터링 #889

Conversation

pakxe commented Dec 31, 2024 • edited Loading

issue

구현 목적

구현 사항

1. 이름 유효성 검사 유틸 함수를 수정하면서, 기존에 이 함수를 사용하던 로직에서 버그가 발생했습니다. && 이름 상태와 유효성 검사가 반복되므로 이를 훅으로 분리합니다.

3. 참여한 사람이 중복되는 경우 에러 메세지를 띄워줍니다.

github-actions bot commented Dec 31, 2024

Test Results

github-actions bot commented Dec 31, 2024

github-actions bot commented Dec 31, 2024

jinhokim98 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

soi-ha left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Todari left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Jan 3, 2025

pakxe commented Dec 31, 2024 •

edited

Loading