chore(react): lodash-es 의존성 위치 변경 (#587)

* chore(react): 의존성 위치 변경

* fix(react): AspectRatio 인터페이스 단순화

* chore: changeset log 추가

.changeset/green-dolls-jog.md

@@ -0,0 +1,5 @@
+---
+'@modern-kit/react': minor
+---
+
+chore(react): lodash-es 의존성 위치 변경 - @ssi02014

docs/docs/react/components/AspectRatio.mdx

@@ -14,14 +14,10 @@ import { AspectRatio } from '@modern-kit/react';
 
 ## Interface
 ```ts title="typescript"
-const AspectRatio: <
-  T extends React.ElementType = 'div'
->({
-  asChild,
-  ratio,
-  children,
-  ...props
-}: React.PropsWithChildren<AspectRatioProps<T>>) => JSX.Element;
+interface AspectRatioProps extends ComponentProps<'div'> {
+  asChild?: boolean;
+  ratio: number;
+}
 ```
 
 ## Usage

packages/react/package.json

@@ -35,14 +35,14 @@
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^14.3.1",
     "@testing-library/user-event": "^14.5.1",
-    "@types/lodash-es": "^4",
+    "@types/lodash-es": "^4.17.12",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
+    "@types/ua-parser-js": "^0.7.39",
     "@vitest/coverage-istanbul": "^2.1.3",
     "classnames": "^2.5.1",
     "esbuild": "^0.24.0",
     "jsdom": "^25.0.0",
-    "lodash-es": "^4.17.21",
     "postcss": "^8.4.41",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -57,6 +57,7 @@
   },
   "dependencies": {
     "@modern-kit/utils": "workspace:^",
+    "lodash-es": "^4.17.21",
     "ua-parser-js": "^1.0.39"
   },
   "peerDependencies": {

packages/react/src/components/AspectRatio/index.tsx

@@ -1,13 +1,18 @@
 import classNames from 'classnames';
 import styles from './AspectRatio.module.css';
 import { Slot } from '../Slot';
-import React from 'react';
+import {
+  CSSProperties,
+  Children,
+  ComponentProps,
+  PropsWithChildren,
+  useMemo,
+} from 'react';
 
-type AspectRatioProps<T extends React.ElementType = 'div'> =
-  React.ComponentPropsWithoutRef<T> & {
-    asChild?: boolean;
-    ratio: number;
-  };
+interface AspectRatioProps extends ComponentProps<'div'> {
+  asChild?: boolean;
+  ratio: number;
+}
 
 /**
  * @description 주어진 aspect-ratio 비율에 맞게 가로/세로 비율을 편리하게 맞춰주는 컴포넌트입니다.
@@ -28,26 +33,28 @@ type AspectRatioProps<T extends React.ElementType = 'div'> =
  * // 기본적으로 div를 생성 후 aspect-ratio 속성을 적용합니다.
  * ```tsx
  * <AspectRatio ratio={16 / 9}>
- *  <p>Content</p>
+ *  <img src={imgUrl} alt="placeholder" />
  * </AspectRatio>
  * ```
  *
  * @example
  * // asChild 속성을 true로 설정하면 자식 요소에 aspect-ratio 속성을 적용합니다.
  * ```tsx
  * <AspectRatio ratio={16 / 9} asChild>
- *  <section>Content</section>
+ *  <section>
+ *    <img src={imgUrl} alt="placeholder" />
+ *  </section>
  * </AspectRatio>
  * ```
  */
-export const AspectRatio = <T extends React.ElementType = 'div'>({
+export const AspectRatio = ({
   asChild = false,
   ratio,
   children,
   ...props
-}: React.PropsWithChildren<AspectRatioProps<T>>): JSX.Element => {
+}: PropsWithChildren<AspectRatioProps>): JSX.Element => {
   const Wrapper = asChild ? Slot : 'div';
-  const customStyle: React.CSSProperties = React.useMemo(
+  const customStyle: CSSProperties = useMemo(
     () => ({
       paddingTop: `calc(100% * (1 / ${ratio}))`,
       ...props.style,
@@ -60,7 +67,7 @@ export const AspectRatio = <T extends React.ElementType = 'div'>({
       className={classNames(styles['wrapper'], props.className)}
       style={customStyle}
       {...props}>
-      {React.Children.only(children)}
+      {Children.only(children)}
     </Wrapper>
   );
 };

yarn.lock

@@ -4965,9 +4965,10 @@ __metadata:
     "@testing-library/jest-dom": "npm:^6.5.0"
     "@testing-library/react": "npm:^14.3.1"
     "@testing-library/user-event": "npm:^14.5.1"
-    "@types/lodash-es": "npm:^4"
+    "@types/lodash-es": "npm:^4.17.12"
     "@types/react": "npm:^18.2.20"
     "@types/react-dom": "npm:^18.2.7"
+    "@types/ua-parser-js": "npm:^0.7.39"
     "@vitest/coverage-istanbul": "npm:^2.1.3"
     classnames: "npm:^2.5.1"
     esbuild: "npm:^0.24.0"
@@ -6354,7 +6355,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/lodash-es@npm:^4":
+"@types/lodash-es@npm:^4, @types/lodash-es@npm:^4.17.12":
   version: 4.17.12
   resolution: "@types/lodash-es@npm:4.17.12"
   dependencies:
@@ -6644,6 +6645,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/ua-parser-js@npm:^0.7.39":
+  version: 0.7.39
+  resolution: "@types/ua-parser-js@npm:0.7.39"
+  checksum: fea522f42dfc2854d9c93144a13c3db3bbe1c791458451db06d46bec7e1dbbe945d1542e02bb38378e39a04bdb7810b43e2ead26f9e6c250832e187312522708
+  languageName: node
+  linkType: hard
+
 "@types/unist@npm:*, @types/unist@npm:^3.0.0":
   version: 3.0.2
   resolution: "@types/unist@npm:3.0.2"