Merge branch 'develop' into feat/#41-about-qa

GCVD-2024 · Oct 17, 2024 · d971b08 · d971b08
2 parents 971393a + d6da3f4
commit d971b08
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 28 deletions.
diff --git 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
@@ -20,14 +20,21 @@ const getWorkList = async (category: string, currentPage: number) => {
   const res = await get<WorkListResponseType>(
     `work?category=${mappedCategory}&currentPage=${currentPage}`
   );
-  console.log('API Response:', res);
   return res.result.works as WorkListType[];
 };
 
 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
@@ -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<Category>('ALL');
+  const [category, setCategory] = useState<WorkCategory>('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
@@ -1,27 +1,27 @@
 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<React.SetStateAction<Category>>;
+  category: WorkCategory;
+  setCategory: React.Dispatch<React.SetStateAction<WorkCategory>>;
 }
 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);
   };
 
   return (
     <MobileCategoriesWrapper>
-      {CATEGORIES.map((item) => (
+      {WORK_CATEGORIES.map((item) => (
         <CategoriesItem key={item} onClick={() => handleClick(item)} selected={category === item}>
           {item}
         </CategoriesItem>

diff --git 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<React.SetStateAction<Category>>;
+  category: WorkCategory;
+  setCategory: React.Dispatch<React.SetStateAction<WorkCategory>>;
 }
 
 const MobileHeader = ({ category, setCategory }: MobileHeaderProps) => {

diff --git 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 (
     <WorkInfoWrapper>
       <MobileCategoryWrapper>
-        <WorkCategory>{data.category}</WorkCategory>
+        <WorkCategory>{mappedCategory}</WorkCategory>
         <WorkAuthorInfo>
           <AuthorSpan>{data.studentName}</AuthorSpan>
           <AuthorSpan className="studentId">{data.studentId}</AuthorSpan>
@@ -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
@@ -1,27 +1,27 @@
 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<React.SetStateAction<Category>>;
+  category: WorkCategory;
+  setCategory: React.Dispatch<React.SetStateAction<WorkCategory>>;
 }
 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);
   };
 
   return (
     <CategoriesWrapper>
-      {CATEGORIES.map((item) => (
+      {WORK_CATEGORIES.map((item) => (
         <CategoriesItem key={item} onClick={() => handleClick(item)} selected={category === item}>
           {item}
         </CategoriesItem>

diff --git 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 (
     <WorkInfoWrapper>
-      <WorkCategory>{data.category}</WorkCategory>
+      <WorkCategory>{mappedCategory}</WorkCategory>
       <WorkTitle>제목 : {data.title}</WorkTitle>
       <WorkSubtitle>{data.subtitle}</WorkSubtitle>
       <WorkAuthorInfo>
@@ -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,25 +60,32 @@ 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;
   }
 `;
 
 const WorkTitle = styled.span`
   margin-bottom: 2rem;
 
-  font-size: 3.2rem;
+  font-size: 3rem;
+  font-style: normal;
+  font-weight: 900;
   line-height: 120%;
 `;
 
 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
@@ -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<T = Record<string, object>> {
   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;