From cb36c90389b04499c9ef13a2d78a68ec5fe6bf0a Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 30 Apr 2024 03:25:11 +0900 Subject: [PATCH 01/17] =?UTF-8?q?refactor:=20#94=20=ED=8F=AC=ED=8A=B8?= =?UTF-8?q?=ED=8F=B4=EB=A6=AC=EC=98=A4=20=EB=AA=A9=EB=A1=9D=20=EB=AC=B4?= =?UTF-8?q?=ED=95=9C=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=A1=B0=ED=9A=8C=20API?= =?UTF-8?q?=20=ED=95=A8=EC=88=98=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 이전: readPortfolioList - 이후: readInfinitePortfolioList --- src/service/index.ts | 4 ++-- src/service/portfolio/portfolio.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/service/index.ts b/src/service/index.ts index a2a5273a..faf15c1f 100644 --- a/src/service/index.ts +++ b/src/service/index.ts @@ -18,7 +18,7 @@ import { } from './recruit/detail'; import { readProfile, updateProfile } from './user/Profile'; import { readSkillList, readRoleList } from './search/search'; -import { readPortfolio, readPortfolioList } from './portfolio/portfolio'; +import { readPortfolio, readInfinitePortfolioList } from './portfolio/portfolio'; import { postingRecruit, getRoleKeyword, @@ -47,7 +47,7 @@ export { readSkillList, readRoleList, readPortfolio, - readPortfolioList, + readInfinitePortfolioList, getPostingData, getApplyData, applyRole, diff --git a/src/service/portfolio/portfolio.ts b/src/service/portfolio/portfolio.ts index 8499ea55..79b051c5 100644 --- a/src/service/portfolio/portfolio.ts +++ b/src/service/portfolio/portfolio.ts @@ -14,7 +14,7 @@ export const readPortfolio = async (portfolioId: string) => { } }; -export const readPortfolioList = async ({ +export const readInfinitePortfolioList = async ({ size, pageParam, }: { From 449ee5b769102dd9075488ecf0a7153ca1606a11 Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 30 Apr 2024 03:26:07 +0900 Subject: [PATCH 02/17] =?UTF-8?q?refactor:=20#94=20=ED=8F=AC=ED=8A=B8?= =?UTF-8?q?=ED=8F=B4=EB=A6=AC=EC=98=A4=20=EB=AA=A9=EB=A1=9D=20=EB=AC=B4?= =?UTF-8?q?=ED=95=9C=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=A1=B0=ED=9A=8C=20API?= =?UTF-8?q?=20=ED=98=B8=EC=B6=9C=20=EC=BB=A4=EC=8A=A4=ED=85=80=20=ED=9B=85?= =?UTF-8?q?=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 이전: useReadPortfolio - 이후: useReadInfinitePortfolioList --- src/hooks/index.ts | 4 ++-- src/hooks/usePortfolio.ts | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/hooks/index.ts b/src/hooks/index.ts index beb3c95e..e2eb4769 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -11,7 +11,7 @@ import { useReadProfile, useUpdateProfile } from './useProfile'; import useDebounce from './useDebounce'; import useValid from './useValid'; import { useReadSkillList, useReadRoleList } from './useSearch'; -import { useReadPortfolio, useReadPortfolioList } from './usePortfolio'; +import { useReadPortfolio, useReadInfinitePortfolioList } from './usePortfolio'; import useIntersection from './useIntersection'; import { useBookmark } from './useBookMark'; import useLogin from './useLogin'; @@ -32,7 +32,7 @@ export { useReadSkillList, useReadRoleList, useReadPortfolio, - useReadPortfolioList, + useReadInfinitePortfolioList, useIntersection, useBookmark, useLogin, diff --git a/src/hooks/usePortfolio.ts b/src/hooks/usePortfolio.ts index 575dd7cc..04eab6a2 100644 --- a/src/hooks/usePortfolio.ts +++ b/src/hooks/usePortfolio.ts @@ -1,9 +1,9 @@ import { useQuery, useInfiniteQuery } from '@tanstack/react-query'; -import { readPortfolio, readPortfolioList } from '../service'; +import { readPortfolio, readInfinitePortfolioList } from '../service'; const portfolioKeys = { readPortfolio: (portfolioId: string) => ['readPortfolio', portfolioId], - readPortfolioList: (size: number) => ['readProfile', size], + readInfinitePortfolioList: (size: number) => ['readInfinitePortfolioList', size], }; /** @@ -19,10 +19,10 @@ export const useReadPortfolio = (portfolioId: string) => { /** * @description 포트폴리오 목록 무한스크롤 조회 API를 호출하는 hook입니다. */ -export const useReadPortfolioList = (size: number) => { +export const useReadInfinitePortfolioList = (size: number) => { return useInfiniteQuery({ - queryKey: portfolioKeys.readPortfolioList(size), - queryFn: ({ pageParam }) => readPortfolioList({ size, pageParam }), + queryKey: portfolioKeys.readInfinitePortfolioList(size), + queryFn: ({ pageParam }) => readInfinitePortfolioList({ size, pageParam }), initialPageParam: 1, getNextPageParam: lastPage => { if (lastPage?.pageInfo.hasNextPage) { From f3ad94bfe093b9fe5d5ecaab2973d4d4669fec1e Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 30 Apr 2024 03:27:58 +0900 Subject: [PATCH 03/17] =?UTF-8?q?refactor:=20#94=20=ED=8F=AC=ED=8A=B8?= =?UTF-8?q?=ED=8F=B4=EB=A6=AC=EC=98=A4=20=EB=AA=A9=EB=A1=9D=20=EB=AC=B4?= =?UTF-8?q?=ED=95=9C=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=A1=B0=ED=9A=8C=20fet?= =?UTF-8?q?ch=20=EC=9E=AC=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 이유: 포트폴리오 목록 무한스크롤 조회 API 함수 및 함수 호출 커스텀 훅 명 변경 --- src/pages/profile/edit/ProfileEditPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/profile/edit/ProfileEditPage.tsx b/src/pages/profile/edit/ProfileEditPage.tsx index 70a27298..a4c12355 100644 --- a/src/pages/profile/edit/ProfileEditPage.tsx +++ b/src/pages/profile/edit/ProfileEditPage.tsx @@ -31,7 +31,7 @@ import { useIntersection, } from '../../../hooks'; import { useNavigate } from 'react-router-dom'; -import { useReadPortfolioList } from '../../../hooks/usePortfolio'; +import { useReadInfinitePortfolioList } from '../../../hooks/usePortfolio'; interface FormValues { nickname?: string; @@ -218,7 +218,7 @@ const ProfileEditPage = () => { hasNextPage, isFetching, isSuccess: isPortfolioSuccess, - } = useReadPortfolioList(12); + } = useReadInfinitePortfolioList(12); const portfolioList = useMemo( () => (data ? data.pages.flatMap(response => response?.portfolios) : []), [data] From 105e9d01ca157b08b12b0bbfe41dabf24a4961df Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 30 Apr 2024 03:56:32 +0900 Subject: [PATCH 04/17] =?UTF-8?q?style:=20#94=20=ED=83=AD=20=EB=A9=94?= =?UTF-8?q?=EB=89=B4=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/tabMenu/TabMenu.styled.ts | 46 ++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 src/components/tabMenu/TabMenu.styled.ts diff --git a/src/components/tabMenu/TabMenu.styled.ts b/src/components/tabMenu/TabMenu.styled.ts new file mode 100644 index 00000000..d8918ac6 --- /dev/null +++ b/src/components/tabMenu/TabMenu.styled.ts @@ -0,0 +1,46 @@ +import styled from 'styled-components'; + +const TabMenuLayout = styled.div` + display: flex; + flex-direction: row; + align-items: flex-end; +`; + +const TabMenuList = styled.ul` + display: flex; + flex-direction: row; + color: var(--State-unactive, var(--, #8e8e8e)); + + /* Body/body1/medium */ + font-size: 1.6rem; + font-weight: 500; + line-height: 1.9rem; + letter-spacing: 0.0032rem; +`; + +const TabMenuItem = styled.li<{ $clicked?: boolean }>` + display: flex; + flex: 1; + justify-content: center; + align-items: center; + width: 11.6rem; // width: clamp(45%, 11.6rem, 75%); + height: 3.6rem; + border-radius: 0.4rem 0.4rem 0rem 0rem; + border: ${props => (props.$clicked ? '0.1rem solid #373f41' : '0.1rem solid #8E8E8E')}; + border-bottom: ${props => (props.$clicked ? '0' : '0.1rem solid #373f41')}; + background: ${props => !props.$clicked && '#F6F6F6'}; + color: ${props => !props.$clicked && '#8E8E8E'}; + cursor: pointer; +`; + +const TabMenuLine = styled.hr` + all: unset; + display: flex; + height: 0.1rem; + background: #373f41; + width: 100%; +`; + +const S = { TabMenuLayout, TabMenuList, TabMenuItem, TabMenuLine }; + +export default S; From 05f6dd055528c511748609ad755e10d1fad353f5 Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 30 Apr 2024 03:56:48 +0900 Subject: [PATCH 05/17] =?UTF-8?q?feat:=20#94=20=ED=83=AD=20=EB=A9=94?= =?UTF-8?q?=EB=89=B4=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/index.ts | 2 ++ src/components/tabMenu/TabMenu.tsx | 33 ++++++++++++++++++++++++++++++ 2 files changed, 35 insertions(+) create mode 100644 src/components/tabMenu/TabMenu.tsx diff --git a/src/components/index.ts b/src/components/index.ts index e5280413..89e8cdc2 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -140,6 +140,7 @@ import ApplyRole from './recruit/role/ApplyRole'; import OpenChatModal from './recruit/applicants/modal/OpenChatModal'; import Toast from './recruit/applicants/toast/Toast'; import NeedLogin from './recruit/recruitDetail/modal/needLogin/NeedLogin'; +import TabMenu from './tabMenu/TabMenu'; export { Header, @@ -275,4 +276,5 @@ export { OpenChatModal, Toast, NeedLogin, + TabMenu, }; diff --git a/src/components/tabMenu/TabMenu.tsx b/src/components/tabMenu/TabMenu.tsx new file mode 100644 index 00000000..b52c87ba --- /dev/null +++ b/src/components/tabMenu/TabMenu.tsx @@ -0,0 +1,33 @@ +import React, { useState } from 'react'; +import S from './TabMenu.styled'; + +interface TabMenu { + readonly tabList: string[]; +} + +const TabMenu = ({ tabList }: TabMenu) => { + const [tab, setTab] = useState(tabList[0]); + + const clickedHandler: React.MouseEventHandler = e => { + const tab = e.target as HTMLButtonElement; + if (!tab.textContent) { + throw new Error('No Content'); + } + setTab(tab.textContent); + }; + + return ( + + + {tabList.map((currentTab, index) => ( + + {currentTab} + + ))} + + + + ); +}; + +export default TabMenu; From d3da7c6b4ae1a020f58e56145ed8b6d41f6d4135 Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 30 Apr 2024 03:59:46 +0900 Subject: [PATCH 06/17] =?UTF-8?q?feat:=20#94=20=ED=8F=AC=ED=8A=B8=ED=8F=B4?= =?UTF-8?q?=EB=A6=AC=EC=98=A4=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=A1=B0=ED=9A=8C=20=EC=97=94=EB=93=9C?= =?UTF-8?q?=ED=8F=AC=EC=9D=B8=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/service/endPoint.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/service/endPoint.ts b/src/service/endPoint.ts index ce8d29f5..c6000e3b 100644 --- a/src/service/endPoint.ts +++ b/src/service/endPoint.ts @@ -29,6 +29,7 @@ export const EndPoint = { /* portfolio */ PORTFOLIO: { read: (portfolioId: string) => `/portfolio/${portfolioId}`, + readPortfolioList: '/portfolio', }, /* recruit */ From 36523074209acab00b9bf19f07f7477e76ea7280 Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 30 Apr 2024 04:00:28 +0900 Subject: [PATCH 07/17] =?UTF-8?q?feat:=20#94=20=ED=8F=AC=ED=8A=B8=ED=8F=B4?= =?UTF-8?q?=EB=A6=AC=EC=98=A4=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=A1=B0=ED=9A=8C=20API=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/service/index.ts | 7 ++++++- src/service/portfolio/portfolio.ts | 25 +++++++++++++++++++++++++ 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/src/service/index.ts b/src/service/index.ts index faf15c1f..769b491a 100644 --- a/src/service/index.ts +++ b/src/service/index.ts @@ -18,7 +18,11 @@ import { } from './recruit/detail'; import { readProfile, updateProfile } from './user/Profile'; import { readSkillList, readRoleList } from './search/search'; -import { readPortfolio, readInfinitePortfolioList } from './portfolio/portfolio'; +import { + readPortfolio, + readInfinitePortfolioList, + readPaginationPortfolioList, +} from './portfolio/portfolio'; import { postingRecruit, getRoleKeyword, @@ -48,6 +52,7 @@ export { readRoleList, readPortfolio, readInfinitePortfolioList, + readPaginationPortfolioList, getPostingData, getApplyData, applyRole, diff --git a/src/service/portfolio/portfolio.ts b/src/service/portfolio/portfolio.ts index 79b051c5..effffd69 100644 --- a/src/service/portfolio/portfolio.ts +++ b/src/service/portfolio/portfolio.ts @@ -38,3 +38,28 @@ export const readInfinitePortfolioList = async ({ return null; } }; + +export const readPaginationPortfolioList = async ({ + size, + pageParam, +}: { + size: number; + pageParam: number; +}) => { + try { + const response = await axiosAuthInstance.get( + EndPoint.PORTFOLIO.readPortfolioList, + { + params: { + size: size, + page: pageParam, + }, + } + ); + + return response; + } catch (error) { + console.error(error); + return null; + } +}; From 99d20126ff15822fe7c298d60e4365014242162e Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 30 Apr 2024 04:00:46 +0900 Subject: [PATCH 08/17] =?UTF-8?q?feat:=20#94=20=ED=8F=AC=ED=8A=B8=ED=8F=B4?= =?UTF-8?q?=EB=A6=AC=EC=98=A4=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=A1=B0=ED=9A=8C=20API=20=ED=98=B8?= =?UTF-8?q?=EC=B6=9C=20=EC=BB=A4=EC=8A=A4=ED=85=80=20=ED=9B=85=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/index.ts | 7 ++++++- src/hooks/usePortfolio.ts | 16 ++++++++++++++-- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/hooks/index.ts b/src/hooks/index.ts index e2eb4769..c2870206 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -11,7 +11,11 @@ import { useReadProfile, useUpdateProfile } from './useProfile'; import useDebounce from './useDebounce'; import useValid from './useValid'; import { useReadSkillList, useReadRoleList } from './useSearch'; -import { useReadPortfolio, useReadInfinitePortfolioList } from './usePortfolio'; +import { + useReadPortfolio, + useReadInfinitePortfolioList, + usePaginationPortfolioList, +} from './usePortfolio'; import useIntersection from './useIntersection'; import { useBookmark } from './useBookMark'; import useLogin from './useLogin'; @@ -33,6 +37,7 @@ export { useReadRoleList, useReadPortfolio, useReadInfinitePortfolioList, + usePaginationPortfolioList, useIntersection, useBookmark, useLogin, diff --git a/src/hooks/usePortfolio.ts b/src/hooks/usePortfolio.ts index 04eab6a2..8a57ee36 100644 --- a/src/hooks/usePortfolio.ts +++ b/src/hooks/usePortfolio.ts @@ -1,9 +1,10 @@ -import { useQuery, useInfiniteQuery } from '@tanstack/react-query'; -import { readPortfolio, readInfinitePortfolioList } from '../service'; +import { useQuery, useInfiniteQuery, keepPreviousData } from '@tanstack/react-query'; +import { readPortfolio, readInfinitePortfolioList, readPaginationPortfolioList } from '../service'; const portfolioKeys = { readPortfolio: (portfolioId: string) => ['readPortfolio', portfolioId], readInfinitePortfolioList: (size: number) => ['readInfinitePortfolioList', size], + readPaginationPortfolioList: (size: number) => ['readPaginationPortfolioList', size], }; /** @@ -31,3 +32,14 @@ export const useReadInfinitePortfolioList = (size: number) => { }, }); }; + +/** + * @description 포트폴리오 목록 페이지네이션 조회 API를 호출하는 hook입니다. + */ +export const usePaginationPortfolioList = (size: number, pageParam: number) => { + return useQuery({ + queryKey: portfolioKeys.readPaginationPortfolioList(size), + queryFn: () => readPaginationPortfolioList({ size, pageParam }), + placeholderData: keepPreviousData, + }); +}; From 59386813685371fe461d4331696ab43b47076413 Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 30 Apr 2024 04:17:20 +0900 Subject: [PATCH 09/17] =?UTF-8?q?style:=20#94=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EB=84=A4=EC=9D=B4=EC=85=98=20=EA=B3=B5=ED=86=B5=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=EB=A7=81=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 이전: margin-top: 12rem; - 이후: margin: 12rem auto; --- src/components/pagination/Pagination.styled.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/pagination/Pagination.styled.ts b/src/components/pagination/Pagination.styled.ts index 28784c08..60a9a17a 100644 --- a/src/components/pagination/Pagination.styled.ts +++ b/src/components/pagination/Pagination.styled.ts @@ -1,7 +1,7 @@ import styled from 'styled-components'; const Pagination = styled.article` - margin-top: 12rem; + margin: 12rem auto; margin-bottom: 22rem; button { background-color: transparent; From 373cb1a02e8055c5c38c235aeb989a50c985bd88 Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 30 Apr 2024 04:17:41 +0900 Subject: [PATCH 10/17] =?UTF-8?q?style:=20#94=20=ED=8F=AC=ED=8A=B8?= =?UTF-8?q?=ED=8F=B4=EB=A6=AC=EC=98=A4=20=EA=B4=80=EB=A6=AC=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PortfolioManagementPage.styled.ts | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 src/pages/portfolio/management/PortfolioManagementPage.styled.ts diff --git a/src/pages/portfolio/management/PortfolioManagementPage.styled.ts b/src/pages/portfolio/management/PortfolioManagementPage.styled.ts new file mode 100644 index 00000000..44aa69a2 --- /dev/null +++ b/src/pages/portfolio/management/PortfolioManagementPage.styled.ts @@ -0,0 +1,48 @@ +import styled from 'styled-components'; + +const PortfolioManagementLayout = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + margin: 0 auto; + // margin-bottom: 15rem; + width: clamp(45%, 96rem, 75%); // width: 96rem; + color: var(--Light-Black, #373f41); + + h2 { + color: var(--Text-textColor1, #151515); + /* Headline/h2 */ + font-size: 2.4rem; + font-weight: 700; + line-height: 2.9rem; /* 120.833% */ + letter-spacing: 0.0048rem; + } +`; + +const PortfolioManagementHeader = styled.header` + display: flex; + flex-direction: row; + margin-top: 8rem; + margin-bottom: 2rem; +`; + +const PortfolioManagementGrid = styled.div` + display: grid; + // margin: 8rem 0; + margin-top: 8rem; + grid-template-columns: repeat(auto-fill, minmax(22.5rem, 1fr)); + grid-auto-rows: minmax(12.7rem, auto); + row-gap: 4rem; + column-gap: 2rem; + + /* 스크롤바 숨기기 */ + overflow-y: auto; + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + &::-webkit-scrollbar { + display: none; /* Chrome, Safari, Opera*/ +`; + +const S = { PortfolioManagementLayout, PortfolioManagementHeader, PortfolioManagementGrid }; + +export default S; From 93232fdbaa7cc5e38df3f756da5e594b2f35afc3 Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 30 Apr 2024 04:18:10 +0900 Subject: [PATCH 11/17] =?UTF-8?q?feat:=20#94=20=ED=8F=AC=ED=8A=B8=ED=8F=B4?= =?UTF-8?q?=EB=A6=AC=EC=98=A4=20=EA=B4=80=EB=A6=AC=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/index.ts | 2 + .../management/PortfolioManagmentPage.tsx | 41 +++++++++++++++++++ 2 files changed, 43 insertions(+) create mode 100644 src/pages/portfolio/management/PortfolioManagmentPage.tsx diff --git a/src/pages/index.ts b/src/pages/index.ts index 32909657..fab60298 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -24,6 +24,7 @@ import { userData } from './profile/userData'; import RecruitPostingApply from './recruit/recruitManagePage/RecruitPostingApply'; import RecruitMyPostings from './recruit/recruitManagePage/RecruitMyPostings'; import CompleteSignUpPage from './account/complete/CompleteSignUpPage'; +import PortfolioManagementPage from './portfolio/management/PortfolioManagmentPage'; export { MainPage, @@ -53,4 +54,5 @@ export { RecruitPostingApply, RecruitMyPostings, CompleteSignUpPage, + PortfolioManagementPage, }; diff --git a/src/pages/portfolio/management/PortfolioManagmentPage.tsx b/src/pages/portfolio/management/PortfolioManagmentPage.tsx new file mode 100644 index 00000000..a0b438b6 --- /dev/null +++ b/src/pages/portfolio/management/PortfolioManagmentPage.tsx @@ -0,0 +1,41 @@ +import React, { useState } from 'react'; +import S from './PortfolioManagementPage.styled'; +import { Pagination, PortfolioCard, PrimaryBtn, TabMenu } from '../../../components'; +import { useNavigate } from 'react-router-dom'; +import { portfolioData } from '../portfolioData'; + +const tabList = ['전체', '프로젝트', '스터디', '공모전']; + +const PortfolioManagementPage = () => { + const navigate = useNavigate(); + + const [pageNumber, setPageNumber] = useState(1); + + return ( + + +

포트폴리오

+ navigate('/portfolio/edit')} + /> + + + + {portfolioData && + portfolioData.otherPortfolios?.map( + portfolio => portfolio && + )} + + + + ); +}; + +export default PortfolioManagementPage; From b35202bbb4d887d70d280c3a43ef817d8c1ffad1 Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 30 Apr 2024 04:18:31 +0900 Subject: [PATCH 12/17] =?UTF-8?q?feat:=20#94=20=ED=8F=AC=ED=8A=B8=ED=8F=B4?= =?UTF-8?q?=EB=A6=AC=EC=98=A4=20=EA=B4=80=EB=A6=AC=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/main.tsx b/src/main.tsx index 19881c81..79b8a024 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -20,6 +20,7 @@ import { RecruitPostingApply, RecruitMyPostings, CompleteSignUpPage, + PortfolioManagementPage, } from './pages/index.ts'; import './globalStyle.css'; @@ -98,6 +99,10 @@ const router = createBrowserRouter([ path: 'portfolio/:portfolioId?', element: , }, + { + path: 'portfolio/management', + element: , + }, ], }, ]); From 2f6b09e1b0d7416de902a211a3261ddd39e0761e Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 30 Apr 2024 04:29:04 +0900 Subject: [PATCH 13/17] =?UTF-8?q?feat:=20#94=20PageInfo=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EB=82=B4=20totalContents,=20totalPages=20=EC=98=B5?= =?UTF-8?q?=EC=85=94=EB=84=90=20=ED=94=84=EB=A1=9C=ED=8D=BC=ED=8B=B0=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/types/response.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/types/response.ts b/src/types/response.ts index a8c7345f..0ef07b66 100644 --- a/src/types/response.ts +++ b/src/types/response.ts @@ -30,4 +30,6 @@ export interface PageInfo { page: number; size: number; hasNextPage?: boolean; + totalContents?: number; + totalPages?: number; } From cc85fecef4f9bc8c07644a55627a66f7f97a765f Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 30 Apr 2024 04:33:28 +0900 Subject: [PATCH 14/17] =?UTF-8?q?feat:=20#94=20=ED=8F=AC=ED=8A=B8=ED=8F=B4?= =?UTF-8?q?=EB=A6=AC=EC=98=A4=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=A1=B0=ED=9A=8C=20fetch?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../management/PortfolioManagmentPage.tsx | 49 ++++++++++--------- 1 file changed, 26 insertions(+), 23 deletions(-) diff --git a/src/pages/portfolio/management/PortfolioManagmentPage.tsx b/src/pages/portfolio/management/PortfolioManagmentPage.tsx index a0b438b6..f5c94bc1 100644 --- a/src/pages/portfolio/management/PortfolioManagmentPage.tsx +++ b/src/pages/portfolio/management/PortfolioManagmentPage.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import S from './PortfolioManagementPage.styled'; import { Pagination, PortfolioCard, PrimaryBtn, TabMenu } from '../../../components'; import { useNavigate } from 'react-router-dom'; -import { portfolioData } from '../portfolioData'; +import { usePaginationPortfolioList } from '../../../hooks'; const tabList = ['전체', '프로젝트', '스터디', '공모전']; @@ -10,31 +10,34 @@ const PortfolioManagementPage = () => { const navigate = useNavigate(); const [pageNumber, setPageNumber] = useState(1); + const { data: portfolioList, isSuccess } = usePaginationPortfolioList(16, pageNumber); return ( - - -

포트폴리오

- navigate('/portfolio/edit')} + isSuccess && ( + + +

포트폴리오

+ navigate('/portfolio/edit')} + /> + + + + {portfolioList && + portfolioList.portfolios?.map(portfolio => ( + + ))} + + - - - - {portfolioData && - portfolioData.otherPortfolios?.map( - portfolio => portfolio && - )} - - - + + ) ); }; From 154f2bc1a45470ac5414590bae21cb2c3d2a74f9 Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 30 Apr 2024 13:13:50 +0900 Subject: [PATCH 15/17] =?UTF-8?q?feat:=20#94=20=ED=8F=AC=ED=8A=B8=ED=8F=B4?= =?UTF-8?q?=EB=A6=AC=EC=98=A4=20=EA=B4=80=EB=A6=AC=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=82=B4=20=ED=83=AD=20=EB=AA=A9=EB=A1=9D=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/portfolio/management/PortfolioManagmentPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/portfolio/management/PortfolioManagmentPage.tsx b/src/pages/portfolio/management/PortfolioManagmentPage.tsx index f5c94bc1..3f57cc1b 100644 --- a/src/pages/portfolio/management/PortfolioManagmentPage.tsx +++ b/src/pages/portfolio/management/PortfolioManagmentPage.tsx @@ -4,7 +4,7 @@ import { Pagination, PortfolioCard, PrimaryBtn, TabMenu } from '../../../compone import { useNavigate } from 'react-router-dom'; import { usePaginationPortfolioList } from '../../../hooks'; -const tabList = ['전체', '프로젝트', '스터디', '공모전']; +const tabList = ['전체']; const PortfolioManagementPage = () => { const navigate = useNavigate(); From 83d8c3607f0839858d880d2a8b941ad97fdc70a8 Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 30 Apr 2024 13:41:06 +0900 Subject: [PATCH 16/17] =?UTF-8?q?style:=20#94=20=ED=8F=AC=ED=8A=B8?= =?UTF-8?q?=ED=8F=B4=EB=A6=AC=EC=98=A4=20=EA=B4=80=EB=A6=AC=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=82=B4=20=ED=8F=AC=ED=8A=B8=ED=8F=B4?= =?UTF-8?q?=EB=A6=AC=EC=98=A4=20=EB=AA=A9=EB=A1=9D=EC=9D=B4=20=EC=A1=B4?= =?UTF-8?q?=EC=9E=AC=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EA=B2=BD?= =?UTF-8?q?=EC=9A=B0=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PortfolioManagementPage.styled.ts | 26 ++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/src/pages/portfolio/management/PortfolioManagementPage.styled.ts b/src/pages/portfolio/management/PortfolioManagementPage.styled.ts index 44aa69a2..068a4029 100644 --- a/src/pages/portfolio/management/PortfolioManagementPage.styled.ts +++ b/src/pages/portfolio/management/PortfolioManagementPage.styled.ts @@ -43,6 +43,30 @@ const PortfolioManagementGrid = styled.div` display: none; /* Chrome, Safari, Opera*/ `; -const S = { PortfolioManagementLayout, PortfolioManagementHeader, PortfolioManagementGrid }; +const PortfolioManagementColumn = styled.div` + position: fixed; + display: flex; + align-items: center; + justify-content: center; + left: 0; + top: 0; + width: 100%; + height: 100%; + + color: var(--State-unactive, #8e8e8e); + + /* Headline/h3 */ + font-size: 2rem; + font-weight: 600; + line-height: 2.4rem; /* 120% */ + letter-spacing: 0.004rem; +`; + +const S = { + PortfolioManagementLayout, + PortfolioManagementHeader, + PortfolioManagementGrid, + PortfolioManagementColumn, +}; export default S; From 34b9b1ee9271b199af3c54c5b6cc8646d5aeb1a3 Mon Sep 17 00:00:00 2001 From: kimsuyeon_0916 Date: Tue, 30 Apr 2024 13:42:01 +0900 Subject: [PATCH 17/17] =?UTF-8?q?feat:=20#94=20=ED=8F=AC=ED=8A=B8=ED=8F=B4?= =?UTF-8?q?=EB=A6=AC=EC=98=A4=20=EA=B4=80=EB=A6=AC=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=82=B4=20=ED=8F=AC=ED=8A=B8=ED=8F=B4=EB=A6=AC?= =?UTF-8?q?=EC=98=A4=20=EB=AA=A9=EB=A1=9D=EC=9D=B4=20=EC=A1=B4=EC=9E=AC?= =?UTF-8?q?=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EA=B2=BD=EC=9A=B0=20?= =?UTF-8?q?=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../management/PortfolioManagmentPage.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/pages/portfolio/management/PortfolioManagmentPage.tsx b/src/pages/portfolio/management/PortfolioManagmentPage.tsx index 3f57cc1b..27d2fa32 100644 --- a/src/pages/portfolio/management/PortfolioManagmentPage.tsx +++ b/src/pages/portfolio/management/PortfolioManagmentPage.tsx @@ -24,12 +24,16 @@ const PortfolioManagementPage = () => { /> - - {portfolioList && - portfolioList.portfolios?.map(portfolio => ( - - ))} - + {!portfolioList?.portfolios.length ? ( + + {portfolioList && + portfolioList.portfolios?.map(portfolio => ( + + ))} + + ) : ( + 아직 작성한 포트폴리오가 없어요 + )}