fix: build error 수정

src/App.tsx

@@ -1,9 +1,8 @@
-import React from "react";
-import "./App.css";
-import { BrowserRouter, Routes, Route, RouteObject } from "react-router-dom";
-import { mainRoutes } from "./routers/MainRouter";
+import './App.css';
+import { BrowserRouter, Routes, Route, RouteObject } from 'react-router-dom';
+import { mainRoutes } from './routers/MainRouter';
 
-function renderRoutes(routesObj: RouteObject[], parentPath = "") {
+function renderRoutes(routesObj: RouteObject[], parentPath = '') {
   return routesObj.map((route) => {
     const fullPath = `${parentPath}${route.path}`;
     return (

src/components/common/alert/BottomAlert.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 type Props = {
   message: string;

src/components/common/button/BottomDrawer.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 import { Drawer, DrawerProps } from 'flowbite-react';
 import drawerUp from '@/assets/image/drawer/drawerUp.svg';
 import drawerDown from '@/assets/image/drawer/drawerDown.svg';
@@ -7,19 +7,25 @@ type Props = {
   isOpen: boolean;
   handleClose: () => void;
   children: ReactNode;
-  isBackDropped? : boolean;
-  position? : DrawerProps["position"];
+  isBackDropped?: boolean;
+  position?: DrawerProps['position'];
 };
 
-export default function BottomDrawer({ isOpen, handleClose, children, isBackDropped, position }: Props) {
+export default function BottomDrawer({
+  isOpen,
+  handleClose,
+  children,
+  isBackDropped,
+  position,
+}: Props) {
   const positionClass = position ? position : 'bottom';
-  const isBackDropClass = isBackDropped===false ? isBackDropped : true;
+  const isBackDropClass = isBackDropped === false ? isBackDropped : true;
   const [height, setHeight] = useState<string>('h-[50vh]');
 
   useEffect(() => {
     setHeight('h-[50vh]');
   }, [isOpen]);
-  
+
   const handleClickHeight = () => {
     setHeight(height === 'h-[50vh]' ? 'h-[90vh]' : 'h-[50vh]');
   };
@@ -30,25 +36,25 @@ export default function BottomDrawer({ isOpen, handleClose, children, isBackDrop
       onClose={handleClose}
       backdrop={isBackDropClass}
       position={positionClass}
-      className={`${positionClass==='left'?'mt-16':'rounded-t-[20px]'} flex flex-col z-50 items-center bg-white-1 border-t-[0.05rem] border-t-grey-1 transition-all duration-300`}
+      className={`${positionClass === 'left' ? 'mt-16' : 'rounded-t-[20px]'} flex flex-col z-50 items-center bg-white-1 border-t-[0.05rem] border-t-grey-1 transition-all duration-300`}
     >
-    {positionClass==='bottom' 
-    ?<div className="relative w-full">
-        <img
-          src={height == 'h-[50vh]' ? drawerUp : drawerDown}
-          alt="drawerUp"
-          className="h-[2rem] rounded-lg bg-white-1 w-[3rem] cursor-pointer absolute top-2 left-1/2 transform -translate-x-1/2"
-          onClick={handleClickHeight}
-        />
-      <div
-        className={`transition-all duration-300 ${height} w-full pt-[3rem] overflow-y-auto`}
-      >
-        {children}
-      </div>
-    </div>
-    :<Drawer.Items className="h-[50vh] w-full">{children}</Drawer.Items>
-    }
-
+      {positionClass === 'bottom' ? (
+        <div className="relative w-full">
+          <img
+            src={height == 'h-[50vh]' ? drawerUp : drawerDown}
+            alt="drawerUp"
+            className="h-[2rem] rounded-lg bg-white-1 w-[3rem] cursor-pointer absolute top-2 left-1/2 transform -translate-x-1/2"
+            onClick={handleClickHeight}
+          />
+          <div
+            className={`transition-all duration-300 ${height} w-full pt-[3rem] overflow-y-auto`}
+          >
+            {children}
+          </div>
+        </div>
+      ) : (
+        <Drawer.Items className="h-[50vh] w-full">{children}</Drawer.Items>
+      )}
     </Drawer>
   );
 }

src/components/common/button/BottomDrawerUp.tsx

@@ -1,6 +1,5 @@
-import React, { ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 import { Drawer } from 'flowbite-react';
-import drawerUpDown from '@/assets/image/drawer/drawerUpDown.svg';
 import drawerUp from '@/assets/image/drawer/drawerUp.svg';
 import drawerDown from '@/assets/image/drawer/drawerDown.svg';
 

src/components/common/button/LargeButton.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 interface Props {
   text: string;
   customWidth: string;
@@ -40,7 +38,7 @@ export default function LargeButton({
       {isActive === 3 && image ? (
         <div className="flex items-center justify-center w-full">
           <span>{text}</span>
-          <img src={image} alt="" className="absolute  right-4" />
+          <img src={image} alt="" className="absolute right-4" />
         </div>
       ) : (
         text

src/components/common/button/LikeButton.tsx

@@ -25,9 +25,11 @@ export default function LikeButton({
     try {
       if (isActive) {
         const result = await deleteLikeLoan(loanId);
+        console.log(result);
         setMessage('✅ 찜을 취소했어요!');
       } else {
         const result = await likeLoan(loanId);
+        console.log(result);
         setMessage('❤️ 상품을 찜했어요!');
       }
     } catch (error) {

src/components/common/button/NavigateButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import doubleBlueRight from '../../../assets/image/icons/doubleBlueRight.svg';
 
 type Props = {

src/components/common/button/PlusButton.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 type Props = {
   handleClick?: () => void;
 };
@@ -10,7 +8,7 @@ export default function PlusButton({ handleClick }: Props) {
       onClick={handleClick}
       className="h-[40px] hover:bg-grey-5 bg-grey-6 rounded-[0.2rem] border-white-1 text-blue-1 text-[0.9rem] w-[100%]"
     >
-      더 보기 {">"}
+      더 보기 {'>'}
     </button>
   );
 }

src/components/common/button/SmallButton.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 type Props = {
   icon?: string;
   text: string;
@@ -20,12 +18,12 @@ export default function SmallButton({
   switch (isActive) {
     case true:
       buttonStyles = `text-center px-2 leading-[30px] text-blue-1 bg-blue-4 border-[0.5px] border-blue-1 ${
-        customWidth ? customWidth : "w-[46px]"
+        customWidth ? customWidth : 'w-[46px]'
       } h-[30px] rounded-[20px] text-[12px]`;
       break;
     case false:
       buttonStyles = `flex items-center justify-center px-2 gap-1 text-center leading-[30px] text-grey-1 bg-grey-6 border-[0.5px] border-grey-1 ${
-        customWidth ? customWidth : "min-w-[46px]"
+        customWidth ? customWidth : 'min-w-[46px]'
       } h-[30px] rounded-[20px] text-[12px]`;
       break;
     default:
@@ -39,7 +37,7 @@ export default function SmallButton({
     <div onClick={onClick}>
       <button className={buttonStyles}>
         {icon && (
-          <img src={icon} className="h-4 w-4 cursor-pointer" alt="edit" />
+          <img src={icon} className="w-4 h-4 cursor-pointer" alt="edit" />
         )}
         {text}
       </button>

src/components/common/form/FloatingInputForm1.tsx

@@ -1,4 +1,4 @@
-import React, { useState, ChangeEvent, useEffect } from 'react';
+import { useState, ChangeEvent, useEffect } from 'react';
 
 type Props = {
   type?: string;
@@ -56,7 +56,7 @@ export default function FloatingInputForm1({
   };
 
   return (
-    <div className="w-full flex flex-col">
+    <div className="flex flex-col w-full">
       <div
         className={`text-${isFocused ? 'red' : 'grey'}-2 text-[1.5rem] font-bold`}
       >
@@ -77,7 +77,7 @@ export default function FloatingInputForm1({
           className="w-full h-[3rem] border-b border-grey-2 placeholder-grey-2 focus:outline-none focus:border-[black]"
         />
         {unit && (
-          <span className="absolute inset-y-0 right-0 flex items-center pr-3 text-grey-2 pointer-events-none">
+          <span className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-grey-2">
             {unit}
           </span>
         )}

src/components/common/form/FloatingInputForm2.tsx

@@ -1,5 +1,4 @@
-import { FloatingLabel } from "flowbite-react";
-import React from "react";
+import { FloatingLabel } from 'flowbite-react';
 
 type Props = {
   text: string;

src/components/common/header/MainHeader.tsx

@@ -1,6 +1,5 @@
 // src/components/common/MainHeader.tsx
-import { Avatar, Navbar } from 'flowbite-react';
-import React from 'react';
+import { Avatar } from 'flowbite-react';
 import search from 'images/search.svg';
 import { Outlet, useNavigate } from 'react-router-dom';
 import { isvalidateToken } from '@/lib/apis/user';

src/components/common/header/MyHeader.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Outlet } from 'react-router-dom';
 import setting from '../../../assets/image/icons/setting.svg';
 import { useNavigate } from 'react-router-dom';
@@ -7,6 +7,7 @@ type Props = {};
 
 export default function MyHeader({}: Props) {
   const [title, setTitle] = useState('');
+  console.log('title:', title);
   const navigate = useNavigate();
   return (
     <div className="w-[100%] flex flex-col items-center">

src/components/common/header/SelectHeader.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 type Props = {
   customWidth: string;
   selectActive?: number;

src/components/common/header/SubHeader.tsx

@@ -1,6 +1,4 @@
 'use client';
-import React from 'react';
-import { Navbar } from 'flowbite-react';
 import backButton from '../../../assets/image/icons/backButton.svg';
 import { Outlet } from 'react-router-dom';
 import { useState } from 'react';

src/components/common/progressbar/ProgressBar.tsx

@@ -1,5 +1,4 @@
 // src/components/common/progressbar/ProgressBar.tsx
-import React from "react";
 
 type Props = {
   color?: number;

src/components/common/slider/MultiRangeSlider.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   ChangeEvent,
   FC,
   useCallback,

src/components/common/slider/MultiRangeSliderYear.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   ChangeEvent,
   FC,
   useCallback,

src/components/loan/LoanCard.tsx

@@ -1,6 +1,5 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import LikeButton from '../common/button/LikeButton';
-import { loanI } from '@/routes/loan/Loan';
 
 type Props = {
   loanId?: number;
@@ -53,6 +52,7 @@ export default function LoanCard({
   providerName = '우리은행',
 }: Props) {
   const [likeButtonActive, setLikeButtonActive] = useState<boolean>(isStarred);
+  console.log('likeActive:', likeActive);
   const handleLikeClick = () => {
     console.log('like loan card');
     setLikeButtonActive((prev) => !prev);

src/components/mypage/FavoriteDetailRoomCard.tsx

@@ -1,13 +1,14 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import roomTest from '../../assets/image/test/room-test.svg';
-import filledLike from '../../assets/image/icons/filledLike.svg';
 import LikeButton from '../common/button/LikeButton';
 type Props = {};
 
 export default function FavoriteDetailRoomCard({}: Props) {
   const [isSmallScreen, setIsSmallScreen] = useState(false);
   const [likeActive, setLikeActive] = useState<boolean>(true);
 
+  console.log(isSmallScreen);
+
   useEffect(() => {
     const handleResize = () => {
       setIsSmallScreen(window.innerWidth < 450);

src/components/mypage/FavoriteLoanCard.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 type Props = {};
 
 export default function FavoriteLoanCard({}: Props) {

src/components/mypage/FavoriteLoans.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import FavoriteLoanCard from "./FavoriteLoanCard";
+import FavoriteLoanCard from './FavoriteLoanCard';
 type Props = {};
 
 const data = [1, 2, 3, 4, 5];
@@ -8,7 +7,7 @@ export default function FavoriteLoans({}: Props) {
   return (
     <div className="w-[100%]">
       <div className="flex flex-row overflow-auto scroll-hidden">
-        {data.map((value, index) => {
+        {data.map((value: number, index) => {
           return (
             <div key={index} className="mr-[0.4rem]">
               <FavoriteLoanCard />

src/components/mypage/FavoriteRoomCard.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import roomTest from '../../assets/image/test/room-test.svg';
 type Props = {};
 

src/components/mypage/FavoriteRooms.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import FavoriteRoomCard from "./FavoriteRoomCard";
+import FavoriteRoomCard from './FavoriteRoomCard';
 type Props = {};
 
 const data = [1, 2, 3, 4, 5];