태그 버튼 색상 적용 #765

vi-wolhwa · 2024-10-09T14:55:25Z

⚡️ 관련 이슈

close #752

📍주요 변경 사항

1. 태그 색상 컬러화 : 태그 id 기반

2. 태그 버튼, 필터메뉴 디자인 변경

vi-wolhwa · 2024-10-09T15:18:00Z

frontend/src/components/TagButton/TagButton.style.ts

-
-  &:not(:disabled):hover {
-    box-shadow: 0 1px 4px #00000030;
-  }
 `;


변경사항

태그 버튼의 색상이 생긴 후, 포커싱 되었을 때 강조 효과를 위한 스타일 수정입니다.

포커싱 전/후 스타일 차이는 opacity, outline 입니다.

vi-wolhwa · 2024-10-09T15:34:26Z

frontend/src/components/TagButton/TagButton.tsx

-const TagButton = ({ name, isFocused = false, disabled = false, variant = 'default', onClick }: Props) => (
-  <S.TagButtonWrapper isFocused={isFocused} disabled={disabled} onClick={() => onClick && onClick()}>
-    <Text.Medium color={isFocused ? theme.color.light.white : theme.color.light.secondary_700}>{name}</Text.Medium>
-    {variant === 'edit' && <XCircleIcon width={16} height={16} aria-label='태그 삭제' />}
-  </S.TagButtonWrapper>
-);
+const TagButton = ({ id, name, isFocused = false, disabled = false, variant = 'default', onClick }: Props) => {
+  const { background, border } = getTagColor(id);
+
+  return (
+    <S.TagButtonWrapper
+      background={background}
+      border={border}
+      isFocused={isFocused}
+      disabled={disabled}
+      onClick={() => onClick && onClick()}
+    >
+      <Text.Medium color={theme.color.light.secondary_700}>{name}</Text.Medium>
+      {variant === 'edit' && <XCircleIcon width={16} height={16} aria-label='태그 삭제' />}
+    </S.TagButtonWrapper>
+  );
+};


변경사항

태그 색상의 선택자로써 id가 추가되었습니다.

각 태그 별 색상 적용을 위한 가변인자(background, border)가 추가되었습니다.

vi-wolhwa · 2024-10-09T15:40:12Z

frontend/src/pages/MyTemplatesPage/components/TagFilterMenu/TagFilterMenu.style.ts


  width: 100%;
  height: ${({ height }) => height};
+  margin-bottom: 0.75rem;

  transition: height 0.3s ease-in-out;
 `;


변경사항

태그 버튼이 포커싱 되었을 때, outline과 shadow가 잘리는 현상을 해결하기 위한 변경사항 입니다.

vi-wolhwa · 2024-10-09T15:48:39Z

frontend/src/pages/MyTemplatesPage/components/TagFilterMenu/TagFilterMenu.tsx

-          <TagButton key={tag.id} name={tag.name} isFocused={true} onClick={() => handleButtonClick(tag.id)} />
+          <TagButton
+            key={tag.id}
+            id={tag.id}
+            name={tag.name}
+            isFocused={true}
+            onClick={() => handleButtonClick(tag.id)}
+          />
        ))}
        {unselectedTags.map((tag) => (
-          <TagButton key={tag.id} name={tag.name} isFocused={false} onClick={() => handleButtonClick(tag.id)} />
+          <TagButton
+            key={tag.id}
+            id={tag.id}
+            name={tag.name}
+            isFocused={false}
+            onClick={() => handleButtonClick(tag.id)}
+          />


변경사항 (리뷰 X)

id 필드가 추가되었습니다.

vi-wolhwa · 2024-10-09T15:49:50Z

frontend/src/pages/MyTemplatesPage/components/TagFilterMenu/TagFilterMenu.tsx

-const LINE_HEIGHT_REM = 1.875;
+const LINE_HEIGHT_REM = 2.25;


변경사항

태그 버튼이 잘리는 것을 해결하기 위한 변경사항입니다.

이게 태그 메뉴 스켈레톤에도 반영되고 있는 값이라, 상수로 관리되면 좋을 것 같다는 생각이 드네요!

어딘가 스타일적인 요소에 대한 상수도 정의해두어도 좋을 것 같아요!!

vi-wolhwa · 2024-10-09T15:51:24Z

frontend/src/style/tagColors.ts

+export const TAG_COLORS = [
+  { background: '#fedfa2', border: '#dbba79' },
+  { background: '#fcd0a0', border: '#db9651' },
+  { background: '#fac9b5', border: '#e58762' },
+  { background: '#dfd1f1', border: '#9779c5' },
+  { background: '#cddcfc', border: '#6a9ad2' },
+  { background: '#c7eafa', border: '#57aed3' },
+  { background: '#d5e9e2', border: '#73b5a3' },
+  { background: '#d1e6b0', border: '#96b962' },
+  { background: '#eefab9', border: '#baca60' },
+  { background: '#dfceb7', border: '#bd9a69' },
+];


변경사항

태그 버튼 포커싱 스타일을 위하여 회의 시점 색상보다 border의 색상이 진해졌습니다. (채도+, 명도-)

Jaymyong66

템플릿 업로드 시의 태그 ID와 실제 생성 후 서버에서 받는 태그 ID가 달라서, 두 상황의 태그 색이 다르게 보이는 부분만 이야기해보면 좋겠네요!

Hain-tain · 2024-10-10T01:57:23Z

frontend/src/components/TagInput/TagInput.tsx

@@ -71,6 +71,7 @@ const TagInput = ({ value, handleValue, resetValue, tags, setTags }: Props) => {
        {tags?.map((tag, idx) => (
          <TagButton
            key={idx}
+            id={idx}


Suggested change

id={idx}

id={tag.id ?? 0}

이런식으로 주면 tag.id 가 있는 경우에는 색깔이 입혀지고, 없는 경우에는 첫번째 색상으로 통일 될 것 같아요!

이를 위해서는 TagInput에서 props로 태그명 문자열 배열을 받고 있는데, 이를 태그 객체 배열을 받도록 변경해야 할 것 같네용

Hain-tain · 2024-10-11T08:50:27Z

추가적으로 현재 태그가 선택되었을 때와 선택되지 않았을 때 스타일적인 부분이 크게 차이나지 않아서, 어떤 태그가 선택된 상태인지 한 눈에 인지하기 어려운 것 같습니다. 이에 대해 어떻게 보여주는 것이 좋을지 논의해보아야 할 것 같아요!!

…de-zap into feat/752-tag-colorization

Hain-tain · 2024-10-15T04:15:48Z

frontend/src/components/TagButton/TagButton.style.ts

-  background-color: ${({ isFocused }) => (isFocused ? theme.color.light.primary_400 : theme.color.light.tertiary_50)};
-  border: 1px solid ${({ isFocused }) => (isFocused ? theme.color.light.primary_600 : theme.color.light.tertiary_200)};
-  border-radius: 2.5rem;
+  opacity: ${({ isFocused }) => (isFocused ? '0.99' : '0.85')};


opacity 를 1로 하면 주변까지 다 리랜더링되어서 0.99로 해주신거였군요! 디테일👍👍

Hain-tain · 2024-10-15T04:18:20Z

frontend/src/components/TagButton/TagButton.tsx

-  </S.TagButtonWrapper>
-);
+const TagButton = ({ id, name, isFocused = false, disabled = false, variant = 'default', onClick }: Props) => {
+  const getTagColor = (id?: number) => (id ? TAG_COLORS[id % TAG_COLORS.length] : INPUT_TAG_COLOR);


getTagColor를 TagButton 컴포넌트 밖으로 빼는건 어떨까요? (이 파일 기준으로 16번째 줄 공백 쪽에 넣어주면 좋을 것 같아요)

TagButton이 리랜더링 될 때마다 getTagColor가 다시 생기는걸 방지하기 위해서입니다.

Hain-tain · 2024-10-15T04:25:35Z

frontend/src/pages/MyTemplatesPage/components/TagFilterMenu/TagFilterMenu.tsx

-const LINE_HEIGHT_REM = 1.875;
+const LINE_HEIGHT_REM = 2.25;


이게 태그 메뉴 스켈레톤에도 반영되고 있는 값이라, 상수로 관리되면 좋을 것 같다는 생각이 드네요!

어딘가 스타일적인 요소에 대한 상수도 정의해두어도 좋을 것 같아요!!

Hain-tain · 2024-10-16T05:50:02Z

frontend/src/components/TagButton/TagButton.tsx


-  const { background, border } = getTagColor(id);
+const TagButton = ({ id, name, isFocused = false, disabled = false, variant = 'default', onClick }: Props) => {
+  const { background, border } = useMemo(() => getTagColor(id), [id]);


간단한 연산이라서 useMemo를 사용하지 않는 편이 더 좋을 것 같다는 개인적인 의견입니다..!!

간단한 연산에 useMemo 쓰지 말자

(번역) useMemo를 사용하는 것을 당장 멈추세요!

Jaymyong66

월하 고생했어요~!

vi-wolhwa added 3 commits October 9, 2024 23:48

feat(style): 태그 버튼 팔레트 정의

8e8b8ab

feat(utils): 태그 버튼의 색상 선택 유틸함수 구현

b09514b

feat(src): 태그 버튼, 필터 디자인 변경 및 태그 색상 적용

f63354b

vi-wolhwa added feature 기능 추가 FE 프론트엔드 labels Oct 9, 2024

vi-wolhwa added this to the 6차 스프린트 🦴 milestone Oct 9, 2024

vi-wolhwa requested review from Jaymyong66 and Hain-tain October 9, 2024 14:55

vi-wolhwa self-assigned this Oct 9, 2024

vi-wolhwa changed the title 태그 태그 버튼 색상 적용 Oct 9, 2024

vi-wolhwa commented Oct 9, 2024

View reviewed changes

Jaymyong66 reviewed Oct 10, 2024

View reviewed changes

Hain-tain reviewed Oct 10, 2024

View reviewed changes

vi-wolhwa added 2 commits October 11, 2024 16:03

refactor(utils): getTagColor 유틸함수를 컴포넌트 내부에 구현

ef32ae9

refactor(TagInput): 템플릿 업로드/수정 중 태그 색상 기본색으로 변경

566c538

vi-wolhwa added 2 commits October 14, 2024 18:13

refactor(src): 태그 필터에서 선택된 태그 구분을 위한 디자인 수정

5d7268c

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

2dd0d29

…de-zap into feat/752-tag-colorization

vi-wolhwa requested review from Jaymyong66 and Hain-tain October 14, 2024 09:20

Hain-tain previously approved these changes Oct 15, 2024

View reviewed changes

fix(TemplateCard): SourceCodeViewer에 filename 전달

753b9cb

Hain-tain dismissed their stale review via 753b9cb October 15, 2024 07:20

Hain-tain previously approved these changes Oct 16, 2024

View reviewed changes

refactor(TagButton): 함수 분리 및 메모이제이션 수행

4a2f047

vi-wolhwa dismissed Hain-tain’s stale review via 4a2f047 October 16, 2024 02:52

vi-wolhwa requested a review from Hain-tain October 16, 2024 02:53

Hain-tain reviewed Oct 16, 2024

View reviewed changes

refactor(TagButton): 불필요한 useMemo 제거

7ef2a62

vi-wolhwa requested a review from Hain-tain October 16, 2024 06:52

Hain-tain approved these changes Oct 16, 2024

View reviewed changes

Jaymyong66 approved these changes Oct 16, 2024

View reviewed changes

Jaymyong66 merged commit 162fce2 into dev/fe Oct 16, 2024
3 checks passed

Jaymyong66 deleted the feat/752-tag-colorization branch October 16, 2024 12:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

태그 버튼 색상 적용 #765

태그 버튼 색상 적용 #765

vi-wolhwa commented Oct 9, 2024 •

edited

Loading

vi-wolhwa Oct 9, 2024

vi-wolhwa Oct 9, 2024

vi-wolhwa Oct 9, 2024

vi-wolhwa Oct 9, 2024

vi-wolhwa Oct 9, 2024

Hain-tain Oct 15, 2024

vi-wolhwa Oct 9, 2024

Jaymyong66 left a comment

Hain-tain Oct 10, 2024

vi-wolhwa Oct 10, 2024

Hain-tain commented Oct 11, 2024

Hain-tain Oct 15, 2024

Hain-tain Oct 15, 2024

Hain-tain Oct 15, 2024

Hain-tain Oct 16, 2024

Jaymyong66 left a comment

태그 버튼 색상 적용 #765

태그 버튼 색상 적용 #765

Conversation

vi-wolhwa commented Oct 9, 2024 • edited Loading

⚡️ 관련 이슈

📍주요 변경 사항

1. 태그 색상 컬러화 : 태그 id 기반

2. 태그 버튼, 필터메뉴 디자인 변경

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

변경사항 (리뷰 X)

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Hain-tain commented Oct 11, 2024

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

vi-wolhwa commented Oct 9, 2024 •

edited

Loading