Feat: v1_complate

Author: mini0192

src/basic-ui/miniButton.tsx

@@ -30,7 +30,7 @@ const uiSizeStyle = {
   [MiniUiSize.NONE]: "",
 };
 
-export default function MiniButton({
+export const MiniButton = ({
   children,
   className = "",
 
@@ -40,7 +40,7 @@ export default function MiniButton({
   uiHover,
   viewport = defaultViewport,
   ...props
-}: ButtonProps) {
+}: ButtonProps) => {
   const animation: Variants = mergeVariants(uiMotion, uiHover);
   const baseStyle = `${uiSizeStyle[uiSize]} ${uiStyle[ui]} font-semibold`;
 

src/basic-ui/miniImage.tsx

@@ -9,15 +9,15 @@ export interface MiniImageProps
   viewport?: ViewportOptions;
 }
 
-export default function MiniImage({
+export const MiniImage = ({
   className = "",
   uiMotion,
   uiHover,
   uiSize,
   ui,
   viewport = defaultViewport,
   ...props
-}: MiniImageProps) {
+}: MiniImageProps) => {
   return (
     <MiniBox
       uiMotion={uiMotion}
@@ -28,4 +28,4 @@ export default function MiniImage({
       <img className={`w-full h-full object-cover`} {...props} />
     </MiniBox>
   );
-}
+};

src/basic-ui/miniInput.tsx

@@ -28,7 +28,7 @@ const uiSizeStyle = {
   [MiniUiSize.NONE]: "",
 };
 
-export default function MiniInput({
+export const MiniInput = ({
   label,
   className,
 
@@ -38,7 +38,7 @@ export default function MiniInput({
   uiMotion: motion,
   viewport = defaultViewport,
   ...props
-}: InputProps) {
+}: InputProps) => {
   const animation: Variants = mergeVariants(motion, hover);
   const baseStyle = "";
 

src/basic-ui/miniRadiaChart.tsx

@@ -27,13 +27,13 @@ interface MiniRadiaChartProp extends PolarChartProps {
   matchData?: MiniMatchType[];
 }
 
-export default function MiniRadiaChart({
+export const MiniRadiaChart = ({
   label,
   width = 150,
   height = 150,
   matchData = [{ name: "적합도", value: 50, fill: "var(--brand)" }],
   ...props
-}: MiniRadiaChartProp) {
+}: MiniRadiaChartProp) => {
   const value = matchData[0]?.value ?? 0;
 
   return (
@@ -55,4 +55,4 @@ export default function MiniRadiaChart({
       <p className="text-2xl text-[var(--text-light)] mt-[-10px]">{value}%</p>
     </div>
   );
-}
+};

src/basic-ui/miniTextarea.tsx

@@ -28,7 +28,7 @@ const uiSizeStyle = {
   [MiniUiSize.NONE]: "",
 };
 
-export default function MiniTextarea({
+export const MiniTextarea = ({
   label,
   className,
 
@@ -38,7 +38,7 @@ export default function MiniTextarea({
   uiMotion: motion,
   viewport = defaultViewport,
   ...props
-}: InputProps) {
+}: InputProps) => {
   const animation: Variants = mergeVariants(motion, hover);
   const baseStyle = "";
 
@@ -60,4 +60,4 @@ export default function MiniTextarea({
       />
     </div>
   );
-}
+};

src/section/miniHeroSection.tsx

@@ -1,4 +1,4 @@
-import MiniCarousel, { CarouselImageType } from "../ui/miniCarousel";
+import { CarouselImageType, MiniCarousel } from "../ui";
 
 interface MiniHeroSectionProps {
   className?: string;
@@ -7,12 +7,12 @@ interface MiniHeroSectionProps {
   image?: string[];
 }
 
-export default function MiniHeroSection({
+export const MiniHeroSection = ({
   className = "",
   children,
   video,
   image,
-}: MiniHeroSectionProps) {
+}: MiniHeroSectionProps) => {
   if (image && image.length > 1) {
     const imageData: CarouselImageType[] = image.map((imgSrc) => ({
       image: imgSrc,
@@ -43,4 +43,4 @@ export default function MiniHeroSection({
   }
 
   return;
-}
+};

src/ui/dropdown/miniDropdown.tsx

@@ -2,10 +2,9 @@
 
 import { useState, useRef, useEffect } from "react";
 import { motion } from "framer-motion";
-import MiniSelect, { OptionType } from "./miniSelect";
 import { MiniUiType } from "../../miniComponentConfig";
-import { ButtonProps } from "../../basic-ui";
-import MiniButton from "../../basic-ui/miniButton";
+import { ButtonProps, MiniButton } from "../../basic-ui";
+import { MiniSelect, OptionType } from "./miniSelect";
 
 // === MiniDropdown Props ===
 interface MiniDropdownProps extends ButtonProps {
@@ -26,14 +25,14 @@ const uiStyle = {
 };
 
 // === 컴포넌트 ===
-export default function MiniDropdown({
+export const MiniDropdown = ({
   label,
   options,
   placeholder = "선택하세요",
   className = "",
   onValueSelect,
   ...props
-}: MiniDropdownProps) {
+}: MiniDropdownProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const [selected, setSelected] = useState<string>("");
   const ref = useRef<HTMLDivElement>(null);

src/ui/dropdown/miniImageDropdown.tsx

@@ -1,9 +1,13 @@
 "use client";
 
 import { useState, useRef, useEffect } from "react";
-import MiniSelect, { OptionType } from "./miniSelect";
-import { MiniComponetType, MiniUiSize, MiniUiType } from "../../miniComponentConfig";
-import MiniImage from "../../basic-ui/miniImage";
+import {
+  MiniComponetType,
+  MiniUiSize,
+  MiniUiType,
+} from "../../miniComponentConfig";
+import { MiniImage } from "../../basic-ui";
+import { MiniSelect, OptionType } from "./miniSelect";
 
 // === MiniDropdown Props ===
 interface MiniDropdownProps
@@ -25,7 +29,7 @@ const uiStyle = {
 };
 
 // === 컴포넌트 ===
-export default function MiniImageDropdown({
+export const MiniImageDropdown = ({
   options,
   image,
   onValueSelect,
@@ -35,7 +39,7 @@ export default function MiniImageDropdown({
   uiMotion,
   uiHover,
   ...props
-}: MiniDropdownProps) {
+}: MiniDropdownProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const [selected, setSelected] = useState<string>("");
   const ref = useRef<HTMLDivElement>(null);
@@ -68,4 +72,4 @@ export default function MiniImageDropdown({
       <MiniSelect isOpen={isOpen} options={options} onSelect={handleSelect} />
     </div>
   );
-}
+};

src/ui/dropdown/miniSelect.tsx

@@ -14,12 +14,12 @@ interface MiniDropdownListProps {
   className?: string;
 }
 
-export default function MiniSelect({
+export const MiniSelect = ({
   isOpen,
   options,
   onSelect,
   className = "",
-}: MiniDropdownListProps) {
+}: MiniDropdownListProps) => {
   return (
     <AnimatePresence>
       {isOpen && (
@@ -53,4 +53,4 @@ export default function MiniSelect({
       )}
     </AnimatePresence>
   );
-}
+};

src/ui/miniCarousel.tsx

@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import { motion, AnimatePresence } from 'framer-motion';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { useState } from 'react';
+import { motion, AnimatePresence } from "framer-motion";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useState } from "react";
 
 export interface CarouselImageType {
   children?: React.ReactNode;
@@ -15,7 +15,7 @@ interface CarouselProps {
   className?: string;
 }
 
-export default function MiniCarousel({ images, className }: CarouselProps) {
+export const MiniCarousel = ({ images, className }: CarouselProps) => {
   const [index, setIndex] = useState(0);
 
   const next = () => setIndex((prev) => (prev + 1) % images.length);
@@ -59,11 +59,11 @@ export default function MiniCarousel({ images, className }: CarouselProps) {
           <div
             key={i}
             className={`w-3 h-3 rounded-full ${
-              i === index ? 'bg-white' : 'bg-white/40'
+              i === index ? "bg-white" : "bg-white/40"
             } transition-all duration-300`}
           />
         ))}
       </div>
     </div>
   );
-}
+};