From 39faf7e84bdd13be1e58a16d88cf0f7949157674 Mon Sep 17 00:00:00 2001 From: uiw6unoh Date: Fri, 26 Apr 2024 14:36:38 +0900 Subject: [PATCH 1/3] feat: Tag Coloring --- src/components/Tag.tsx | 46 ++++++++++++--------- src/routes/Detail/PostDetail/PostHeader.tsx | 9 ++-- src/routes/Feed/PostList/PostCard.tsx | 10 ++++- src/styles/colors.ts | 16 +++++++ 4 files changed, 56 insertions(+), 25 deletions(-) diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx index 4d0ae3665..68856dd63 100644 --- a/src/components/Tag.tsx +++ b/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 = ({ children }) => { +const Tag: React.FC = ({ children, tag_id }) => { const router = useRouter() const handleClick = (value: string) => { router.push(`/?tag=${value}`) } - return ( - handleClick(children)}> - {children} - - ) + + 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 handleClick(children)}>{children} } 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; -` diff --git a/src/routes/Detail/PostDetail/PostHeader.tsx b/src/routes/Detail/PostDetail/PostHeader.tsx index 85485f4c9..51df6a064 100644 --- a/src/routes/Detail/PostDetail/PostHeader.tsx +++ b/src/routes/Detail/PostDetail/PostHeader.tsx @@ -42,9 +42,12 @@ const PostHeader: React.FC = ({ data }) => {
{data.tags && (
- {data.tags.map((tag: string) => ( - {tag} - ))} + {data.tags && + data.tags.map((tag: string, idx: number) => ( + + {tag} + + ))}
)}
diff --git a/src/routes/Feed/PostList/PostCard.tsx b/src/routes/Feed/PostList/PostCard.tsx index 7673e161c..7bf086f88 100644 --- a/src/routes/Feed/PostList/PostCard.tsx +++ b/src/routes/Feed/PostList/PostCard.tsx @@ -32,7 +32,11 @@ const PostCard: React.FC = ({ data }) => { /> )} -
+

{data.title}

@@ -50,7 +54,9 @@ const PostCard: React.FC = ({ data }) => {
{data.tags && data.tags.map((tag: string, idx: number) => ( - {tag} + + {tag} + ))}
diff --git a/src/styles/colors.ts b/src/styles/colors.ts index 4dfbce217..6f5156917 100644 --- a/src/styles/colors.ts +++ b/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,6 +28,10 @@ export const colors = { ...blue, ...red, ...green, + ...amber, + ...grayA, + ...purple, + ...pink, }, dark: { ...indigoDark, @@ -27,5 +39,9 @@ export const colors = { ...blueDark, ...redDark, ...greenDark, + ...amberDark, + ...grayDarkA, + ...purpleDark, + ...pinkDark, }, } From cb7e8ba16937ade9ec548398795df981ed5afba5 Mon Sep 17 00:00:00 2001 From: uiw6unoh Date: Mon, 10 Jun 2024 09:32:54 +0900 Subject: [PATCH 2/3] feat: ensure consistent colors for identical tags --- src/components/Tag.tsx | 13 ++++++++++--- src/routes/Detail/PostDetail/PostHeader.tsx | 4 +--- src/routes/Feed/PostList/PostCard.tsx | 4 +--- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx index 68856dd63..69acb101a 100644 --- a/src/components/Tag.tsx +++ b/src/components/Tag.tsx @@ -15,10 +15,17 @@ const colorArray = [ type Props = { children: string - tag_id: number } -const Tag: React.FC = ({ children, tag_id }) => { +const hashStringToColor = (str: string, colorsArray: string[]) => { + let hash = 0 + for (let i = 0; i < str.length; i++) { + hash = str.charCodeAt(i) + ((hash << 5) - hash) + } + return colorsArray[Math.abs(hash) % colorsArray.length] +} + +const Tag: React.FC = ({ children }) => { const router = useRouter() const handleClick = (value: string) => { @@ -26,7 +33,7 @@ const Tag: React.FC = ({ children, tag_id }) => { } const StyledTag = styled.div` - background-color: ${colorArray[tag_id % colorArray.length]}; + background-color: ${hashStringToColor(children, colorArray)}; color: ${colors.light.gray10}; padding: 0.25rem 0.5rem; border-radius: 50px; diff --git a/src/routes/Detail/PostDetail/PostHeader.tsx b/src/routes/Detail/PostDetail/PostHeader.tsx index 51df6a064..3e7cfe31a 100644 --- a/src/routes/Detail/PostDetail/PostHeader.tsx +++ b/src/routes/Detail/PostDetail/PostHeader.tsx @@ -44,9 +44,7 @@ const PostHeader: React.FC = ({ data }) => {
{data.tags && data.tags.map((tag: string, idx: number) => ( - - {tag} - + {tag} ))}
)} diff --git a/src/routes/Feed/PostList/PostCard.tsx b/src/routes/Feed/PostList/PostCard.tsx index 7bf086f88..6fd66309c 100644 --- a/src/routes/Feed/PostList/PostCard.tsx +++ b/src/routes/Feed/PostList/PostCard.tsx @@ -54,9 +54,7 @@ const PostCard: React.FC = ({ data }) => {
{data.tags && data.tags.map((tag: string, idx: number) => ( - - {tag} - + {tag} ))}
From e7c28370c9eba36b3b9398d152000cd44872cee2 Mon Sep 17 00:00:00 2001 From: uiw6unoh Date: Mon, 10 Jun 2024 10:59:40 +0900 Subject: [PATCH 3/3] refactor: separate index calculation from return statement --- src/components/Tag.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx index 69acb101a..3d2666746 100644 --- a/src/components/Tag.tsx +++ b/src/components/Tag.tsx @@ -22,7 +22,9 @@ const hashStringToColor = (str: string, colorsArray: string[]) => { for (let i = 0; i < str.length; i++) { hash = str.charCodeAt(i) + ((hash << 5) - hash) } - return colorsArray[Math.abs(hash) % colorsArray.length] + const index = Math.abs(hash) % colorsArray.length + + return colorsArray[index] } const Tag: React.FC = ({ children }) => {