From 162fce2b7d5007992832c32ad51cbe910d3f6270 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9B=94=ED=95=98?=
 <52562061+vi-wolhwa@users.noreply.github.com>
Date: Wed, 16 Oct 2024 21:15:12 +0900
Subject: [PATCH] =?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EC=83=89=EC=83=81=20=EC=A0=81=EC=9A=A9=20(#765)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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: 헤인 <157036488+Hain-tain@users.noreply.github.com>
---
 frontend/src/assets/images/index.ts           |  2 +-
 frontend/src/assets/images/xCircle.svg        |  4 ---
 frontend/src/assets/images/xSign.svg          |  3 ++
 .../components/TagButton/TagButton.style.ts   | 19 +++++-------
 .../src/components/TagButton/TagButton.tsx    | 29 ++++++++++++++-----
 .../components/TemplateCard/TemplateCard.tsx  |  6 ++--
 .../TagFilterMenu/TagFilterMenu.style.ts      |  7 +++--
 .../TagFilterMenu/TagFilterMenu.tsx           | 19 ++++++++++--
 .../src/pages/TemplatePage/TemplatePage.tsx   |  2 +-
 frontend/src/style/tagColors.ts               | 17 +++++++++++
 10 files changed, 75 insertions(+), 33 deletions(-)
 delete mode 100644 frontend/src/assets/images/xCircle.svg
 create mode 100644 frontend/src/assets/images/xSign.svg
 create mode 100644 frontend/src/style/tagColors.ts

diff --git a/frontend/src/assets/images/index.ts b/frontend/src/assets/images/index.ts
index 7ae0f15f3..9c1d4f327 100644
--- 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
deleted file mode 100644
index 4fd227116..000000000
--- a/frontend/src/assets/images/xCircle.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.6666 6.3335L6.33331 11.6668M6.33331 6.3335L11.6666 11.6668" stroke="#9399A2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke="#9399A2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/frontend/src/assets/images/xSign.svg b/frontend/src/assets/images/xSign.svg
new file mode 100644
index 000000000..d1491b7ca
--- /dev/null
+++ b/frontend/src/assets/images/xSign.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 1L1 13M1 1L13 13" stroke="#393e46" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/src/components/TagButton/TagButton.style.ts b/frontend/src/components/TagButton/TagButton.style.ts
index aae250811..8a9f0d3db 100644
--- 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
index 99441fbf3..6d3a66996 100644
--- a/frontend/src/components/TagButton/TagButton.tsx
+++ b/frontend/src/components/TagButton/TagButton.tsx
@@ -1,9 +1,12 @@
-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;
@@ -11,11 +14,23 @@ interface Props {
   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
index f9ed1df91..0b3e8ded7 100644
--- 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
index d59bc530c..91205bc28 100644
--- 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
index 31bdbde22..d038bb9d5 100644
--- 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
index d05fde5f3..00f959243 100644
--- 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
new file mode 100644
index 000000000..bd7192226
--- /dev/null
+++ 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',
+};