[FE] 아티클 키워드 별 색상을 고정시킨다. (#1048)

woowacourse-teams · Dec 8, 2024 · d6d0494 · d6d0494
1 parent 4499922
commit d6d0494
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/frontend/src/components/ArticleList/ArticleCard.tsx b/frontend/src/components/ArticleList/ArticleCard.tsx
@@ -16,7 +16,10 @@ const ArticleCard = ({ article }: Props) => {
   const navigate = useNavigate();
   const { articleId, keyword, title, summary, createdAt } = article;
 
-  const { color500 } = getSeqColor(articleId);
+  const ARTICLE_KEYWORDS = ['방끗 활용법', '동네 추천', '우테코 생활', '자취 꿀팁'];
+  const currentColorIndex = ARTICLE_KEYWORDS.findIndex(keyword => keyword === article.keyword);
+  const { color500 } = getSeqColor(currentColorIndex);
+  const { color500: defaultColor500 } = getSeqColor(articleId);
 
   const handleClick = () => {
     trackArticleDetail(article.title);
@@ -25,7 +28,7 @@ const ArticleCard = ({ article }: Props) => {
 
   return (
     <S.Container onClick={handleClick} tabIndex={1}>
-      <S.Keyword bgColor={color500}> {keyword}</S.Keyword>
+      <S.Keyword bgColor={color500 ?? defaultColor500}> {keyword}</S.Keyword>
       <S.Title>{title}</S.Title>
       <S.Label>{summary}</S.Label>
       <S.Label>{formattedDate(createdAt)}</S.Label>

diff --git a/frontend/src/pages/AdminPage.tsx b/frontend/src/pages/AdminPage.tsx
@@ -22,11 +22,11 @@ const AdminPage = () => {
   return (
     <S.PageWrapper>
       <S.QuestionBox>
-        <S.QuestionText>Is Hailey God?</S.QuestionText>
+        <S.QuestionText>방끗의 마스코트는?</S.QuestionText>
         <S.ButtonWrapper>
-          <S.Button color={'red'}>No</S.Button>
+          <S.Button color={'red'}>몰라요</S.Button>
           <Link to={ROUTE_PATH.articleEditor}>
-            <S.Button>Yes</S.Button>
+            <S.Button>방방이</S.Button>
           </Link>
         </S.ButtonWrapper>
       </S.QuestionBox>