From 0f4f85ae28b33e2998d95aca700f440670847096 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Mon, 28 Oct 2024 22:17:56 +0900 Subject: [PATCH 01/11] =?UTF-8?q?Refactor:=20=ED=8F=B4=EB=8D=94=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=A6=AC=ED=8C=A9?= =?UTF-8?q?=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/collection/page.css.ts | 44 ------------------------- src/app/collection/page.tsx | 9 ++---- src/components/icons/FolderIcon.css.ts | 45 ++++++++++++++++++++++++++ src/components/icons/FolderIcon.tsx | 11 +++++++ 4 files changed, 59 insertions(+), 50 deletions(-) create mode 100644 src/components/icons/FolderIcon.css.ts create mode 100644 src/components/icons/FolderIcon.tsx diff --git a/src/app/collection/page.css.ts b/src/app/collection/page.css.ts index cdbf7c00..c0e09a0d 100644 --- a/src/app/collection/page.css.ts +++ b/src/app/collection/page.css.ts @@ -36,50 +36,6 @@ export const folder = style({ transition: 'transform 0.2s ease', }); -export const folderShape = style({ - position: 'relative', - width: 130, - height: 96, -}); - -export const topShape = style({ - position: 'absolute', - top: 10, - left: 0, - - width: 130, - height: 69.83, - - backgroundColor: '#9CC9FF', // TODO opacity: 0.7 또는 color 변경 - borderTopLeftRadius: 12, - borderTopRightRadius: 12, -}); - -export const topLeftShape = style({ - position: 'absolute', - top: 0, - left: 0, - - width: 66.62, - height: 83.69, - - backgroundColor: '#9CC9FF', // TODO opacity: 0.7 또는 color 변경 - borderTopLeftRadius: 12, - borderTopRightRadius: 23, -}); - -export const bottomShape = style({ - position: 'absolute', - bottom: 0, - left: 0, - - width: 130, - height: 76.83, - - backgroundColor: '#E3EEFF', - borderRadius: 12, -}); - export const title = style([ Label, { diff --git a/src/app/collection/page.tsx b/src/app/collection/page.tsx index 0c3fd0d8..25d93d64 100644 --- a/src/app/collection/page.tsx +++ b/src/app/collection/page.tsx @@ -11,6 +11,7 @@ import * as styles from './page.css'; import Header from '@/components/Header/Header'; import BottomSheet from '@/components/BottomSheet/ver3.0/BottomSheet'; +import FolderIcon from '@/components/icons/FolderIcon'; import useBooleanOutput from '@/hooks/useBooleanOutput'; import { useLanguage } from '@/store/useLanguage'; @@ -81,14 +82,10 @@ export default function CollectionPage() {
{data?.folders.map((folder) => ( -
-
-
-
-
+

{folder.folderName} - {`(${folder.listCount})`} + {folder.listCount > 0 && {`(${folder.listCount})`}}

))} diff --git a/src/components/icons/FolderIcon.css.ts b/src/components/icons/FolderIcon.css.ts new file mode 100644 index 00000000..7b41fd45 --- /dev/null +++ b/src/components/icons/FolderIcon.css.ts @@ -0,0 +1,45 @@ +import { style } from '@vanilla-extract/css'; + +export const folderShape = style({ + position: 'relative', + width: 130, + height: 96, +}); + +export const topShape = style({ + position: 'absolute', + top: 10, + left: 0, + + width: 130, + height: 69.83, + + backgroundColor: '#9CC9FF', // TODO opacity: 0.7 또는 color 변경 + borderTopLeftRadius: 12, + borderTopRightRadius: 12, +}); + +export const topLeftShape = style({ + position: 'absolute', + top: 0, + left: 0, + + width: 66.62, + height: 83.69, + + backgroundColor: '#9CC9FF', // TODO opacity: 0.7 또는 color 변경 + borderTopLeftRadius: 12, + borderTopRightRadius: 23, +}); + +export const bottomShape = style({ + position: 'absolute', + bottom: 0, + left: 0, + + width: 130, + height: 76.83, + + backgroundColor: '#E3EEFF', + borderRadius: 12, +}); diff --git a/src/components/icons/FolderIcon.tsx b/src/components/icons/FolderIcon.tsx new file mode 100644 index 00000000..d83edbc2 --- /dev/null +++ b/src/components/icons/FolderIcon.tsx @@ -0,0 +1,11 @@ +import * as styles from './FolderIcon.css'; + +export default function FolderIcon() { + return ( +
+
+
+
+
+ ); +} From 8436a0bd635de183822305bfb244dbc55b445b31 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Mon, 28 Oct 2024 23:15:16 +0900 Subject: [PATCH 02/11] =?UTF-8?q?Feat:=20default=20=EC=A0=84=EC=B2=B4=20?= =?UTF-8?q?=ED=8F=B4=EB=8D=94=20=EC=B6=94=EA=B0=80,=20FolderList=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../collection/_components/FolderList.css.ts | 43 +++++++++++++++++ src/app/collection/_components/FolderList.tsx | 47 +++++++++++++++++++ src/app/collection/page.css.ts | 42 ----------------- src/app/collection/page.tsx | 23 ++------- 4 files changed, 93 insertions(+), 62 deletions(-) create mode 100644 src/app/collection/_components/FolderList.css.ts create mode 100644 src/app/collection/_components/FolderList.tsx diff --git a/src/app/collection/_components/FolderList.css.ts b/src/app/collection/_components/FolderList.css.ts new file mode 100644 index 00000000..4132690d --- /dev/null +++ b/src/app/collection/_components/FolderList.css.ts @@ -0,0 +1,43 @@ +import { style } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; +import { Label } from '@/styles/font.css'; + +export const folders = style({ + padding: '2.4rem 4.8rem 8.3rem 4.8rem', + display: 'grid', + gridTemplateColumns: 'repeat(2, 1fr)', + gridColumnGap: 34, + gridRowGap: 24, +}); + +export const folder = style({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: 16, + cursor: 'pointer', + + selectors: { + '&:hover': { + transform: 'translateY(-10%)', + }, + }, + transition: 'transform 0.2s ease', +}); + +export const title = style([ + Label, + { + maxWidth: 130, + display: 'flex', + gap: 6, + alignItems: 'center', + color: vars.color.black, + }, +]); + +export const folderName = style({ + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', +}); diff --git a/src/app/collection/_components/FolderList.tsx b/src/app/collection/_components/FolderList.tsx new file mode 100644 index 00000000..83ae07df --- /dev/null +++ b/src/app/collection/_components/FolderList.tsx @@ -0,0 +1,47 @@ +import Link from 'next/link'; +import { useQuery } from '@tanstack/react-query'; + +import * as styles from './FolderList.css'; + +import FolderIcon from '@/components/icons/FolderIcon'; + +import getFolders, { FoldersResponseType } from '@/app/_api/folder/getFolders'; +import { QUERY_KEYS } from '@/lib/constants/queryKeys'; +import { FoldersType } from '@/lib/types/folderType'; + +interface FolderType { + folder: FoldersType; +} + +function Folder({ folder }: FolderType) { + return ( + + +

+ {folder.folderName} + {folder.listCount > 0 && {`(${folder.listCount})`}} +

+ + ); +} + +export default function FolderList() { + const { data } = useQuery({ + queryKey: [QUERY_KEYS.getFolders], + queryFn: getFolders, + staleTime: 1000 * 60 * 5, // 5분 설정 + }); + + const defaultFolder: FoldersType = { + folderId: 0, + folderName: '전체', + listCount: 0, + }; + + return ( +
+ {data?.folders && + [defaultFolder, ...data.folders].map((folder) => )} +
+ ); +} diff --git a/src/app/collection/page.css.ts b/src/app/collection/page.css.ts index c0e09a0d..253fc205 100644 --- a/src/app/collection/page.css.ts +++ b/src/app/collection/page.css.ts @@ -1,6 +1,5 @@ import { style } from '@vanilla-extract/css'; import { vars } from '@/styles/theme.css'; -import { Label } from '@/styles/font.css'; export const wrapper = style({ height: '100vh', @@ -12,47 +11,6 @@ export const container = style({ backgroundColor: vars.color.bggray, }); -export const folders = style({ - padding: '2.4rem 4.8rem 8.3rem 4.8rem', - display: 'grid', - gridTemplateColumns: 'repeat(2, 1fr)', - gridColumnGap: 34, - gridRowGap: 24, -}); - -// 폴더 -export const folder = style({ - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - gap: 16, - cursor: 'pointer', - - selectors: { - '&:hover': { - transform: 'translateY(-10%)', - }, - }, - transition: 'transform 0.2s ease', -}); - -export const title = style([ - Label, - { - maxWidth: 130, - display: 'flex', - gap: 6, - alignItems: 'center', - color: vars.color.black, - }, -]); - -export const folderName = style({ - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', -}); - // 폴더 버튼 export const addFolderButtonContainer = style({ position: 'fixed', diff --git a/src/app/collection/page.tsx b/src/app/collection/page.tsx index 25d93d64..789426d2 100644 --- a/src/app/collection/page.tsx +++ b/src/app/collection/page.tsx @@ -1,24 +1,22 @@ 'use client'; -import Link from 'next/link'; import Image from 'next/image'; import { useRouter } from 'next/navigation'; import { ChangeEvent, useState } from 'react'; -import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; import { isAxiosError } from 'axios'; import * as styles from './page.css'; import Header from '@/components/Header/Header'; import BottomSheet from '@/components/BottomSheet/ver3.0/BottomSheet'; -import FolderIcon from '@/components/icons/FolderIcon'; +import FolderList from './_components/FolderList'; import useBooleanOutput from '@/hooks/useBooleanOutput'; import { useLanguage } from '@/store/useLanguage'; import { useUser } from '@/store/useUser'; import createCollectionFolder from '../_api/folder/createFolder'; -import getFolders, { FoldersResponseType } from '../_api/folder/getFolders'; import toasting from '@/lib/utils/toasting'; import toastMessage from '@/lib/constants/toastMessage'; @@ -29,11 +27,6 @@ export default function CollectionPage() { const { user: userMe } = useUser(); const queryClient = useQueryClient(); const { language } = useLanguage(); - const { data } = useQuery({ - queryKey: [QUERY_KEYS.getFolders], - queryFn: getFolders, - staleTime: 1000 * 60 * 5, // 5분 설정 - }); const { isOn, handleSetOn, handleSetOff } = useBooleanOutput(false); const [value, setValue] = useState(''); @@ -79,17 +72,7 @@ export default function CollectionPage() {
router.push(`/user/${userMe.id}/mylist`)} />
-
- {data?.folders.map((folder) => ( - - -

- {folder.folderName} - {folder.listCount > 0 && {`(${folder.listCount})`}} -

- - ))} -
+
); } - -export default NoData; diff --git a/src/app/collection/_[category]/page.tsx b/src/app/collection/_[category]/page.tsx index a55c528b..52531d7f 100644 --- a/src/app/collection/_[category]/page.tsx +++ b/src/app/collection/_[category]/page.tsx @@ -10,7 +10,7 @@ import { useEffect, useMemo } from 'react'; import useIntersectionObserver from '@/hooks/useIntersectionObserver'; import getCollection from '@/app/_api/collect/__getCollection'; import Top3CardSkeleton from '@/app/collection/_[category]/_components/Top3CardSkeleton'; -import NoData from '@/app/collection/_[category]/_components/NoData'; +import NoData from '@/app/collection/[folderId]/_components/NoData'; import { CollectionType } from '@/lib/types/listType'; import Top3Card from '@/app/collection/_[category]/_components/Top3Card'; import { categoriesLocale } from '@/app/collection/locale'; From a8d2baa43b2108fb97d498cc6513e3b9326a5e8e Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Tue, 29 Oct 2024 08:18:40 +0900 Subject: [PATCH 08/11] =?UTF-8?q?Design:=20=EA=B3=B5=ED=86=B5=20Header=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20flex=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header/Header.css.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Header/Header.css.ts b/src/components/Header/Header.css.ts index 0cae8d46..69342cca 100644 --- a/src/components/Header/Header.css.ts +++ b/src/components/Header/Header.css.ts @@ -21,7 +21,7 @@ export const header = style({ }); export const flexChild = style({ - flex: '1', + flex: 'auto', }); export const headerTitle = style([ From 372c945fe04ee46c37c7eaee00d5b8dabfc807e8 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Tue, 29 Oct 2024 08:54:58 +0900 Subject: [PATCH 09/11] =?UTF-8?q?Fix:=20=EC=BD=9C=EB=A0=89=EC=85=98=20?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=B0=9B=EC=95=84=EC=84=9C=20inp?= =?UTF-8?q?ut=20defaultValue=20=EB=82=98=EC=98=A4=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/collection/[folderId]/page.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/app/collection/[folderId]/page.tsx b/src/app/collection/[folderId]/page.tsx index b41ad7c8..9a25624e 100644 --- a/src/app/collection/[folderId]/page.tsx +++ b/src/app/collection/[folderId]/page.tsx @@ -1,7 +1,7 @@ 'use client'; import { useRouter } from 'next/navigation'; -import { ChangeEvent, useState } from 'react'; +import { ChangeEvent, useEffect, useState } from 'react'; import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import { isAxiosError } from 'axios'; @@ -104,6 +104,12 @@ export default function CollectionDetailPage({ params }: ParamType) { deleteFolderMutation.mutate(folderId); }; + useEffect(() => { + if (data) { + setValue(data?.folderName); + } + }, [data]); + return (
@@ -112,7 +118,7 @@ export default function CollectionDetailPage({ params }: ParamType) { From 1111fe45ee3a692e8e115bd1c501686a5e580ce6 Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Tue, 29 Oct 2024 09:59:08 +0900 Subject: [PATCH 10/11] =?UTF-8?q?Feat:=20=EC=BD=9C=EB=A0=89=EC=85=98=20?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EB=AC=B4=ED=95=9C=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/_api/collect/getCollection.ts | 20 ++++----- .../[folderId]/_components/Collections.tsx | 36 +++++++-------- src/app/collection/[folderId]/page.css.ts | 6 +++ src/app/collection/[folderId]/page.tsx | 44 ++++++++++++++----- 4 files changed, 63 insertions(+), 43 deletions(-) diff --git a/src/app/_api/collect/getCollection.ts b/src/app/_api/collect/getCollection.ts index f8aaa27b..7d51ce35 100644 --- a/src/app/_api/collect/getCollection.ts +++ b/src/app/_api/collect/getCollection.ts @@ -1,30 +1,26 @@ import axiosInstance from '@/lib/axios/axiosInstance'; import { CollectionType } from '@/lib/types/listType'; -interface GetCollectionType { - folderId: string; - cursorId?: number; -} - -interface ResponseType { +export interface CollectionListResponseType { collectionLists: CollectionType[]; - cursorId: number; + cursorId: string; hasNext: boolean; folderName: string; } -async function getCollection({ folderId, cursorId }: GetCollectionType) { +const getCollection = async (folderId: string, cursorId?: string) => { const params = new URLSearchParams({ - size: '8', + size: '10', }); if (cursorId) { params.append('cursorId', cursorId.toString()); } - const response = await axiosInstance.get(`/folder/${folderId}/collections?${params.toString()}`); - + const response = await axiosInstance.get( + `/folder/${folderId}/collections?${params.toString()}` + ); return response.data; -} +}; export default getCollection; diff --git a/src/app/collection/[folderId]/_components/Collections.tsx b/src/app/collection/[folderId]/_components/Collections.tsx index cc0f01d8..a23823a3 100644 --- a/src/app/collection/[folderId]/_components/Collections.tsx +++ b/src/app/collection/[folderId]/_components/Collections.tsx @@ -1,46 +1,40 @@ 'use client'; -import { useQuery } from '@tanstack/react-query'; - import * as styles from './Collections.css'; import HeaderContainer from './CollectionsHeader'; import NoData from './NoData'; import ShapeSimpleList from '@/components/ShapeSimpleList/ShapeSimpleList'; -import getCollection from '@/app/_api/collect/getCollection'; -import { QUERY_KEYS } from '@/lib/constants/queryKeys'; +import { CollectionType } from '@/lib/types/listType'; interface CollectionsProps { - folderId: string; + collectionList: CollectionType[]; + folderName: string; + isHideOption: boolean; handleSetOn: () => void; handleSetOnDeleteOption: () => void; } -// TODO 무한스크롤 -export default function Collections({ folderId, handleSetOn, handleSetOnDeleteOption }: CollectionsProps) { - const { data, isFetching } = useQuery({ - queryKey: [QUERY_KEYS.getCollection], - queryFn: () => getCollection({ folderId }), - enabled: !!folderId, - }); - - if (isFetching) { - return
로딩중
; // TODO 로딩 UI - } - +export default function Collections({ + collectionList, + folderName, + isHideOption, + handleSetOn, + handleSetOnDeleteOption, +}: CollectionsProps) { return ( <> - {data && data?.collectionLists.length > 0 ? ( + {collectionList && collectionList.length > 0 ? (
    - {data?.collectionLists.map(({ list, id }) => { + {collectionList.map(({ list, id }) => { const hasImage = !!list.representativeImageUrl; return ; })} diff --git a/src/app/collection/[folderId]/page.css.ts b/src/app/collection/[folderId]/page.css.ts index 24faafab..e7737ed9 100644 --- a/src/app/collection/[folderId]/page.css.ts +++ b/src/app/collection/[folderId]/page.css.ts @@ -32,3 +32,9 @@ export const content = style([ alignItems: 'center', }, ]); + +// Observer Ref +export const target = style({ + width: '100%', + height: '2px', +}); diff --git a/src/app/collection/[folderId]/page.tsx b/src/app/collection/[folderId]/page.tsx index 9a25624e..85f962f9 100644 --- a/src/app/collection/[folderId]/page.tsx +++ b/src/app/collection/[folderId]/page.tsx @@ -1,8 +1,8 @@ 'use client'; import { useRouter } from 'next/navigation'; -import { ChangeEvent, useEffect, useState } from 'react'; -import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { ChangeEvent, useEffect, useMemo, useState } from 'react'; +import { useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { isAxiosError } from 'axios'; import Collections from './_components/Collections'; @@ -11,13 +11,14 @@ import BottomSheet from '@/components/BottomSheet/ver3.0/BottomSheet'; import * as styles from './page.css'; import useBooleanOutput from '@/hooks/useBooleanOutput'; +import useIntersectionObserver from '@/hooks/useIntersectionObserver'; import { useLanguage } from '@/store/useLanguage'; import toasting from '@/lib/utils/toasting'; import toastMessage from '@/lib/constants/toastMessage'; import { QUERY_KEYS } from '@/lib/constants/queryKeys'; import updateCollectionFolder from '@/app/_api/folder/updateFolder'; import deleteFolder from '@/app/_api/folder/deleteFolder'; -import getCollection from '@/app/_api/collect/getCollection'; +import getCollection, { CollectionListResponseType } from '@/app/_api/collect/getCollection'; interface ParamType { params: { folderId: string }; @@ -38,12 +39,28 @@ export default function CollectionDetailPage({ params }: ParamType) { const [value, setValue] = useState(''); // 폴더 상세(콜렉션) 조회 - const { data } = useQuery({ - queryKey: [QUERY_KEYS.getCollection], - queryFn: () => getCollection({ folderId }), + const { + data: listData, + hasNextPage, + fetchNextPage, + } = useInfiniteQuery({ + queryKey: [QUERY_KEYS.getCollection, folderId], + queryFn: ({ pageParam: cursorId }) => getCollection(folderId, cursorId as string), + initialPageParam: null, + getNextPageParam: (lastPage) => (lastPage.hasNext ? lastPage.cursorId : null), enabled: !!folderId, }); + const lists = useMemo(() => { + return listData ? listData.pages.flatMap(({ collectionLists }) => collectionLists) : []; + }, [listData]); + + const ref = useIntersectionObserver(() => { + if (hasNextPage) { + fetchNextPage(); + } + }); + // 폴더 수정하기 mutation const editFolderMutation = useMutation({ mutationFn: updateCollectionFolder, @@ -105,14 +122,20 @@ export default function CollectionDetailPage({ params }: ParamType) { }; useEffect(() => { - if (data) { - setValue(data?.folderName); + if (listData) { + setValue(listData.pages[0].folderName); } - }, [data]); + }, []); return (
    - + 폴더 이름 바꾸기 +
    ); } From 010c582ff92e4654c4bd50c7b8c7a5aeeb234faf Mon Sep 17 00:00:00 2001 From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com> Date: Tue, 29 Oct 2024 12:19:02 +0900 Subject: [PATCH 11/11] =?UTF-8?q?Design:=20=EC=BD=9C=EB=A0=89=EC=85=98=20?= =?UTF-8?q?=EC=8B=AC=ED=94=8C=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EB=B0=B0?= =?UTF-8?q?=EA=B2=BD=20=ED=88=AC=EB=AA=85=EB=8F=84=20=EC=A0=81=EC=9A=A9,?= =?UTF-8?q?=20text=20=EC=A4=84=EC=9E=84=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ShapeSimpleList/ShapeSimpleList.css.ts | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/components/ShapeSimpleList/ShapeSimpleList.css.ts b/src/components/ShapeSimpleList/ShapeSimpleList.css.ts index 1ad25384..d8dda0e4 100644 --- a/src/components/ShapeSimpleList/ShapeSimpleList.css.ts +++ b/src/components/ShapeSimpleList/ShapeSimpleList.css.ts @@ -23,13 +23,19 @@ const content = style({ justifyContent: 'center', alignItems: 'center', - backgroundImage: imageUrl, - backgroundPosition: 'center', backgroundColor: vars.color.white, }); export const contentVariant = styleVariants({ - round: [content, { borderRadius: '100%' }], + round: [ + content, + { + borderRadius: '100%', + background: `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), ${imageUrl}`, + backgroundSize: 'cover', + backgroundPosition: 'center', + }, + ], square: [content, { borderRadius: 20 }], }); @@ -44,6 +50,7 @@ export const category = style([ ]); export const info = style({ + width: '70%', paddingTop: '0.6rem', paddingBottom: '0.5rem', display: 'flex', @@ -63,6 +70,12 @@ export const title = styleVariants(fontColor, (color) => [ { color, fontWeight: 600, + textAlign: 'center', + + width: '100%', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', }, ]);