[Refactor] 컴포넌트, 변수명 리펙토링 #204

rtttr1 · 2024-08-03T07:17:02Z

해당 이슈 번호

closed #195

체크리스트

🔀 PR 제목의 형식을 잘 작성했나요? e.g. [feat] PR을 등록한다.
💯 테스트는 잘 통과했나요?
🏗️ 빌드는 성공했나요?
🧹 불필요한 코드는 제거했나요?
✅ 컨벤션을 지켰나요?
💭 이슈는 등록했나요?
🏷️ 라벨은 등록했나요?
💻 git rebase를 사용했나요?
🙇‍♂️ 리뷰어를 지정했나요?

📌 내가 알게 된 부분

전체적으로 네이밍을 바꾸어 보았습니다!
네이밍에 관련해서 고민하고 찾아본거 아주 간단하게 정리해둔 노션으로 대체하겠습니다

📌 질문할 부분

📌스크린샷 (선택)

wuzoo

wow 정말로 변수명이 너무 깔끔해진 것 같습니다. 보면서 너무 직관적이다라는 생각이 많이 들었어요 !

다만 제가 생각하기에는 특정 컴포넌트 안에 있는 요소들에 대한 스타일 네이밍은, 해당 컴포넌트 네임을 제거해도 될 것 같다는 ? 생각을 해요. 예를 들면 Document 컴포넌트라면 documentContainerStyle이 아닌 containerStyle !!

정말 고생하셨습니다 ㅎㅎ

wuzoo · 2024-08-03T08:33:16Z

src/page/archiving/index/component/DocumentBar/DocumentBar.style.ts

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';

 import { theme } from '@/common/style/theme/theme';

-export const containerStyle = (blockSelected: string) =>
+export const documentBarContainerStyle = (blockSelected: string) =>


저는 이전 네이밍이 더 좋은 것 같아요 !

어차피 DocumentBar.style.ts 이므로 도큐먼트바에 대한 스타일링이 명시되어있으므로, 그냥 container 스타일이라 해도 좋을 것 같아요

흠 containerStyle로만 하니 온갖 군데에서 선언한 containerStyle이 자동완성에 다떠서 요렇게 바꾸어 봤는데 저도 너무 길다는 느낌이 들긴해서 다시 돌려놓는게 맞는거 같네요!!

wuzoo · 2024-08-03T08:34:25Z

src/page/archiving/index/component/DocumentBarTab/DocumentBarTab.style.ts

+export const selectedStyle = (selectedTabId: string, tabId: string) =>
+  selectedTabId === tabId


👍👍👍

wuzoo · 2024-08-03T08:41:58Z

src/page/archiving/index/component/DocumentBarTab/DocumentBarTab.tsx

+        onClick={() => onTabClick(selectedTabId, 'selected')}
+        css={[tabStyle('selected'), selectedStyle(selectedTabId, 'selected')]}>
        선택한 블록
      </Button>
      <Button
-        onClick={() => onTabClick(selectedId, 'total')}
-        css={[tabStyle('total'), selectedStyle(selectedId, 'total')]}>
+        onClick={() => onTabClick(selectedTabId, 'total')}
+        css={[tabStyle('total'), selectedStyle(selectedTabId, 'total')]}>


제가 규홍님께 Tabs와 Tab을 컴포넌트로 따로 분리해보면 좋을 것 같다고 말씀드렸는데, 일단은 여기서 고칠 수 있다고 생각되는게 html tag 에요 !

제가 HTML문서를 찾아봤는데, "nav는 문서의 부분 중 다른 페이지 혹은 컨텐츠로의 링크를 보여주는 "구획"이다" 라고 하더라고요 !

즉, nav 안에 ul 안에 li가 있는 구조가 정석적인 구조인 것 같아요, 특히나 탭과 같은 컴포넌트를 구현할 때 !

이 때 또 고려해볼 수 있는건 ul과 li는 시맨틱 태그가 아니기 때문에 적절히 role을 부여할 수 있을 것 같아요.

실제로 WAI-ARIA 가 제공해주는 role중에는 tablist와 tab이 있기 때문에 이를 각각 ul, li에 부여해준다면 너무너무 좋을 것 같습니다 !

거기다가 더해서 li 태그를 tab을 통해 사용자가 접근할 수 있도록 해준다면 더더욱 완벽! 할거 같아요. 드롭다운 구현 중에 제가 사용했던 것 같은데 참고해보시면 좋을 것 같아요 !

오호!! 이거 브렌치 머지하고 다른 브렌치파서 주용님이 알려주신 방향으로 공컴 구현 도전해보겠습니다!!

wuzoo · 2024-08-03T08:45:28Z

src/shared/component/LeftSidebar/LeftSidebarItem/LeftSidebarMenuItem.tsx

+    <li css={leftSidebarMenuItemStyle} onClick={onClick}>
+      <PageIndicatorStick isClicked={isClicked} />
+      <Flex css={clubInfoStyle(isClicked, isExpanded)}>
+        <img src={logoUrl} alt={`${children?.toString()} icon`} css={clubLogoStyle} />
+        <Text tag="body4" css={clubNameStyle(isExpanded)}>
+          {children}
+        </Text>
+      </Flex>
+    </li>


이것도 규홍님이 판단하신 것처럼 왼쪽 사이드바의 메뉴 아이템들이니 tab을 통해 접근이 가능하다면 ? 또한 'Enter` 눌렀을 때 이동까지 가능하다면 ? 너무 좋을 것 같네요. 접근성 측면에서 !!

aslant disable 줄도 지울 수 있을 것 같습니다. role을 부여한다면요 !

namdaeun

전체적으로 변수명을 많이 고민해보신게 느껴집니다,,! 코드가 읽기 너무 수월해서 좋네요
저도 규홍님 코드 보면서 변수명에 대해 한 번 더 고민해볼 수 있었어요
고생많으셨습니다 :)

namdaeun · 2024-08-03T09:40:00Z

src/page/archiving/index/component/DocumentItem/DocumentItem.tsx

  const { isOpen, openModal, closeModal, currentContent } = useModal();

-  const fileName = children?.toString();
+  const documentName = children?.toString();


file ->document로 변경해주니 코드 전체적으로 통일감이 느껴져서 좋네요👍

namdaeun · 2024-08-03T09:41:03Z

src/page/archiving/index/component/DocumentItem/DocumentItem.tsx

  const { isOpen, openModal, closeModal, currentContent } = useModal();

-  const fileName = children?.toString();
+  const documentName = children?.toString();

  const teamId = useTeamId();

  //문서 클릭시 띄워주는 함수


함수명만으로도 어떤 의도인지 파악이 충분히 가능하다고 생각해서 이 주석은 제거해주셔도 좋을 것 같습니다!

동의합니다!

namdaeun · 2024-08-03T09:42:54Z

src/page/archiving/index/component/SelectedBlock/SelectedBlock.tsx

@@ -19,23 +19,23 @@ import { useTeamId } from '@/shared/store/team';
 import { blockNameStyle, deleteBtnStyle } from './SelectedBlock.style';

 interface DocumentBarInfoProps {
-  selectedId: string;
+  selectedTabId: string;
  blockName: string;
  selectedBlock: Block;
  onClickClose: () => void;


onClose는 어떤가요 ?

동의합니다!

namdaeun · 2024-08-03T10:00:00Z

src/shared/component/LeftSidebar/LeftSidebarItem/PageIndicatorStick/PageIndicatorStick.tsx

요기는 따로 분리하기 보다 LeftSidebarMenuItem에 추가해도 괜찮을 것 같다는 의견입니다
컴포넌트가 너무 잘게 쪼개진 느낌 ? 이에용 어떻게 생각하실까요??

Bowoon1216

변수명으로 고민하신 게 보이네요!! 상세한 변수명 좋습니다 👍
수고하셨습니다 🤗

cindy-chaewon

컴포넌트 , 변수명 바꾸니까 코드가 훨 읽기 쉬워진거 같아요!! 고생하셨습니당!!

cindy-chaewon · 2024-08-06T13:39:40Z

src/page/archiving/index/hook/api/useBlockInfoQuery.ts

@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';

 import { getDocuments } from '@/shared/api/time-blocks/team/time-block';

-export const useBlockQuery = (teamId: number, blockId: number) => {
+export const useBlockInfoQuery = (teamId: number, blockId: number) => {
  return useQuery({
    queryKey: ['document', blockId],


블럭 내용 관련 이라면 쿼리키를 'blockInfo' 와 같은 블록 내용관련으로 바꿔도 좋을 거 같아요!

요거는 문서 삭제되면 전체문서, 블록 문서 두개 모두 재실행 시키기 위해서 두 쿼리의 첫 쿼리키를 document로 지정해 보았습니다!

rtttr1 added 9 commits August 1, 2024 22:46

#195 refactor: leftSidebar 컴포넌트명 수정"

4c7f9f0

#195 refactor: 중간 저장

ccd1251

#195 chore: pull 받기

d74ebf0

#195 refactor: leftSidebar 컴포넌트명, 변수명 최종 수정

6eb52cb

#195 refactor: documentItem 변수명 수정

a4051ee

Merge branch 'develop' into refactor/tiki/#195-name-refactoring

aa73180

#195 fix: 에러 해결

5b1ee70

#195 refactor: 함수명 변경

2d258d7

#195 fix: build 에러 해결

bcefe98

rtttr1 added ♻️Refactor 🍭규홍 labels Aug 3, 2024

rtttr1 requested review from namdaeun, cindy-chaewon, Bowoon1216 and wuzoo August 3, 2024 07:17

rtttr1 self-assigned this Aug 3, 2024

wuzoo reviewed Aug 3, 2024

View reviewed changes

namdaeun reviewed Aug 3, 2024

View reviewed changes

Bowoon1216 approved these changes Aug 4, 2024

View reviewed changes

#195 refactor: 코드리뷰 반영

718b2c2

cindy-chaewon approved these changes Aug 6, 2024

View reviewed changes

rtttr1 added 5 commits August 7, 2024 14:12

#195 feat: 레사바 keyboard 이벤트 추가

296f702

#195 feat: 문서바 문서item에 keyboard event 적용

ea57b6b

#195 fix: 코드리뷰 반영

7bf7760

#195 fix: 빌드 에러 해결

d314584

#195 fix: 충돌 해결

96ad38c

rtttr1 merged commit 428a96a into develop Aug 7, 2024
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Refactor] 컴포넌트, 변수명 리펙토링 #204

[Refactor] 컴포넌트, 변수명 리펙토링 #204

rtttr1 commented Aug 3, 2024

wuzoo left a comment

wuzoo Aug 3, 2024

rtttr1 Aug 4, 2024

wuzoo Aug 3, 2024

wuzoo Aug 3, 2024

rtttr1 Aug 4, 2024

wuzoo Aug 3, 2024

namdaeun left a comment

namdaeun Aug 3, 2024

namdaeun Aug 3, 2024

rtttr1 Aug 4, 2024

namdaeun Aug 3, 2024

rtttr1 Aug 4, 2024

namdaeun Aug 3, 2024

Bowoon1216 left a comment

cindy-chaewon left a comment

cindy-chaewon Aug 6, 2024

rtttr1 Aug 7, 2024

		export const selectedStyle = (selectedTabId: string, tabId: string) =>
		selectedTabId === tabId

[Refactor] 컴포넌트, 변수명 리펙토링 #204

[Refactor] 컴포넌트, 변수명 리펙토링 #204

Conversation

rtttr1 commented Aug 3, 2024

해당 이슈 번호

체크리스트

📌 내가 알게 된 부분

📌 질문할 부분

📌스크린샷 (선택)

wuzoo 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

namdaeun 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

Bowoon1216 left a comment

Choose a reason for hiding this comment

cindy-chaewon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment