From 5792a94b6f8b60bc512f5b92999711094037c031 Mon Sep 17 00:00:00 2001 From: "sumi.byun" Date: Thu, 21 Mar 2024 00:24:12 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B0=A4=EB=9F=AC=EB=A6=AC=20hotfix=20(#494)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 폰트 크기 수정 및 로그인 안하면 접속 불가능 * fix: tab style fix * fix: order-type으로 변경 * feat: 성향 정렬 추가 --- src/components/sideMenu/MenuSection.tsx | 4 ++++ src/features/gallery/Card.tsx | 5 +++-- src/features/gallery/FilterTab.tsx | 3 +++ src/features/gallery/Tab.tsx | 11 +++++++++- src/hooks/api/gallery/useGetGalleryList.tsx | 2 +- src/pages/gallery/index.page.tsx | 24 ++++++++++++++++++++- src/styles/typo.ts | 8 +++---- 7 files changed, 48 insertions(+), 9 deletions(-) diff --git a/src/components/sideMenu/MenuSection.tsx b/src/components/sideMenu/MenuSection.tsx index b644cc9e..b8719dae 100644 --- a/src/components/sideMenu/MenuSection.tsx +++ b/src/components/sideMenu/MenuSection.tsx @@ -115,4 +115,8 @@ const menuItemCss = css` display: inline-block; text-decoration: none; } + + svg { + flex-shrink: 0; + } `; diff --git a/src/features/gallery/Card.tsx b/src/features/gallery/Card.tsx index f3e75c0d..02268e56 100644 --- a/src/features/gallery/Card.tsx +++ b/src/features/gallery/Card.tsx @@ -23,7 +23,8 @@ interface Props { function Card({ isBookmarked, survey, target, isMine, isPreview, listRefetch }: Props) { const { group } = useDnaInfo(survey.survey_id); - const viewTendencies = survey.tendencies.slice(0, 3); + const sortTendencies = survey.tendencies.sort((a, b) => b.count - a.count); + const viewTendencies = sortTendencies.slice(0, 3); const { cancelBookmark, addBookmark } = useBookmark({ surveyId: survey.survey_id, @@ -224,7 +225,7 @@ const tagWrapperCss = css` display: flex; flex-wrap: wrap; gap: 8px; - max-width: 200px; + max-width: 260px; `; const tagItemCss = (theme: Theme) => css` diff --git a/src/features/gallery/FilterTab.tsx b/src/features/gallery/FilterTab.tsx index 9720e7fa..ecea76bb 100644 --- a/src/features/gallery/FilterTab.tsx +++ b/src/features/gallery/FilterTab.tsx @@ -3,6 +3,7 @@ import { css, type Theme } from '@emotion/react'; import AlignUpdatedIcon from '~/components/icons/AlignUpdatedIcon'; import type Svg from '~/components/svg/Svg'; import { type FilterType } from '~/remotes/gallery'; +import { BODY_2_BOLD, BODY_2_REGULAR } from '~/styles/typo'; const TABS: { title: string; @@ -55,7 +56,9 @@ const tabItemCss = (theme: Theme, isActive: boolean) => css` padding: 8px; + font-weight: 700; color: ${isActive ? theme.colors.black : theme.colors.gray_300}; + ${isActive ? BODY_2_BOLD : BODY_2_REGULAR}; transition: color 0.2s ease-in-out; `; diff --git a/src/features/gallery/Tab.tsx b/src/features/gallery/Tab.tsx index 1c74e583..5a379289 100644 --- a/src/features/gallery/Tab.tsx +++ b/src/features/gallery/Tab.tsx @@ -1,6 +1,7 @@ import { css, type Theme } from '@emotion/react'; import { type PositionType } from '~/remotes/gallery'; +import { HEAD_2_BOLD } from '~/styles/typo'; const TABS: { title: string; @@ -51,7 +52,8 @@ function Tab(props: Props) { export default Tab; const tabContainerCss = css` - padding: 0 7px; + margin: 0 7px; + border-bottom: 2px solid #e4e7ee; `; interface TabItemProps { @@ -69,8 +71,15 @@ function TabItem(props: TabItemProps) { } const itemCss = (theme: Theme, isActive: boolean) => css` + position: relative; + bottom: -2px; + padding: 0 10px 14px; + color: ${isActive ? theme.colors.gray_500 : theme.colors.gray_300}; + border-bottom: 2px solid ${isActive ? theme.colors.gray_500 : 'transparent'}; + transition: border-bottom 0.2s ease-in-out, color 0.2s ease-in-out; + ${HEAD_2_BOLD}; `; diff --git a/src/hooks/api/gallery/useGetGalleryList.tsx b/src/hooks/api/gallery/useGetGalleryList.tsx index b3dca125..be9af8bc 100644 --- a/src/hooks/api/gallery/useGetGalleryList.tsx +++ b/src/hooks/api/gallery/useGetGalleryList.tsx @@ -31,7 +31,7 @@ const useGetGalleryList = (request: Request, options?: UseQueryOptions params: { page: request.page, job: request.position, - order_type: request.order_type, + 'order-type': request.order_type, count: request.count, }, }), diff --git a/src/pages/gallery/index.page.tsx b/src/pages/gallery/index.page.tsx index 2c8ac8ff..ed253911 100644 --- a/src/pages/gallery/index.page.tsx +++ b/src/pages/gallery/index.page.tsx @@ -1,9 +1,11 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import Link from 'next/link'; +import { useSession } from 'next-auth/react'; import { css } from '@emotion/react'; import Header from '~/components/header/MobileHeader'; import StaggerWrapper from '~/components/stagger/StaggerWrapper'; +import useToast from '~/components/toast/useToast'; import Card from '~/features/gallery/Card'; import FilterTab from '~/features/gallery/FilterTab'; import PublishMyCard from '~/features/gallery/PublishMyCard'; @@ -11,10 +13,15 @@ import Tab from '~/features/gallery/Tab'; import useGetGalleryList from '~/hooks/api/gallery/useGetGalleryList'; import useGetMyBookmarkList from '~/hooks/api/gallery/useGetMyBookmarkList'; import useGetMyCard from '~/hooks/api/gallery/useGetMyCard'; +import useInternalRouter from '~/hooks/router/useInternalRouter'; import { type FilterType, type GalleryType, type PositionType } from '~/remotes/gallery'; import { BODY_2_BOLD } from '~/styles/typo'; function Gallery() { + const { status } = useSession(); + const { fireToast } = useToast(); + const router = useInternalRouter(); + // TODO : 무한 스크롤 const [page, _] = useState(0); const [activeTab, setActiveTab] = useState('ALL'); @@ -37,6 +44,21 @@ function Gallery() { myCardInfoRefetch(); }; + useEffect(() => { + if (status === 'unauthenticated') { + router.replace('/'); + fireToast({ + content: '로그인이 필요합니다.', + higherThanCTA: true, + }); + } + // TODO : 현재는 리로드를 무조건해야 잘 나오는데, 추후 수정 필요 + if (status === 'authenticated') { + myCardInfoRefetch(); + galleryListRefetch(); + } + }, [status]); + return (
diff --git a/src/styles/typo.ts b/src/styles/typo.ts index 4c71fcdd..14b4cbef 100644 --- a/src/styles/typo.ts +++ b/src/styles/typo.ts @@ -8,15 +8,15 @@ export const HEAD_1 = css` `; export const HEAD_1_BOLD = css` - font-size: 1.25rem; - font-weight: 600; + font-size: 1.5rem; + font-weight: 700; line-height: 140%; letter-spacing: -0.3px; `; export const HEAD_2_BOLD = css` font-size: 1.125rem; - font-weight: 500; + font-weight: 600; line-height: 140%; letter-spacing: -0.3px; `; @@ -44,7 +44,7 @@ export const BODY_1 = css` export const BODY_2_BOLD = css` font-size: 0.875rem; - font-weight: 500; + font-weight: 600; line-height: 140%; letter-spacing: -0.3px; `;