Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

태그 버튼 색상 적용 #765

Merged
merged 10 commits into from
Oct 16, 2024
Merged

태그 버튼 색상 적용 #765

Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8e8b8ab
feat(style): 태그 버튼 팔레트 정의
vi-wolhwa Oct 9, 2024
b09514b
feat(utils): 태그 버튼의 색상 선택 유틸함수 구현
vi-wolhwa Oct 9, 2024
f63354b
feat(src): 태그 버튼, 필터 디자인 변경 및 태그 색상 적용
vi-wolhwa Oct 9, 2024
ef32ae9
refactor(utils): getTagColor 유틸함수를 컴포넌트 내부에 구현
vi-wolhwa Oct 11, 2024
566c538
refactor(TagInput): 템플릿 업로드/수정 중 태그 색상 기본색으로 변경
vi-wolhwa Oct 11, 2024
5d7268c
refactor(src): 태그 필터에서 선택된 태그 구분을 위한 디자인 수정
vi-wolhwa Oct 14, 2024
2dd0d29
Merge branch 'dev/fe' of https://github.com/woowacourse-teams/2024-co…
vi-wolhwa Oct 14, 2024
753b9cb
fix(TemplateCard): SourceCodeViewer에 filename 전달
Hain-tain Oct 15, 2024
4a2f047
refactor(TagButton): 함수 분리 및 메모이제이션 수행
vi-wolhwa Oct 16, 2024
7ef2a62
refactor(TagButton): 불필요한 useMemo 제거
vi-wolhwa Oct 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions frontend/src/components/TagButton/TagButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { useMemo } from 'react';

import { XSignIcon } from '@/assets/images';
import { Text } from '@/components';
import { TAG_COLORS, INPUT_TAG_COLOR } from '@/style/tagColors';
Expand All @@ -14,10 +16,10 @@ interface Props {
onClick?: () => void;
}

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);
const getTagColor = (id?: number) => (id ? TAG_COLORS[id % TAG_COLORS.length] : INPUT_TAG_COLOR);

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


return (
<S.TagButtonWrapper
Expand Down