[feat]: tag coloring

src/components/Tag.tsx

@@ -1,36 +1,42 @@
+import { colors } from "../styles/colors"
 import styled from "@emotion/styled"
 import { useRouter } from "next/router"
 import React from "react"
 
+const colorArray = [
+  colors.light.red4,
+  colors.light.amber4,
+  colors.light.green4,
+  colors.light.blue4,
+  colors.light.indigo4,
+  colors.light.purple4,
+  colors.light.pink4,
+]
+
 type Props = {
   children: string
+  tag_id: number
 }
 
-const Tag: React.FC<Props> = ({ children }) => {
+const Tag: React.FC<Props> = ({ children, tag_id }) => {
   const router = useRouter()
 
   const handleClick = (value: string) => {
     router.push(`/?tag=${value}`)
   }
-  return (
-    <StyledWrapper onClick={() => handleClick(children)}>
-      {children}
-    </StyledWrapper>
-  )
+
+  const StyledTag = styled.div`
+    background-color: ${colorArray[tag_id % colorArray.length]};
+    color: ${colors.light.gray10};
+    padding: 0.25rem 0.5rem;
+    border-radius: 50px;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    font-weight: 400;
+    cursor: pointer;
+  `
+
+  return <StyledTag onClick={() => handleClick(children)}>{children}</StyledTag>
 }
 
 export default Tag
-
-const StyledWrapper = styled.div`
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  border-radius: 50px;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: 400;
-  color: ${({ theme }) => theme.colors.gray10};
-  background-color: ${({ theme }) => theme.colors.gray5};
-  cursor: pointer;
-`

src/routes/Detail/PostDetail/PostHeader.tsx

@@ -42,9 +42,12 @@ const PostHeader: React.FC<Props> = ({ data }) => {
           <div className="mid">
             {data.tags && (
               <div className="tags">
-                {data.tags.map((tag: string) => (
-                  <Tag key={tag}>{tag}</Tag>
-                ))}
+                {data.tags &&
+                  data.tags.map((tag: string, idx: number) => (
+                    <Tag key={tag} tag_id={idx}>
+                      {tag}
+                    </Tag>
+                  ))}
               </div>
             )}
           </div>

src/routes/Feed/PostList/PostCard.tsx

@@ -32,7 +32,11 @@ const PostCard: React.FC<Props> = ({ data }) => {
             />
           </div>
         )}
-        <div data-thumb={!!data.thumbnail} data-category={!!category} className="content">
+        <div
+          data-thumb={!!data.thumbnail}
+          data-category={!!category}
+          className="content"
+        >
           <header className="top">
             <h2>{data.title}</h2>
           </header>
@@ -50,7 +54,9 @@ const PostCard: React.FC<Props> = ({ data }) => {
           <div className="tags">
             {data.tags &&
               data.tags.map((tag: string, idx: number) => (
-                <Tag key={idx}>{tag}</Tag>
+                <Tag key={idx} tag_id={idx}>
+                  {tag}
+                </Tag>
               ))}
           </div>
         </div>

src/styles/colors.ts

@@ -9,6 +9,14 @@ import {
   greenDark,
   indigo,
   indigoDark,
+  amber,
+  amberDark,
+  grayA,
+  grayDarkA,
+  purple,
+  purpleDark,
+  pink,
+  pinkDark,
 } from "@radix-ui/colors"
 
 export type Colors = typeof colors.light & typeof colors.dark
@@ -20,12 +28,20 @@ export const colors = {
     ...blue,
     ...red,
     ...green,
+    ...amber,
+    ...grayA,
+    ...purple,
+    ...pink,
   },
   dark: {
     ...indigoDark,
     ...grayDark,
     ...blueDark,
     ...redDark,
     ...greenDark,
+    ...amberDark,
+    ...grayDarkA,
+    ...purpleDark,
+    ...pinkDark,
   },
 }