템플릿 생성 및 수정시 파일명 랜덤 생성 및 중복호출 막기, 공개 범위 설정 radio UI로 변경 #939

Hain-tain · 2024-11-28T12:49:46Z

⚡️ 관련 이슈

📍주요 변경 사항

템플릿 생성 및 수정시 파일명 랜덤 생성

파일명을 옵셔널로 바꾸면서, 사용자가 입력하지 않을 시 파일명을 랜덤 생성하는 로직을 추가하였습니다.
현재 랜덤 파일명은 file_(영어+숫자 랜덤 8자리)로 만들어집니다.

템플릿 생성 및 수정시 중복호출 막기

isSaving이라는 flag를 두어서 중복 호출을 막았습니다.
현재 useState와 useRef를 모두 써서 막았는데, 그 이유는 즉각적으로 flag 상태가 변해야하고 + UI도 변경해주어야 하기 때문이었습니다.
개인적으로 저장 버튼을 누르면 바로 로딩 UI 등으로 유저에게 피드백을 주는 것이 맞다고 생각하여 로딩 UI 변경을 위해 useState도 사용하였습니다.

공개 범위 설정 radio로 UI변경

기존에는 템플릿 공개 범위를 토글로 선택했었는데, 아이콘이 무슨 의미인지 잘 모르겠다는 피드백이 2건 이상 있었고 다른 레퍼런스(티스토리)를 참고하여 라디오 UI로 변경하게 되었습니다.

템플릿 설명 Textarea로 UI 변경

이전부터 설명이 한줄로만 나오고, 줄바꿈이 되지 않는 것이 불편하다는 의견이 있어서 Textarea로 UI 변경하였습니다.

🪧 구현 결과

2024-11-28.9.43.45.mov

🎸기타

랜덤 파일명을 임의로 file_(영어+숫자 랜덤 8자리)로 했는데, 다른 아이디어 있으시다면 적극 반영하겠습니다.
현재 템플릿 생성과 수정페이지에서 반복적으로 사용되는 아래와 같은 함수들을 util로 빼고 싶었는데, 어디에 어떻게 빼는 것이 좋을지 고민이 되더라고요! 일단 validateTemplate는 vaildate 파일로 빼고, 나머지는 그냥 파일 분리를 해보았습니다..!
현재 저장 버튼을 눌렀을 때 즉각적으로 버튼 자리를 대체하는 로딩 UI가 있고, navigate 하는 과정에서 페이지 전체에 걸리는 로딩 UI가 바로 보이는 것이 생각보다 불편하다는 생각이 들었습니다. 그렇다고 저장 버튼 로딩 UI를 없애면 즉각적인 피드백이 사라지는 느낌이고, 저장 버튼을 disabled처리하는 것도 이상하고... 이 부분에 대해 같이 논의해보고 싶어요!!

🍗 PR 첫 리뷰 마감 기한

~~11/29 22:00~~

12/05 23:59

Jaymyong66 · 2024-11-29T02:17:13Z

frontend/src/pages/TemplateEditPage/TemplateEditPage.tsx

+  const [isSaving, setIsSaving] = useState(false);
+  const isSavingRef = useRef(false);

  const { currentOption: currentFile, linkedElementRefs: sourceCodeRefs, handleSelectOption } = useSelectList();

  const { mutateAsync: updateTemplate, error } = useTemplateEditMutation(template.id);


isSaving은 따로 state을 만들지 않고 아래 useTemplateEditMutation의 isPending 상태를 사용해도 괜찮지 않을까요?

healim01

사용자 인터뷰부터 작업까지 수고가 많으셨습니다 헤인~!

난수로 파일명이 변경된 것도 전 좋은거 같습니다!!
로딩 UI 는 한번 이야기가 되면 좋을거 같네요

healim01 · 2024-11-30T04:53:44Z

frontend/src/pages/TemplateUploadPage/TemplateUploadPage.style.ts

+export const VisibilityButton = styled.button`
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const Radio = styled.div<{ isSelected: boolean }>`
+  width: 1rem;
+  height: 1rem;
+  background-color: ${({ theme, isSelected }) =>
+    isSelected ? theme.color.light.primary_500 : theme.color.light.secondary_200};
+  border-radius: 100%;
 `;


뭔가 동일한 컴포넌트인데 중복선언 되는 것들이 조금 있는거 같아요! 아무래도 style 를 외부에서 선언하니 더 잘 보이는거 같은데
Radio 는 공용 컴포넌트로 분리해볼 수 있지 않을까요? 헤인은 어떻게 생각하세요?

좋은 생각인 것 같아요! Radio 공용 컴포넌트로 분리했습니다👍

Jaymyong66 · 2024-11-30T05:31:01Z

frontend/src/pages/TemplateEditPage/TemplateEditPage.tsx

+  const isSavingRef = useRef(false);

  const { currentOption: currentFile, linkedElementRefs: sourceCodeRefs, handleSelectOption } = useSelectList();

  const { mutateAsync: updateTemplate, error } = useTemplateEditMutation(template.id);


추가로 이렇게 중복된 Mutation 요청을 막으면 좋은 부분이 회원이나 카테고리 관련 부분에서도 필요한 기능 같은데, 제가 공유드린 내용처럼 커스텀 훅으로 재사용 가능하게 바꿔보면 어떨까요?

…de-zap into refactor/909-improve-upload-ux

Hain-tain · 2024-12-04T14:07:17Z

frontend/.storybook/preview.tsx

-            </MemoryRouter>
-          </ToastProvider>
-        </AuthProvider>
+        <ThemeProvider theme={theme}>


이번에 Radio 컴포넌트에서 ThemeProvider theme을 사용하여서 추가하게 되었습니다

Hain-tain · 2024-12-04T14:09:47Z

frontend/src/api/authentication.ts


 export const checkName = async (name: string) => {
  const params = new URLSearchParams({ name });

-  await apiClient.get(`${END_POINTS.CHECK_NAME}?${params.toString()}`);
+  return await apiClient.get(`${END_POINTS.CHECK_NAME}?${params.toString()}`);


queryFn 으로 주는 checkName 가 아무것도 반환하지 않아 위와 같은 에러가 발생하였습니다.

React Query에서 queryFn 함수는 반드시 값을 반환해야 한다고 하여 위와 같이 반환하도록 변경하였습니다.

Hain-tain · 2024-12-04T14:10:36Z

frontend/src/hooks/usePreventDuplicateMutation.ts

+> & {
+  mutationFn: MutationFunction<TData, TVariables>;
+};


mutationFn 을 반드시 전달하도록 타입으로 강제하기위해 이렇게 설정해주었습니다!

Jaymyong66 · 2024-12-04T20:32:19Z

frontend/src/pages/TemplateEditPage/TemplateEditPage.tsx

+        <Radio
+          options={[...TEMPLATE_VISIBILITY]}
+          currentValue={visibility}
+          handleCurrentValue={handleVisibility}
+          getOptionLabel={(option: TemplateVisibility) => convertToKorVisibility[option]}
+        />


이렇게 보니, TEMPLATE_VISIBILITY 상수를 하나로 합쳐도 괜찮지 않을까 생각이 들었어요.
Radio의 인터페이스가 options와 getOptionLabel 두개를 받고 있는데, getOptionLabel이 조금 어색해 보여서요! 반환값도 string이고 그냥 Radio의 사용처에서 Object.entries나 Object.keys로 대응이 가능해보이는데, 어떻게 생각하시나요?!

export const TEMPLATE_VISIBILITY = { PUBLIC: '전체 공개', PRIVATE: '비공개', };

Jaymyong66 · 2024-12-04T20:37:10Z

frontend/src/pages/TemplateEditPage/TemplateEditPage.tsx

    } catch (error) {
      console.error('Failed to update template:', error);
-    } finally {
-      isSavingRef.current = false;
-      setIsSaving(false);


👍👍 혹시 try-catch구문이 아직 필요한가요?!

catch 없어도 될것 같아요!! 반영할게요!

Jaymyong66

T extends something 처럼 쓰는 방법을 배웠네요~!
고생하셨습니다 헤인!

healim01 · 2024-12-05T08:23:51Z

수고하셨습니다~!!

Hain-tain added 3 commits November 28, 2024 21:09

refactor(pages): 템플릿 생성 및 수정시 파일명 랜덤 생성 및 중복호출 막기

511c8b6

refactor(pages): 공개 범위 설정 radio UI로 변경

e8e77f0

refactor(src): 중복되는 함수(validateTemplate, generateUniqueFilename) 분리

8571a69

Hain-tain added FE 프론트엔드 refactor 요구사항이 바뀌지 않은 변경사항 labels Nov 28, 2024

Hain-tain added this to the 7차 스프린트 💭 milestone Nov 28, 2024

Hain-tain requested review from healim01 and Jaymyong66 November 28, 2024 12:49

Hain-tain self-assigned this Nov 28, 2024

refactor(pages): 템플릿 설명 입력 UI Textarea로 변경

fbf192b

Jaymyong66 reviewed Nov 29, 2024

View reviewed changes

healim01 approved these changes Nov 30, 2024

View reviewed changes

Jaymyong66 reviewed Nov 30, 2024

View reviewed changes

Hain-tain added 4 commits December 4, 2024 16:51

Merge branch 'dev/fe' of https://github.com/woowacourse-teams/2024-co…

30abb18

…de-zap into refactor/909-improve-upload-ux

fix(api): checkName 이 response return 하도록 변경

24317df

feat(src): Radio 컴포넌트 생성 및 적용

3750cfc

refactor(src): usePreventDuplicateMutation hook 생성 및 적용

16632f8

Hain-tain commented Dec 4, 2024

View reviewed changes

Jaymyong66 reviewed Dec 4, 2024

View reviewed changes

Hain-tain added 2 commits December 5, 2024 15:39

refactor(TemplateEditPage): 불필요한 try-catch 문 제거

8616347

refactor(src): Radio에서 options 을 객체로 받아 사용하도록 변경

f020b76

Jaymyong66 approved these changes Dec 5, 2024

View reviewed changes

healim01 merged commit 0f2d554 into dev/fe Dec 5, 2024
2 checks passed

healim01 deleted the refactor/909-improve-upload-ux branch December 5, 2024 08:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

템플릿 생성 및 수정시 파일명 랜덤 생성 및 중복호출 막기, 공개 범위 설정 radio UI로 변경 #939

템플릿 생성 및 수정시 파일명 랜덤 생성 및 중복호출 막기, 공개 범위 설정 radio UI로 변경 #939

Hain-tain commented Nov 28, 2024 •

edited

Loading

Jaymyong66 Nov 29, 2024

healim01 left a comment

healim01 Nov 30, 2024

Hain-tain Dec 4, 2024

Jaymyong66 Nov 30, 2024

Hain-tain Dec 4, 2024

Hain-tain Dec 4, 2024

Hain-tain Dec 4, 2024

Jaymyong66 Dec 4, 2024

Jaymyong66 Dec 4, 2024

Hain-tain Dec 5, 2024

Jaymyong66 left a comment

healim01 commented Dec 5, 2024

템플릿 생성 및 수정시 파일명 랜덤 생성 및 중복호출 막기, 공개 범위 설정 radio UI로 변경 #939

템플릿 생성 및 수정시 파일명 랜덤 생성 및 중복호출 막기, 공개 범위 설정 radio UI로 변경 #939

Conversation

Hain-tain commented Nov 28, 2024 • edited Loading

⚡️ 관련 이슈

📍주요 변경 사항

🪧 구현 결과

🎸기타

🍗 PR 첫 리뷰 마감 기한

Choose a reason for hiding this comment

healim01 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jaymyong66 left a comment

Choose a reason for hiding this comment

healim01 commented Dec 5, 2024

Hain-tain commented Nov 28, 2024 •

edited

Loading