[feat]: tag coloring

src/components/Tag.tsx

@@ -1,36 +1,51 @@
+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
 }
 
+const hashStringToColor = (str: string, colorsArray: string[]) => {
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  const index = Math.abs(hash) % colorsArray.length
+
+  return colorsArray[index]
+}
+
 const Tag: React.FC<Props> = ({ children }) => {
   const router = useRouter()
 
   const handleClick = (value: string) => {
     router.push(`/?tag=${value}`)
   }
-  return (
-    <StyledWrapper onClick={() => handleClick(children)}>
-      {children}
-    </StyledWrapper>
-  )
+
+  const StyledTag = styled.div`
+    background-color: ${hashStringToColor(children, colorArray)};
+    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,10 @@ 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={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>

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,
   },
 }