From efab2e5af196b777f9410be79b55e2dec23722dc Mon Sep 17 00:00:00 2001 From: ssumanlife Date: Fri, 6 Dec 2024 13:04:37 +0900 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=EB=AA=A8=EB=8B=AC=20=ED=81=B4?= =?UTF-8?q?=EB=A0=88=EC=8A=A4=EB=AA=85=20=EC=88=98=EC=A0=95=20(#304)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- shared/ui/modal/account-image-modal.tsx | 2 +- shared/ui/modal/styles.module.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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/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 { From c5e3e2f5c20edc7921200e9e8905e3f4a67a286b Mon Sep 17 00:00:00 2001 From: ssumanlife Date: Fri, 6 Dec 2024 13:05:43 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=9C=A0=EC=A0=80=EA=B0=80=20=EC=95=84=EB=8B=8C=EC=83=81?= =?UTF-8?q?=ED=83=9C=EB=A1=9C=20=EC=A0=84=EB=9E=B5=EC=83=81=EC=84=B8=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=EC=8B=9C=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=B2=B4=ED=81=AC=20=EB=AA=A8=EB=8B=AC=EC=98=A4=ED=94=88=20(#3?= =?UTF-8?q?04)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/(dashboard)/_ui/strategies-item/index.tsx | 131 ++++++++++-------- .../_ui/strategies-item/styles.module.scss | 2 + .../_ui/strategies-item/subscribe.tsx | 50 ++----- shared/hooks/custom/use-modal.ts | 3 +- shared/ui/modal/signin-check-modal.tsx | 15 +- 5 files changed, 105 insertions(+), 96 deletions(-) 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/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) => {
-