[Feat/#23] Tab & TextBox & BottomSheet & FilterBottomSheet

biome.json

@@ -36,9 +36,13 @@
           "fix": "safe"
         }
       },
+      "a11y": { "useKeyWithClickEvents": "off", "noSvgWithoutTitle": "off", "useButtonType": "off" },
       "style": {
         "useImportType": {
           "level": "off"
+        },
+        "noNonNullAssertion": {
+          "level": "off"
         }
       }
     }

src/asset/svg/Check.tsx

@@ -0,0 +1,20 @@
+
+import type { SVGProps } from "react";
+const SvgCheck = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#14B5F0"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M20 6 9 17l-5-5"
+    />
+  </svg>
+);
+export default SvgCheck;

src/asset/svg/IcUp.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIcUp = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={21}
+    height={20}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#717171"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m15.023 12.5-5-5-5 5"
+    />
+  </svg>
+);
+export default SvgIcUp;

src/asset/svg/index.ts

@@ -9,6 +9,9 @@ export { default as IcMessage } from "./IcMessage";
 export { default as IcSearch } from "./IcSearch";
 export { default as IcSearchFillter } from "./IcSearchFillter";
 export { default as IcSearchFillterBlue } from "./IcSearchFillterBlue";
+
+export { default as Check } from "./Check";
+export { default as IcUp } from "./IcUp";
 export { default as IcTest } from "./IcTest";
 export { default as IcoMessage } from "./IcoMessage";
 export { default as IcoSkeleton } from "./IcoSkeleton";

src/common/component/BottomSheet/BottomSheet.css.ts

@@ -0,0 +1,42 @@
+import { semanticColor } from "@style/styles.css";
+import { style } from "@vanilla-extract/css";
+
+export const overlay = style({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  zIndex: "99",
+
+  width: "100%",
+  height: "100vh",
+  backgroundColor: "rgba(34, 34, 34, 0.2)",
+});
+
+export const bottomSheet = style({
+  position: "absolute",
+  bottom: "0",
+
+  display: "flex",
+  flexDirection: "column",
+  zIndex: "99",
+
+  width: "100%",
+  height: "90vh",
+  borderRadius: "20px 20px 0px 0px",
+  backgroundColor: "white",
+});
+
+export const bottomTabBar = style({
+  width: "100%",
+  height: "24px",
+  padding: "12px",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+});
+
+export const bar = style({
+  width: "8rem",
+  height: "4px",
+  backgroundColor: semanticColor.line.heavy,
+});

src/common/component/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,35 @@
+import {} from "react";
+import * as styles from "./BottomSheet.css";
+
+interface BottomSheetPropTypes {
+  isOpen: boolean;
+  handleOpen: (isOpen: boolean) => void;
+  children: JSX.Element; //ReactNode는 범위가 너무 넓음
+}
+
+//화면 전체를 차지하는 바텀시트 틀 (children 필요)
+const BottomSheet = ({ isOpen, children, handleOpen }: BottomSheetPropTypes) => {
+  if (!isOpen) return;
+
+  const handleClose = () => {
+    handleOpen(false);
+  };
+
+  const handleBottomSheetClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation(); // 이벤트 전파 차단
+  };
+
+  return (
+    <div className={styles.overlay} onClick={handleClose} onKeyDown={handleClose}>
+      <div className={styles.bottomSheet} onClick={handleBottomSheetClick}>
+        <div className={styles.bottomTabBar}>
+          <div className={styles.bar} onClick={handleClose} onKeyDown={handleClose} />
+        </div>
+
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default BottomSheet;

src/common/component/Button/index.tsx

@@ -1,11 +1,8 @@
 import React from "react";
-import {
-  button,
-  ButtonVariants,
-  icon,
-} from "@common/component/Button/styles.css.ts";
+import { button, ButtonVariants, icon } from "@common/component/Button/styles.css.ts";
 
 interface ButtonProps {
+  width?: string;
   label?: string;
   leftIcon?: React.ReactNode;
   rightIcon?: React.ReactNode;
@@ -27,6 +24,7 @@ type CombinedButtonProps = ButtonProps & Exclude<ButtonVariants, undefined>;
  */
 
 export const Button = ({
+  width = "",
   label = "Button",
   leftIcon,
   rightIcon,
@@ -37,6 +35,7 @@ export const Button = ({
 }: CombinedButtonProps) => {
   return (
     <button
+      style={{ width: width }}
       className={button({ size, variant, disabled })}
       disabled={disabled}
       onClick={onClick}

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

@@ -88,6 +88,7 @@ export const button = recipe({
           border: `0.1rem solid ${color.primary.blue500}`,
         },
       },
+
     },
     disabled: {
       true: {

src/common/component/CheckBoxText/CheckBoxText.css.ts

@@ -0,0 +1,31 @@
+import { font, semanticColor } from "@style/styles.css";
+import { recipe } from "@vanilla-extract/recipes";
+
+export const checkboxText = recipe({
+  base: [
+    font.body01,
+    {
+      display: "flex",
+      width: "100%",
+      height: "44px",
+      padding: "12px 8px",
+      alignItems: "flex-start",
+      gap: "16px",
+      borderRadius: "9px",
+      color: semanticColor.text.normal,
+    },
+  ],
+
+  variants: {
+    isSelected: {
+      true: {
+        border: `1px solid ${semanticColor.primary.normal}`,
+        color: semanticColor.text.heavy,
+        backgroundColor: "rgba(67, 214, 255, 0.16)",
+      },
+      false: {
+        border: "1px solid white",
+      },
+    },
+  },
+});

src/common/component/CheckBoxText/CheckBoxText.tsx

@@ -0,0 +1,27 @@
+import { checkboxText } from "./CheckBoxText.css";
+import { Check } from "@asset/svg";
+
+interface CheckBoxTextPropTypes {
+  children: string;
+  isSelected: boolean;
+  onClick: () => void;
+}
+const CheckBoxText = ({ children, isSelected, onClick }: CheckBoxTextPropTypes) => {
+  const handleClickTextBox = () => {
+    onClick();
+  };
+
+  return (
+    <div
+      className={checkboxText({
+        isSelected: isSelected,
+      })}
+      onClick={handleClickTextBox}
+    >
+      <span style={{ width: "100%" }}>{children}</span>
+      {isSelected && <Check width={24} height={24} style={{ position: "relative", bottom: "3" }} />}
+    </div>
+  );
+};
+
+export default CheckBoxText;

src/common/component/Chip/Chip.tsx

@@ -1,23 +1,28 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { ChipType, chipItem } from "./ChipStyle.css.ts";
 import { IcDelete } from "@asset/svg/index";
 
 interface ChipProps {
   label: string;
   icon?: boolean;
-  color: "blue" | "gray";
-  onClick: () => void;
+  color?: "blue" | "gray";
+  onClick?: () => void;
+  isSelected?: boolean;
 }
 
 type CombinedChipProps = ChipProps & Exclude<ChipType, undefined>;
 
-const Chip = ({ label, icon = false, color = "blue", onClick }: CombinedChipProps) => {
-  const [isActive, setIsActive] = useState(false);
+const Chip = ({ label, icon = false, color = "blue", onClick, isSelected = false }: CombinedChipProps) => {
+  const [isActive, setIsActive] = useState(isSelected);
+
+  useEffect(() => {
+    setIsActive(isSelected);
+  }, [isSelected]);
 
   const handleClick = () => {
-    if (color === "gray" || size === "large") return;
-    setIsActive(!isActive);
-    onClick();
+    if (color === "gray" || (size === "large" && icon === false)) return;
+    if (!icon) setIsActive(!isActive);
+    onClick?.();
   };
 
   const size = icon ? "large" : "small";
@@ -31,6 +36,7 @@ const Chip = ({ label, icon = false, color = "blue", onClick }: CombinedChipProp
       {label}
       {icon && (
         <IcDelete
+          onClick={() => console.log("first")}
           color={color === "gray" ? "#717171" : "#14B5F0"}
           style={{
             position: "relative",

src/common/component/Chip/ChipStyle.css.ts

@@ -14,17 +14,18 @@ export const chipItem = recipe({
       // background: color.gray.gray000,
       color: color.primary.blue700,
       border: `0.1rem solid ${color.primary.blue500}`,
+      flexShrink: "0",
     },
   ],
 
   variants: {
     size: {
       small: {
-        width: "5.8rem",
+        minWidth: "5.8rem",
         height: "3.6rem",
       },
       large: {
-        width: "8.2rem",
+        minWidth: "8.2rem",
         height: "4rem",
       },
     },

src/common/component/DropDownText/DropDownText.css.ts

@@ -0,0 +1,52 @@
+import { color, font, semanticColor } from "@style/styles.css";
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+
+export const dropdownTextWrapper = style({
+  display: "flex",
+  width: "100%",
+  flexDirection: "column",
+});
+
+export const dropdownText = style([
+  font.body01,
+  {
+    display: "flex",
+    width: "100%",
+    height: "44px",
+    padding: "12px 8px",
+    alignItems: "flex-start",
+    gap: "16px",
+    color: semanticColor.text.normal,
+    borderBottom: `1px solid ${color.gray.gray100}`,
+  },
+]);
+
+export const dropdownContent = style({
+  display: "flex",
+  padding: "0.8rem",
+  width: "100%",
+  flexDirection: "row",
+  justifyContent: "flex-start",
+  gap: "1rem",
+  alignSelf: "stretch",
+  backgroundColor: semanticColor.neutral.strong,
+
+  flexWrap: "wrap",
+});
+
+export const rotateIcon = recipe({
+  base: {
+    //transition: "transform 0.3s ease",
+  },
+  variants: {
+    isOpen: {
+      true: {
+        transform: "rotate(0deg)",
+      },
+      false: {
+        transform: "rotate(180deg)",
+      },
+    },
+  },
+});