갤러리 hotfix (#494)

* fix: 폰트 크기 수정 및 로그인 안하면 접속 불가능

* fix: tab style fix

* fix: order-type으로 변경

* feat: 성향 정렬 추가

src/components/sideMenu/MenuSection.tsx

@@ -115,4 +115,8 @@ const menuItemCss = css`
     display: inline-block;
     text-decoration: none;
   }
+
+  svg {
+    flex-shrink: 0;
+  }
 `;

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`

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;
 `;

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};
 `;

src/hooks/api/gallery/useGetGalleryList.tsx

@@ -31,7 +31,7 @@ const useGetGalleryList = (request: Request, options?: UseQueryOptions<Response>
         params: {
           page: request.page,
           job: request.position,
-          order_type: request.order_type,
+          'order-type': request.order_type,
           count: request.count,
         },
       }),

src/pages/gallery/index.page.tsx

@@ -1,20 +1,27 @@
-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';
 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<PositionType>('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 (
     <div>
       <Header title="명함 갤러리" />

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;
 `;