Merge branch 'main' into feature/spinner-component

.changeset/three-stingrays-end.md

@@ -0,0 +1,5 @@
+---
+"wowds-ui": minor
+---
+
+Box 컴포넌트의 가로 길이를 100%로 지정해요.

apps/wow-docs/app/page.tsx

@@ -1,3 +1,4 @@
+import Box from "wowds-ui/Box";
 import Checkbox from "wowds-ui/Checkbox";
 import Chip from "wowds-ui/Chip";
 import Divider from "wowds-ui/Divider";
@@ -6,6 +7,7 @@ import DropDownOption from "wowds-ui/DropDownOption";
 import MultiGroup from "wowds-ui/MultiGroup";
 import RadioButton from "wowds-ui/RadioButton";
 import RadioGroup from "wowds-ui/RadioGroup";
+import SearchBar from "wowds-ui/SearchBar";
 import Switch from "wowds-ui/Switch";
 
 const Home = () => {
@@ -36,6 +38,7 @@ const Home = () => {
         <Switch label="switch3" value="switch3" />
         <Switch label="switch4" value="switch4" />
       </MultiGroup>
+      <SearchBar />
     </>
   );
 };

packages/wow-icons/CHANGELOG.md

@@ -1,5 +1,11 @@
 # wowds-icons
 
+## 0.1.1
+
+### Patch Changes
+
+- cbfa7b6: SearchBar 컴포넌트를 구현합니다
+
 ## 0.1.0
 
 ### Minor Changes

packages/wow-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wowds-icons",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "",
   "repository": {
     "type": "git",

packages/wow-icons/src/component/RightArrow.tsx

@@ -17,7 +17,7 @@ const RightArrow = forwardRef<SVGSVGElement, IconProps>(
   ) => {
     return (
       <svg
-        aria-label="rightArrow icon"
+        aria-label="right-arrow icon"
         className={className}
         fill="none"
         height={height}

packages/wow-icons/src/component/Search.tsx

@@ -0,0 +1,47 @@
+import { forwardRef } from "react";
+import { color } from "wowds-tokens";
+
+import type { IconProps } from "@/types/Icon.ts";
+
+const Search = forwardRef<SVGSVGElement, IconProps>(
+  (
+    {
+      className,
+      width = "24",
+      height = "24",
+      viewBox = "0 0 24 24",
+      stroke = "white",
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <svg
+        aria-label="search icon"
+        className={className}
+        fill="none"
+        height={height}
+        ref={ref}
+        viewBox={viewBox}
+        width={width}
+        xmlns="http://www.w3.org/2000/svg"
+        {...rest}
+      >
+        <path
+          d="M18 10C18 13.866 14.866 17 11 17C7.13401 17 4 13.866 4 10C4 6.13401 7.13401 3 11 3C14.866 3 18 6.13401 18 10Z"
+          stroke={color[stroke]}
+          strokeWidth="1.4"
+        />
+        <path
+          d="M15 16L19 21.5"
+          stroke={color[stroke]}
+          strokeLinejoin="bevel"
+          strokeWidth="1.4"
+        />
+      </svg>
+    );
+  }
+);
+
+Search.displayName = "Search";
+export default Search;

packages/wow-icons/src/component/index.ts

@@ -3,4 +3,5 @@ export { default as Close } from "./Close.tsx";
 export { default as DownArrow } from "./DownArrow.tsx";
 export { default as Help } from "./Help.tsx";
 export { default as RightArrow } from "./RightArrow.tsx";
+export { default as Search } from "./Search.tsx";
 export { default as Warn } from "./Warn.tsx";

packages/wow-tokens/CHANGELOG.md

@@ -0,0 +1,7 @@
+# wowds-tokens
+
+## 0.1.0
+
+### Minor Changes
+
+- 82df8e4: wowds-tokens를 배포합니다.

packages/wow-tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wowds-tokens",
-  "version": "0.0.10",
+  "version": "0.1.0",
   "description": "",
   "repository": {
     "type": "git",

packages/wow-ui/CHANGELOG.md

@@ -1,5 +1,13 @@
 # wowds-ui
 
+## 0.1.6
+
+### Patch Changes
+
+- cbfa7b6: SearchBar 컴포넌트를 구현합니다
+- Updated dependencies [cbfa7b6]
+  - [email protected]
+
 ## 0.1.5
 
 ### Patch Changes

packages/wow-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wowds-ui",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "",
   "author": "gdsc-hongik",
   "repository": {
@@ -50,6 +50,11 @@
       "require": "./dist/RainbowSpinner.cjs",
       "import": "./dist/RainbowSpinner.js"
     },
+    "./SearchBar": {
+      "types": "./dist/components/SearchBar/index.d.ts",
+      "require": "./dist/SearchBar.cjs",
+      "import": "./dist/SearchBar.js"
+    },
     "./RadioButton": {
       "types": "./dist/components/RadioGroup/RadioButton.d.ts",
       "require": "./dist/RadioButton.cjs",

packages/wow-ui/rollup.config.js

@@ -26,6 +26,7 @@ export default {
     Stepper: "./src/components/Stepper",
     BlueSpinner: "./src/components/Spinner/BlueSpinner",
     RainbowSpinner: "./src/components/Spinner/RainbowSpinner",
+    SearchBar: "./src/components/SearchBar",
     RadioButton: "./src/components/RadioGroup/RadioButton",
     RadioGroup: "./src/components/RadioGroup/RadioGroup",
     MultiGroup: "./src/components/MultiGroup",

packages/wow-ui/src/components/Box/index.tsx

@@ -7,6 +7,22 @@ import { RightArrow, Warn } from "wowds-icons";
 import Checkbox from "@/components/Checkbox";
 import useCheckedState from "@/hooks/useCheckedState";
 
+/**
+ * @description 사용자에게 보여주어야 하는 정보를 담을 수 있는 Box 컴포넌트입니다.
+ * @param {ReactNode} [leftElement] Box 컴포넌트의 왼쪽에 들어갈 수 있는 요소입니다. (아이콘, 이미지 등)
+ * @param {boolean} [checked] Box 컴포넌트의 타입이 "checkbox"일때 전달할 수 있는 체크박스의 상태입니다.
+ * @param {string} [className] 체크박스에 전달하는 커스텀 클래스를 설정합니다.
+ * @param {string} [textColor] text의 색상을 변경할 수 있습니다.
+ * @param {"text" | "checkbox" | "arrow"} [variant] Box 컴포넌트의 타입을 설정합니다.
+ * @param {ReactNode} text Box 컴포넌트에 메인으로 표기할 텍스트를 입력합니다.
+ * @param {string} [subText] Box 컴포넌트에 작성할 추가 정보를 입력합니다.
+ * @param {string} [subTextColor] subtext의 색상을 변경할 수 있습니다.
+ * @param {"default" | "success" | "error"} [status] Box 컴포넌트를 통해 사용자의 상태를 반환합니다.
+ * @param {() => void} [onClick] Box 컴포넌트의 타입이 "arrow"일때 수행할 onClick 함수를 입력합니다. onClick 함수는 "text", "checkbox" type에서 사용할 수 없습니다.
+ * @param {() => void} [onChange] Box 컴포넌트의 타입이 "checkbox"일때 수행할 onChange 함수를 입력합니다. onChange 함수는 "text", "arrow" type에서 사용할 수 없습니다.
+ * @param {CSSProperties} [style] Box 컴포넌트에 적용할 수 있는 custom style
+ */
+
 type BoxVariantType = "arrow" | "checkbox" | "text" | "warn";
 
 export interface BoxProps<T extends BoxVariantType> {
@@ -24,22 +40,6 @@ export interface BoxProps<T extends BoxVariantType> {
   className?: string;
 }
 
-/**
- * @description 사용자에게 보여주어야 하는 정보를 담을 수 있는 Box 컴포넌트입니다.
- * @param {ReactNode} [leftElement] Box 컴포넌트의 왼쪽에 들어갈 수 있는 요소입니다. (아이콘, 이미지 등)
- * @param {boolean} [checked] Box 컴포넌트의 타입이 "checkbox"일때 전달할 수 있는 체크박스의 상태입니다.
- * @param {string} [className] 체크박스에 전달하는 커스텀 클래스를 설정합니다.
- * @param {string} [textColor] text의 색상을 변경할 수 있습니다.
- * @param {"text" | "checkbox" | "arrow"} [variant] Box 컴포넌트의 타입을 설정합니다.
- * @param {ReactNode} text Box 컴포넌트에 메인으로 표기할 텍스트를 입력합니다.
- * @param {string} [subText] Box 컴포넌트에 작성할 추가 정보를 입력합니다.
- * @param {string} [subTextColor] subtext의 색상을 변경할 수 있습니다.
- * @param {"default" | "success" | "error"} [status] Box 컴포넌트를 통해 사용자의 상태를 반환합니다.
- * @param {() => void} [onClick] Box 컴포넌트의 타입이 "arrow"일때 수행할 onClick 함수를 입력합니다. onClick 함수는 "text", "checkbox" type에서 사용할 수 없습니다.
- * @param {() => void} [onChange] Box 컴포넌트의 타입이 "checkbox"일때 수행할 onChange 함수를 입력합니다. onChange 함수는 "text", "arrow" type에서 사용할 수 없습니다.
- * @param {CSSProperties} [style] Box 컴포넌트에 적용할 수 있는 custom style
- */
-
 const Box = <T extends BoxVariantType = "text">({
   leftElement,
   variant,
@@ -80,27 +80,29 @@ const Box = <T extends BoxVariantType = "text">({
       alignItems="center"
       className={containerStyle({ status, variant })}
       direction="row"
-      gap="lg"
+      gap={variant !== "text" ? "lg" : undefined}
       id={`box-${text}`}
       justifyContent="space-between"
       onClick={handleArrowClick}
       {...rest}
     >
-      <Flex alignItems="center" direction="row" gap="xs">
+      <Flex alignItems="center" direction="row" gap="xs" width="100%">
         {leftElement}
-        <Flex direction="column" gap="xxs">
-          <styled.span
+        <Flex direction="column" gap="xxs" width="100%">
+          <styled.div
             color={textColor ? textColor : "textBlack"}
+            width="100%"
             {...(typeof text === "string" && { textStyle: "h3" })}
           >
             {text}
-          </styled.span>
-          <styled.span
+          </styled.div>
+          <styled.div
             color={subTextColor ? subTextColor : "sub"}
             textStyle="body1"
+            width="100%"
           >
             {subText}
-          </styled.span>
+          </styled.div>
         </Flex>
       </Flex>
       <div>