diff --git a/app/(dashboard)/_ui/strategies-item/index.tsx b/app/(dashboard)/_ui/strategies-item/index.tsx index 99cc5750..63a99ae4 100644 --- a/app/(dashboard)/_ui/strategies-item/index.tsx +++ b/app/(dashboard)/_ui/strategies-item/index.tsx @@ -1,10 +1,14 @@ -import Link from 'next/link' +import { useRouter } from 'next/navigation' import classNames from 'classnames/bind' +import { PATH } from '@/shared/constants/path' +import useModal from '@/shared/hooks/custom/use-modal' +import { useAuthStore } from '@/shared/stores/use-auth-store' import { StrategiesModel } from '@/shared/types/strategy-data' import { Button } from '@/shared/ui/button' import { LinkButton } from '@/shared/ui/link-button' +import SigninCheckModal from '@/shared/ui/modal/signin-check-modal' import { formatNumber } from '@/shared/utils/format' import AreaChart from './area-chart' @@ -20,63 +24,80 @@ interface Props { } const StrategiesItem = ({ strategiesData: data, type = 'default' }: Props) => { + const router = useRouter() + const user = useAuthStore((state) => state.user) + const { isModalOpen, openModal, closeModal } = useModal() + + const handleRouter = () => { + if (!user) { + openModal() + } else { + router.push(`${PATH.STRATEGIES}/${data.strategyId}`) + } + } + return ( - - - -
-

{formatNumber(data.mdd)}

-
-
-

{data.smScore}

-
-
- 누적 수익률 -

{data.cumulativeProfitRate}%

- 최근 1년 수익률 -

{data.recentYearProfitLossRate ? data.recentYearProfitLossRate + '%' : '-'}

-
- {type === 'default' && ( -
- + <> + +
+

{data.smScore}

+
+
+ 누적 수익률 +

{data.cumulativeProfitRate.toFixed(2)}%

+ 최근 1년 수익률 +

+ {data.recentYearProfitLossRate ? data.recentYearProfitLossRate.toFixed(2) + '%' : '-'} +

+
+ {type === 'default' && ( +
+
- - )} - + )} + {type === 'my' && ( + <> +
+

{data.isPublic === 'PUBLIC' ? '공개' : '비공개'}

+
+
+ + 관리 + + +
+ + )} + + + ) } diff --git a/app/(dashboard)/_ui/strategies-item/styles.module.scss b/app/(dashboard)/_ui/strategies-item/styles.module.scss index 072d1e6a..6f871b2d 100644 --- a/app/(dashboard)/_ui/strategies-item/styles.module.scss +++ b/app/(dashboard)/_ui/strategies-item/styles.module.scss @@ -52,6 +52,8 @@ .title { @include typo-h4; @include ellipsis(1); + display: flex; + justify-content: flex-start; } .trader-profile { display: flex; diff --git a/app/(dashboard)/_ui/strategies-item/subscribe.tsx b/app/(dashboard)/_ui/strategies-item/subscribe.tsx index d4ca9162..8e9d7a78 100644 --- a/app/(dashboard)/_ui/strategies-item/subscribe.tsx +++ b/app/(dashboard)/_ui/strategies-item/subscribe.tsx @@ -2,15 +2,11 @@ import { useEffect, useState } from 'react' -import { useRouter } from 'next/navigation' - import { BookmarkIcon, BookmarkOutlineIcon } from '@/public/icons' import classNames from 'classnames/bind' -import { PATH } from '@/shared/constants/path' import useModal from '@/shared/hooks/custom/use-modal' import { useAuthStore } from '@/shared/stores/use-auth-store' -import SigninCheckModal from '@/shared/ui/modal/signin-check-modal' import SubscribeWarningModal from '@/shared/ui/modal/subscribe-warning-modal' import useGetSubscribe from '../../strategies/_hooks/query/use-get-subscribe' @@ -26,18 +22,8 @@ interface Props { const Subscribe = ({ strategyId, subscriptionStatus, traderName }: Props) => { const [isSubscribed, setIsSubscribed] = useState(false) - const router = useRouter() const user = useAuthStore((state) => state.user) - const { - isModalOpen: isSigninCheckModalOpen, - openModal: openSigninCheckModal, - closeModal: closeSigninCheckModal, - } = useModal() - const { - isModalOpen: isSubscribeWarningModal, - openModal: openSubscribeWarningModal, - closeModal: closeSubscribeWarningModal, - } = useModal() + const { isModalOpen, openModal, closeModal } = useModal() const { mutate } = useGetSubscribe() useEffect(() => { @@ -47,37 +33,27 @@ const Subscribe = ({ strategyId, subscriptionStatus, traderName }: Props) => { }, [subscriptionStatus]) const handleSubscribe = (e: React.MouseEvent) => { - e.preventDefault() - if (!user) { - openSigninCheckModal() - } else if (user?.nickname === traderName) { - openSubscribeWarningModal() - } else { - mutate(strategyId, { - onSuccess: () => setIsSubscribed(!isSubscribed), - }) + if (user) { + e.stopPropagation() + if (user?.nickname === traderName) { + openModal() + } else { + e.preventDefault() + mutate(strategyId, { + onSuccess: () => setIsSubscribed(!isSubscribed), + }) + } } } - const handleRoute = () => router.push(PATH.SIGN_IN) - return ( <>
-
- - - + ) } diff --git a/shared/hooks/custom/use-modal.ts b/shared/hooks/custom/use-modal.ts index 20c0047d..bbfa2112 100644 --- a/shared/hooks/custom/use-modal.ts +++ b/shared/hooks/custom/use-modal.ts @@ -6,9 +6,10 @@ const useModal = () => { const [isModalOpen, setIsModalOpen] = useState(false) const openModal = () => setIsModalOpen(true) + const closeModal = (e?: React.MouseEvent) => { if (e) { - e.preventDefault() + e.stopPropagation() } setIsModalOpen(false) } diff --git a/shared/ui/modal/account-image-modal.tsx b/shared/ui/modal/account-image-modal.tsx index a38aaa60..723a1a23 100644 --- a/shared/ui/modal/account-image-modal.tsx +++ b/shared/ui/modal/account-image-modal.tsx @@ -17,7 +17,7 @@ interface Props { const AccountImageModal = ({ isOpen, title, url, onClose }: Props) => { return ( - +
{'imageData.title'}
diff --git a/shared/ui/modal/signin-check-modal.tsx b/shared/ui/modal/signin-check-modal.tsx index d9942a84..dc1c0294 100644 --- a/shared/ui/modal/signin-check-modal.tsx +++ b/shared/ui/modal/signin-check-modal.tsx @@ -2,9 +2,13 @@ import React from 'react' +import { useRouter } from 'next/navigation' + import { ModalAlertIcon } from '@/public/icons' import classNames from 'classnames/bind' +import { PATH } from '@/shared/constants/path' + import Modal from '.' import { Button } from '../button' import styles from './styles.module.scss' @@ -14,10 +18,15 @@ const cx = classNames.bind(styles) interface Props { isModalOpen: boolean onCloseModal: () => void - onChange?: () => void } -const SigninCheckModal = ({ isModalOpen, onCloseModal, onChange }: Props) => { +const SigninCheckModal = ({ isModalOpen, onCloseModal }: Props) => { + const router = useRouter() + + const handleRouter = () => { + router.push(PATH.SIGN_IN) + } + return ( @@ -25,7 +34,7 @@ const SigninCheckModal = ({ isModalOpen, onCloseModal, onChange }: Props) => {
-
diff --git a/shared/ui/modal/styles.module.scss b/shared/ui/modal/styles.module.scss index 0311d986..dcda2eb6 100644 --- a/shared/ui/modal/styles.module.scss +++ b/shared/ui/modal/styles.module.scss @@ -34,7 +34,7 @@ } } } - &.account { + &.medium { width: 600px; } &.big {