Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WORKS] 폰트 및 카테고리명 수정 #40

Merged
merged 2 commits into from
Oct 17, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/constants/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
13 changes: 10 additions & 3 deletions src/hooks/queries/useGetWorkList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions src/pages/Work/Work.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
12 changes: 6 additions & 6 deletions src/pages/Work/components/mobile/MobileCategoriesSection.tsx
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/pages/Work/components/mobile/MobileHeader.tsx
Original file line number Diff line number Diff line change
@@ -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) => {
Expand Down
19 changes: 18 additions & 1 deletion src/pages/Work/components/mobile/MobileWorkInfoSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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};
`;
Expand All @@ -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;
}
`;
Expand Down
12 changes: 6 additions & 6 deletions src/pages/Work/components/work/CategoriesSection.tsx
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
29 changes: 25 additions & 4 deletions src/pages/Work/components/workDetail/WorkInfoSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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};
`;
Expand All @@ -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`
Expand Down
8 changes: 5 additions & 3 deletions src/types/types.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -20,7 +22,7 @@ export type GuestBookListResponseType = ResponseType<{
}>;

export type WorkListRequestType = {
category: Category;
category: WorkCategory;
currentPage: number;
};

Expand Down Expand Up @@ -49,7 +51,7 @@ export type WorkDetailType = {
studentName: string;
studentId: string;
contact: string;
category: Category;
category: DetailWorkCategory;
title: string;
subtitle: string;
description: string;
Expand Down
Loading