태그 버튼 색상 적용 #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

월하 고생했어요~!

* 문의하기 모달 생성 (#777) * design(Header): border-bottom 1px 로 변경 및 색상 secondary_300으로 변경 * feat(src): Textarea 컴포넌트 생성 * refactor(src): getChildOfType, getChildrenWithoutTypes 함수 utils로 파일로 분리 * feat(src): ContactUs 컴포넌트 생성 * feat(Modal): Modal 컴포넌트에 usePressESC, useScrollDisable 적용 * feat(components): Header 및 Footer에 ContactUs 적용, Header 에서 현재 경로 스타일 변경 * feat(ContactUs): 구글 시트 연동 추가 * refactor(ContactUs): isValidContents 상태 boolean 으로 관리하도록 변경 * design(Header): 헤더 '코드잽' secondary_800 으로 색상 변경 * refactor(Header): 헤더 '코드잽' 로고에도 현재 경로 스타일 적용 * 태그 버튼 색상 적용 (#765) * feat(style): 태그 버튼 팔레트 정의 * feat(utils): 태그 버튼의 색상 선택 유틸함수 구현 * feat(src): 태그 버튼, 필터 디자인 변경 및 태그 색상 적용 * refactor(utils): getTagColor 유틸함수를 컴포넌트 내부에 구현 * refactor(TagInput): 템플릿 업로드/수정 중 태그 색상 기본색으로 변경 * refactor(src): 태그 필터에서 선택된 태그 구분을 위한 디자인 수정 * fix(TemplateCard): SourceCodeViewer에 filename 전달 * refactor(TagButton): 함수 분리 및 메모이제이션 수행 * refactor(TagButton): 불필요한 useMemo 제거 --------- Co-authored-by: 헤인 <[email protected]> * api 변경에 따른 /login 엔드포인트 제거 (#808) * 카테고리, 태그, 템플릿 목록 로딩 처리 개선 (#813) * refactor(components): ScrollTopButton 컴포넌트 분리 * refactor(MyTemplatePage): 컴포넌트 분리 및 태그목록, 카테고리 목록 서스펜스 적용 * refactor(components): TemplateDeleteSelection, TemplateListSectionLoading 컴포넌트 분리 * refactor(src): useKeyword, useShowTemplateList, useSelectAndDeleteTemplateList 훅 분리 및 MyTemplatePage 적용 * refactor(templates): 사용하지 않는 useTemplateCategoryTagQueries 훅 삭제 * refactor(pages): useShowTemplateList => useFilteredTemplateList로 이름 변경 * refactor(src): useKeyword => useSearchKeyword로 이름 변경 * refactor(ConfirmDeleteModal): ConfirmDeleteModalProps =>Props 로 변경 * refactor(CategoryListSection): Flex 대신 스타일드 컴포넌트로 스타일 지정 * refactor(ConfirmDeleteModal): Modal 합성 컴포넌트의 하위 컴포넌트 사용하도록 변경 * refactor(queries): useSuspenseQuery를 사용하는 훅들 수동으로 error 전파 * 템플릿 공개 범위 설정(�visibility) 기능 구현 (#787) * feat(components): Toggle 컴포넌트 * feat(images): PrivateIcon, PublicIcon 추가 * refactor(mocks): templateList mock data에 "visibility" 추가 * feat(src): visibility 기능 추가 * feat(src): visibility가 private인 경우 템플릿 카드, 상세 페이지에서 privateIcon 보이도록 설정 * refactor(TemplateCard): 사용하지 않는 스타일드 컴포넌트 제거 * refactor(src): PRIVATE 상수화 * refactor(Toggle): Toggle.style 에서 불필요한 calc() 제거 * refactor(src): ICON_SIZE 상수 선언 및 적용 * refactor(components): CategoryDropdown 스타일 변경 * refactor(Toggle): Toggle 스타일 변경 및 showOptions 생성 * refactor(pages): 템플릿 생성 및 수정 페이지 Toggle 변경사항 반영 * ApiError 및 ApiClient 생성으로 HTTP 요청 및 에러 핸들링 리팩토링 (#783) * feat(Error): ApiError 객체 생성 * feat(api): ApiClient 객체 생성 및 template 구경가기, 업로드 요청 적용 * chore: react-error-boundary 라이브러리 설치 * feat(TemplateExplorePage): 일시적 에러에 대한 Local ErrorBoundary 적용 * feat(api): ApiClient - 인증 실패 시, localStorage에서 유저 정보 제거 * refactor(api): templates - JSON.stringify 중복 적용 제거 * feat(api): ApiClient - 응답 본문이 없을 때, 반환값 처리 * refactor(api): getLoginState - apiClient 적용 및 중복 코드 제거 * refactor(api): ApiClient - fetch문에 try-catch 추가, error handling 메서드 분리 * feat(frontend): setupTests - MSW 서버의 unhandled handler 디버깅 코드 추가 * refactor(api): API_URL에 기본값 문자열 추가 * refactor(api): ApiClient - 에러 확인 분기문을 hasError 메서드 밖으로 분리 * refactor(Error): TempError -> TemporaryError로 컴포넌트 명 변경 * refactor(api): ApiClient - method의 타입을 string에서 HttpMethod 타입 정의 * refactor(Error): ApiError - switch-case 문을 매핑으로 변경 * refactor(Error): errorCode, detail에 기본값 정의 * refactor(api): errorCode의 타입을 string -> number로 변경 * refactor(Error): TemporaryError - 불필요한 조건문 제거 * refactor(api): ApiClient - customFetch에서 response body가 아닌 response 자체를 반환하도록 변경 * refactor(templates): useTemplateUploadMutation - 요청 성공에 따라 location 라우트 이동, 에러 처리 변경 * refactor(api): templates - Endpoint 상수화 * refactor(templates): useTemplateUploadMutation - wrapper 추가 * feat(src): 확장자 기반으로 언어 태그 자동 생성 기능 추가 (#814) * chore: version 1.1.4로 변경 (#817) --------- Co-authored-by: 월하 <[email protected]> Co-authored-by: MYONG JAEWI <[email protected]>

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