[FE] 옵션, 주소 검색 등의 UI 를 변경하고 옵션 버튼의 렌더링을 최적화한다. #616

ooherin · 2024-09-19T08:16:54Z

❗ Issue

[FE] 옵션의 버그를 수정한다. #588

✨ 구현한 기능

(1) 주소 버튼 부분을 바꿨습니다. 아이콘을 추가하여 명확성을 높였습니다.

(2) 옵션의 어색한 미디어 쿼리를 수정하였습니다.

(3) 편집 페이지에 옵션이 데이터에 set 되도록 수정하였습니다.

⭐️ 추가
(4) 옵션이 클릭된 옵션 외에는 리렌더링이 안되도록 최적화 작업을 진행하였습니다.
useSelectedOptionsStore 에 isSelectedOption 을 사용해서 해당 옵션버튼의 props 로 isSelectedOption 을 전달해주었으며, 해당 값이 바뀔 때에만 memo 를 사용해서 리렌더링 되게 해주었습니다!

before	after
2024-09-21.12.23.33.mov	2024-09-21.12.22.22.mov

📢 논의하고 싶은 내용

🎸 기타

github-actions · 2024-09-19T08:19:47Z

🚀 storybook: https://669cc4025d9f500bb8c34778-usgkhzopjt.chromatic.com/

healim01

확인했습니다~!

healim01 · 2024-09-19T08:52:39Z

frontend/src/components/_common/Button/Button.tsx

+  `,
+  Text: styled.span<{ size: ButtonSize }>`
+    ${flexCenter}
+    min-width: ${({ size }) => size === 'full' && 80}px;


이거 혼자 픽셀이네요,,,~ rem 처리해주세용

skiende74

확인했습니다. 머지이슈로 변경된 EditPage만 확인해주세요~

skiende74 · 2024-09-19T08:51:42Z

frontend/src/hooks/useMutateChecklist.ts

-  const selectedOptions = useOptionStore(state => state.selectedOptions);
+  const selectedOptions = useSelectedOptionStore(state => state.selectedOptions);


이건그냥 궁금증인데 useOptionStore랑 useSelectedOptionStore 차이가뭘까요?

해당 명명은 파일명만 바뀌고 함수명이 바뀌지 않아서 수정한 것입니다~! + 파일명도 수정하였습니다 감사합니다👍

skiende74 · 2024-09-19T08:53:09Z

frontend/src/components/NewChecklist/Option/OptionList.tsx

-import OptionButton from '@/components/NewChecklist/Option/OptionButton/OptionButton';
+import MemoziedOptionButton from '@/components/NewChecklist/Option/OptionButton/OptionButton';


이 둘의 차이는 무엇인가요?

로직이 불완전하게 적혀 있었네요! 찾아주셔서 감사합니다...ㅎㅎ해당 메모제이션은 중요해서 본문에 추가해놓았습니다!

skiende74 · 2024-09-19T08:55:43Z

frontend/src/pages/EditChecklistPage.tsx

+  const resetAndGoHome = () => {
+    roomInfoActions.resetAll();
+    resetChecklist();
+    selectedOptionActions.reset();
+    navigate(ROUTE_PATH.checklistList);
+  };
+
  return (
    <>
      <Header
-        left={<Header.Backward />}
+        left={<Header.Backward onClick={resetAndGoHome} />}


머지관련이슈 ! 확인해주세요

github-actions · 2024-09-20T08:56:37Z

🚀 storybook: https://669cc4025d9f500bb8c34778-wfbqqvbdew.chromatic.com/

github-actions · 2024-09-20T15:33:47Z

🚀 storybook: https://669cc4025d9f500bb8c34778-lvjstprral.chromatic.com/

github-actions · 2024-09-20T15:40:43Z

🚀 storybook: https://669cc4025d9f500bb8c34778-luxquybvki.chromatic.com/

ooherin · 2024-09-20T15:43:31Z

옵션 버튼 메모제이션에 관한 내용을 본문의 마지막에 추가했습니다~!!

skiende74

기존 사항은 반영이 된 것 같아요

메모이제이션을 추가로 작업해주셨던데
파일이름 안바뀐거랑 arePropsEqual 관련해서 코멘트 달아두었습니다.

skiende74 · 2024-09-21T04:38:00Z

frontend/src/components/NewChecklist/Option/OptionButton/OptionButton.tsx

+const arePropsEqual = (prevProps: { isSelected: boolean }, nextProps: { isSelected: boolean }) => {
+  return prevProps.isSelected === nextProps.isSelected;
+};
+
+/*사용자가 누른 옵션 버튼만 리렌더링*/
+const MemoizedOptionButton = React.memo((props: { option: OptionWithIcon; isSelected: boolean }) => {
+  const isSelected = useSelectedOptionStore(state => state.actions.isSelectedOption(props.option.id));
+  return <OptionButton option={props.option} isSelected={isSelected} />;
+}, arePropsEqual);
+
+export default MemoizedOptionButton;


옵션버튼의 파일명이 여전히 OptionButton이라 같이바꿔주셔야 좋을 것 같아요~!

사실 이건 애매한 부분인 것 같긴한데 원래 컴포넌트 명은 OptionButton 이 맞는 것 같습니다.
메모제이션은 기존 컴포넌트의 부가사항일 뿐이고, 이 메모 기능을 추가했다고 해서 파일명이 바뀌는 것은 혼란을 줄 수 있을 것 같은데요
제이드는 어떻게 생각하세요?

음 아래에 관련코멘트 작성하였습니다 :)

skiende74 · 2024-09-21T04:39:39Z

frontend/src/components/NewChecklist/Option/OptionButton/OptionButton.tsx

+const arePropsEqual = (prevProps: { isSelected: boolean }, nextProps: { isSelected: boolean }) => {
+  return prevProps.isSelected === nextProps.isSelected;
+};


arePropsEqual을 굳이따로 안넣어줘도 메모이제이션가능한 상황같습니다.

아핫 그렇네요! 감사합니다 해당 코드는 삭제하도록 할게요!

skiende74 · 2024-09-21T04:46:46Z

frontend/src/components/NewChecklist/Option/OptionList.tsx

@@ -1,11 +1,15 @@
 import styled from '@emotion/styled';

-import OptionButton from '@/components/NewChecklist/Option/OptionButton/OptionButton';
+import MemoziedOptionButton from '@/components/NewChecklist/Option/OptionButton/OptionButton';


Memoized인데 Memozied로 오타가 난거같습니다.

Memoized인데 Memozied로 오타가 난거같습니다.

아직 반영이 안된 것 같아요

수정했습니다! 감사합니다:)

healim01

확인했습니다~! 제이드가 대부분 코멘트 해놔서 따로 없는거 같습니다~ 수고하셨습니당

github-actions · 2024-09-21T08:48:49Z

🚀 storybook: https://669cc4025d9f500bb8c34778-kfqlyltmcc.chromatic.com/

skiende74

수고많으셨습니다.

반영 안 된 코멘트 하나랑 수정 관련 코멘트 하나 있습니다.
PR시간이 길어져서 우선 머지합니다~!
추후 PR에서 반영해주시면 좋을 것 같아요~

skiende74 · 2024-09-21T10:45:48Z

frontend/src/components/NewChecklist/Option/OptionButton/OptionButton.tsx

+const MemoizedOptionButton = React.memo((props: { option: OptionWithIcon; isSelected: boolean }) => {
+  const isSelected = useSelectedOptionStore(state => state.actions.isSelectedOption(props.option.id));
+  return <OptionButton option={props.option} isSelected={isSelected} />;
+});
+
+export default MemoizedOptionButton;


prop으로 isSelected를 받고있는데 정작 isSelected를 사용하지는 않고,
내부에서 새로 지역변수를 만들어서 사용하고있네요.
이 45번줄은 지워져야할 것 같아요.

그리고 지금의 사용례라면 그냥 이 6줄 전체를 아래와 같이 대체할 수 있을 것 같아요

Suggested change

const MemoizedOptionButton = React.memo((props: { option: OptionWithIcon; isSelected: boolean }) => {

const isSelected = useSelectedOptionStore(state => state.actions.isSelectedOption(props.option.id));

return <OptionButton option={props.option} isSelected={isSelected} />;

});

export default MemoizedOptionButton;

export default React.memo(OptionButton);

skiende74 · 2024-09-21T10:46:16Z

frontend/src/components/NewChecklist/Option/OptionList.tsx

@@ -1,11 +1,15 @@
 import styled from '@emotion/styled';

-import OptionButton from '@/components/NewChecklist/Option/OptionButton/OptionButton';
+import MemoziedOptionButton from '@/components/NewChecklist/Option/OptionButton/OptionButton';


Memoized인데 Memozied로 오타가 난거같습니다.

아직 반영이 안된 것 같아요

ooherin added 6 commits September 19, 2024 10:39

fix: 옵션 미디어 쿼리 수정

b01ce45

fix: 커스텀 플러스 버튼 UI 수정

c4cc999

fix: 체크리스트 편집 후 뒤로가기 시 로컬 저장 삭제

c08a108

fix: 주소 관련 버튼 아이콘 추가

5201903

fix: 체크리스트 폼 갭 수정

bf01c99

fix: 충돌 수정

a6d0ff9

ooherin added 🔑 FE 🎨 UI labels Sep 19, 2024

ooherin self-assigned this Sep 19, 2024

healim01 reviewed Sep 19, 2024

View reviewed changes

skiende74 reviewed Sep 19, 2024

View reviewed changes

ooherin added 2 commits September 20, 2024 14:25

fix: 일부 css 수정

61bbda9

fix: 코드 리뷰 반영

b84a264

feat: 옵션 선택된 것만 리렌더링하도록 최적화

beb9d07

ooherin changed the title ~~[FE] 옵션, 주소 검색 등의 UI 를 변경한다.~~ [FE] 옵션, 주소 검색 등의 UI 를 변경하고 옵션 버튼의 렌더링을 최적화한다. Sep 20, 2024

fix: selectedOptionStore 파일명 수정

96a220b

skiende74 reviewed Sep 21, 2024

View reviewed changes

healim01 reviewed Sep 21, 2024

View reviewed changes

fix: 리뷰 반영

5f247c7

skiende74 reviewed Sep 21, 2024

View reviewed changes

skiende74 merged commit 483a6b1 into dev-fe Sep 21, 2024
2 checks passed

skiende74 deleted the fix/588-option branch September 21, 2024 10:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] 옵션, 주소 검색 등의 UI 를 변경하고 옵션 버튼의 렌더링을 최적화한다. #616

[FE] 옵션, 주소 검색 등의 UI 를 변경하고 옵션 버튼의 렌더링을 최적화한다. #616

ooherin commented Sep 19, 2024 •

edited

Loading

github-actions bot commented Sep 19, 2024

healim01 left a comment

healim01 Sep 19, 2024

skiende74 left a comment •

edited

Loading

skiende74 Sep 19, 2024

ooherin Sep 20, 2024 •

edited

Loading

skiende74 Sep 19, 2024

ooherin Sep 20, 2024

skiende74 Sep 19, 2024

github-actions bot commented Sep 20, 2024

github-actions bot commented Sep 20, 2024

github-actions bot commented Sep 20, 2024

ooherin commented Sep 20, 2024

skiende74 left a comment •

edited

Loading

skiende74 Sep 21, 2024 •

edited

Loading

ooherin Sep 21, 2024

skiende74 Sep 21, 2024 •

edited

Loading

skiende74 Sep 21, 2024

ooherin Sep 21, 2024

skiende74 Sep 21, 2024

skiende74 Sep 21, 2024

ooherin Sep 21, 2024

healim01 left a comment

github-actions bot commented Sep 21, 2024

skiende74 left a comment •

edited

Loading

skiende74 Sep 21, 2024 •

edited

Loading

skiende74 Sep 21, 2024

		const selectedOptions = useOptionStore(state => state.selectedOptions);
		const selectedOptions = useSelectedOptionStore(state => state.selectedOptions);

		import OptionButton from '@/components/NewChecklist/Option/OptionButton/OptionButton';
		import MemoziedOptionButton from '@/components/NewChecklist/Option/OptionButton/OptionButton';

[FE] 옵션, 주소 검색 등의 UI 를 변경하고 옵션 버튼의 렌더링을 최적화한다. #616

[FE] 옵션, 주소 검색 등의 UI 를 변경하고 옵션 버튼의 렌더링을 최적화한다. #616

Conversation

ooherin commented Sep 19, 2024 • edited Loading

❗ Issue

✨ 구현한 기능

📢 논의하고 싶은 내용

🎸 기타

github-actions bot commented Sep 19, 2024

healim01 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

skiende74 left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ooherin Sep 20, 2024 • edited Loading

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 Sep 20, 2024

github-actions bot commented Sep 20, 2024

github-actions bot commented Sep 20, 2024

ooherin commented Sep 20, 2024

skiende74 left a comment • edited Loading

Choose a reason for hiding this comment

skiende74 Sep 21, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

skiende74 Sep 21, 2024 • edited Loading

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

healim01 left a comment

Choose a reason for hiding this comment

github-actions bot commented Sep 21, 2024

skiende74 left a comment • edited Loading

Choose a reason for hiding this comment

skiende74 Sep 21, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ooherin commented Sep 19, 2024 •

edited

Loading

skiende74 left a comment •

edited

Loading

ooherin Sep 20, 2024 •

edited

Loading

skiende74 left a comment •

edited

Loading

skiende74 Sep 21, 2024 •

edited

Loading

skiende74 Sep 21, 2024 •

edited

Loading

skiende74 left a comment •

edited

Loading

skiende74 Sep 21, 2024 •

edited

Loading