Merge pull request #42 from han-kimm/feat/chip

✨feat: Chip 공통 컴포넌트 완성
P1Z7 · Feb 2, 2024 · 4ea301c · 4ea301c
2 parents 55b0717 + 2f36f7f
commit 4ea301c
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 30 deletions.
diff --git a/app/(route)/(bottom-nav)/signin/page.tsx b/app/(route)/(bottom-nav)/signin/page.tsx
@@ -1,10 +1,6 @@
 "use client";
 
-import { useSession } from "next-auth/react";
-import { redirect } from "next/navigation";
-import { KeyboardEvent, useRef } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
-import Header from "@/components/Header";
 import InputText from "@/components/input/InputText";
 import useEnterNext from "@/hooks/useEnterNext";
 import { ERROR_MESSAGES, REG_EXP } from "@/utils/signupValidation";
@@ -29,30 +25,27 @@ const SignInPage = () => {
   };
 
   return (
-    <>
-      <Header />
-      <form ref={formSection} onSubmit={handleSubmit(handleSignin)} className="flex flex-col gap-24 py-60">
-        <InputText
-          name="email"
-          placeholder="[email protected]"
-          control={control}
-          onKeyDown={handleEnterNext}
-          rules={{ required: ERROR_MESSAGES.email.emailField, pattern: { value: REG_EXP.CHECK_EMAIL, message: ERROR_MESSAGES.email.emailPattern } }}
-        >
-          이메일
-        </InputText>
-        <InputText
-          name="password"
-          type="password"
-          control={control}
-          rules={{ required: ERROR_MESSAGES.password.passwordField, pattern: { value: REG_EXP.CHECK_PASSWORD, message: ERROR_MESSAGES.password.passwordPattern } }}
-          onKeyDown={handleEnterNext}
-        >
-          비밀번호
-        </InputText>
-        <button className={`"bg-black text-white flex-grow rounded-sm px-16 py-12 text-16`}>로그인</button>
-      </form>
-    </>
+    <form ref={formSection} onSubmit={handleSubmit(handleSignin)} className="flex flex-col gap-24 py-60">
+      <InputText
+        name="email"
+        placeholder="[email protected]"
+        control={control}
+        onKeyDown={handleEnterNext}
+        rules={{ required: ERROR_MESSAGES.email.emailField, pattern: { value: REG_EXP.CHECK_EMAIL, message: ERROR_MESSAGES.email.emailPattern } }}
+      >
+        이메일
+      </InputText>
+      <InputText
+        name="password"
+        type="password"
+        control={control}
+        rules={{ required: ERROR_MESSAGES.password.passwordField, pattern: { value: REG_EXP.CHECK_PASSWORD, message: ERROR_MESSAGES.password.passwordPattern } }}
+        onKeyDown={handleEnterNext}
+      >
+        비밀번호
+      </InputText>
+      <button className={`"bg-black text-white flex-grow rounded-sm px-16 py-12 text-16`}>로그인</button>
+    </form>
   );
 };
 export default SignInPage;
diff --git a/app/_components/chip/Chip.tsx b/app/_components/chip/Chip.tsx
@@ -0,0 +1,62 @@
+type ColorEvent = keyof typeof COLOR_EVENT;
+type ColorGoods = keyof typeof COLOR_GOODS;
+type Label<T> = T extends "event" ? ColorEvent : ColorGoods;
+type Kind = "event" | "goods";
+type Theme<T> = T extends "event" ? "light" : "light" | "dark";
+interface Props<T> {
+  label: Label<T>;
+  kind: T;
+  theme?: Theme<T>;
+}
+
+const Chip = <T extends Kind>({ label, kind, theme = "light" }: Props<T>) => {
+  const colorStyle = () => {
+    if (kind === "event") {
+      return COLOR_EVENT[label as ColorEvent];
+    }
+    if (theme === "light") {
+      return COLOR_GOODS[label as ColorGoods];
+    }
+    return COLOR_DARK[label as ColorGoods];
+  };
+
+  return (
+    <div className={`w-max rounded-lg px-8 py-4 ${colorStyle()}`}>
+      <span className="text-12 font-600">{label}</span>
+    </div>
+  );
+};
+export default Chip;
+
+const textWhite = "text-white-white";
+const blackBG = "bg-gray-700 text-gray-50";
+const grayBG = "bg-gray-50 text-gray-700";
+const COLOR_EVENT = {
+  카페: `bg-sub-pink ${textWhite}`,
+  나눔: `bg-sub-yellow ${textWhite}`,
+  팬광고: `bg-sub-skyblue ${textWhite}`,
+  팝업스토어: `bg-sub-blue ${textWhite}`,
+  상영회: `bg-sub-purple ${textWhite}`,
+  기타: `bg-sub-red ${textWhite}`,
+};
+const COLOR_GOODS = {
+  컵홀더: `bg-sub-pink-bg text-sub-pink`,
+  포스터: `bg-sub-scarlet-bg text-sub-scarlet`,
+  스티커: `bg-sub-yellow-bg text-sub-yellow`,
+  티켓: `bg-sub-green-bg text-sub-green`,
+  포토카드: `bg-sub-skyblue-bg text-sub-skyblue`,
+  엽서: `bg-sub-blue-bg text-sub-blue`,
+  굿즈: `bg-sub-pink-bg text-sub-pink`,
+  기타: `bg-gray-50 text-gray-700`,
+};
+
+const COLOR_DARK = {
+  컵홀더: blackBG,
+  포스터: grayBG,
+  스티커: blackBG,
+  티켓: grayBG,
+  포토카드: blackBG,
+  엽서: blackBG,
+  굿즈: grayBG,
+  기타: grayBG,
+};
diff --git a/app/_components/chip/ChipButton.tsx b/app/_components/chip/ChipButton.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { MouseEvent, useState } from "react";
+import CloseIcon from "@/public/icon/close.svg";
+
+type Handler = "onClick" | "onDelete";
+type MappedHandler = {
+  [key in Handler]?: (e?: MouseEvent) => void;
+};
+
+interface Props extends MappedHandler {
+  label: string;
+  selected?: boolean;
+}
+
+const ChipButton = ({ label, selected: initial = false, onClick, onDelete }: Props) => {
+  const [selected, setSelected] = useState(initial);
+  const [isDelete, setIsDelete] = useState(false);
+  const handleClick = (e: MouseEvent) => {
+    setSelected((prev) => !prev);
+    if (onClick) {
+      onClick(e);
+    }
+  };
+
+  const handleDelete = (e: MouseEvent) => {
+    setIsDelete(true);
+    if (onDelete) {
+      onDelete(e);
+    }
+  };
+
+  if (isDelete) {
+    return null;
+  }
+
+  return (
+    <button onClick={handleClick} className={`flex-center w-max gap-4 rounded-lg px-12 py-4 ${selected ? "bg-gray-900 text-white-black" : "bg-gray-50 text-gray-700"}`}>
+      <p className="text-14 font-500">{label}</p>
+      {!!onDelete && <CloseIcon onClick={handleDelete} alt="태그 삭제" width={16} height={16} stroke={selected ? "#FFF" : "#A0A5B1"} />}
+    </button>
+  );
+};
+export default ChipButton;
diff --git a/app/globals.css b/app/globals.css
@@ -23,6 +23,8 @@
     --sub-yellow: 255 160 18;
     --sub-skyblue: 40 198 255;
     --sub-scarlet: 255 103 55;
+    --sub-green: 51 214 155;
+    --sub-red: 255 85 85;
     --main-purple-50: 243 240 254;
     --main-purple-300: 171 152 250;
     --main-purple-500: 130 101 248;
@@ -52,6 +54,8 @@
     --sub-yellow: 255 160 18;
     --sub-skyblue: 40 198 255;
     --sub-scarlet: 255 103 55;
+    --sub-green: 51 214 155;
+    --sub-red: 255 85 85;
     --main-purple-50: 243 240 254;
     --main-purple-300: 171 152 250;
     --main-purple-500: 130 101 248;

diff --git a/public/icon/close.svg b/public/icon/close.svg
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -49,6 +49,8 @@ const config: Config = {
         yellow: { DEFAULT: "rgb(var(--sub-yellow) / <alpha-value>)", bg: "rgb(var(--sub-yellow) / 0.12)" },
         skyblue: { DEFAULT: "rgb(var(--sub-skyblue) / <alpha-value>)", bg: "rgb(var(--sub-skyblue) / 0.12)" },
         scarlet: { DEFAULT: "rgb(var(--sub-scarlet) / <alpha-value>)", bg: "rgb(var(--sub-scarlet) / 0.12)" },
+        green: { DEFAULT: "rgb(var(--sub-green) / <alpha-value>)", bg: "rgb(var(--sub-green) / 0.12)" },
+        red: { DEFAULT: "rgb(var(--sub-red) / <alpha-value>)", bg: "rgb(var(--sub-red) / 0.12)" },
       },
       main: {
         purple: {