From 941930bb8d07c47f13335ee4150ac79c5310b8fb Mon Sep 17 00:00:00 2001 From: urjimyu <92876819+urjimyu@users.noreply.github.com> Date: Wed, 16 Oct 2024 21:27:59 +0900 Subject: [PATCH 1/2] =?UTF-8?q?chore:=20=EC=BD=98=EC=86=94=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/queries/useGetWorkList.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/hooks/queries/useGetWorkList.tsx b/src/hooks/queries/useGetWorkList.tsx index 6baa843..f182401 100644 --- a/src/hooks/queries/useGetWorkList.tsx +++ b/src/hooks/queries/useGetWorkList.tsx @@ -20,7 +20,6 @@ const getWorkList = async (category: string, currentPage: number) => { const res = await get( `work?category=${mappedCategory}¤tPage=${currentPage}` ); - console.log('API Response:', res); return res.result.works as WorkListType[]; }; From b78ee6003b4ea768aec97326243158d65f6dbafd Mon Sep 17 00:00:00 2001 From: urjimyu <92876819+urjimyu@users.noreply.github.com> Date: Wed, 16 Oct 2024 21:48:45 +0900 Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=EC=9D=B4=EB=A6=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/constants.ts | 2 ++ src/hooks/queries/useGetWorkList.tsx | 12 ++++++-- src/pages/Work/Work.tsx | 4 +-- .../mobile/MobileCategoriesSection.tsx | 12 ++++---- .../Work/components/mobile/MobileHeader.tsx | 6 ++-- .../mobile/MobileWorkInfoSection.tsx | 19 +++++++++++- .../components/work/CategoriesSection.tsx | 12 ++++---- .../components/workDetail/WorkInfoSection.tsx | 29 ++++++++++++++++--- src/types/types.ts | 8 +++-- 9 files changed, 77 insertions(+), 27 deletions(-) diff --git a/src/constants/constants.ts b/src/constants/constants.ts index 76194a0..5149584 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -49,3 +49,5 @@ export const WORDS = [ // CategoriesSection.tsx export const CATEGORIES = ['ALL', 'UX', 'BRAND', 'GRAPHIC', 'ILLUST', 'MEDIA'] as const; +export const DETAIL_RESPONSE_CATEGORIES = ['ALL', 'UXUI', 'BX', 'GRAPHIC', 'ILLUSTRATION', 'MEDIA'] as const; +export const WORK_CATEGORIES = ['ALL', 'UX/UI', 'BRAND', 'GRAPHIC', 'ILLUST', 'MEDIA'] as const; diff --git a/src/hooks/queries/useGetWorkList.tsx b/src/hooks/queries/useGetWorkList.tsx index f182401..4658794 100644 --- a/src/hooks/queries/useGetWorkList.tsx +++ b/src/hooks/queries/useGetWorkList.tsx @@ -24,9 +24,17 @@ const getWorkList = async (category: string, currentPage: number) => { }; export const useGetWorkList = ({ category, currentPage }: WorkListRequestType) => { + let mappedCategory = (() => { + switch (category) { + case 'UX/UI': + return 'UX'; + default: + return category; + } + })(); const { data, hasNextPage, fetchNextPage, isFetchingNextPage } = useInfiniteQuery({ - queryKey: WORK_KEYS.list(category, currentPage), - queryFn: ({ pageParam = currentPage }) => getWorkList(category, pageParam), + queryKey: WORK_KEYS.list(mappedCategory, currentPage), + queryFn: ({ pageParam = currentPage }) => getWorkList(mappedCategory, pageParam), getNextPageParam: (lastPage, allPages) => { if (lastPage && Array.isArray(lastPage) && lastPage?.length === 10) { return allPages?.length ? allPages.length + 1 : 1; diff --git a/src/pages/Work/Work.tsx b/src/pages/Work/Work.tsx index b46eccd..936dcfa 100644 --- a/src/pages/Work/Work.tsx +++ b/src/pages/Work/Work.tsx @@ -4,13 +4,13 @@ import ExhibitionSection from './components/work/ExhibitionSection'; import styled from 'styled-components'; import { useGetWorkList } from '../../hooks/queries/useGetWorkList'; import { useState } from 'react'; -import { Category } from '../../types/types'; +import { WorkCategory } from '../../types/types'; import { useIsMobile } from '../../hooks/useIsMobile'; import MobileHeader from './components/mobile/MobileHeader'; import background from '../../assets/img/workBackground.png'; const Work = () => { - const [category, setCategory] = useState('ALL'); + const [category, setCategory] = useState('ALL'); const { data, hasNextPage, fetchNextPage, isFetchingNextPage } = useGetWorkList({ category, currentPage: 1, diff --git a/src/pages/Work/components/mobile/MobileCategoriesSection.tsx b/src/pages/Work/components/mobile/MobileCategoriesSection.tsx index 54da01d..2ab6628 100644 --- a/src/pages/Work/components/mobile/MobileCategoriesSection.tsx +++ b/src/pages/Work/components/mobile/MobileCategoriesSection.tsx @@ -1,19 +1,19 @@ import { styled } from 'styled-components'; -import { Category } from '../../../../types/types'; -import { CATEGORIES } from '../../../../constants/constants'; +import { WorkCategory } from '../../../../types/types'; +import { WORK_CATEGORIES } from '../../../../constants/constants'; import { useQueryClient } from '@tanstack/react-query'; import { usePrefetchWorkList } from '../../../../hooks/queries/usePrefetchWorkList'; import { WORK_KEYS } from '../../../../constants/QueryKey'; interface MobileCategoriesSectionProps { - category: Category; - setCategory: React.Dispatch>; + category: WorkCategory; + setCategory: React.Dispatch>; } const MobileCategoriesSection = ({ category, setCategory }: MobileCategoriesSectionProps) => { const queryClient = useQueryClient(); const { prefetchWorkList } = usePrefetchWorkList(); - const handleClick = (name: Category) => { + const handleClick = (name: WorkCategory) => { queryClient.removeQueries({ queryKey: WORK_KEYS.all }); prefetchWorkList(category, 1); setCategory(name); @@ -21,7 +21,7 @@ const MobileCategoriesSection = ({ category, setCategory }: MobileCategoriesSect return ( - {CATEGORIES.map((item) => ( + {WORK_CATEGORIES.map((item) => ( handleClick(item)} selected={category === item}> {item} diff --git a/src/pages/Work/components/mobile/MobileHeader.tsx b/src/pages/Work/components/mobile/MobileHeader.tsx index dcb105a..0bf443b 100644 --- a/src/pages/Work/components/mobile/MobileHeader.tsx +++ b/src/pages/Work/components/mobile/MobileHeader.tsx @@ -1,11 +1,11 @@ import { useState, useEffect } from 'react'; import { styled } from 'styled-components'; -import { Category } from '../../../../types/types'; +import { WorkCategory } from '../../../../types/types'; import MobileCategoriesSection from './MobileCategoriesSection'; interface MobileHeaderProps { - category: Category; - setCategory: React.Dispatch>; + category: WorkCategory; + setCategory: React.Dispatch>; } const MobileHeader = ({ category, setCategory }: MobileHeaderProps) => { diff --git a/src/pages/Work/components/mobile/MobileWorkInfoSection.tsx b/src/pages/Work/components/mobile/MobileWorkInfoSection.tsx index 4d022d5..01d47c0 100644 --- a/src/pages/Work/components/mobile/MobileWorkInfoSection.tsx +++ b/src/pages/Work/components/mobile/MobileWorkInfoSection.tsx @@ -5,10 +5,22 @@ interface WorkInfoSectionProps { } const MobileWorkInfoSection = ({ data }: WorkInfoSectionProps) => { + const mappedCategory = (() => { + switch (data.category) { + case 'UXUI': + return 'UX/UI'; + case 'ILLUSTRATION': + return 'ILLUST'; + case 'BX': + return 'BRAND'; + default: + return data.category; + } + })(); return ( - {data.category} + {mappedCategory} {data.studentName} {data.studentId} @@ -52,6 +64,8 @@ const WorkCategory = styled.span` margin-left: 1.6rem; font-size: 1.8rem; + font-style: normal; + font-weight: 900; line-height: 120%; color: ${({ theme }) => theme.colors.primaryBlue}; `; @@ -65,9 +79,12 @@ const WorkAuthorInfo = styled.div` const AuthorSpan = styled.span` font-size: 1.2rem; + font-style: normal; + font-weight: 700; line-height: 100%; &.studentId { + font-weight: 500; color: #7ca2b0; } `; diff --git a/src/pages/Work/components/work/CategoriesSection.tsx b/src/pages/Work/components/work/CategoriesSection.tsx index 3621c9e..d0924d7 100644 --- a/src/pages/Work/components/work/CategoriesSection.tsx +++ b/src/pages/Work/components/work/CategoriesSection.tsx @@ -1,19 +1,19 @@ import { styled } from 'styled-components'; -import { Category } from '../../../../types/types'; -import { CATEGORIES } from '../../../../constants/constants'; +import { WorkCategory } from '../../../../types/types'; +import { WORK_CATEGORIES } from '../../../../constants/constants'; import { useQueryClient } from '@tanstack/react-query'; import { usePrefetchWorkList } from '../../../../hooks/queries/usePrefetchWorkList'; import { WORK_KEYS } from '../../../../constants/QueryKey'; interface CategoriesSectionProps { - category: Category; - setCategory: React.Dispatch>; + category: WorkCategory; + setCategory: React.Dispatch>; } const CategoriesSection = ({ category, setCategory }: CategoriesSectionProps) => { const queryClient = useQueryClient(); const { prefetchWorkList } = usePrefetchWorkList(); - const handleClick = (name: Category) => { + const handleClick = (name: WorkCategory) => { queryClient.removeQueries({ queryKey: WORK_KEYS.all }); prefetchWorkList(category, 1); setCategory(name); @@ -21,7 +21,7 @@ const CategoriesSection = ({ category, setCategory }: CategoriesSectionProps) => return ( - {CATEGORIES.map((item) => ( + {WORK_CATEGORIES.map((item) => ( handleClick(item)} selected={category === item}> {item} diff --git a/src/pages/Work/components/workDetail/WorkInfoSection.tsx b/src/pages/Work/components/workDetail/WorkInfoSection.tsx index c818630..7ebb7d2 100644 --- a/src/pages/Work/components/workDetail/WorkInfoSection.tsx +++ b/src/pages/Work/components/workDetail/WorkInfoSection.tsx @@ -5,9 +5,21 @@ interface WorkInfoSectionProps { } const WorkInfoSection = ({ data }: WorkInfoSectionProps) => { + const mappedCategory = (() => { + switch (data.category) { + case 'UXUI': + return 'UX/UI'; + case 'ILLUSTRATION': + return 'ILLUST'; + case 'BX': + return 'BRAND'; + default: + return data.category; + } + })(); return ( - {data.category} + {mappedCategory} 제목 : {data.title} {data.subtitle} @@ -32,7 +44,9 @@ const WorkInfoWrapper = styled.section` const WorkCategory = styled.span` margin-bottom: 6rem; - font-size: 5rem; + font-size: 3rem; + font-style: normal; + font-weight: 900; line-height: 120%; color: ${({ theme }) => theme.colors.primaryBlue}; `; @@ -46,9 +60,12 @@ const WorkAuthorInfo = styled.div` const AuthorSpan = styled.span` font-size: 1.6rem; + font-style: normal; + font-weight: 700; line-height: 100%; &.studentId { + font-weight: 500; color: #7ca2b0; } `; @@ -56,7 +73,9 @@ const AuthorSpan = styled.span` const WorkTitle = styled.span` margin-bottom: 2rem; - font-size: 3.2rem; + font-size: 3rem; + font-style: normal; + font-weight: 900; line-height: 120%; `; @@ -64,7 +83,9 @@ const WorkSubtitle = styled.span` margin-bottom: 4rem; font-size: 1.6rem; - line-height: 120%; + font-style: normal; + font-weight: 700; + line-height: 100%; `; const WorkBody = styled.span` diff --git a/src/types/types.ts b/src/types/types.ts index eb404f1..a8114b4 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -1,6 +1,8 @@ -import { CATEGORIES } from '../constants/constants'; +import { CATEGORIES, DETAIL_RESPONSE_CATEGORIES, WORK_CATEGORIES } from '../constants/constants'; export type Category = (typeof CATEGORIES)[number]; +export type WorkCategory = (typeof WORK_CATEGORIES)[number]; +export type DetailWorkCategory = (typeof DETAIL_RESPONSE_CATEGORIES)[number]; export interface ResponseType> { isSuccess: boolean; @@ -20,7 +22,7 @@ export type GuestBookListResponseType = ResponseType<{ }>; export type WorkListRequestType = { - category: Category; + category: WorkCategory; currentPage: number; }; @@ -49,7 +51,7 @@ export type WorkDetailType = { studentName: string; studentId: string; contact: string; - category: Category; + category: DetailWorkCategory; title: string; subtitle: string; description: string;