태그 버튼 색상 적용 (#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]>
woowacourse-teams · Oct 16, 2024 · 162fce2 · 162fce2
1 parent 4df2f8a
commit 162fce2
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 33 deletions.
diff --git a/frontend/src/assets/images/index.ts b/frontend/src/assets/images/index.ts
@@ -6,7 +6,7 @@ export { default as TrashcanIcon } from './trashcan.svg';
 export { default as UserCircleIcon } from './userCircle.svg';
 export { default as ChevronIcon } from './chevron.svg';
 export { default as Chevron2Icon } from './chevron2.svg';
-export { default as XCircleIcon } from './xCircle.svg';
+export { default as XSignIcon } from './xSign.svg';
 export { default as EyeIcon } from './eye.svg';
 export { default as ArrowUpIcon } from './arrowUp.svg';
 export { default as SettingIcon } from './setting.svg';

diff --git a/frontend/src/assets/images/xCircle.svg b/frontend/src/assets/images/xCircle.svg
diff --git a/frontend/src/assets/images/xSign.svg b/frontend/src/assets/images/xSign.svg
diff --git a/frontend/src/components/TagButton/TagButton.style.ts b/frontend/src/components/TagButton/TagButton.style.ts
@@ -1,28 +1,25 @@
 import styled from '@emotion/styled';
 
-import { theme } from '@/style/theme';
-
-export const TagButtonWrapper = styled.button<{ isFocused: boolean }>`
+export const TagButtonWrapper = styled.button<{ background: string; border: string; isFocused: boolean }>`
   cursor: pointer;
 
   display: flex;
-  gap: 0.5rem;
+  gap: 0.75rem;
   align-items: center;
   justify-content: center;
 
   box-sizing: border-box;
   height: 1.75rem;
+  margin: 0.25rem;
   padding: 0 0.75rem;
 
-  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')};
+  background-color: ${({ background }) => background};
+  border-radius: 0.5rem;
+  outline: ${({ isFocused }) => (isFocused ? '1.5' : '1')}px solid ${({ border }) => border};
+  box-shadow: ${({ isFocused }) => isFocused && '0 0 3px #00000070'};
 
   &:disabled {
     cursor: text;
   }
-
-  &:not(:disabled):hover {
-    box-shadow: 0 1px 4px #00000030;
-  }
 `;
diff --git a/frontend/src/components/TagButton/TagButton.tsx b/frontend/src/components/TagButton/TagButton.tsx
@@ -1,21 +1,36 @@
-import { XCircleIcon } from '@/assets/images';
+import { XSignIcon } from '@/assets/images';
 import { Text } from '@/components';
+import { TAG_COLORS, INPUT_TAG_COLOR } from '@/style/tagColors';
 import { theme } from '@/style/theme';
+
 import * as S from './TagButton.style';
 
 interface Props {
+  id?: number;
   name: string;
   isFocused?: boolean;
   disabled?: boolean;
   variant?: 'default' | 'edit';
   onClick?: () => void;
 }
 
-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 getTagColor = (id?: number) => (id ? TAG_COLORS[id % TAG_COLORS.length] : INPUT_TAG_COLOR);
+
+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_800}>{name}</Text.Medium>
+      {variant === 'edit' && <XSignIcon width={10} height={10} aria-label='태그 삭제' />}
+    </S.TagButtonWrapper>
+  );
+};
 
 export default TagButton;
diff --git a/frontend/src/components/TemplateCard/TemplateCard.tsx b/frontend/src/components/TemplateCard/TemplateCard.tsx
@@ -71,13 +71,13 @@ const TemplateCard = ({ template }: Props) => {
         </S.EllipsisTextWrapper>
       </Flex>
 
-      <SourceCodeViewer mode='thumbnailView' content={thumbnail.content} />
+      <SourceCodeViewer mode='thumbnailView' filename={thumbnail.filename} content={thumbnail.content} />
 
       <Flex justify='space-between' onClick={blockMovingToDetailPage}>
         <S.TagListContainer>
           {tags.map((tag: Tag) => (
             <Flex key={tag.id}>
-              <TagButton name={tag.name} disabled={true} />
+              <TagButton id={tag.id} name={tag.name} disabled={true} />
             </Flex>
           ))}
         </S.TagListContainer>
@@ -92,7 +92,7 @@ const TemplateCard = ({ template }: Props) => {
         {tags.length !== 0 && showAllTagList && (
           <S.AllTagListContainer>
             {tags.map((tag: Tag) => (
-              <TagButton key={tag.id} name={tag.name} disabled={true} />
+              <TagButton key={tag.id} id={tag.id} name={tag.name} disabled={true} />
             ))}
           </S.AllTagListContainer>
         )}

diff --git a/frontend/src/pages/MyTemplatesPage/components/TagFilterMenu/TagFilterMenu.style.ts b/frontend/src/pages/MyTemplatesPage/components/TagFilterMenu/TagFilterMenu.style.ts
@@ -4,11 +4,11 @@ import { theme } from '@/style/theme';
 
 export const TagFilterMenuContainer = styled.div`
   display: flex;
-  gap: 1rem;
+  gap: 0.5rem;
   align-items: flex-start;
 
   width: 100%;
-  padding: 1rem;
+  padding: 0.75rem 0.75rem 0 0.75rem;
 
   border: 1px solid ${theme.color.light.secondary_300};
   border-radius: 8px;
@@ -19,10 +19,11 @@ export const TagButtonsContainer = styled.div<{ height: string }>`
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
-  align-items: flex-start;
+  align-items: center;
 
   width: 100%;
   height: ${({ height }) => height};
+  margin-bottom: 0.75rem;
 
   transition: height 0.3s ease-in-out;
 `;

diff --git a/frontend/src/pages/MyTemplatesPage/components/TagFilterMenu/TagFilterMenu.tsx b/frontend/src/pages/MyTemplatesPage/components/TagFilterMenu/TagFilterMenu.tsx
@@ -8,7 +8,7 @@ import { remToPx } from '@/utils';
 
 import * as S from './TagFilterMenu.style';
 
-const LINE_HEIGHT_REM = 1.875;
+const LINE_HEIGHT_REM = 2.25;
 
 interface Props {
   tagList: Tag[];
@@ -69,10 +69,23 @@ const TagFilterMenu = ({ tagList, selectedTagIds, onSelectTags }: Props) => {
     <S.TagFilterMenuContainer data-testid='tag-filter-menu'>
       <S.TagButtonsContainer ref={containerRef} height={height}>
         {selectedTags.map((tag) => (
-          <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}
+            variant='edit'
+            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)}
+          />
         ))}
       </S.TagButtonsContainer>
       {showMoreButton && (

diff --git a/frontend/src/pages/TemplatePage/TemplatePage.tsx b/frontend/src/pages/TemplatePage/TemplatePage.tsx
@@ -148,7 +148,7 @@ const TemplatePage = () => {
 
                 <Flex gap='0.25rem' wrap='wrap'>
                   {template.tags.map((tag) => (
-                    <TagButton key={tag.id} name={tag.name} disabled></TagButton>
+                    <TagButton key={tag.id} id={tag.id} name={tag.name} disabled />
                   ))}
                 </Flex>
                 <div

diff --git a/frontend/src/style/tagColors.ts b/frontend/src/style/tagColors.ts
@@ -0,0 +1,17 @@
+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' },
+];
+
+export const INPUT_TAG_COLOR = {
+  background: '#fcfcfc',
+  border: '#777777',
+};