diff --git a/src/App.tsx b/src/App.tsx index 292e9d2..412e0f8 100644 --- a/src/App.tsx +++ b/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 ( diff --git a/src/components/common/alert/BottomAlert.tsx b/src/components/common/alert/BottomAlert.tsx index 42c7515..abeaa48 100644 --- a/src/components/common/alert/BottomAlert.tsx +++ b/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; diff --git a/src/components/common/button/BottomDrawer.tsx b/src/components/common/button/BottomDrawer.tsx index 27064c9..47f5d98 100644 --- a/src/components/common/button/BottomDrawer.tsx +++ b/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('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' - ?
- drawerUp -
- {children} -
-
- :{children} - } - + {positionClass === 'bottom' ? ( +
+ drawerUp +
+ {children} +
+
+ ) : ( + {children} + )} ); } diff --git a/src/components/common/button/BottomDrawerUp.tsx b/src/components/common/button/BottomDrawerUp.tsx index 4139349..22a7726 100644 --- a/src/components/common/button/BottomDrawerUp.tsx +++ b/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'; diff --git a/src/components/common/button/LargeButton.tsx b/src/components/common/button/LargeButton.tsx index e3342d8..2427d65 100644 --- a/src/components/common/button/LargeButton.tsx +++ b/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 ? (
{text} - +
) : ( text diff --git a/src/components/common/button/LikeButton.tsx b/src/components/common/button/LikeButton.tsx index b872a49..cd9ae53 100644 --- a/src/components/common/button/LikeButton.tsx +++ b/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) { diff --git a/src/components/common/button/NavigateButton.tsx b/src/components/common/button/NavigateButton.tsx index 3e1f44a..f418000 100644 --- a/src/components/common/button/NavigateButton.tsx +++ b/src/components/common/button/NavigateButton.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import doubleBlueRight from '../../../assets/image/icons/doubleBlueRight.svg'; type Props = { diff --git a/src/components/common/button/PlusButton.tsx b/src/components/common/button/PlusButton.tsx index 5ce088e..7104295 100644 --- a/src/components/common/button/PlusButton.tsx +++ b/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%]" > - 더 보기 {">"} + 더 보기 {'>'} ); } diff --git a/src/components/common/button/SmallButton.tsx b/src/components/common/button/SmallButton.tsx index 547a81c..8b17e47 100644 --- a/src/components/common/button/SmallButton.tsx +++ b/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({
diff --git a/src/components/common/form/FloatingInputForm1.tsx b/src/components/common/form/FloatingInputForm1.tsx index 06174fd..8af777b 100644 --- a/src/components/common/form/FloatingInputForm1.tsx +++ b/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 ( -
+
@@ -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 && ( - + {unit} )} diff --git a/src/components/common/form/FloatingInputForm2.tsx b/src/components/common/form/FloatingInputForm2.tsx index ce3f00d..6d81123 100644 --- a/src/components/common/form/FloatingInputForm2.tsx +++ b/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; diff --git a/src/components/common/header/MainHeader.tsx b/src/components/common/header/MainHeader.tsx index 6e4a218..96734dc 100644 --- a/src/components/common/header/MainHeader.tsx +++ b/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'; diff --git a/src/components/common/header/MyHeader.tsx b/src/components/common/header/MyHeader.tsx index e944fb9..815fbd8 100644 --- a/src/components/common/header/MyHeader.tsx +++ b/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 (
diff --git a/src/components/common/header/SelectHeader.tsx b/src/components/common/header/SelectHeader.tsx index 9a7e80c..2676ea1 100644 --- a/src/components/common/header/SelectHeader.tsx +++ b/src/components/common/header/SelectHeader.tsx @@ -1,5 +1,3 @@ -import React from "react"; - type Props = { customWidth: string; selectActive?: number; diff --git a/src/components/common/header/SubHeader.tsx b/src/components/common/header/SubHeader.tsx index dd33dd9..c319ad6 100644 --- a/src/components/common/header/SubHeader.tsx +++ b/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'; diff --git a/src/components/common/progressbar/ProgressBar.tsx b/src/components/common/progressbar/ProgressBar.tsx index 964f199..705ecee 100644 --- a/src/components/common/progressbar/ProgressBar.tsx +++ b/src/components/common/progressbar/ProgressBar.tsx @@ -1,5 +1,4 @@ // src/components/common/progressbar/ProgressBar.tsx -import React from "react"; type Props = { color?: number; diff --git a/src/components/common/slider/MultiRangeSlider.tsx b/src/components/common/slider/MultiRangeSlider.tsx index af744bc..3992ad5 100644 --- a/src/components/common/slider/MultiRangeSlider.tsx +++ b/src/components/common/slider/MultiRangeSlider.tsx @@ -1,4 +1,4 @@ -import React, { +import { ChangeEvent, FC, useCallback, diff --git a/src/components/common/slider/MultiRangeSliderYear.tsx b/src/components/common/slider/MultiRangeSliderYear.tsx index f56b748..918be75 100644 --- a/src/components/common/slider/MultiRangeSliderYear.tsx +++ b/src/components/common/slider/MultiRangeSliderYear.tsx @@ -1,4 +1,4 @@ -import React, { +import { ChangeEvent, FC, useCallback, diff --git a/src/components/loan/LoanCard.tsx b/src/components/loan/LoanCard.tsx index b000f06..e9b88aa 100644 --- a/src/components/loan/LoanCard.tsx +++ b/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(isStarred); + console.log('likeActive:', likeActive); const handleLikeClick = () => { console.log('like loan card'); setLikeButtonActive((prev) => !prev); diff --git a/src/components/mypage/FavoriteDetailRoomCard.tsx b/src/components/mypage/FavoriteDetailRoomCard.tsx index b2fdc42..0779603 100644 --- a/src/components/mypage/FavoriteDetailRoomCard.tsx +++ b/src/components/mypage/FavoriteDetailRoomCard.tsx @@ -1,6 +1,5 @@ -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 = {}; @@ -8,6 +7,8 @@ export default function FavoriteDetailRoomCard({}: Props) { const [isSmallScreen, setIsSmallScreen] = useState(false); const [likeActive, setLikeActive] = useState(true); + console.log(isSmallScreen); + useEffect(() => { const handleResize = () => { setIsSmallScreen(window.innerWidth < 450); diff --git a/src/components/mypage/FavoriteLoanCard.tsx b/src/components/mypage/FavoriteLoanCard.tsx index 63a535b..44d49ed 100644 --- a/src/components/mypage/FavoriteLoanCard.tsx +++ b/src/components/mypage/FavoriteLoanCard.tsx @@ -1,4 +1,3 @@ -import React from 'react'; type Props = {}; export default function FavoriteLoanCard({}: Props) { diff --git a/src/components/mypage/FavoriteLoans.tsx b/src/components/mypage/FavoriteLoans.tsx index 58cafa7..d140e83 100644 --- a/src/components/mypage/FavoriteLoans.tsx +++ b/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 (
- {data.map((value, index) => { + {data.map((value: number, index) => { return (
diff --git a/src/components/mypage/FavoriteRoomCard.tsx b/src/components/mypage/FavoriteRoomCard.tsx index bf9d961..2632b91 100644 --- a/src/components/mypage/FavoriteRoomCard.tsx +++ b/src/components/mypage/FavoriteRoomCard.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import roomTest from '../../assets/image/test/room-test.svg'; type Props = {}; diff --git a/src/components/mypage/FavoriteRooms.tsx b/src/components/mypage/FavoriteRooms.tsx index b0104dd..a14db99 100644 --- a/src/components/mypage/FavoriteRooms.tsx +++ b/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];