Merge branch 'develop' into feat/#23/TabAndBottomSheet

README.md

@@ -135,7 +135,7 @@ to be continue...
  ┣ 📂api
  ┃ ┣ 📂domain
  ┃ ┣ 📂kakaologin
- ┃ ┗ 📜index.ts
+ ┃ ┗ 📜index.tsx
  ┣ 📂common
  ┃ ┣ 📂component
  ┃ ┣ 📂util

package.json

@@ -20,6 +20,7 @@
     "@vanilla-extract/dynamic": "^2.1.2",
     "@vanilla-extract/recipes": "^0.5.5",
     "axios": "^1.7.9",
+    "clsx": "^2.1.1",
     "openapi-typescript": "^7.5.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/asset/svg/IcTest.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIcTest = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={20}
+    height={20}
+    fill="none"
+    {...props}
+  >
+    <mask
+      id="ic_test_svg__a"
+      width={21}
+      height={20}
+      x={0}
+      y={0}
+      maskUnits="userSpaceOnUse"
+      style={{
+        maskType: "alpha",
+      }}
+    >
+      <path
+        fill="#171719"
+        d="M7.787 2.709a.75.75 0 0 1 .75-.75h2.915a.75.75 0 0 1 0 1.5H8.537a.75.75 0 0 1-.75-.75M6.373 2.697a.75.75 0 0 1-.727.772c-.714.022-1.012.078-1.224.187l-.007.004c-.322.16-.59.43-.77.775-.11.212-.165.51-.187 1.222a.75.75 0 0 1-1.5-.046c.022-.71.074-1.32.353-1.864l.003-.004c.314-.602.8-1.109 1.426-1.423.543-.278 1.151-.329 1.86-.35a.75.75 0 0 1 .773.727M13.617 2.697a.75.75 0 0 1 .772-.727c.71.021 1.317.072 1.86.35a3.27 3.27 0 0 1 1.427 1.423l.002.004c.28.544.331 1.153.353 1.864a.75.75 0 0 1-1.5.046c-.021-.712-.078-1.01-.186-1.222a1.77 1.77 0 0 0-.77-.775l-.008-.004c-.212-.109-.51-.165-1.223-.187a.75.75 0 0 1-.727-.772M2.708 7.788a.75.75 0 0 1 .75.75v2.914a.75.75 0 0 1-1.5 0V8.538a.75.75 0 0 1 .75-.75M17.28 7.788a.75.75 0 0 1 .75.75v2.914a.75.75 0 0 1-1.5 0V8.538a.75.75 0 0 1 .75-.75M17.314 13.617a.75.75 0 0 1 .727.772c-.021.711-.073 1.32-.352 1.864l-.003.005a3.27 3.27 0 0 1-1.426 1.422c-.543.278-1.151.33-1.86.35a.75.75 0 0 1-.046-1.499c.715-.021 1.012-.078 1.224-.187l.007-.004c.322-.16.59-.429.771-.775.108-.212.164-.51.186-1.221a.75.75 0 0 1 .772-.727M2.686 13.628a.75.75 0 0 1 .772.727c.022.714.078 1.011.187 1.223l.004.008c.16.321.43.589.775.77.212.108.51.165 1.222.186a.75.75 0 1 1-.046 1.5c-.71-.022-1.32-.073-1.864-.353l-.004-.002a3.27 3.27 0 0 1-1.423-1.427c-.278-.543-.329-1.15-.35-1.86a.75.75 0 0 1 .727-.772M7.787 17.281a.75.75 0 0 1 .75-.75h2.915a.75.75 0 0 1 0 1.5H8.537a.75.75 0 0 1-.75-.75"
+      />
+    </mask>
+    <g mask="url(#ic_test_svg__a)">
+      <path fill="#222" d="M0 0h20v20H0z" />
+    </g>
+  </svg>
+);
+export default SvgIcTest;

src/asset/svg/index.ts

@@ -1,4 +1,5 @@
 export { default as Check } from "./Check";
 export { default as IcUp } from "./IcUp";
+export { default as IcTest } from "./IcTest";
 export { default as React } from "./React";
 export { default as Vite } from "./Vite";

src/common/component/Button/index.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import {
+  button,
+  ButtonVariants,
+  icon,
+} from "@common/component/Button/styles.css.ts";
+
+interface ButtonProps {
+  label?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+type CombinedButtonProps = ButtonProps & Exclude<ButtonVariants, undefined>;
+
+/**
+ * Button 공통 컴포넌트
+ * @param label
+ * @param leftIcon 왼쪽 아이콘
+ * @param rightIcon 오른쪽 아이콘
+ * @param size 버튼 사이즈 small | medium | large
+ * @param variant 버튼 종류 solidPrimary | solidNeutral | outlinePrimary
+ * @param disabled 비활성화 여부
+ * @param onClick
+ * @constructor minjeoong
+ */
+
+export const Button = ({
+  label = "Button",
+  leftIcon,
+  rightIcon,
+  size = "medium",
+  variant = "solidPrimary",
+  disabled,
+  onClick,
+}: CombinedButtonProps) => {
+  return (
+    <button
+      className={button({ size, variant, disabled })}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {leftIcon && <div className={icon}>{leftIcon}</div>}
+      {label}
+      {rightIcon && <div className={icon}>{rightIcon}</div>}
+    </button>
+  );
+};

src/common/component/Button/styles.css.ts

@@ -0,0 +1,123 @@
+import { recipe, RecipeVariants } from "@vanilla-extract/recipes";
+import { color, font } from "@style/styles.css.ts";
+import { style } from "@vanilla-extract/css";
+
+export const button = recipe({
+  base: [
+    font.body01,
+    {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "0.6rem",
+      borderRadius: "8px",
+      border: "none",
+      cursor: "pointer",
+      transition: "background-color 0.3s",
+      ":focus": {
+        outline: "none",
+      },
+    },
+  ],
+  variants: {
+    size: {
+      small: {
+        height: "3.2rem",
+        padding: "0.6rem 1.4rem",
+      },
+      medium: {
+        height: "3.6rem",
+        padding: "0.8rem 2rem",
+      },
+      large: {
+        height: "4.4rem",
+        padding: "1.2rem 2.8rem",
+      },
+    },
+    variant: {
+      solidPrimary: {
+        backgroundColor: "rgb(61, 196, 245)",
+        color: "rgb(255, 255, 255)",
+        ":hover": {
+          backgroundColor: "rgb(60, 188, 234)",
+          color: "rgb(244, 244, 244)",
+        },
+        ":focus": {
+          backgroundColor: "rgb(59, 183, 228)",
+          color: "rgb(237, 237, 237)",
+        },
+        ":active": {
+          backgroundColor: "rgb(58, 177, 220)",
+          color: "rgb(58, 177, 220)",
+        },
+      },
+      solidNeutral: {
+        backgroundColor: "rgb(248, 248, 248)",
+        color: "rgb(113, 113, 113)",
+        ":hover": {
+          backgroundColor: "rgb(237, 237, 237)",
+          color: "rgb(109, 109, 109)",
+        },
+        ":focus": {
+          backgroundColor: "rgb(231, 231, 231)",
+          color: "rgb(107, 107, 107)",
+        },
+        ":active": {
+          backgroundColor: "rgb(222, 222, 222)",
+          color: "rgb(104, 104, 104)",
+        },
+      },
+      outlinePrimary: {
+        border: `0.1rem solid ${color.primary.blue500}`,
+        backgroundColor: "transparent",
+        color: color.gray.gray900,
+        ":hover": {
+          color: "rgba(33, 41, 44, 1)",
+          backgroundColor: "rgba(67, 214, 255, 0.05)",
+          border: `0.1rem solid ${color.primary.blue500}`,
+        },
+        ":active": {
+          backgroundColor: "rgba(67, 214, 255, 0.16)",
+          color: "rgba(39, 63, 69, 1)",
+          border: `0.1rem solid ${color.primary.blue500}`,
+        },
+        ":focus": {
+          backgroundColor: "rgba(67, 214, 255, 0.08)",
+          color: "rgba(33, 46, 50, 1)",
+          border: `0.1rem solid ${color.primary.blue500}`,
+        },
+      },
+    },
+    disabled: {
+      true: {
+        backgroundColor: color.gray.gray300,
+        color: color.gray.gray500,
+        pointerEvents: "none",
+      },
+      false: {},
+    },
+  },
+  compoundVariants: [
+    {
+      variants: { disabled: true, variant: "outlinePrimary" },
+      style: {
+        backgroundColor: "transparent",
+        border: `1px solid ${color.gray.gray300}`,
+        color: color.gray.gray400,
+      },
+    },
+  ],
+  defaultVariants: {
+    size: "medium",
+    variant: "solidPrimary",
+    disabled: false,
+  },
+});
+
+export type ButtonVariants = RecipeVariants<typeof button>;
+
+export const icon = style({
+  height: "2rem",
+  display: "flex",
+  alignItems: "center",
+});

src/common/component/TextField/index.tsx

@@ -0,0 +1,52 @@
+import clsx from "clsx";
+import React from "react";
+import { styles } from "@common/component/TextField/styles.css.ts";
+
+interface TextFieldProps {
+  icon?: React.ReactNode;
+  state?: "default" | "error";
+  active?: boolean;
+  placeholder?: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+/**
+ * TextField 공통 컴포넌트
+ * @param icon 오른쪽 아이콘
+ * @param state 상태 (default, error)
+ * @param active 활성화 여부
+ * @param placeholder
+ * @param value
+ * @param onChange
+ * @constructor minjeoong
+ */
+
+export const TextField: React.FC<TextFieldProps> = ({
+  icon,
+  state = "default",
+  active = true,
+  placeholder = "검색어를 입력해주세요",
+  value,
+  onChange,
+}) => {
+  return (
+    <div
+      className={clsx(
+        styles.wrapper,
+        !active && styles.disabledWrapper,
+        state === "error" && styles.error
+      )}
+    >
+      <input
+        type="text"
+        className={clsx(styles.input, !active && styles.disabledInput)}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        disabled={!active}
+      />
+      {icon && <div className={styles.icon}>{icon}</div>}
+    </div>
+  );
+};

src/common/component/TextField/styles.css.ts

@@ -0,0 +1,49 @@
+import { style, styleVariants } from "@vanilla-extract/css";
+import { color, font } from "@style/styles.css.ts";
+
+const base = style([
+  font.body01,
+  {
+    letterSpacing: "-0.28px",
+    fontWeight: 500,
+    height: "auto",
+    color: color.gray.gray900,
+    border: "none",
+    "::placeholder": {
+      color: color.gray.gray700,
+    },
+    ":focus": {
+      outline: "none",
+    },
+  },
+]);
+
+export const styles = {
+  wrapper: style({
+    width: "100%",
+    display: "flex",
+    justifyContent: "space-between",
+    gap: "1rem",
+    alignItems: "center",
+    padding: "1rem 2rem",
+    border: `0.1rem solid ${color.gray.gray200}`,
+    borderRadius: "8px",
+  }),
+  input: base,
+  error: style([base, { border: `0.1rem solid ${color.red.warning_red200}` }]),
+  disabledWrapper: style({
+    background: color.gray.gray300,
+    pointerEvents: "none",
+  }),
+  disabledInput: style([
+    base,
+    {
+      background: color.gray.gray300,
+      color: color.gray.gray500,
+    },
+  ]),
+  icon: style({
+    height: "2rem",
+    alignContent: "center",
+  }),
+};

src/page/main/index/Main.tsx

@@ -1,6 +1,7 @@
 import FilterBottomSheet from "@shared/component/FilterBottomSheet/FilterBottomSheet";
 
 const Main = () => {
+
   return (
     <div style={{ position: "relative" }}>
       <FilterBottomSheet isOpen={true} />

src/style/global.css.ts

@@ -5,7 +5,7 @@ globalStyle("html", {
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-
+  
   fontSize: "16px", //default
   "@media": {
     "(min-width: 450px) and (max-width: 600px)": { fontSize: "13px" },