From 4703e29aa15d4e41237446f5facc51cd635bc07e Mon Sep 17 00:00:00 2001 From: joojjang Date: Fri, 15 Nov 2024 13:48:33 +0900 Subject: [PATCH 01/11] =?UTF-8?q?refactor(utils):=20=EB=8F=84=EB=A9=94?= =?UTF-8?q?=EC=9D=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chats/ChatList/components/ChatItem/index.tsx | 2 +- .../chats/ChatRoom/components/ChatInput/index.tsx | 2 +- .../ChatRoom/components/MessageItem/index.tsx | 4 ++-- .../ChatRoom/components/MessageList/index.tsx | 2 +- src/utils/{index.ts => dates.ts} | 14 -------------- src/utils/queryParams.ts | 4 ++++ src/utils/strings.ts | 13 +++++++++++++ 7 files changed, 22 insertions(+), 19 deletions(-) rename src/utils/{index.ts => dates.ts} (80%) create mode 100644 src/utils/strings.ts diff --git a/src/pages/chats/ChatList/components/ChatItem/index.tsx b/src/pages/chats/ChatList/components/ChatItem/index.tsx index 9960034..7cbb9a7 100644 --- a/src/pages/chats/ChatList/components/ChatItem/index.tsx +++ b/src/pages/chats/ChatList/components/ChatItem/index.tsx @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; import { useNavigate } from 'react-router-dom'; import ProfileImage from '@/components/common/ProfileImage'; -import { formatDate } from '@/utils'; +import { formatDate } from '@/utils/dates'; type ChatItemProps = { chatRoomId: number; diff --git a/src/pages/chats/ChatRoom/components/ChatInput/index.tsx b/src/pages/chats/ChatRoom/components/ChatInput/index.tsx index 2d4a6a4..c2d50be 100644 --- a/src/pages/chats/ChatRoom/components/ChatInput/index.tsx +++ b/src/pages/chats/ChatRoom/components/ChatInput/index.tsx @@ -7,7 +7,7 @@ import CancelIcon from '@/assets/icons/cancel-default.svg?react'; import ImageIcon from '@/assets/icons/image.svg?react'; import SendIcon from '@/assets/icons/send.svg?react'; import type { User } from '@/types/chats'; -import { countNonSpaceChars } from '@/utils'; +import { countNonSpaceChars } from '@/utils/strings'; type ChatInputProps = { client: CompatClient | null; diff --git a/src/pages/chats/ChatRoom/components/MessageItem/index.tsx b/src/pages/chats/ChatRoom/components/MessageItem/index.tsx index 7fdb631..93958ca 100644 --- a/src/pages/chats/ChatRoom/components/MessageItem/index.tsx +++ b/src/pages/chats/ChatRoom/components/MessageItem/index.tsx @@ -1,8 +1,8 @@ +import { Box } from '@chakra-ui/react'; import styled from '@emotion/styled'; import ProfileImage from '@/components/common/ProfileImage'; -import { formatTimestamp } from '@/utils'; -import { Box } from '@chakra-ui/react'; +import { formatTimestamp } from '@/utils/dates'; export type MessageItemProps = { senderName: string; diff --git a/src/pages/chats/ChatRoom/components/MessageList/index.tsx b/src/pages/chats/ChatRoom/components/MessageList/index.tsx index 502c185..f3e9434 100644 --- a/src/pages/chats/ChatRoom/components/MessageList/index.tsx +++ b/src/pages/chats/ChatRoom/components/MessageList/index.tsx @@ -3,7 +3,7 @@ import { isSameDay } from 'date-fns'; import { Fragment, useRef } from 'react'; import type { ChatMessage } from '@/types/chats'; -import { formatDate, getDay } from '@/utils'; +import { formatDate, getDay } from '@/utils/dates'; import MessageItem from '../MessageItem'; type MessageListProps = { diff --git a/src/utils/index.ts b/src/utils/dates.ts similarity index 80% rename from src/utils/index.ts rename to src/utils/dates.ts index 22eebd7..becab33 100644 --- a/src/utils/index.ts +++ b/src/utils/dates.ts @@ -43,17 +43,3 @@ export function getDay(date: Date): string { return day; } - -/** - * 문자열 관련 함수 - */ - -// 공백 제거 함수 -export function eliminateSpaces(str: string): string { - return str.replace(/\s/g, ''); -} - -// 공백 제거하고 문자열 길이 세는 함수 -export function countNonSpaceChars(str: string): number { - return eliminateSpaces(str).length; -} diff --git a/src/utils/queryParams.ts b/src/utils/queryParams.ts index fd7f8fd..5852c09 100644 --- a/src/utils/queryParams.ts +++ b/src/utils/queryParams.ts @@ -1,3 +1,7 @@ +/** + * URL 쿼리 파라미터 관련 함수 + */ + // query param으로 만들어 반환 export function getQueryParams(params: Record): URLSearchParams { const queryParams = new URLSearchParams(); diff --git a/src/utils/strings.ts b/src/utils/strings.ts new file mode 100644 index 0000000..522be75 --- /dev/null +++ b/src/utils/strings.ts @@ -0,0 +1,13 @@ +/** + * 문자열 관련 함수 + */ + +// 공백 제거 함수 +export function eliminateSpaces(str: string): string { + return str.replace(/\s/g, ''); +} + +// 공백 제거하고 문자열 길이 세는 함수 +export function countNonSpaceChars(str: string): number { + return eliminateSpaces(str).length; +} From 09c36f8f84d70ca960c41ef48d10ca76ab976b9d Mon Sep 17 00:00:00 2001 From: joojjang Date: Fri, 15 Nov 2024 13:52:02 +0900 Subject: [PATCH 02/11] =?UTF-8?q?chore(ProtectedRoute):=20todo=20=EC=A3=BC?= =?UTF-8?q?=EC=84=9D=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/ProtectedRoute.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/ProtectedRoute.tsx b/src/routes/ProtectedRoute.tsx index 294315d..360e7c0 100644 --- a/src/routes/ProtectedRoute.tsx +++ b/src/routes/ProtectedRoute.tsx @@ -9,7 +9,7 @@ export const ProtectedRoute = () => { const navigate = useNavigate(); // accessToken이 없으면 로그인 페이지로 리다이렉트, 있으면 자식 요소(페이지) 렌더링 - // 로그인 구현에 따라 추후 변동 가능성 O + // todo: 로그인 구현에 따라 추후 변동 가능성 O useEffect(() => { const currentPath = window.location.pathname; From 05e7243f4221449af3c48b891230d847eb714809 Mon Sep 17 00:00:00 2001 From: beom Date: Fri, 15 Nov 2024 14:52:14 +0900 Subject: [PATCH 03/11] =?UTF-8?q?feat(Loader):=20=EB=A1=9C=EB=94=A9=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Loader/index.tsx | 36 ++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 src/components/common/Loader/index.tsx diff --git a/src/components/common/Loader/index.tsx b/src/components/common/Loader/index.tsx new file mode 100644 index 0000000..6b3005d --- /dev/null +++ b/src/components/common/Loader/index.tsx @@ -0,0 +1,36 @@ +import styled from '@emotion/styled'; + +const LoaderWrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +`; + +const Spinner = styled.div` + border: 4px solid #f3f3f3; + border-top: 4px solid #3498db; + border-radius: 50%; + width: 50px; + height: 50px; + animation: spin 1.5s linear infinite; + + @keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } +`; + +const Loader = () => { + return ( + + + + ); +}; + +export default Loader; From 6c2aa17d75ed093eda87f9a0a02847c5a3c103d6 Mon Sep 17 00:00:00 2001 From: beom Date: Fri, 15 Nov 2024 14:52:31 +0900 Subject: [PATCH 04/11] =?UTF-8?q?feat(api):=20wishlist=20=EA=B0=80?= =?UTF-8?q?=EC=A0=B8=EC=98=A4=EB=8A=94=20api=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/users/useGetWishes.ts | 40 ++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 src/apis/users/useGetWishes.ts diff --git a/src/apis/users/useGetWishes.ts b/src/apis/users/useGetWishes.ts new file mode 100644 index 0000000..763cb29 --- /dev/null +++ b/src/apis/users/useGetWishes.ts @@ -0,0 +1,40 @@ +import { APIResponse, SearchProductsResponse } from '@/types'; +import { useSuspenseInfiniteQuery } from '@tanstack/react-query'; +import fetchInstance from '../instance'; +import QueryKeys from '../queryKeys'; + +async function getWishes({ + pageParam = 0, +}: { + pageParam: number; +}): Promise> { + const size = 20; + const response = await fetchInstance().get('/wishes', { + params: { + size, + page: pageParam, + }, + }); + return response.data; +} + +const useGetWishes = () => { + const queryResult = useSuspenseInfiniteQuery< + APIResponse, + Error, + APIResponse, + [string], + number + >({ + queryKey: [QueryKeys.WISH_LIST], + queryFn: ({ pageParam }) => getWishes({ pageParam }), + initialPageParam: 0, + getNextPageParam: (lastPage, allPages) => { + return lastPage.data.hasNext ? allPages.length : undefined; + }, + }); + + return queryResult; +}; + +export default useGetWishes; From 58f9c2cd3ace8d03449795620a298b995dd280a6 Mon Sep 17 00:00:00 2001 From: beom Date: Fri, 15 Nov 2024 14:52:51 +0900 Subject: [PATCH 05/11] =?UTF-8?q?chore(type):=20=EC=95=88=EC=93=B0?= =?UTF-8?q?=EB=8A=94=20=ED=83=80=EC=9E=85=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/types/index.ts | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/src/types/index.ts b/src/types/index.ts index a1def41..5e24f54 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,20 +1,3 @@ -export type SearchWork = { - id: number; - src: string; - title: string; - artist: string; - price: number; -}; - -export type SearchArtist = { - id: number; - name: string; - src: string; - totalFollowers: number; - totalLikes: number; - followed: boolean; -}; - export type User = { userId: number; nickname: string; From f5a8b5c835aaac335fa191ed0fc408857290065a Mon Sep 17 00:00:00 2001 From: beom Date: Fri, 15 Nov 2024 14:53:18 +0900 Subject: [PATCH 06/11] =?UTF-8?q?feat(page):=20loading=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/ProductDetails/index.tsx | 3 ++- src/pages/SearchResults/index.tsx | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/ProductDetails/index.tsx b/src/pages/ProductDetails/index.tsx index 4071ae1..d273640 100644 --- a/src/pages/ProductDetails/index.tsx +++ b/src/pages/ProductDetails/index.tsx @@ -4,6 +4,7 @@ import usePostChatRoom from '@/apis/chats/usePostChatRoom'; import useGetDetail from '@/apis/products/useGetDetail'; import CTA, { CTAContainer } from '@/components/common/CTA'; import IconButton from '@/components/common/IconButton'; +import Loader from '@/components/common/Loader'; import Header from '@/components/layouts/Header'; import { RouterPath } from '@/routes/path'; import useUserStore from '@/store/useUserStore'; @@ -75,7 +76,7 @@ const ProductDetailsContext = () => { const ProductDetails = () => { return ( Error Status}> - Loading Status}> + }> diff --git a/src/pages/SearchResults/index.tsx b/src/pages/SearchResults/index.tsx index e3185c3..dddb111 100644 --- a/src/pages/SearchResults/index.tsx +++ b/src/pages/SearchResults/index.tsx @@ -7,6 +7,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom'; import useSearchArtists from '@/apis/search/useSearchArtists'; import useSearchProducts from '@/apis/search/useSearchProducts'; import CategoryTabBar from '@/components/common/CategoryTabBar'; +import Loader from '@/components/common/Loader'; import SearchBar from '@/components/layouts/SearchBar'; import { RouterPath } from '@/routes/path'; import * as G from '@/styles/globalStyles'; @@ -83,7 +84,7 @@ const SearchResultsContent = () => { const SearchResults = () => { return ( Error Status}> - Loading Status}> + }> From 8709bda60a65fb8cf22396019638588a7afc333b Mon Sep 17 00:00:00 2001 From: beom Date: Fri, 15 Nov 2024 14:53:41 +0900 Subject: [PATCH 07/11] =?UTF-8?q?feat(queryKey):=20wishlist=20=EC=BF=BC?= =?UTF-8?q?=EB=A6=AC=ED=82=A4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/queryKeys.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/apis/queryKeys.ts b/src/apis/queryKeys.ts index b2ee30a..2a9a2ae 100644 --- a/src/apis/queryKeys.ts +++ b/src/apis/queryKeys.ts @@ -8,6 +8,7 @@ const QUERY_KEYS = { CHAT_ROOM: 'chatRoom', PRODUCT_DETAIL: 'productDetail', ARTIST_PROFILE: 'artistProfile', + WISH_LIST: 'wishList', }; export default QUERY_KEYS; From 81ce86d18d0de07e37e89d5e720c69666984e75a Mon Sep 17 00:00:00 2001 From: beom Date: Fri, 15 Nov 2024 15:27:40 +0900 Subject: [PATCH 08/11] =?UTF-8?q?feat(page):=20loader=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Discover/index.tsx | 3 ++- src/pages/My/index.tsx | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/Discover/index.tsx b/src/pages/Discover/index.tsx index 62d8c22..f483bd2 100644 --- a/src/pages/Discover/index.tsx +++ b/src/pages/Discover/index.tsx @@ -3,6 +3,7 @@ import { Suspense, useEffect } from 'react'; import { ErrorBoundary } from 'react-error-boundary'; import useGetFeed, { type Product } from '@/apis/products/useGetFeed'; +import Loader from '@/components/common/Loader'; import SearchBar from '@/components/layouts/SearchBar'; import { HEIGHTS } from '@/styles/constants'; @@ -12,7 +13,7 @@ const Discover = () => ( {/* todo: 폴백 UI 만들기 */} Error}> - Loading...}> + }> diff --git a/src/pages/My/index.tsx b/src/pages/My/index.tsx index 44831a8..75a4e6a 100644 --- a/src/pages/My/index.tsx +++ b/src/pages/My/index.tsx @@ -4,6 +4,7 @@ import { ErrorBoundary } from 'react-error-boundary'; import useGetArtist from '@/apis/artists/useGetArtist'; import useGetUser from '@/apis/users/useGetUser'; +import Loader from '@/components/common/Loader'; import Footer from '@/components/layouts/Footer'; import useModeStore from '@/store/useModeStore'; import { HEIGHTS } from '@/styles/constants'; @@ -15,7 +16,7 @@ import UserProfileBox from './components/UserProfileBox'; const My = () => { return ( Error...}> - Loading...}> + }> From 72d351aebc2506084fd03d51d4ee5ff3274a78ad Mon Sep 17 00:00:00 2001 From: beom Date: Fri, 15 Nov 2024 15:28:07 +0900 Subject: [PATCH 09/11] =?UTF-8?q?feat(page):=20wishlist=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/MyFavorites/index.tsx | 37 ++++++++++++++++++++++++++------- 1 file changed, 30 insertions(+), 7 deletions(-) diff --git a/src/pages/MyFavorites/index.tsx b/src/pages/MyFavorites/index.tsx index 115f95b..ea8a3f6 100644 --- a/src/pages/MyFavorites/index.tsx +++ b/src/pages/MyFavorites/index.tsx @@ -2,15 +2,19 @@ import styled from '@emotion/styled'; import { useEffect, useState } from 'react'; import useGetFollow from '@/apis/users/useGetFollow'; +import useGetWishList from '@/apis/users/useGetWishes'; import ArtistItem from '@/components/common/ArtistItem'; import CategoryTabBar from '@/components/common/CategoryTabBar'; +import Loader from '@/components/common/Loader'; +import ProductItem from '@/components/common/ProductItem'; import * as G from '@/styles/globalStyles'; -import { User } from '@/types'; +import { SearchProductInfo, User } from '@/types'; const MyFavorites = () => { const categoryList = ['작품', '작가']; const [selectedTab, setSelectedTab] = useState('작품'); - const { data, status, refetch } = useGetFollow(); + const { data: artistResults, status, refetch } = useGetFollow(); + const { data: wishListResults } = useGetWishList(); useEffect(() => { if (selectedTab === '작가') { @@ -19,27 +23,46 @@ const MyFavorites = () => { }, [selectedTab, refetch]); if (status === 'pending') { - return

Loading...

; + return ; } - if (status === 'error' || !data) { + if (status === 'error' || !artistResults) { return

Error... console.log('Error:', error);

; } const handleTabClick = (tab: string) => { setSelectedTab(tab); }; + return ( <> {selectedTab === '작품' ? ( - 작품 // 현재 이부분 api가 없어 비워두었습니다. + + {wishListResults.data.products.length === 0 ? ( +

찜한 작품이 없습니다.

+ ) : ( + + {wishListResults.data.products.map((product: SearchProductInfo) => ( + + ))} + + )} + ) : ( - {data?.data.content?.length === 0 ? ( + {artistResults?.data.content?.length === 0 ? (

팔로우한 작가가 없습니다.

) : ( - {data?.data.content?.map((artist: User) => ( + {artistResults?.data.content?.map((artist: User) => ( Date: Fri, 15 Nov 2024 15:28:51 +0900 Subject: [PATCH 10/11] =?UTF-8?q?feat(page):=20=EB=8D=B0=EC=9D=B4=ED=84=B0?= =?UTF-8?q?=20=EC=97=86=EC=9D=84=EB=95=8C=20UI=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/SearchResults/index.tsx | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/src/pages/SearchResults/index.tsx b/src/pages/SearchResults/index.tsx index dddb111..abdec32 100644 --- a/src/pages/SearchResults/index.tsx +++ b/src/pages/SearchResults/index.tsx @@ -57,20 +57,28 @@ const SearchResultsContent = () => { 작품 ({searchProductLen}) - - - handleTabClick('작품')}> 더보기 - + {searchProductLen === 0 ? ( +
데이터가 없습니다.
+ ) : ( + + + handleTabClick('작품')}> 더보기 + + )}
작가 ({searchArtistLen}) - - - handleTabClick('작가')}> 더보기 - + {searchArtistLen === 0 ? ( +
데이터가 없습니다.
+ ) : ( + + + handleTabClick('작가')}> 더보기 + + )}
)} From 4dbfc58a62d14e26b8a8360e1ba6f57066acd042 Mon Sep 17 00:00:00 2001 From: beom Date: Fri, 15 Nov 2024 16:18:59 +0900 Subject: [PATCH 11/11] =?UTF-8?q?design(UI):=20=EB=8D=B0=EC=9D=B4=ED=84=B0?= =?UTF-8?q?=20=EC=97=86=EC=9D=84=EB=95=8C=20UI=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ArtWorkContents.tsx | 40 +++++++++++++------ .../components/ArtistContents.tsx | 40 +++++++++++++------ src/pages/SearchResults/index.tsx | 14 ++++++- 3 files changed, 66 insertions(+), 28 deletions(-) diff --git a/src/pages/SearchResults/components/ArtWorkContents.tsx b/src/pages/SearchResults/components/ArtWorkContents.tsx index 66b45c6..39a3880 100644 --- a/src/pages/SearchResults/components/ArtWorkContents.tsx +++ b/src/pages/SearchResults/components/ArtWorkContents.tsx @@ -51,19 +51,23 @@ const ArtWorkContents = ({ searchWork }: { searchWork: SearchProductInfo[] }) => handleSelect={handleSelect} /> - - {sortedWork.map((item) => ( - - ))} - + {searchWorkLen === 0 ? ( + 데이터가 없습니다. + ) : ( + + {sortedWork.map((item) => ( + + ))} + + )} ); }; @@ -83,3 +87,13 @@ const ResultWrapper = styled.div` align-items: center; width: 100%; `; + +const NoDataMessage = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 100%; + padding: 40px 0; + font-weight: 600; + color: var(--color-black); +`; diff --git a/src/pages/SearchResults/components/ArtistContents.tsx b/src/pages/SearchResults/components/ArtistContents.tsx index d648647..9ea57f1 100644 --- a/src/pages/SearchResults/components/ArtistContents.tsx +++ b/src/pages/SearchResults/components/ArtistContents.tsx @@ -57,19 +57,23 @@ const ArtistContents = ({ searchArtist }: { searchArtist: SearchArtistInfo[] }) handleSelect={handleSelect} /> - - {sortedArtist.map((item) => ( - - ))} - + {searchArtistLen === 0 ? ( + 데이터가 없습니다. + ) : ( + + {sortedArtist.map((item) => ( + + ))} + + )} ); }; @@ -89,3 +93,13 @@ const ResultWrapper = styled.div` align-items: center; width: 100%; `; + +const NoDataMessage = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 100%; + padding: 40px 0; + font-weight: 600; + color: var(--color-black); +`; diff --git a/src/pages/SearchResults/index.tsx b/src/pages/SearchResults/index.tsx index abdec32..f98daa0 100644 --- a/src/pages/SearchResults/index.tsx +++ b/src/pages/SearchResults/index.tsx @@ -58,7 +58,7 @@ const SearchResultsContent = () => { 작품 ({searchProductLen}) {searchProductLen === 0 ? ( -
데이터가 없습니다.
+ 데이터가 없습니다. ) : ( @@ -72,7 +72,7 @@ const SearchResultsContent = () => { 작가 ({searchArtistLen}) {searchArtistLen === 0 ? ( -
데이터가 없습니다.
+ 데이터가 없습니다. ) : ( @@ -158,3 +158,13 @@ const HorizontalWRapper = styled.div` justify-content: center; align-items: center; `; + +const NoDataMessage = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 100%; + padding: 20px 0; + font-weight: 600; + color: var(--color-black); +`;