Merge pull request #13 from DevKor-github/feat/#12/chip

feat: chip 구현구현

Author: halionaz

src/assets/icons/Arrow.tsx

@@ -0,0 +1,11 @@
+const Arrow = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none">
+      <path
+        d="M10.0152 4.24986C9.89675 4.13147 9.73615 4.06496 9.5687 4.06496C9.40125 4.06496 9.24065 4.13147 9.12222 4.24986L5.99626 7.37582L2.8703 4.24986C2.75119 4.13482 2.59167 4.07117 2.42609 4.07261C2.26051 4.07405 2.10212 4.14046 1.98504 4.25755C1.86795 4.37464 1.80154 4.53303 1.8001 4.69861C1.79866 4.86419 1.86231 5.02371 1.97734 5.14281L5.54978 8.71525C5.66821 8.83364 5.82881 8.90015 5.99626 8.90015C6.16371 8.90015 6.32431 8.83364 6.44274 8.71525L10.0152 5.14281C10.1336 5.02438 10.2001 4.86379 10.2001 4.69633C10.2001 4.52888 10.1336 4.36828 10.0152 4.24986Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+export default Arrow;

src/common/components/Chip/index.tsx

@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import * as s from './style.css';
+
+interface Props extends PropsWithChildren {
+  color?: 'gray' | 'main';
+  onClick?: () => void;
+}
+const Chip = ({ children, color = 'gray', onClick }: Props) => {
+  return (
+    <div className={s.Container({ color })} onClick={onClick}>
+      {children}
+    </div>
+  );
+};
+export default Chip;

src/common/components/Chip/style.css.ts

@@ -0,0 +1,30 @@
+import { cva } from '@styled-system/css';
+
+export const Container = cva({
+  base: {
+    padding: '0.5rem 0.75rem',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '0.25rem',
+    rounded: 'full',
+    width: 'fit-content',
+    fontSize: '0.875rem',
+    fontWeight: 400,
+    cursor: 'pointer',
+  },
+  variants: {
+    color: {
+      main: {
+        backgroundColor: 'main-26',
+        border: '1px solid',
+        borderColor: 'main-54',
+        color: '100',
+      },
+      gray: {
+        backgroundColor: 'systemGray5',
+        color: '80',
+      },
+    },
+  },
+});

src/common/components/SelectButton/index.tsx

@@ -0,0 +1,22 @@
+import type { PropsWithChildren } from 'react';
+
+import * as s from './style.css';
+import Arrow from '@/assets/icons/Arrow';
+
+interface Props extends PropsWithChildren {
+  active: boolean;
+  onClick?: () => void;
+}
+
+const SelectButton = ({ children, active, onClick }: Props) => {
+  // TODO: 자연스럽게 바뀌게 애니메이션 추가
+  return (
+    <button className={s.Container({ color: active ? 'main' : 'gray' })} onClick={onClick}>
+      {children}
+      <div className={s.Icon({ direction: active ? 'up' : 'down' })}>
+        <Arrow />
+      </div>
+    </button>
+  );
+};
+export default SelectButton;

src/common/components/SelectButton/style.css.ts

@@ -0,0 +1,44 @@
+import { cva } from '@styled-system/css';
+
+export const Container = cva({
+  base: {
+    borderRadius: 'full',
+    padding: '0.375rem 0.375rem 0.375rem 0.625rem',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '0.25rem',
+    fontSize: '0.75rem',
+    fontWeight: 500,
+    cursor: 'pointer',
+    color: '100',
+  },
+  variants: {
+    color: {
+      main: {
+        border: '1px solid',
+        borderColor: 'main-54',
+        bgColor: 'main-26',
+      },
+      gray: {
+        bgColor: 'systemGray5',
+      },
+    },
+  },
+});
+
+export const Icon = cva({
+  base: {
+    color: '54',
+  },
+  variants: {
+    direction: {
+      up: {
+        transform: 'rotate(180deg)',
+      },
+      down: {
+        transform: 'rotate(0deg)',
+      },
+    },
+  },
+});

src/pages/HomePage/index.tsx

@@ -1,14 +1,18 @@
-import { useFlow } from '@/libs/routes/stack';
+import { useState } from 'react';
 import type { ActivityComponentType } from '@stackflow/react';
+import { useFlow } from '@/libs/routes/stack';
 
 // CSS 사용하는 컴포넌트에서는 이런 식으로 불러오기
 import * as s from './style.css';
 
 import AppScreenWithSafeArea from '@/common/components/AppScreenWithSafeArea';
+import Chip from '@/common/components/Chip';
+import SelectButton from '@/common/components/SelectButton';
 import TestAPIButton from '@/common/components/TestAPIButton';
 
 const HomePage: ActivityComponentType = () => {
   const { push } = useFlow();
+  const [active, setActive] = useState(false);
   return (
     <AppScreenWithSafeArea>
       <h1 className={s.Title}>리피카 짱</h1>
@@ -20,6 +24,10 @@ const HomePage: ActivityComponentType = () => {
         <TestAPIButton />
         <button onClick={() => push('PostPage', {})}>이동</button>
       </div>
+      <Chip color="main">축구</Chip>
+      <SelectButton active={active} onClick={() => setActive(!active)}>
+        종목
+      </SelectButton>
     </AppScreenWithSafeArea>
   );
 };