feat: remove rounded option, add border-radius prop

.changeset/tasty-masks-guess.md

@@ -0,0 +1,7 @@
+---
+"@seed-design/rootage-artifacts": patch
+"@seed-design/react": patch
+"@seed-design/css": patch
+---
+
+ImageFrame `rounded` 옵션을 제거하고, borderRadius를 받을 수 있게 변경합니다

docs/content/docs/components/(display)/image-frame.mdx

@@ -37,11 +37,11 @@ Ratio 속성으로 이미지 사이즈에 상관없이 고정된 비율로 표
 
 이미지 컨텐츠를 표시할 수 없는 경우 Fallback 이미지가 표시됩니다. Fallback 이미지는 사용처에 따라 다르게 표시할 수 있습니다.
 
-### Rounded
+### Border Radius
 
-<FigmaImage id="141:33963" alt="Image Frame의 Rounded Property" />
+<FigmaImage id="141:33963" alt="Image Frame의 Border Radius Property" />
 
-Rounded 옵션으로 모서리를 둥글게 처리할 수 있습니다.
+Border Radius 옵션으로 모서리를 둥글게 처리할 수 있습니다.
 
 ### Show Overlay
 

docs/content/react/components/image-frame.mdx

@@ -21,7 +21,7 @@ import { ImageFrame } from "@seed-design/react";
 ```tsx
 <ImageFrame
   ratio={4 / 3}
-  rounded
+  borderRadius="r2"
   stroke
   src="..."
   alt="..."
@@ -51,14 +51,14 @@ import { ImageFrame } from "@seed-design/react";
   ```
 </ComponentExample>
 
-### Rounded
+### Border Radius
 
-`rounded` prop으로 모서리 라운드 스타일을 적용할 수 있습니다.
+`borderRadius` prop으로 모서리 라운드 스타일을 적용할 수 있습니다.
 
-<ComponentExample name="react/image-frame/rounded">
+<ComponentExample name="react/image-frame/border-radius">
   ```json doc-gen:file
   {
-    "file": "examples/react/image-frame/rounded.tsx",
+    "file": "examples/react/image-frame/border-radius.tsx",
     "codeblock": true
   }
   ```

docs/examples/react/image-frame/border-radius.tsx

@@ -0,0 +1,82 @@
+import { ImageFrame, Flex, VStack, Text } from "@seed-design/react";
+
+export default function ImageFrameBorderRadius() {
+  return (
+    <VStack gap="x6" alignItems="flex-start">
+      <Flex gap="x4" wrap="wrap" align="flex-end">
+        <VStack gap="x2" alignItems="center">
+          <ImageFrame
+            ratio={4 / 3}
+            borderRadius="r1"
+            src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=120&dpr=2&q=80"
+            alt="size 20 borderRadius=r1"
+            style={{ width: 20 }}
+          />
+          <Text color="palette.gray700" textStyle="t1Regular">
+            20 / r1 (4px)
+          </Text>
+        </VStack>
+        <VStack gap="x2" alignItems="center">
+          <ImageFrame
+            ratio={4 / 3}
+            borderRadius="r1"
+            src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=120&dpr=2&q=80"
+            alt="size 24 borderRadius r1"
+            style={{ width: 24 }}
+          />
+          <Text color="palette.gray700" textStyle="t1Regular">
+            24 / r1 (4px)
+          </Text>
+        </VStack>
+        <VStack gap="x2" alignItems="center">
+          <ImageFrame
+            ratio={4 / 3}
+            borderRadius="r1_5"
+            src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=120&dpr=2&q=80"
+            alt="size 36 borderRadius r1_5"
+            style={{ width: 36 }}
+          />
+          <Text color="palette.gray700" textStyle="t1Regular">
+            36 / r1_5 (6px)
+          </Text>
+        </VStack>
+        <VStack gap="x2" alignItems="center">
+          <ImageFrame
+            ratio={4 / 3}
+            borderRadius="r1_5"
+            src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=120&dpr=2&q=80"
+            alt="size 42 borderRadius r1_5"
+            style={{ width: 42 }}
+          />
+          <Text color="palette.gray700" textStyle="t1Regular">
+            42 / r1_5 (6px)
+          </Text>
+        </VStack>
+        <VStack gap="x2" alignItems="center">
+          <ImageFrame
+            ratio={4 / 3}
+            borderRadius="r1_5"
+            src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=120&dpr=2&q=80"
+            alt="size 48 borderRadius r1_5"
+            style={{ width: 48 }}
+          />
+          <Text color="palette.gray700" textStyle="t1Regular">
+            48 / r1_5 (6px)
+          </Text>
+        </VStack>
+        <VStack gap="x2" alignItems="center">
+          <ImageFrame
+            ratio={4 / 3}
+            borderRadius="r2"
+            src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=160&dpr=2&q=80"
+            alt="size 64 borderRadius r2"
+            style={{ width: 64 }}
+          />
+          <Text color="palette.gray700" textStyle="t1Regular">
+            64+ / r2 (8px)
+          </Text>
+        </VStack>
+      </Flex>
+    </VStack>
+  );
+}

docs/examples/react/image-frame/overlay-custom.tsx

@@ -4,7 +4,7 @@ export default function ImageFrameOverlayCustomExample() {
   return (
     <ImageFrame
       ratio={1}
-      rounded
+      borderRadius="r2"
       stroke
       src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
       alt="Landscape with custom overlay"

docs/examples/react/image-frame/overlay-inset.tsx

@@ -5,7 +5,7 @@ export default function ImageFrameOverlayInsetExample() {
     <div style={{ display: "flex", gap: 12 }}>
       <ImageFrame
         ratio={1}
-        rounded
+        borderRadius="r2"
         stroke
         src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
         alt="Landscape with default offset"
@@ -18,7 +18,7 @@ export default function ImageFrameOverlayInsetExample() {
 
       <ImageFrame
         ratio={1}
-        rounded
+        borderRadius="r2"
         stroke
         src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
         alt="Landscape with 0 offset"
@@ -31,7 +31,7 @@ export default function ImageFrameOverlayInsetExample() {
 
       <ImageFrame
         ratio={1}
-        rounded
+        borderRadius="r2"
         stroke
         src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
         alt="Landscape with 12 offset"

docs/examples/react/image-frame/overlay-multiple.tsx

@@ -12,7 +12,7 @@ export default function ImageFrameOverlayMultipleExample() {
   return (
     <ImageFrame
       ratio={1}
-      rounded
+      borderRadius="r2"
       stroke
       src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
       alt="Landscape with multiple overlays"

docs/examples/react/image-frame/overlay.tsx

@@ -20,7 +20,7 @@ export default function ImageFrameOverlayExample() {
       <VStack gap="x2" alignItems="center">
         <ImageFrame
           ratio={1}
-          rounded
+          borderRadius="r2"
           stroke
           src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
           alt="Landscape with badge overlay"
@@ -40,7 +40,7 @@ export default function ImageFrameOverlayExample() {
       <VStack gap="x2" alignItems="center">
         <ImageFrame
           ratio={1}
-          rounded
+          borderRadius="r2"
           stroke
           src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
           alt="Landscape with icon overlay"
@@ -58,7 +58,7 @@ export default function ImageFrameOverlayExample() {
       <VStack gap="x2" alignItems="center">
         <ImageFrame
           ratio={1}
-          rounded
+          borderRadius="r2"
           stroke
           src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
           alt="Landscape with indicator overlay"
@@ -76,7 +76,7 @@ export default function ImageFrameOverlayExample() {
       <VStack gap="x2" alignItems="center">
         <ImageFrame
           ratio={1}
-          rounded
+          borderRadius="r2"
           stroke
           src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
           alt="Landscape with reaction button overlay"

docs/examples/react/image-frame/preview.tsx

@@ -4,7 +4,7 @@ export default function ImageFramePreview() {
   return (
     <ImageFrame
       ratio={4 / 3}
-      rounded
+      borderRadius="r2"
       stroke
       src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
       alt="Landscape photograph by Tobias Tullius"

docs/examples/react/image-frame/ratio.tsx

@@ -6,7 +6,7 @@ export default function ImageFrameRatio() {
       <VStack gap="x2" alignItems="center">
         <ImageFrame
           ratio={1}
-          rounded
+          borderRadius="r2"
           stroke
           src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
           alt="1:1"
@@ -19,7 +19,7 @@ export default function ImageFrameRatio() {
       <VStack gap="x2" alignItems="center">
         <ImageFrame
           ratio={4 / 3}
-          rounded
+          borderRadius="r2"
           stroke
           src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
           alt="4:3"
@@ -32,7 +32,7 @@ export default function ImageFrameRatio() {
       <VStack gap="x2" alignItems="center">
         <ImageFrame
           ratio={16 / 9}
-          rounded
+          borderRadius="r2"
           stroke
           src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
           alt="16:9"