✨ feat: Add Round-chip Component (#29)

waktaplay · Jan 16, 2025 · de47185 · de47185
2 parents 0745bbf + b5f5f55
commit de47185
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 5 deletions.
diff --git a/next.config.js b/next.config.js
@@ -6,6 +6,8 @@ const nextConfig = {
     styledComponents: true,
   },
 
+  images: { domains: ['cdn.spacewak.net'] },
+
   webpack: (config) => {
     const fileLoaderRule = config.module.rules.find((rule) =>
       rule.test?.test?.('.svg')

diff --git a/src/components/common/RoundChip.tsx b/src/components/common/RoundChip.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import { grayScale, personalColor, secondary } from '@/styles/colors';
+import Image from 'next/image';
+import styled from 'styled-components';
+
+import { TYPOGRAPHY } from '@/styles/typography';
+
+export type TGroup = 'isd' | 'gocl' | 'goca'; // 추후 별도 관리 예정
+
+const groupColor = {
+  isd: secondary['pinkLight'], // 이세돌
+  gocl: secondary['blueLight'], // 고클
+  goca: secondary['orangeLight'], // 고카
+};
+
+const RoundChipWrapper = styled.div<{ group: TGroup }>`
+  height: 38px;
+  width: fit-content;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  justify-content: center;
+  align-items: center;
+  background: ${grayScale[700]};
+  border-radius: 70px;
+  padding: 4px 10px 4px 4px;
+  color: ${({ group }) => groupColor[group]};
+
+  .close_icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+`;
+
+const IconWrapper = styled.div<{ artist: string }>`
+  height: 30px;
+  width: 30px;
+  border-radius: 30px;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  // 퍼스널 컬러가 없을 경우 gray800
+  background: ${({ artist }) =>
+    artist ? personalColor[artist] : grayScale[800]};
+`;
+
+const ArtistNameWrapper = styled.p`
+  ${TYPOGRAPHY['bodyNormal1']}
+`;
+
+export interface IRoundChip {
+  item: { icon: string; label: string; value: string; group: TGroup };
+}
+
+export default function RoundChip({
+  item: { icon, label, value, group },
+}: IRoundChip) {
+  return (
+    <RoundChipWrapper group={group}>
+      <IconWrapper artist={value} title={label}>
+        {icon && <Image src={icon} height={30} width={30} alt={value} />}
+      </IconWrapper>
+      <ArtistNameWrapper>{label}</ArtistNameWrapper>
+    </RoundChipWrapper>
+  );
+}
diff --git a/src/styles/colors.ts b/src/styles/colors.ts
@@ -1,6 +1,6 @@
 // black & white
-export const black = '#000000'
-export const white = '#FFFFFF'
+export const black = '#000000';
+export const white = '#FFFFFF';
 
 // grayscale
 export const grayScale = {
@@ -14,10 +14,10 @@ export const grayScale = {
   200: '#D3D5DB',
   100: '#E5E7EC',
   50: '#FBFBFB',
-}
+};
 
 // primary color
-export const primary = '#47F998'
+export const primary = '#47F998';
 
 export const secondary = {
   greenLignt: '#87EF63', // 우왁굳
@@ -28,4 +28,13 @@ export const secondary = {
   blueDark: '#536A7A', // 고정멤버 bg
   orangeLight: '#F5A66E', // 아카데미
   orangeDark: '#7D6350', // 아카데미 bg
-}
+};
+
+export const personalColor = {
+  ine: '#A55CE9', // 아이네
+  jingburger: '#FFDE1F', // 징버거
+  lilpa: '#6852EE', // 릴파
+  jururu: '#FF69B1', // 주르르
+  gosegu: '#69D3FF', // 고세구
+  viichan: '#99F65B', // 비챤
+};