Feat: v1_complate

Author: mini0192

package.json

@@ -20,9 +20,13 @@
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "framer-motion": ">=11.0.0",
-    "tailwindcss": ">=3.4.0"
+    "tailwindcss": ">=3.4.0",
+    "recharts": ">=2.0.0",
+    "lucide-react": ">=0.300.0"
   },
   "devDependencies": {
+    "recharts": "^2.12.3",
+    "lucide-react": "^0.400.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "typescript": "^5.0.0",

pnpm-lock.yaml

@@ -1,7 +1,7 @@
 // miniHoverMotion.ts
 // hover 시 scale, rotate, brightness 등 시각적 강조 효과 세트
 
-import { Variants } from "framer-motion";
+import { Variants } from "../miniComponentConfig";
 
 /** 살짝 커지는 효과 */
 export const hoverScale = (

src/animation/miniHoverAnimation.ts

@@ -1,4 +1,4 @@
-import { ViewportOptions } from "framer-motion";
+import { ViewportOptions } from "../miniComponentConfig";
 
 export const defaultViewport: ViewportOptions = {
   once: true,

src/animation/miniViewPort.ts

@@ -1,11 +1,12 @@
 "use client";
 
-import { motion as fk, HTMLMotionProps, Variants } from "framer-motion";
+import { motion as fk, HTMLMotionProps } from "framer-motion";
 import {
   mergeVariants,
   MiniComponetType,
   MiniUiSize,
   MiniUiType,
+  Variants,
 } from "../miniComponentConfig";
 import { defaultViewport } from "../animation/miniViewPort";
 

src/basic-ui/miniBox.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { motion as fk, HTMLMotionProps, Variants } from "framer-motion";
+import { motion as fk, HTMLMotionProps } from "framer-motion";
 import {
   mergeVariants,
   MiniComponetType,
   MiniUiSize,
   MiniUiType,
+  Variants,
 } from "../miniComponentConfig";
 import { defaultViewport } from "../animation/miniViewPort";
 

src/basic-ui/miniButton.tsx

@@ -1,5 +1,4 @@
-import { ViewportOptions } from "framer-motion";
-import { MiniComponetType } from "../miniComponentConfig";
+import { MiniComponetType, ViewportOptions } from "../miniComponentConfig";
 import { defaultViewport } from "../animation/miniViewPort";
 import MiniBox from "./miniBox";
 import React from "react";

src/basic-ui/miniImage.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { motion as fk, HTMLMotionProps, Variants } from "framer-motion";
+import { motion as fk, HTMLMotionProps } from "framer-motion";
 import {
   mergeVariants,
   MiniComponetType,
   MiniUiSize,
   MiniUiType,
+  Variants,
 } from "../miniComponentConfig";
 import { defaultViewport } from "../animation/miniViewPort";
 

src/basic-ui/miniInput.tsx

@@ -1,40 +1,58 @@
 "use client";
 
 import { RadialBar, RadialBarChart, ResponsiveContainer } from "recharts";
-import { PolarChartProps } from "recharts/types/util/types";
 
-interface MiniRadiaChartProp extends PolarChartProps {
-  label: string;
+export interface PolarChartProps {
   width?: number;
   height?: number;
-  matchData: MiniMatchType[];
+  cx?: number | string;
+  cy?: number | string;
+  innerRadius?: number | string;
+  outerRadius?: number | string;
+  barSize?: number;
+  startAngle?: number;
+  endAngle?: number;
+  data?: any[];
+  className?: string;
 }
 
 export interface MiniMatchType {
   name: string;
   value: number;
   fill: string;
 }
+
+interface MiniRadiaChartProp extends PolarChartProps {
+  label: string;
+  matchData?: MiniMatchType[];
+}
+
 export default function MiniRadiaChart({
   label,
   width = 150,
   height = 150,
   matchData = [{ name: "적합도", value: 50, fill: "var(--brand)" }],
   ...props
 }: MiniRadiaChartProp) {
+  const value = matchData[0]?.value ?? 0;
+
   return (
-    <div>
+    <div className="flex flex-col items-center">
       <h4 className="text-lg font-semibold mb-2">{label}</h4>
       <ResponsiveContainer width={width} height={height}>
         <RadialBarChart
           data={matchData}
-          startAngle={(matchData[0].value / 100) * 360}
+          startAngle={(value / 100) * 360}
+          endAngle={0}
+          innerRadius="60%"
+          outerRadius="100%"
+          barSize={12}
           {...props}
         >
           <RadialBar dataKey="value" cornerRadius={8} />
         </RadialBarChart>
       </ResponsiveContainer>
-      <p className="text-2xl text-[var(--text-light)]">{matchData[0].value}%</p>
+      <p className="text-2xl text-[var(--text-light)] mt-[-10px]">{value}%</p>
     </div>
   );
 }

src/basic-ui/miniRadiaChart.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { motion as fk, HTMLMotionProps, Variants } from "framer-motion";
+import { motion as fk, HTMLMotionProps } from "framer-motion";
 import {
   mergeVariants,
   MiniComponetType,
   MiniUiSize,
   MiniUiType,
+  Variants,
 } from "../miniComponentConfig";
 import { defaultViewport } from "../animation/miniViewPort";