From a6fb61d96126c5949aafce308ff5b1971c92f7c8 Mon Sep 17 00:00:00 2001 From: Eugene-A-01 Date: Sun, 27 Oct 2024 14:07:18 +0900 Subject: [PATCH 1/7] =?UTF-8?q?Feat:=20Header=20=EC=97=85=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/account/page.tsx | 2 +- src/app/account/profile/page.tsx | 2 +- .../withdraw/_component/WithdrawalHeader.tsx | 2 +- src/app/collection/_[category]/page.tsx | 2 +- .../ListDetailOuter/ListInformation.tsx | 2 +- .../list/create/_components/CreateItem.tsx | 2 +- .../list/create/_components/CreateList.tsx | 2 +- src/app/notification/page.tsx | 2 +- .../[userId]/(follow)/_components/Header.tsx | 2 +- src/components/Header/Header.css.ts | 1 + src/components/Header/Header.tsx | 1 + src/components/Header/__Header.css.ts | 43 +++++++++++++++++++ src/components/Header/__Header.tsx | 35 +++++++++++++++ src/components/locale.ts | 8 ++-- 14 files changed, 93 insertions(+), 13 deletions(-) create mode 100644 src/components/Header/__Header.css.ts create mode 100644 src/components/Header/__Header.tsx diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx index 9059773d..ed79053d 100644 --- a/src/app/account/page.tsx +++ b/src/app/account/page.tsx @@ -1,7 +1,7 @@ 'use client'; import { useRouter } from 'next/navigation'; import useBooleanOutput from '@/hooks/useBooleanOutput'; -import Header from '@/components/Header/Header'; +import Header from '@/components/Header/__Header'; import useMoveToPage from '@/hooks/useMoveToPage'; import NavigateIcon from '/public/icons/chevron_right.svg'; diff --git a/src/app/account/profile/page.tsx b/src/app/account/profile/page.tsx index 1e1a37d5..3f845580 100644 --- a/src/app/account/profile/page.tsx +++ b/src/app/account/profile/page.tsx @@ -13,7 +13,7 @@ import toastMessage from '@/lib/constants/toastMessage'; import { useUser } from '@/store/useUser'; import getUserOne from '@/app/_api/user/getUserOne'; import updateProfile from '@/app/_api/user/updateProfile'; -import Header from '@/components/Header/Header'; +import Header from '@/components/Header/__Header'; import BlueButton from '@/components/BlueButton/BlueButton'; import ProfileForm from './_components/ProfileForm'; diff --git a/src/app/account/withdraw/_component/WithdrawalHeader.tsx b/src/app/account/withdraw/_component/WithdrawalHeader.tsx index 08d46f96..19f6a990 100644 --- a/src/app/account/withdraw/_component/WithdrawalHeader.tsx +++ b/src/app/account/withdraw/_component/WithdrawalHeader.tsx @@ -1,6 +1,6 @@ 'use client'; import { useRouter } from 'next/navigation'; -import Header from '@/components/Header/Header'; +import Header from '@/components/Header/__Header'; import { accountLocale } from '@/app/account/locale'; import { useLanguage } from '@/store/useLanguage'; diff --git a/src/app/collection/_[category]/page.tsx b/src/app/collection/_[category]/page.tsx index 52531d7f..e9cfb189 100644 --- a/src/app/collection/_[category]/page.tsx +++ b/src/app/collection/_[category]/page.tsx @@ -2,7 +2,7 @@ import { useRouter, useParams } from 'next/navigation'; -import Header from '@/components/Header/Header'; +import Header from '@/components/Header/__Header'; import * as styles from './page.css'; import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query'; import { QUERY_KEYS } from '@/lib/constants/queryKeys'; diff --git a/src/app/list/[listId]/_components/ListDetailOuter/ListInformation.tsx b/src/app/list/[listId]/_components/ListDetailOuter/ListInformation.tsx index 6dabb566..85a5f8c0 100644 --- a/src/app/list/[listId]/_components/ListDetailOuter/ListInformation.tsx +++ b/src/app/list/[listId]/_components/ListDetailOuter/ListInformation.tsx @@ -9,7 +9,7 @@ import Collaborators from '@/app/list/[listId]/_components/ListDetailOuter/Colla import getListDetail from '@/app/_api/list/getListDetail'; import Label from '@/components/Label/Label'; import Modal from '@/components/Modal/Modal'; -import Header from '@/components/Header/Header'; +import Header from '@/components/Header/__Header'; import HeaderRight from './HeaderRight'; import Comments from './Comments'; import { useUser } from '@/store/useUser'; diff --git a/src/app/list/create/_components/CreateItem.tsx b/src/app/list/create/_components/CreateItem.tsx index 68fc5b1c..dd7b3c0b 100644 --- a/src/app/list/create/_components/CreateItem.tsx +++ b/src/app/list/create/_components/CreateItem.tsx @@ -1,7 +1,7 @@ import { useFormContext } from 'react-hook-form'; import BlueButton from '@/components/BlueButton/BlueButton'; -import Header from '@/components/Header/Header'; +import Header from '@/components/Header/__Header'; import Items from './item/Items'; import * as styles from './CreateItem.css'; import { useLanguage } from '@/store/useLanguage'; diff --git a/src/app/list/create/_components/CreateList.tsx b/src/app/list/create/_components/CreateList.tsx index 14311fff..c7a130b9 100644 --- a/src/app/list/create/_components/CreateList.tsx +++ b/src/app/list/create/_components/CreateList.tsx @@ -6,7 +6,7 @@ import { useRouter } from 'next/navigation'; import { useSearchParams } from 'next/navigation'; import { useQuery } from '@tanstack/react-query'; -import Header from '@/components/Header/Header'; +import Header from '@/components/Header/__Header'; import Section from './list/Section'; import SimpleInput from './list/SimpleInput'; import ButtonSelector from './list/ButtonSelector'; diff --git a/src/app/notification/page.tsx b/src/app/notification/page.tsx index 0f27d0b2..0a43fc05 100644 --- a/src/app/notification/page.tsx +++ b/src/app/notification/page.tsx @@ -5,7 +5,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import checkAllNotification from '@/app/_api/notification/checkAllNotification'; import getNotificationAllChecked from '../_api/notification/getNotificationAllChecked'; -import Header from '@/components/Header/Header'; +import Header from '@/components/Header/__Header'; import useMoveToPage from '@/hooks/useMoveToPage'; import { QUERY_KEYS } from '@/lib/constants/queryKeys'; import { notificationLocale } from '@/app/notification/locale'; diff --git a/src/app/user/[userId]/(follow)/_components/Header.tsx b/src/app/user/[userId]/(follow)/_components/Header.tsx index aef96b32..b4145aba 100644 --- a/src/app/user/[userId]/(follow)/_components/Header.tsx +++ b/src/app/user/[userId]/(follow)/_components/Header.tsx @@ -1,6 +1,6 @@ 'use client'; import { useRouter, useParams } from 'next/navigation'; -import CommonHeader from '@/components/Header/Header'; +import CommonHeader from '@/components/Header/__Header'; interface HeaderProps { title: string; diff --git a/src/components/Header/Header.css.ts b/src/components/Header/Header.css.ts index 6dbd4af2..d5eafb5a 100644 --- a/src/components/Header/Header.css.ts +++ b/src/components/Header/Header.css.ts @@ -18,6 +18,7 @@ export const header = style({ alignItems: 'center', backgroundColor: vars.color.bggray, + color: vars.color.black, }); export const flexChild = style({ diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 39c4d866..c8ca69f6 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -21,6 +21,7 @@ function Header({ title, left, leftClick, right }: HeaderProps) { {left === 'cancel' &&

{commonLocale[language].cancel}

} {left === 'back' &&

{commonLocale[language].back}

} {left === 'close' &&

{commonLocale[language].close}

} + {left === null && <>}

{title}

diff --git a/src/components/Header/__Header.css.ts b/src/components/Header/__Header.css.ts new file mode 100644 index 00000000..91846272 --- /dev/null +++ b/src/components/Header/__Header.css.ts @@ -0,0 +1,43 @@ +import { style } from '@vanilla-extract/css'; +import * as fonts from '@/styles/__font.css'; + +export const header = style({ + width: '100%', + height: '70px', + paddingLeft: '20px', + paddingRight: '20px', + + position: 'sticky', + top: '0', + left: '0', + zIndex: '10', + + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + + backgroundColor: '#fff', + + borderBottom: '1px solid rgba(0, 0, 0, 0.10)', +}); + +export const flexChild = style({ + flex: '1', +}); + +export const headerTitle = style([ + fonts.titleMedium, + { + textAlign: 'center', + }, +]); + +export const leftChild = style({ + display: 'flex', + justifyContent: 'left', +}); + +export const rightChild = style({ + display: 'flex', + justifyContent: 'right', +}); diff --git a/src/components/Header/__Header.tsx b/src/components/Header/__Header.tsx new file mode 100644 index 00000000..bcaf7b2e --- /dev/null +++ b/src/components/Header/__Header.tsx @@ -0,0 +1,35 @@ +'use client'; +import { ReactNode } from 'react'; + +import CloseButton from '/public/icons/close_button.svg'; +import BackIcon from '/public/icons/back.svg'; + +import * as styles from './__Header.css'; +import { commonLocale } from '@/components/locale'; +import { useLanguage } from '@/store/useLanguage'; + +interface HeaderProps { + title: string; + left?: 'close' | 'back'; + leftClick?: () => void; + right?: ReactNode; +} + +function Header({ title, left, leftClick, right }: HeaderProps) { + const { language } = useLanguage(); + return ( +
+ + +

{title}

+ +
{right}
+
+ ); +} + +export default Header; diff --git a/src/components/locale.ts b/src/components/locale.ts index 8b02fb95..c8418ef1 100644 --- a/src/components/locale.ts +++ b/src/components/locale.ts @@ -17,8 +17,8 @@ export const commonLocale: Record = { shareToLinkButton: '링크 공유하기 버튼', createListButton: '리스트 작성하기 버튼', viewOptionButton: '옵션 보기 버튼', - closeButton: '닫기버튼', - goBack: '뒤로가기 버튼', + headerCancel: '취소', + headerGoBack: '뒤로가기', loading: '로딩중입니다.', failToUrlInformation: 'url정보를 가져오는데 실패했습니다.', noTitle: '제목이 없습니다.', @@ -55,8 +55,8 @@ export const commonLocale: Record = { shareToLinkButton: 'Share link button', createListButton: 'Create list button', viewOptionButton: 'View options button', - closeButton: 'Close button', - goBack: 'Back Button', + headerCancel: 'Cancel', + headerGoBack: 'Back', loading: 'loading...', failToUrlInformation: 'Failed to retrieve url information.', noTitle: 'There is no title.', From 6d2b96e1e03d82eb2bf546e3c371597620ba87f7 Mon Sep 17 00:00:00 2001 From: Eugene-A-01 Date: Sun, 27 Oct 2024 14:07:40 +0900 Subject: [PATCH 2/7] =?UTF-8?q?Chore:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/new/clock.svg | 10 ++++++++++ public/icons/new/kebab.svg | 12 ++++++++++++ public/images/no_data_image.svg | 2 +- 3 files changed, 23 insertions(+), 1 deletion(-) create mode 100644 public/icons/new/clock.svg create mode 100644 public/icons/new/kebab.svg diff --git a/public/icons/new/clock.svg b/public/icons/new/clock.svg new file mode 100644 index 00000000..6b821304 --- /dev/null +++ b/public/icons/new/clock.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/icons/new/kebab.svg b/public/icons/new/kebab.svg new file mode 100644 index 00000000..85f6d408 --- /dev/null +++ b/public/icons/new/kebab.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/images/no_data_image.svg b/public/images/no_data_image.svg index 1f44d1f6..38005379 100644 --- a/public/images/no_data_image.svg +++ b/public/images/no_data_image.svg @@ -1,5 +1,5 @@ - + From efdd56ea96f9329272c48cb6bf5390fc0d29c5eb Mon Sep 17 00:00:00 2001 From: Eugene-A-01 Date: Sun, 27 Oct 2024 14:09:12 +0900 Subject: [PATCH 3/7] =?UTF-8?q?Chore:=20=ED=9E=88=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20Ver2=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=EB=93=A4=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/list/[listId]/history/__page.css.ts | 75 +++++++++++++++++++ src/app/list/[listId]/history/__page.tsx | 70 +++++++++++++++++ ...toryGraph.css.ts => __HistoryGraph.css.ts} | 0 .../{HistoryGraph.tsx => __HistoryGraph.tsx} | 2 +- ...rsions.css.ts => __HistoryVersions.css.ts} | 0 ...toryVersions.tsx => __HistoryVersions.tsx} | 2 +- src/app/list/[listId]/history/page.css.ts | 24 +++--- src/app/list/[listId]/history/page.tsx | 9 +-- 8 files changed, 162 insertions(+), 20 deletions(-) create mode 100644 src/app/list/[listId]/history/__page.css.ts create mode 100644 src/app/list/[listId]/history/__page.tsx rename src/app/list/[listId]/history/_component/{HistoryGraph.css.ts => __HistoryGraph.css.ts} (100%) rename src/app/list/[listId]/history/_component/{HistoryGraph.tsx => __HistoryGraph.tsx} (98%) rename src/app/list/[listId]/history/_component/{HistoryVersions.css.ts => __HistoryVersions.css.ts} (100%) rename src/app/list/[listId]/history/_component/{HistoryVersions.tsx => __HistoryVersions.tsx} (99%) diff --git a/src/app/list/[listId]/history/__page.css.ts b/src/app/list/[listId]/history/__page.css.ts new file mode 100644 index 00000000..7652c8f1 --- /dev/null +++ b/src/app/list/[listId]/history/__page.css.ts @@ -0,0 +1,75 @@ +import { style, styleVariants, keyframes } from '@vanilla-extract/css'; +import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/__font.css'; + +export const navContainer = style({ + width: '100%', + + padding: '18px 65.5px 0', + margin: '0 auto', + + display: 'flex', + alignItems: 'center', + columnGap: '70px', + + position: 'fixed', + top: '70px', + + backgroundColor: vars.color.white, + + zIndex: '1', +}); + +export const navButton = style([ + fonts.labelLarge, + { + width: 'fit-content', + padding: ' 15px 0', + flexGrow: '1', + + color: vars.color.black, + }, +]); + +export const navBarBase = style({ + width: '50px', + height: '5px', + + backgroundColor: vars.color.black, + borderRadius: '50px', +}); + +export const navBar = styleVariants({ + left: [ + navBarBase, + { + position: 'absolute', + left: '23.5%', + bottom: '0%', + }, + ], + right: [ + navBarBase, + { + position: 'absolute', + left: '66.5%', + bottom: '0%', + }, + ], +}); + +export const listTitle = style([ + fonts.headlineMedium, + { + margin: '140px 40px 20px', + }, +]); + +export const contentContainer = style({ + padding: '50px 27px', + + overflowX: 'auto', + '::-webkit-scrollbar': { + display: 'none', + }, +}); diff --git a/src/app/list/[listId]/history/__page.tsx b/src/app/list/[listId]/history/__page.tsx new file mode 100644 index 00000000..e5373e69 --- /dev/null +++ b/src/app/list/[listId]/history/__page.tsx @@ -0,0 +1,70 @@ +'use client'; +import { useState } from 'react'; +import { useParams, useRouter } from 'next/navigation'; +import { useQuery } from '@tanstack/react-query'; + +import Header from '@/components/Header/__Header'; +import { Graph } from './_component/__HistoryGraph'; +import { Version } from './_component/__HistoryVersions'; + +import getListDetail from '@/app/_api/list/getListDetail'; +import getHistories from '@/app/_api/history/getHistories'; +import { ListDetailType } from '@/lib/types/listType'; +import { HistoryType } from '@/lib/types/historyType'; +import { QUERY_KEYS } from '@/lib/constants/queryKeys'; + +import * as styles from './__page.css'; +import { useLanguage } from '@/store/useLanguage'; +import { listLocale } from '@/app/list/[listId]/locale'; + +function HistoryPage() { + const { language } = useLanguage(); + const [type, setType] = useState<'graph' | 'version'>('graph'); + + const router = useRouter(); + const param = useParams<{ listId: string }>(); + const listId = param?.listId; + + const { data: listData } = useQuery({ + queryKey: [QUERY_KEYS.getListDetail, listId], + queryFn: () => getListDetail(Number(listId)), + }); + + const { data: historyData } = useQuery({ + queryKey: [QUERY_KEYS.getHistories, listId], + queryFn: () => getHistories(listId), + }); + + return ( + <> +
{ + router.back(); + }} + /> +
+
+ + +
+
+ +
{listData?.title}
+
+ {type === 'graph' ? ( + + ) : ( + + )} +
+
+ + ); +} +export default HistoryPage; diff --git a/src/app/list/[listId]/history/_component/HistoryGraph.css.ts b/src/app/list/[listId]/history/_component/__HistoryGraph.css.ts similarity index 100% rename from src/app/list/[listId]/history/_component/HistoryGraph.css.ts rename to src/app/list/[listId]/history/_component/__HistoryGraph.css.ts diff --git a/src/app/list/[listId]/history/_component/HistoryGraph.tsx b/src/app/list/[listId]/history/_component/__HistoryGraph.tsx similarity index 98% rename from src/app/list/[listId]/history/_component/HistoryGraph.tsx rename to src/app/list/[listId]/history/_component/__HistoryGraph.tsx index c4d6bc6e..8139f867 100644 --- a/src/app/list/[listId]/history/_component/HistoryGraph.tsx +++ b/src/app/list/[listId]/history/_component/__HistoryGraph.tsx @@ -1,7 +1,7 @@ import dynamic from 'next/dynamic'; const ApexChart = dynamic(() => import('react-apexcharts'), { ssr: false }); -import * as styles from './HistoryGraph.css'; +import * as styles from './__HistoryGraph.css'; import { HistoryType } from '@/lib/types/historyType'; import timeDiff from '@/lib/utils/time-diff'; import { useLanguage } from '@/store/useLanguage'; diff --git a/src/app/list/[listId]/history/_component/HistoryVersions.css.ts b/src/app/list/[listId]/history/_component/__HistoryVersions.css.ts similarity index 100% rename from src/app/list/[listId]/history/_component/HistoryVersions.css.ts rename to src/app/list/[listId]/history/_component/__HistoryVersions.css.ts diff --git a/src/app/list/[listId]/history/_component/HistoryVersions.tsx b/src/app/list/[listId]/history/_component/__HistoryVersions.tsx similarity index 99% rename from src/app/list/[listId]/history/_component/HistoryVersions.tsx rename to src/app/list/[listId]/history/_component/__HistoryVersions.tsx index a62c3748..94d8d3b1 100644 --- a/src/app/list/[listId]/history/_component/HistoryVersions.tsx +++ b/src/app/list/[listId]/history/_component/__HistoryVersions.tsx @@ -15,7 +15,7 @@ import timeDiff from '@/lib/utils/time-diff'; import { HistoryType } from '@/lib/types/historyType'; import { QUERY_KEYS } from '@/lib/constants/queryKeys'; -import * as styles from './HistoryVersions.css'; +import * as styles from './__HistoryVersions.css'; import deleteHistory from '@/app/_api/history/deleteHistory'; import NoDataComponent from '@/components/NoData/NoDataComponent'; import { useLanguage } from '@/store/useLanguage'; diff --git a/src/app/list/[listId]/history/page.css.ts b/src/app/list/[listId]/history/page.css.ts index 7652c8f1..b9a8c276 100644 --- a/src/app/list/[listId]/history/page.css.ts +++ b/src/app/list/[listId]/history/page.css.ts @@ -1,6 +1,6 @@ import { style, styleVariants, keyframes } from '@vanilla-extract/css'; -import { vars } from '@/styles/__theme.css'; -import * as fonts from '@/styles/__font.css'; +import { vars } from '@/styles/theme.css'; +import * as fonts from '@/styles/font.css'; export const navContainer = style({ width: '100%', @@ -11,17 +11,10 @@ export const navContainer = style({ display: 'flex', alignItems: 'center', columnGap: '70px', - - position: 'fixed', - top: '70px', - - backgroundColor: vars.color.white, - - zIndex: '1', }); export const navButton = style([ - fonts.labelLarge, + fonts.Label, { width: 'fit-content', padding: ' 15px 0', @@ -59,14 +52,19 @@ export const navBar = styleVariants({ }); export const listTitle = style([ - fonts.headlineMedium, + fonts.Header, { - margin: '140px 40px 20px', + padding: '10px', + marginBottom: '30px', }, ]); export const contentContainer = style({ - padding: '50px 27px', + margin: '50px 20px', + padding: '20px 20px', + + borderRadius: '20px', + backgroundColor: 'white', overflowX: 'auto', '::-webkit-scrollbar': { diff --git a/src/app/list/[listId]/history/page.tsx b/src/app/list/[listId]/history/page.tsx index 327e52ea..c3400c45 100644 --- a/src/app/list/[listId]/history/page.tsx +++ b/src/app/list/[listId]/history/page.tsx @@ -4,8 +4,8 @@ import { useParams, useRouter } from 'next/navigation'; import { useQuery } from '@tanstack/react-query'; import Header from '@/components/Header/Header'; -import { Graph } from './_component/HistoryGraph'; -import { Version } from './_component/HistoryVersions'; +import { Graph } from './_component/__HistoryGraph'; +import { Version } from './_component/__HistoryVersions'; import getListDetail from '@/app/_api/list/getListDetail'; import getHistories from '@/app/_api/history/getHistories'; @@ -41,7 +41,7 @@ function HistoryPage() { title={listLocale[language].history} left="back" leftClick={() => { - router.back(); + router.push(`/list/${listId}`); }} />
@@ -52,11 +52,10 @@ function HistoryPage() { -
-
{listData?.title}
+
{listData?.title}
{type === 'graph' ? ( ) : ( From 03698057ee416458d9a9e01d7dc0e7c55fa13fc7 Mon Sep 17 00:00:00 2001 From: Eugene-A-01 Date: Wed, 30 Oct 2024 23:03:14 +0900 Subject: [PATCH 4/7] =?UTF-8?q?Feat:=20=ED=9E=88=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=ED=8E=98=EC=9D=B4=EC=A7=80=20ver3.0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/new/delete.svg | 4 + public/icons/new/eye.svg | 4 + public/icons/new/eye_slash.svg | 5 + .../history/_component/HistoryGraph.css.ts | 27 +++ .../history/_component/HistoryGraph.tsx | 168 ++++++++++++++ .../history/_component/HistoryVersions.css.ts | 112 ++++++++++ .../history/_component/HistoryVersions.tsx | 208 ++++++++++++++++++ src/app/list/[listId]/history/page.css.ts | 57 ++--- src/app/list/[listId]/history/page.tsx | 14 +- src/app/list/[listId]/locale.ts | 10 +- 10 files changed, 565 insertions(+), 44 deletions(-) create mode 100644 public/icons/new/delete.svg create mode 100644 public/icons/new/eye.svg create mode 100644 public/icons/new/eye_slash.svg create mode 100644 src/app/list/[listId]/history/_component/HistoryGraph.css.ts create mode 100644 src/app/list/[listId]/history/_component/HistoryGraph.tsx create mode 100644 src/app/list/[listId]/history/_component/HistoryVersions.css.ts create mode 100644 src/app/list/[listId]/history/_component/HistoryVersions.tsx diff --git a/public/icons/new/delete.svg b/public/icons/new/delete.svg new file mode 100644 index 00000000..f31d71ec --- /dev/null +++ b/public/icons/new/delete.svg @@ -0,0 +1,4 @@ + + + diff --git a/public/icons/new/eye.svg b/public/icons/new/eye.svg new file mode 100644 index 00000000..6fc79731 --- /dev/null +++ b/public/icons/new/eye.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/icons/new/eye_slash.svg b/public/icons/new/eye_slash.svg new file mode 100644 index 00000000..1d797164 --- /dev/null +++ b/public/icons/new/eye_slash.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/app/list/[listId]/history/_component/HistoryGraph.css.ts b/src/app/list/[listId]/history/_component/HistoryGraph.css.ts new file mode 100644 index 00000000..98021517 --- /dev/null +++ b/src/app/list/[listId]/history/_component/HistoryGraph.css.ts @@ -0,0 +1,27 @@ +import { style } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; + +export const container = style({ + overflowX: 'scroll', + overflowY: 'hidden', + width: '100%', + height: '520px', + paddingBottom: '60px', + + display: 'flex', + alignItems: 'center', + borderRadius: '20px', + backgroundColor: vars.color.white, + + selectors: { + '&::-webkit-scrollbar': { + height: '5px', + background: vars.color.bggray, + borderRadius: '6px', + }, + '&::-webkit-scrollbar-thumb': { + backgroundColor: vars.color.lightgray, + borderRadius: '6px', + }, + }, +}); diff --git a/src/app/list/[listId]/history/_component/HistoryGraph.tsx b/src/app/list/[listId]/history/_component/HistoryGraph.tsx new file mode 100644 index 00000000..44b3a852 --- /dev/null +++ b/src/app/list/[listId]/history/_component/HistoryGraph.tsx @@ -0,0 +1,168 @@ +import { useEffect, useRef } from 'react'; +import { HistoryType } from '@/lib/types/historyType'; +import timeDiff from '@/lib/utils/time-diff'; +import { useLanguage } from '@/store/useLanguage'; +import { listLocale } from '@/app/list/[listId]/locale'; +import * as styles from './HistoryGraph.css'; +import NoDataComponent from '@/components/NoData/NoDataComponent'; + +interface ItemType { + title: string; + history: (number | null)[]; +} + +interface HistoryGraphProps { + histories: HistoryType[]; +} + +function HistoryGraph({ histories }: HistoryGraphProps) { + const itemRankHistories: ItemType[] = []; + const publicHistories = histories.filter((history) => history.isPublic); + + const { language } = useLanguage(); + + publicHistories.forEach((history) => { + history.items.forEach((item) => { + if (!itemRankHistories.some((i) => i.title === item.title)) { + itemRankHistories.push({ title: item.title, history: [] }); + } + }); + }); + + itemRankHistories.forEach((i) => { + publicHistories.forEach((h) => { + i.history.push(h.items.find((x) => x.title === i.title)?.rank || null); + }); + }); + + return ( +
+ {publicHistories.length === 0 ? ( + <> + + + ) : ( + + )} +
+ ); +} + +interface ChartProps { + itemRankHistories: ItemType[]; + histories: HistoryType[]; +} + +function Chart({ histories, itemRankHistories }: ChartProps) { + const chartRef = useRef(null); + const { language } = useLanguage(); + + useEffect(() => { + const loadGoogleCharts = () => { + const script = document.createElement('script'); + script.src = 'https://www.gstatic.com/charts/loader.js'; + script.onload = () => { + if (window.google && window.google.charts) { + window.google.charts.load('current', { packages: ['corechart'] }); + window.google.charts.setOnLoadCallback(() => { + if (window.google.visualization?.LineChart) { + drawChart(); + window.addEventListener('resize', drawChart); + } else { + setTimeout(drawChart, 100); + } + }); + } + }; + document.body.appendChild(script); + }; + + function drawChart() { + if ( + window.google && + window.google.visualization?.LineChart && + chartRef.current && + itemRankHistories.length > 0 && + histories.length > 0 + ) { + const data = new window.google.visualization.DataTable(); + data.addColumn('string', 'Time'); + + itemRankHistories.forEach((item) => { + data.addColumn('number', item.title); + }); + + const rows = histories.map((history, index) => { + const row = [timeDiff(String(history.createdDate)), ...itemRankHistories.map((item) => item.history[index])]; + return row; + }); + data.addRows(rows); + + const options = { + title: listLocale[language].title, + chartArea: { + left: 50, + right: 20, + top: 30, + bottom: 100, + width: '100%', + height: '80%', + }, + height: 500, + colors: [ + '#87CEEB', + '#0000FF', + '#00008B', + '#8A2BE2', + '#32CD32', + '#FFD700', + '#FFA500', + '#FF69B4', + '#FF0000', + '#FF1493', + ], + hAxis: { + textStyle: { + fontSize: 14, + italic: false, + }, + showTextEvery: 1, + }, + vAxis: { + direction: -1, + ticks: Array.from({ length: 10 }, (_, i) => ({ + v: 10 - i, + f: `${10 - i}위`, // Append "위" to each tick label + })), + textStyle: { + fontSize: 14, + italic: false, + }, + }, + curveType: 'function', + legend: { + position: 'bottom', + alignment: 'center', + maxLines: 1, + textStyle: { fontSize: 12 }, + }, + }; + + const chart = new window.google.visualization.LineChart(chartRef.current); + chart.draw(data, options); + } + } + + if (!window.google || !window.google.charts) { + loadGoogleCharts(); + } else { + drawChart(); + } + + return () => window.removeEventListener('resize', drawChart); + }, [histories, itemRankHistories, language]); + + return
; +} + +export { HistoryGraph as Graph }; diff --git a/src/app/list/[listId]/history/_component/HistoryVersions.css.ts b/src/app/list/[listId]/history/_component/HistoryVersions.css.ts new file mode 100644 index 00000000..ad4ab9c1 --- /dev/null +++ b/src/app/list/[listId]/history/_component/HistoryVersions.css.ts @@ -0,0 +1,112 @@ +import { style } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; +import * as fonts from '@/styles/font.css'; + +export const container = style({ + padding: '0px 18px', + + position: 'relative', +}); + +export const dateDropdown = style([ + fonts.LabelSmall, + { + position: 'absolute', + top: '-65px', + right: '5px', + + display: 'flex', + alignItems: 'center', + + color: vars.color.gray, + + // float: 'right', + cursor: 'pointer', + }, +]); + +export const iconWrapper = style({ + position: 'absolute', + top: '-5px', + right: '5px', + + display: 'flex', + alignItems: 'center', + + color: vars.color.gray, + + cursor: 'pointer', +}); + +export const iconButton = style({ + padding: '5px', + + display: 'flex', + justifyContent: 'center', + alignItems: 'align-end', + cursor: 'pointer', +}); + +export const eyeIcon = style({ + width: '20px', + height: '20px', + color: vars.color.bluegray8, +}); + +export const deleteIcon = style({ + width: '20px', + height: '20px', + color: vars.color.bluegray8, +}); + +export const title = style([ + fonts.Subtitle, + { + color: vars.color.black, + textAlign: 'center', + }, +]); + +export const date = style([ + fonts.Body, + { + color: vars.color.black, + textAlign: 'center', + marginTop: '5px', + }, +]); + +export const itemsContainer = style({ + marginTop: '50px', +}); + +export const itemContainer = style({ + height: '74px', + padding: '0 20px', + + display: 'flex', +}); + +export const itemTitle = style([fonts.Body, {}]); + +export const itemRank = style([ + fonts.Subtitle, + { + marginRight: '20px', + + textAlign: 'center', + minWidth: '21px', + }, +]); + +export const crown = style({ + marginRight: '5px', + + position: 'relative', + right: '9px', + bottom: '5px', +}); + +export const noDataImage = style({ + marginTop: '40px', +}); diff --git a/src/app/list/[listId]/history/_component/HistoryVersions.tsx b/src/app/list/[listId]/history/_component/HistoryVersions.tsx new file mode 100644 index 00000000..cc69f125 --- /dev/null +++ b/src/app/list/[listId]/history/_component/HistoryVersions.tsx @@ -0,0 +1,208 @@ +import { useState } from 'react'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; + +import Modal from '@/components/Modal/Modal'; +import BottomSheet from '@/components/BottomSheet/BottomSheet'; +import NoDataComponent from '@/components/NoData/NoDataComponent'; + +import EyeIcon from '/public/icons/new/eye.svg'; +import EyeSlashIcon from '/public/icons/new/eye_slash.svg'; +import DeleteIcon from '/public/icons/new/delete.svg'; +import ArrowDown from '/public/icons/chevron_down_sm.svg'; + +import { useUser } from '@/store/useUser'; +import useBooleanOutput from '@/hooks/useBooleanOutput'; +import toggleHistoryPublic from '@/app/_api/history/toggleHistoryPulblic'; +import deleteHistory from '@/app/_api/history/deleteHistory'; +import timeDiff from '@/lib/utils/time-diff'; +import { HistoryType } from '@/lib/types/historyType'; +import { QUERY_KEYS } from '@/lib/constants/queryKeys'; + +import * as styles from './HistoryVersions.css'; +import { useLanguage } from '@/store/useLanguage'; +import { modalLocale, listLocale } from '@/app/list/[listId]/locale'; + +interface VersionHistoryProps { + histories: HistoryType[]; + listId: string | undefined; + listOwnerId: number | undefined; +} + +function HistoryVersions({ histories, listId, listOwnerId }: VersionHistoryProps) { + const { user } = useUser(); + const { language } = useLanguage(); + const queryClient = useQueryClient(); + + const [selectedHistory, setSelectedHistory] = useState(histories[histories.length - 1] || {}); + const [selectedHistoryIdx, setSelectedHistoryIdx] = useState(histories.length - 1); + + const { + isOn: isHistorySelectionOpen, + handleSetOff: closeHistorySelection, + handleSetOn: openHistorySelection, + } = useBooleanOutput(); + const { isOn: isDeleteModalOn, handleSetOff: closeDeleteModal, handleSetOn: openDeleteModal } = useBooleanOutput(); + const { isOn: isPublicModalOn, handleSetOff: closePublicModal, handleSetOn: openPublicModal } = useBooleanOutput(); + + const { mutate: togglePublicMutation } = useMutation({ + mutationFn: toggleHistoryPublic, + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: [QUERY_KEYS.getHistories, listId], + }); + }, + }); + + const { mutate: deleteMutation } = useMutation({ + mutationFn: deleteHistory, + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: [QUERY_KEYS.deleteHistory, listId], + }); + setSelectedHistory(histories[0]); + setSelectedHistoryIdx(0); + // TODO: 삭제 토스트 띄우기 + }, + }); + + const historySelectOption = histories + .filter((history) => { + return user.id === listOwnerId || history.isPublic; + }) + .map((history, idx) => { + return { + key: String(history.id), + title: `${idx + 1}번째 히스토리: ${timeDiff(String(history.createdDate))}`, + onClick: () => { + setSelectedHistory(history); + setSelectedHistoryIdx(idx); + }, + }; + }); + + const handleTogglePublic = () => { + openPublicModal(); + + setSelectedHistory((prevHistory) => ({ + ...prevHistory, + isPublic: !prevHistory.isPublic, + })); + + togglePublicMutation( + { historyId: selectedHistory.id }, + { + onError: () => { + setSelectedHistory((prevHistory) => ({ + ...prevHistory, + isPublic: !prevHistory.isPublic, + })); + }, + } + ); + }; + + const handleDeleteHistory = () => { + deleteMutation({ historyId: selectedHistory.id }); + closeDeleteModal(); + }; + + return ( + <> + {user.id === listOwnerId ? ( +
+ {histories.length !== 0 && ( + <> + +
+ + +
+ + )} +
+ ) : ( +
+ {histories.length !== 0 && ( + <> + + + )} +
+ )} + + {histories.length === 0 ? ( +
+ +
+ ) : ( + <> +
{selectedHistoryIdx + 1}번째 히스토리
+
{timeDiff(String(selectedHistory?.createdDate))}
+
+ {selectedHistory?.items + .sort((a, b) => a.rank - b.rank) + .map((item) => )} +
+ + )} + + {isHistorySelectionOpen && ( + + )} + + {isPublicModalOn && ( + + + {selectedHistory.isPublic ? modalLocale[language].setPublic : modalLocale[language].setPrivate} + + {modalLocale[language].confirm} + + )} + {isDeleteModalOn && ( + + + {modalLocale[language].deleteHistory1} +
+ {modalLocale[language].deleteHistory2} + + + {modalLocale[language].confirm} + + + )} + + ); +} + +interface ItemProp { + rank: number; + title: string; +} +function Item({ rank, title }: ItemProp) { + return ( +
+
{rank}
+
{title}
+
+ ); +} + +export { HistoryVersions as Version }; diff --git a/src/app/list/[listId]/history/page.css.ts b/src/app/list/[listId]/history/page.css.ts index b9a8c276..8cae7854 100644 --- a/src/app/list/[listId]/history/page.css.ts +++ b/src/app/list/[listId]/history/page.css.ts @@ -1,54 +1,33 @@ -import { style, styleVariants, keyframes } from '@vanilla-extract/css'; +import { style, styleVariants } from '@vanilla-extract/css'; import { vars } from '@/styles/theme.css'; import * as fonts from '@/styles/font.css'; export const navContainer = style({ - width: '100%', - - padding: '18px 65.5px 0', - margin: '0 auto', + margin: '35px 0px 0px', + paddingRight: '25px', display: 'flex', - alignItems: 'center', - columnGap: '70px', + justifyContent: 'right', + // columnGap: '5px', }); export const navButton = style([ fonts.Label, { - width: 'fit-content', - padding: ' 15px 0', - flexGrow: '1', - - color: vars.color.black, + width: '65px', + padding: '10px 15px', + color: vars.color.lightgray, + backgroundColor: vars.color.white, + // borderRadius: '20px', + cursor: 'pointer', + textAlign: 'center', + whiteSpace: 'nowrap', }, ]); -export const navBarBase = style({ - width: '50px', - height: '5px', - - backgroundColor: vars.color.black, - borderRadius: '50px', -}); - -export const navBar = styleVariants({ - left: [ - navBarBase, - { - position: 'absolute', - left: '23.5%', - bottom: '0%', - }, - ], - right: [ - navBarBase, - { - position: 'absolute', - left: '66.5%', - bottom: '0%', - }, - ], +export const activeButton = style({ + backgroundColor: vars.color.lightblue, + color: vars.color.blue, }); export const listTitle = style([ @@ -56,11 +35,13 @@ export const listTitle = style([ { padding: '10px', marginBottom: '30px', + + borderBottom: `2px solid ${vars.color.bggray}`, }, ]); export const contentContainer = style({ - margin: '50px 20px', + margin: '20px 20px', padding: '20px 20px', borderRadius: '20px', diff --git a/src/app/list/[listId]/history/page.tsx b/src/app/list/[listId]/history/page.tsx index c3400c45..6bdacaed 100644 --- a/src/app/list/[listId]/history/page.tsx +++ b/src/app/list/[listId]/history/page.tsx @@ -4,8 +4,8 @@ import { useParams, useRouter } from 'next/navigation'; import { useQuery } from '@tanstack/react-query'; import Header from '@/components/Header/Header'; -import { Graph } from './_component/__HistoryGraph'; -import { Version } from './_component/__HistoryVersions'; +import { Graph } from './_component/HistoryGraph'; +import { Version } from './_component/HistoryVersions'; import getListDetail from '@/app/_api/list/getListDetail'; import getHistories from '@/app/_api/history/getHistories'; @@ -46,10 +46,16 @@ function HistoryPage() { />
- -
diff --git a/src/app/list/[listId]/locale.ts b/src/app/list/[listId]/locale.ts index abc18620..220ffc59 100644 --- a/src/app/list/[listId]/locale.ts +++ b/src/app/list/[listId]/locale.ts @@ -110,7 +110,10 @@ export const modalLocale = { confirm: '확인', deleteButtonAlt: '삭제 버튼', privateMessage: '이 리스트는 삭제 또는 비공개 처리 되었어요.', - deleteHistory: '정말 이 히스토리를 삭제하시나요?', + deleteHistory1: '이 히스토리를 정말 삭제하시나요?', + deleteHistory2: '삭제 후에는 복구할 수 없어요.', + setPublic: '이 히스토리가 공개 처리되었습니다.', + setPrivate: '이 히스토리가 비공개 처리되었습니다.', }, en: { deleteListMessage: 'Do you really delete the list?', @@ -118,6 +121,9 @@ export const modalLocale = { confirm: 'Check', deleteButtonAlt: 'Delete button', privateMessage: 'This list has been deleted or closed.', - deleteHistory: 'Are you sure you want to delete this history?', + deleteHistory1: 'Are you sure you want to delete the history of this version?', + deleteHistory2: 'It cannot be restored after deletion.', + setPublic: 'This history has been set to public.', + setPrivate: 'This history has been set to private.', }, }; From 17601867e6ddb509dbcf4dcc204a01c7384855d6 Mon Sep 17 00:00:00 2001 From: Eugene-A-01 Date: Wed, 30 Oct 2024 23:20:40 +0900 Subject: [PATCH 5/7] =?UTF-8?q?hotfix/ver2.0=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../history/_component/__HistoryGraph.css.ts | 28 +- .../history/_component/__HistoryGraph.tsx | 282 ++++++------- .../_component/__HistoryVersions.css.ts | 148 +++---- .../history/_component/__HistoryVersions.tsx | 374 +++++++++--------- 4 files changed, 416 insertions(+), 416 deletions(-) diff --git a/src/app/list/[listId]/history/_component/__HistoryGraph.css.ts b/src/app/list/[listId]/history/_component/__HistoryGraph.css.ts index 27d97c4a..6b42e0cb 100644 --- a/src/app/list/[listId]/history/_component/__HistoryGraph.css.ts +++ b/src/app/list/[listId]/history/_component/__HistoryGraph.css.ts @@ -1,17 +1,17 @@ -import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/__theme.css'; -import * as fonts from '@/styles/__font.css'; +// import { style } from '@vanilla-extract/css'; +// import { vars } from '@/styles/__theme.css'; +// import * as fonts from '@/styles/__font.css'; -export const container = style({ - width: '100%', - minWidth: 'calc(200vw - 54px)', - height: '345px', - padding: '20px', +// export const container = style({ +// width: '100%', +// minWidth: 'calc(200vw - 54px)', +// height: '345px', +// padding: '20px', - display: 'flex', - alignItems: 'center', +// display: 'flex', +// alignItems: 'center', - borderRadius: '20px', - backgroundColor: vars.color.white, - boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)', -}); +// borderRadius: '20px', +// backgroundColor: vars.color.white, +// boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)', +// }); diff --git a/src/app/list/[listId]/history/_component/__HistoryGraph.tsx b/src/app/list/[listId]/history/_component/__HistoryGraph.tsx index 8139f867..bb92d983 100644 --- a/src/app/list/[listId]/history/_component/__HistoryGraph.tsx +++ b/src/app/list/[listId]/history/_component/__HistoryGraph.tsx @@ -1,154 +1,154 @@ -import dynamic from 'next/dynamic'; -const ApexChart = dynamic(() => import('react-apexcharts'), { ssr: false }); +// import dynamic from 'next/dynamic'; +// const ApexChart = dynamic(() => import('react-apexcharts'), { ssr: false }); -import * as styles from './__HistoryGraph.css'; -import { HistoryType } from '@/lib/types/historyType'; -import timeDiff from '@/lib/utils/time-diff'; -import { useLanguage } from '@/store/useLanguage'; -import { listLocale } from '@/app/list/[listId]/locale'; +// import * as styles from './__HistoryGraph.css'; +// import { HistoryType } from '@/lib/types/historyType'; +// import timeDiff from '@/lib/utils/time-diff'; +// import { useLanguage } from '@/store/useLanguage'; +// import { listLocale } from '@/app/list/[listId]/locale'; -interface ItemType { - title: string; - history: (number | null)[]; -} +// interface ItemType { +// title: string; +// history: (number | null)[]; +// } -interface HistoryGraphProps { - histories: HistoryType[]; -} +// interface HistoryGraphProps { +// histories: HistoryType[]; +// } -function HistoryGraph({ histories }: HistoryGraphProps) { - const itemRankHistories: ItemType[] = []; - histories.map((history) => { - history.items.map((item) => { - if (!itemRankHistories.some((i) => i.title === item.title)) { - itemRankHistories.push({ title: item.title, history: [] }); - } - }); - }); +// function HistoryGraph({ histories }: HistoryGraphProps) { +// const itemRankHistories: ItemType[] = []; +// histories.map((history) => { +// history.items.map((item) => { +// if (!itemRankHistories.some((i) => i.title === item.title)) { +// itemRankHistories.push({ title: item.title, history: [] }); +// } +// }); +// }); - itemRankHistories.map((i) => { - histories.map((h) => { - i.history.push(h.items.find((x) => x.title === i.title)?.rank || null); - }); - }); +// itemRankHistories.map((i) => { +// histories.map((h) => { +// i.history.push(h.items.find((x) => x.title === i.title)?.rank || null); +// }); +// }); - return ( -
{}
- ); -} +// return ( +//
{}
+// ); +// } -interface ChartProps { - itemRankHistories: ItemType[]; - histories: HistoryType[]; -} +// interface ChartProps { +// itemRankHistories: ItemType[]; +// histories: HistoryType[]; +// } -interface Option { - chart: { - id: string; - width: string; - height: string; - zoom: { - enabled: boolean; - }; - }; - xaxis: { - categories: string[]; - tickPlacement: string; - type: 'category'; - }; - yaxis: { - categories: number[]; - reversed: boolean; - stepSize: number; - labels: { formatter: (val: number) => string }; - }; - grid: { - padding: { - left: number; - bottom: number; - }; - }; - legend: { - show: boolean; - horizontalAlign: 'left'; - }; - noData: { - text: string; - align: 'center'; - verticalAlign: 'bottom'; - offsetX: number; - offsetY: number; - style: { - fontSize: string; - }; - }; - stroke: { - curve: 'smooth'; - }; -} +// interface Option { +// chart: { +// id: string; +// width: string; +// height: string; +// zoom: { +// enabled: boolean; +// }; +// }; +// xaxis: { +// categories: string[]; +// tickPlacement: string; +// type: 'category'; +// }; +// yaxis: { +// categories: number[]; +// reversed: boolean; +// stepSize: number; +// labels: { formatter: (val: number) => string }; +// }; +// grid: { +// padding: { +// left: number; +// bottom: number; +// }; +// }; +// legend: { +// show: boolean; +// horizontalAlign: 'left'; +// }; +// noData: { +// text: string; +// align: 'center'; +// verticalAlign: 'bottom'; +// offsetX: number; +// offsetY: number; +// style: { +// fontSize: string; +// }; +// }; +// stroke: { +// curve: 'smooth'; +// }; +// } -export function Chart({ histories, itemRankHistories }: ChartProps) { - const { language } = useLanguage(); +// export function Chart({ histories, itemRankHistories }: ChartProps) { +// const { language } = useLanguage(); - const option: Option = { - chart: { - id: 'history graph', - width: '100%', - height: '100%', - zoom: { - enabled: true, - }, - }, - xaxis: { - categories: histories.map((history) => timeDiff(String(history.createdDate))), - tickPlacement: 'on', - type: 'category', - }, - yaxis: { - categories: Array.from({ length: 10 }, (_, index) => Math.round(10 - index)), - reversed: true, - stepSize: 1, - labels: { - formatter: (val: number) => { - return `${val.toFixed(0)}위`; - }, - }, - }, - grid: { - padding: { - left: 30, - bottom: 30, - }, - }, - stroke: { curve: 'smooth' }, - legend: { - show: true, - horizontalAlign: 'left', - }, - noData: { - text: listLocale[language].noHistory, - align: 'center', - verticalAlign: 'bottom', - offsetX: 0, - offsetY: 0, - style: { - fontSize: '20px', - }, - }, - }; +// const option: Option = { +// chart: { +// id: 'history graph', +// width: '100%', +// height: '100%', +// zoom: { +// enabled: true, +// }, +// }, +// xaxis: { +// categories: histories.map((history) => timeDiff(String(history.createdDate))), +// tickPlacement: 'on', +// type: 'category', +// }, +// yaxis: { +// categories: Array.from({ length: 10 }, (_, index) => Math.round(10 - index)), +// reversed: true, +// stepSize: 1, +// labels: { +// formatter: (val: number) => { +// return `${val.toFixed(0)}위`; +// }, +// }, +// }, +// grid: { +// padding: { +// left: 30, +// bottom: 30, +// }, +// }, +// stroke: { curve: 'smooth' }, +// legend: { +// show: true, +// horizontalAlign: 'left', +// }, +// noData: { +// text: listLocale[language].noHistory, +// align: 'center', +// verticalAlign: 'bottom', +// offsetX: 0, +// offsetY: 0, +// style: { +// fontSize: '20px', +// }, +// }, +// }; - const chartData = itemRankHistories.map((item) => { - return { - name: item.title, - data: item.history, - }; - }); +// const chartData = itemRankHistories.map((item) => { +// return { +// name: item.title, +// data: item.history, +// }; +// }); - return ( - <> - - - ); -} +// return ( +// <> +// +// +// ); +// } -export { HistoryGraph as Graph }; +// export { HistoryGraph as Graph }; diff --git a/src/app/list/[listId]/history/_component/__HistoryVersions.css.ts b/src/app/list/[listId]/history/_component/__HistoryVersions.css.ts index bbdb7650..201d9237 100644 --- a/src/app/list/[listId]/history/_component/__HistoryVersions.css.ts +++ b/src/app/list/[listId]/history/_component/__HistoryVersions.css.ts @@ -1,98 +1,98 @@ -import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/__theme.css'; -import * as fonts from '@/styles/__font.css'; +// import { style } from '@vanilla-extract/css'; +// import { vars } from '@/styles/__theme.css'; +// import * as fonts from '@/styles/__font.css'; -export const container = style({ - minHeight: '345px', - padding: '24px 18px', +// export const container = style({ +// minHeight: '345px', +// padding: '24px 18px', - position: 'relative', +// position: 'relative', - borderRadius: '20px', - backgroundColor: vars.color.white, - boxShadow: '0px 4px 15px 0px rgba(0, 0, 0, 0.10)', -}); +// borderRadius: '20px', +// backgroundColor: vars.color.white, +// boxShadow: '0px 4px 15px 0px rgba(0, 0, 0, 0.10)', +// }); -export const dateDropdown = style([ - fonts.labelSmall, - { - position: 'absolute', - top: '-40px', - right: '5px', +// export const dateDropdown = style([ +// fonts.labelSmall, +// { +// position: 'absolute', +// top: '-40px', +// right: '5px', - display: 'flex', - alignItems: 'center', +// display: 'flex', +// alignItems: 'center', - color: vars.color.gray9, +// color: vars.color.gray9, - // float: 'right', - cursor: 'pointer', - }, -]); +// // float: 'right', +// cursor: 'pointer', +// }, +// ]); -export const kebabButton = style({ - width: '24px', - height: '24px', +// export const kebabButton = style({ +// width: '24px', +// height: '24px', - position: 'absolute', - right: '20px', +// position: 'absolute', +// right: '20px', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', +// display: 'flex', +// justifyContent: 'center', +// alignItems: 'center', - cursor: 'pointer', -}); +// cursor: 'pointer', +// }); -export const kebabIcon = style({ - stroke: vars.color.gray7, - fill: vars.color.gray7, -}); +// export const kebabIcon = style({ +// stroke: vars.color.gray7, +// fill: vars.color.gray7, +// }); -export const date = style([ - fonts.labelLarge, - { - paddingLeft: '110px', +// export const date = style([ +// fonts.labelLarge, +// { +// paddingLeft: '110px', - display: 'flex', - alignItems: 'center', - columnGap: '5px', +// display: 'flex', +// alignItems: 'center', +// columnGap: '5px', - color: vars.color.gray7, - }, -]); +// color: vars.color.gray7, +// }, +// ]); -export const itemsContainer = style({ - marginTop: '50px', -}); +// export const itemsContainer = style({ +// marginTop: '50px', +// }); -export const itemContainer = style({ - height: '74px', - padding: '0 20px', +// export const itemContainer = style({ +// height: '74px', +// padding: '0 20px', - display: 'flex', -}); +// display: 'flex', +// }); -export const itemTitle = style([fonts.bodyLarge, {}]); +// export const itemTitle = style([fonts.bodyLarge, {}]); -export const itemRank = style([ - fonts.titleMedium, - { - marginRight: '20px', +// export const itemRank = style([ +// fonts.titleMedium, +// { +// marginRight: '20px', - textAlign: 'center', - minWidth: '21px', - }, -]); +// textAlign: 'center', +// minWidth: '21px', +// }, +// ]); -export const crown = style({ - marginRight: '5px', +// export const crown = style({ +// marginRight: '5px', - position: 'relative', - right: '9px', - bottom: '5px', -}); +// position: 'relative', +// right: '9px', +// bottom: '5px', +// }); -export const noDataImage = style({ - marginTop: '40px', -}); +// export const noDataImage = style({ +// marginTop: '40px', +// }); diff --git a/src/app/list/[listId]/history/_component/__HistoryVersions.tsx b/src/app/list/[listId]/history/_component/__HistoryVersions.tsx index 94d8d3b1..65f3f774 100644 --- a/src/app/list/[listId]/history/_component/__HistoryVersions.tsx +++ b/src/app/list/[listId]/history/_component/__HistoryVersions.tsx @@ -1,187 +1,187 @@ -import { useState } from 'react'; -import { useMutation, useQueryClient } from '@tanstack/react-query'; - -import Modal from '@/components/Modal/Modal'; -import BottomSheet from '@/components/BottomSheet/BottomSheet'; -import Kebab from '/public/icons/vertical_kebab_button.svg'; -import Crown from '/public/icons/crown.svg'; -import Private from '/public/icons/lock_alt.svg'; -import ArrowDown from '/public/icons/chevron_down_sm.svg'; - -import { useUser } from '@/store/useUser'; -import useBooleanOutput from '@/hooks/useBooleanOutput'; -import toggleHistoryPublic from '@/app/_api/history/toggleHistoryPulblic'; -import timeDiff from '@/lib/utils/time-diff'; -import { HistoryType } from '@/lib/types/historyType'; -import { QUERY_KEYS } from '@/lib/constants/queryKeys'; - -import * as styles from './__HistoryVersions.css'; -import deleteHistory from '@/app/_api/history/deleteHistory'; -import NoDataComponent from '@/components/NoData/NoDataComponent'; -import { useLanguage } from '@/store/useLanguage'; -import { modalLocale, listLocale } from '@/app/list/[listId]/locale'; - -interface VersionHistoryProps { - histories: HistoryType[]; - listId: string | undefined; - listOwnerId: number | undefined; -} - -function HistoryVersions({ histories, listId, listOwnerId }: VersionHistoryProps) { - const { language } = useLanguage(); - const [selectedHistory, setSelectedHistory] = useState(histories[histories.length - 1] || {}); - const { user } = useUser(); - const queryClient = useQueryClient(); - - const { isOn: isControlOpen, handleSetOff: closeControl, handleSetOn: openControl } = useBooleanOutput(); - const { - isOn: isHistorySelectionOpen, - handleSetOff: closeHistorySelection, - handleSetOn: openHistorySelection, - } = useBooleanOutput(); - const { isOn: isModalOn, handleSetOff: closeModal, handleSetOn: openModal } = useBooleanOutput(); - - const { mutate: togglePublicMutation } = useMutation({ - mutationFn: toggleHistoryPublic, - onSuccess: () => { - queryClient.invalidateQueries({ - queryKey: [QUERY_KEYS.getHistories, listId], - }); - setSelectedHistory(selectedHistory); - }, - }); - - const { mutate: deleteMutation } = useMutation({ - mutationFn: deleteHistory, - onSuccess: () => { - queryClient.invalidateQueries({ - queryKey: [QUERY_KEYS.getHistories, listId], - }); - setSelectedHistory(histories[histories.length - 1]); - // TODO: 삭제 토스트 띄우기 - }, - }); - - const historyControlBottomsheetOption = [ - { - key: 'setHistoryPrivate', - title: listLocale[language].hideHistory, - onClick: () => { - handleTogglePublic(); - }, - }, - { - key: 'deleteHistory', - title: listLocale[language].deleteHistory, - onClick: () => { - openModal(); - }, - }, - ]; - - const historySelectOption = histories - .map((history) => { - return { - key: String(history.id), - title: timeDiff(String(history.createdDate)), - onClick: () => { - setSelectedHistory(history); - }, - }; - }) - .reverse(); - - const handleTogglePublic = () => { - togglePublicMutation({ historyId: selectedHistory.id }); - }; - - const handleDeleteHistory = () => { - deleteMutation({ historyId: selectedHistory.id }); - closeModal(); - }; - - return ( - <> -
- {histories.length !== 0 && ( - <> - - {user.id === listOwnerId ? ( - - ) : null} - - )} - - {histories.length === 0 ? ( -
- -
- ) : ( - <> - {user.id === listOwnerId || selectedHistory.isPublic ? ( - <> -
- {selectedHistory.isPublic ? null : } - {timeDiff(String(selectedHistory?.createdDate))} -
-
- {selectedHistory?.items - .sort((a, b) => a.rank - b.rank) - .map((item) => )} -
- - ) : ( -
{listLocale[language].privateHistory}
- )} - - )} -
- - {isControlOpen && ( - - )} - - {isHistorySelectionOpen && ( - - )} - - {isModalOn && ( - - {modalLocale[language].deleteHistory} - - {modalLocale[language].confirm} - - - )} - - ); -} - -interface ItemProp { - rank: number; - title: string; -} -function Item({ rank, title }: ItemProp) { - const { language } = useLanguage(); - return ( -
- {rank === 1 ? ( - - ) : ( -
{rank}
- )} -
{title}
-
- ); -} - -export { HistoryVersions as Version }; +// import { useState } from 'react'; +// import { useMutation, useQueryClient } from '@tanstack/react-query'; + +// import Modal from '@/components/Modal/Modal'; +// import BottomSheet from '@/components/BottomSheet/BottomSheet'; +// import Kebab from '/public/icons/vertical_kebab_button.svg'; +// import Crown from '/public/icons/crown.svg'; +// import Private from '/public/icons/lock_alt.svg'; +// import ArrowDown from '/public/icons/chevron_down_sm.svg'; + +// import { useUser } from '@/store/useUser'; +// import useBooleanOutput from '@/hooks/useBooleanOutput'; +// import toggleHistoryPublic from '@/app/_api/history/toggleHistoryPulblic'; +// import timeDiff from '@/lib/utils/time-diff'; +// import { HistoryType } from '@/lib/types/historyType'; +// import { QUERY_KEYS } from '@/lib/constants/queryKeys'; + +// import * as styles from './__HistoryVersions.css'; +// import deleteHistory from '@/app/_api/history/deleteHistory'; +// import NoDataComponent from '@/components/NoData/NoDataComponent'; +// import { useLanguage } from '@/store/useLanguage'; +// import { modalLocale, listLocale } from '@/app/list/[listId]/locale'; + +// interface VersionHistoryProps { +// histories: HistoryType[]; +// listId: string | undefined; +// listOwnerId: number | undefined; +// } + +// function HistoryVersions({ histories, listId, listOwnerId }: VersionHistoryProps) { +// const { language } = useLanguage(); +// const [selectedHistory, setSelectedHistory] = useState(histories[histories.length - 1] || {}); +// const { user } = useUser(); +// const queryClient = useQueryClient(); + +// const { isOn: isControlOpen, handleSetOff: closeControl, handleSetOn: openControl } = useBooleanOutput(); +// const { +// isOn: isHistorySelectionOpen, +// handleSetOff: closeHistorySelection, +// handleSetOn: openHistorySelection, +// } = useBooleanOutput(); +// const { isOn: isModalOn, handleSetOff: closeModal, handleSetOn: openModal } = useBooleanOutput(); + +// const { mutate: togglePublicMutation } = useMutation({ +// mutationFn: toggleHistoryPublic, +// onSuccess: () => { +// queryClient.invalidateQueries({ +// queryKey: [QUERY_KEYS.getHistories, listId], +// }); +// setSelectedHistory(selectedHistory); +// }, +// }); + +// const { mutate: deleteMutation } = useMutation({ +// mutationFn: deleteHistory, +// onSuccess: () => { +// queryClient.invalidateQueries({ +// queryKey: [QUERY_KEYS.getHistories, listId], +// }); +// setSelectedHistory(histories[histories.length - 1]); +// // TODO: 삭제 토스트 띄우기 +// }, +// }); + +// const historyControlBottomsheetOption = [ +// { +// key: 'setHistoryPrivate', +// title: listLocale[language].hideHistory, +// onClick: () => { +// handleTogglePublic(); +// }, +// }, +// { +// key: 'deleteHistory', +// title: listLocale[language].deleteHistory, +// onClick: () => { +// openModal(); +// }, +// }, +// ]; + +// const historySelectOption = histories +// .map((history) => { +// return { +// key: String(history.id), +// title: timeDiff(String(history.createdDate)), +// onClick: () => { +// setSelectedHistory(history); +// }, +// }; +// }) +// .reverse(); + +// const handleTogglePublic = () => { +// togglePublicMutation({ historyId: selectedHistory.id }); +// }; + +// const handleDeleteHistory = () => { +// deleteMutation({ historyId: selectedHistory.id }); +// closeModal(); +// }; + +// return ( +// <> +//
+// {histories.length !== 0 && ( +// <> +// +// {user.id === listOwnerId ? ( +// +// ) : null} +// +// )} + +// {histories.length === 0 ? ( +//
+// +//
+// ) : ( +// <> +// {user.id === listOwnerId || selectedHistory.isPublic ? ( +// <> +//
+// {selectedHistory.isPublic ? null : } +// {timeDiff(String(selectedHistory?.createdDate))} +//
+//
+// {selectedHistory?.items +// .sort((a, b) => a.rank - b.rank) +// .map((item) => )} +//
+// +// ) : ( +//
{listLocale[language].privateHistory}
+// )} +// +// )} +//
+ +// {isControlOpen && ( +// +// )} + +// {isHistorySelectionOpen && ( +// +// )} + +// {isModalOn && ( +// +// {modalLocale[language].deleteHistory1} +// +// {modalLocale[language].confirm} +// +// +// )} +// +// ); +// } + +// interface ItemProp { +// rank: number; +// title: string; +// } +// function Item({ rank, title }: ItemProp) { +// const { language } = useLanguage(); +// return ( +//
+// {rank === 1 ? ( +// +// ) : ( +//
{rank}
+// )} +//
{title}
+//
+// ); +// } + +// export { HistoryVersions as Version }; From a64e565677774d61bbf16a2193f058024a37c35f Mon Sep 17 00:00:00 2001 From: Eugene-A-01 Date: Wed, 30 Oct 2024 23:23:38 +0900 Subject: [PATCH 6/7] =?UTF-8?q?hotfix/ver2.0=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/list/[listId]/history/__page.css.ts | 75 ------- src/app/list/[listId]/history/__page.tsx | 70 ------- .../history/_component/__HistoryGraph.css.ts | 17 -- .../history/_component/__HistoryGraph.tsx | 154 --------------- .../_component/__HistoryVersions.css.ts | 98 --------- .../history/_component/__HistoryVersions.tsx | 187 ------------------ 6 files changed, 601 deletions(-) delete mode 100644 src/app/list/[listId]/history/__page.css.ts delete mode 100644 src/app/list/[listId]/history/__page.tsx delete mode 100644 src/app/list/[listId]/history/_component/__HistoryGraph.css.ts delete mode 100644 src/app/list/[listId]/history/_component/__HistoryGraph.tsx delete mode 100644 src/app/list/[listId]/history/_component/__HistoryVersions.css.ts delete mode 100644 src/app/list/[listId]/history/_component/__HistoryVersions.tsx diff --git a/src/app/list/[listId]/history/__page.css.ts b/src/app/list/[listId]/history/__page.css.ts deleted file mode 100644 index 7652c8f1..00000000 --- a/src/app/list/[listId]/history/__page.css.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { style, styleVariants, keyframes } from '@vanilla-extract/css'; -import { vars } from '@/styles/__theme.css'; -import * as fonts from '@/styles/__font.css'; - -export const navContainer = style({ - width: '100%', - - padding: '18px 65.5px 0', - margin: '0 auto', - - display: 'flex', - alignItems: 'center', - columnGap: '70px', - - position: 'fixed', - top: '70px', - - backgroundColor: vars.color.white, - - zIndex: '1', -}); - -export const navButton = style([ - fonts.labelLarge, - { - width: 'fit-content', - padding: ' 15px 0', - flexGrow: '1', - - color: vars.color.black, - }, -]); - -export const navBarBase = style({ - width: '50px', - height: '5px', - - backgroundColor: vars.color.black, - borderRadius: '50px', -}); - -export const navBar = styleVariants({ - left: [ - navBarBase, - { - position: 'absolute', - left: '23.5%', - bottom: '0%', - }, - ], - right: [ - navBarBase, - { - position: 'absolute', - left: '66.5%', - bottom: '0%', - }, - ], -}); - -export const listTitle = style([ - fonts.headlineMedium, - { - margin: '140px 40px 20px', - }, -]); - -export const contentContainer = style({ - padding: '50px 27px', - - overflowX: 'auto', - '::-webkit-scrollbar': { - display: 'none', - }, -}); diff --git a/src/app/list/[listId]/history/__page.tsx b/src/app/list/[listId]/history/__page.tsx deleted file mode 100644 index e5373e69..00000000 --- a/src/app/list/[listId]/history/__page.tsx +++ /dev/null @@ -1,70 +0,0 @@ -'use client'; -import { useState } from 'react'; -import { useParams, useRouter } from 'next/navigation'; -import { useQuery } from '@tanstack/react-query'; - -import Header from '@/components/Header/__Header'; -import { Graph } from './_component/__HistoryGraph'; -import { Version } from './_component/__HistoryVersions'; - -import getListDetail from '@/app/_api/list/getListDetail'; -import getHistories from '@/app/_api/history/getHistories'; -import { ListDetailType } from '@/lib/types/listType'; -import { HistoryType } from '@/lib/types/historyType'; -import { QUERY_KEYS } from '@/lib/constants/queryKeys'; - -import * as styles from './__page.css'; -import { useLanguage } from '@/store/useLanguage'; -import { listLocale } from '@/app/list/[listId]/locale'; - -function HistoryPage() { - const { language } = useLanguage(); - const [type, setType] = useState<'graph' | 'version'>('graph'); - - const router = useRouter(); - const param = useParams<{ listId: string }>(); - const listId = param?.listId; - - const { data: listData } = useQuery({ - queryKey: [QUERY_KEYS.getListDetail, listId], - queryFn: () => getListDetail(Number(listId)), - }); - - const { data: historyData } = useQuery({ - queryKey: [QUERY_KEYS.getHistories, listId], - queryFn: () => getHistories(listId), - }); - - return ( - <> -
{ - router.back(); - }} - /> -
-
- - -
-
- -
{listData?.title}
-
- {type === 'graph' ? ( - - ) : ( - - )} -
-
- - ); -} -export default HistoryPage; diff --git a/src/app/list/[listId]/history/_component/__HistoryGraph.css.ts b/src/app/list/[listId]/history/_component/__HistoryGraph.css.ts deleted file mode 100644 index 6b42e0cb..00000000 --- a/src/app/list/[listId]/history/_component/__HistoryGraph.css.ts +++ /dev/null @@ -1,17 +0,0 @@ -// import { style } from '@vanilla-extract/css'; -// import { vars } from '@/styles/__theme.css'; -// import * as fonts from '@/styles/__font.css'; - -// export const container = style({ -// width: '100%', -// minWidth: 'calc(200vw - 54px)', -// height: '345px', -// padding: '20px', - -// display: 'flex', -// alignItems: 'center', - -// borderRadius: '20px', -// backgroundColor: vars.color.white, -// boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)', -// }); diff --git a/src/app/list/[listId]/history/_component/__HistoryGraph.tsx b/src/app/list/[listId]/history/_component/__HistoryGraph.tsx deleted file mode 100644 index bb92d983..00000000 --- a/src/app/list/[listId]/history/_component/__HistoryGraph.tsx +++ /dev/null @@ -1,154 +0,0 @@ -// import dynamic from 'next/dynamic'; -// const ApexChart = dynamic(() => import('react-apexcharts'), { ssr: false }); - -// import * as styles from './__HistoryGraph.css'; -// import { HistoryType } from '@/lib/types/historyType'; -// import timeDiff from '@/lib/utils/time-diff'; -// import { useLanguage } from '@/store/useLanguage'; -// import { listLocale } from '@/app/list/[listId]/locale'; - -// interface ItemType { -// title: string; -// history: (number | null)[]; -// } - -// interface HistoryGraphProps { -// histories: HistoryType[]; -// } - -// function HistoryGraph({ histories }: HistoryGraphProps) { -// const itemRankHistories: ItemType[] = []; -// histories.map((history) => { -// history.items.map((item) => { -// if (!itemRankHistories.some((i) => i.title === item.title)) { -// itemRankHistories.push({ title: item.title, history: [] }); -// } -// }); -// }); - -// itemRankHistories.map((i) => { -// histories.map((h) => { -// i.history.push(h.items.find((x) => x.title === i.title)?.rank || null); -// }); -// }); - -// return ( -//
{}
-// ); -// } - -// interface ChartProps { -// itemRankHistories: ItemType[]; -// histories: HistoryType[]; -// } - -// interface Option { -// chart: { -// id: string; -// width: string; -// height: string; -// zoom: { -// enabled: boolean; -// }; -// }; -// xaxis: { -// categories: string[]; -// tickPlacement: string; -// type: 'category'; -// }; -// yaxis: { -// categories: number[]; -// reversed: boolean; -// stepSize: number; -// labels: { formatter: (val: number) => string }; -// }; -// grid: { -// padding: { -// left: number; -// bottom: number; -// }; -// }; -// legend: { -// show: boolean; -// horizontalAlign: 'left'; -// }; -// noData: { -// text: string; -// align: 'center'; -// verticalAlign: 'bottom'; -// offsetX: number; -// offsetY: number; -// style: { -// fontSize: string; -// }; -// }; -// stroke: { -// curve: 'smooth'; -// }; -// } - -// export function Chart({ histories, itemRankHistories }: ChartProps) { -// const { language } = useLanguage(); - -// const option: Option = { -// chart: { -// id: 'history graph', -// width: '100%', -// height: '100%', -// zoom: { -// enabled: true, -// }, -// }, -// xaxis: { -// categories: histories.map((history) => timeDiff(String(history.createdDate))), -// tickPlacement: 'on', -// type: 'category', -// }, -// yaxis: { -// categories: Array.from({ length: 10 }, (_, index) => Math.round(10 - index)), -// reversed: true, -// stepSize: 1, -// labels: { -// formatter: (val: number) => { -// return `${val.toFixed(0)}위`; -// }, -// }, -// }, -// grid: { -// padding: { -// left: 30, -// bottom: 30, -// }, -// }, -// stroke: { curve: 'smooth' }, -// legend: { -// show: true, -// horizontalAlign: 'left', -// }, -// noData: { -// text: listLocale[language].noHistory, -// align: 'center', -// verticalAlign: 'bottom', -// offsetX: 0, -// offsetY: 0, -// style: { -// fontSize: '20px', -// }, -// }, -// }; - -// const chartData = itemRankHistories.map((item) => { -// return { -// name: item.title, -// data: item.history, -// }; -// }); - -// return ( -// <> -// -// -// ); -// } - -// export { HistoryGraph as Graph }; diff --git a/src/app/list/[listId]/history/_component/__HistoryVersions.css.ts b/src/app/list/[listId]/history/_component/__HistoryVersions.css.ts deleted file mode 100644 index 201d9237..00000000 --- a/src/app/list/[listId]/history/_component/__HistoryVersions.css.ts +++ /dev/null @@ -1,98 +0,0 @@ -// import { style } from '@vanilla-extract/css'; -// import { vars } from '@/styles/__theme.css'; -// import * as fonts from '@/styles/__font.css'; - -// export const container = style({ -// minHeight: '345px', -// padding: '24px 18px', - -// position: 'relative', - -// borderRadius: '20px', -// backgroundColor: vars.color.white, -// boxShadow: '0px 4px 15px 0px rgba(0, 0, 0, 0.10)', -// }); - -// export const dateDropdown = style([ -// fonts.labelSmall, -// { -// position: 'absolute', -// top: '-40px', -// right: '5px', - -// display: 'flex', -// alignItems: 'center', - -// color: vars.color.gray9, - -// // float: 'right', -// cursor: 'pointer', -// }, -// ]); - -// export const kebabButton = style({ -// width: '24px', -// height: '24px', - -// position: 'absolute', -// right: '20px', - -// display: 'flex', -// justifyContent: 'center', -// alignItems: 'center', - -// cursor: 'pointer', -// }); - -// export const kebabIcon = style({ -// stroke: vars.color.gray7, -// fill: vars.color.gray7, -// }); - -// export const date = style([ -// fonts.labelLarge, -// { -// paddingLeft: '110px', - -// display: 'flex', -// alignItems: 'center', -// columnGap: '5px', - -// color: vars.color.gray7, -// }, -// ]); - -// export const itemsContainer = style({ -// marginTop: '50px', -// }); - -// export const itemContainer = style({ -// height: '74px', -// padding: '0 20px', - -// display: 'flex', -// }); - -// export const itemTitle = style([fonts.bodyLarge, {}]); - -// export const itemRank = style([ -// fonts.titleMedium, -// { -// marginRight: '20px', - -// textAlign: 'center', -// minWidth: '21px', -// }, -// ]); - -// export const crown = style({ -// marginRight: '5px', - -// position: 'relative', -// right: '9px', -// bottom: '5px', -// }); - -// export const noDataImage = style({ -// marginTop: '40px', -// }); diff --git a/src/app/list/[listId]/history/_component/__HistoryVersions.tsx b/src/app/list/[listId]/history/_component/__HistoryVersions.tsx deleted file mode 100644 index 65f3f774..00000000 --- a/src/app/list/[listId]/history/_component/__HistoryVersions.tsx +++ /dev/null @@ -1,187 +0,0 @@ -// import { useState } from 'react'; -// import { useMutation, useQueryClient } from '@tanstack/react-query'; - -// import Modal from '@/components/Modal/Modal'; -// import BottomSheet from '@/components/BottomSheet/BottomSheet'; -// import Kebab from '/public/icons/vertical_kebab_button.svg'; -// import Crown from '/public/icons/crown.svg'; -// import Private from '/public/icons/lock_alt.svg'; -// import ArrowDown from '/public/icons/chevron_down_sm.svg'; - -// import { useUser } from '@/store/useUser'; -// import useBooleanOutput from '@/hooks/useBooleanOutput'; -// import toggleHistoryPublic from '@/app/_api/history/toggleHistoryPulblic'; -// import timeDiff from '@/lib/utils/time-diff'; -// import { HistoryType } from '@/lib/types/historyType'; -// import { QUERY_KEYS } from '@/lib/constants/queryKeys'; - -// import * as styles from './__HistoryVersions.css'; -// import deleteHistory from '@/app/_api/history/deleteHistory'; -// import NoDataComponent from '@/components/NoData/NoDataComponent'; -// import { useLanguage } from '@/store/useLanguage'; -// import { modalLocale, listLocale } from '@/app/list/[listId]/locale'; - -// interface VersionHistoryProps { -// histories: HistoryType[]; -// listId: string | undefined; -// listOwnerId: number | undefined; -// } - -// function HistoryVersions({ histories, listId, listOwnerId }: VersionHistoryProps) { -// const { language } = useLanguage(); -// const [selectedHistory, setSelectedHistory] = useState(histories[histories.length - 1] || {}); -// const { user } = useUser(); -// const queryClient = useQueryClient(); - -// const { isOn: isControlOpen, handleSetOff: closeControl, handleSetOn: openControl } = useBooleanOutput(); -// const { -// isOn: isHistorySelectionOpen, -// handleSetOff: closeHistorySelection, -// handleSetOn: openHistorySelection, -// } = useBooleanOutput(); -// const { isOn: isModalOn, handleSetOff: closeModal, handleSetOn: openModal } = useBooleanOutput(); - -// const { mutate: togglePublicMutation } = useMutation({ -// mutationFn: toggleHistoryPublic, -// onSuccess: () => { -// queryClient.invalidateQueries({ -// queryKey: [QUERY_KEYS.getHistories, listId], -// }); -// setSelectedHistory(selectedHistory); -// }, -// }); - -// const { mutate: deleteMutation } = useMutation({ -// mutationFn: deleteHistory, -// onSuccess: () => { -// queryClient.invalidateQueries({ -// queryKey: [QUERY_KEYS.getHistories, listId], -// }); -// setSelectedHistory(histories[histories.length - 1]); -// // TODO: 삭제 토스트 띄우기 -// }, -// }); - -// const historyControlBottomsheetOption = [ -// { -// key: 'setHistoryPrivate', -// title: listLocale[language].hideHistory, -// onClick: () => { -// handleTogglePublic(); -// }, -// }, -// { -// key: 'deleteHistory', -// title: listLocale[language].deleteHistory, -// onClick: () => { -// openModal(); -// }, -// }, -// ]; - -// const historySelectOption = histories -// .map((history) => { -// return { -// key: String(history.id), -// title: timeDiff(String(history.createdDate)), -// onClick: () => { -// setSelectedHistory(history); -// }, -// }; -// }) -// .reverse(); - -// const handleTogglePublic = () => { -// togglePublicMutation({ historyId: selectedHistory.id }); -// }; - -// const handleDeleteHistory = () => { -// deleteMutation({ historyId: selectedHistory.id }); -// closeModal(); -// }; - -// return ( -// <> -//
-// {histories.length !== 0 && ( -// <> -// -// {user.id === listOwnerId ? ( -// -// ) : null} -// -// )} - -// {histories.length === 0 ? ( -//
-// -//
-// ) : ( -// <> -// {user.id === listOwnerId || selectedHistory.isPublic ? ( -// <> -//
-// {selectedHistory.isPublic ? null : } -// {timeDiff(String(selectedHistory?.createdDate))} -//
-//
-// {selectedHistory?.items -// .sort((a, b) => a.rank - b.rank) -// .map((item) => )} -//
-// -// ) : ( -//
{listLocale[language].privateHistory}
-// )} -// -// )} -//
- -// {isControlOpen && ( -// -// )} - -// {isHistorySelectionOpen && ( -// -// )} - -// {isModalOn && ( -// -// {modalLocale[language].deleteHistory1} -// -// {modalLocale[language].confirm} -// -// -// )} -// -// ); -// } - -// interface ItemProp { -// rank: number; -// title: string; -// } -// function Item({ rank, title }: ItemProp) { -// const { language } = useLanguage(); -// return ( -//
-// {rank === 1 ? ( -// -// ) : ( -//
{rank}
-// )} -//
{title}
-//
-// ); -// } - -// export { HistoryVersions as Version }; From 9def7a84c9749e4fb1e44e5a8b11a0a0f46921d7 Mon Sep 17 00:00:00 2001 From: Eugene-A-01 Date: Wed, 30 Oct 2024 23:38:51 +0900 Subject: [PATCH 7/7] =?UTF-8?q?Design:=20=EA=B7=B8=EB=9E=98=ED=94=84=20?= =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95=20(=EB=9D=BC?= =?UTF-8?q?=EC=9D=B8=20=EB=91=90=EA=BB=8D=EA=B2=8C=20=EB=B0=8F=20=EB=91=A5?= =?UTF-8?q?=EA=B8=80=EA=B2=8C)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/list/[listId]/history/_component/HistoryGraph.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/list/[listId]/history/_component/HistoryGraph.tsx b/src/app/list/[listId]/history/_component/HistoryGraph.tsx index 44b3a852..86b76488 100644 --- a/src/app/list/[listId]/history/_component/HistoryGraph.tsx +++ b/src/app/list/[listId]/history/_component/HistoryGraph.tsx @@ -121,6 +121,8 @@ function Chart({ histories, itemRankHistories }: ChartProps) { '#FF0000', '#FF1493', ], + lineWidth: 4, + pointSize: 2, hAxis: { textStyle: { fontSize: 14,