From 60ae816ea65a0a65f2864d275f6054098684d4c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=80=EC=A7=80?= <103625348+eunji-0623@users.noreply.github.com> Date: Fri, 14 Jun 2024 13:35:04 +0900 Subject: [PATCH 01/30] =?UTF-8?q?Style:=20=EB=82=98=EC=9D=98=20=EB=8C=80?= =?UTF-8?q?=EC=8B=9C=EB=B3=B4=EB=93=9C=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/DashboardList/Dashboard.module.scss | 2 +- .../components/DashboardList/DashboardList.module.scss | 2 +- .../myDashboard/components/Invited/Invited.module.scss | 8 ++++++-- .../components/Invited/Search/Search.module.scss | 7 ++++--- .../components/Invited/Table/Table.module.scss | 2 +- src/pages/myDashboard/index.module.scss | 4 ++++ 6 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/pages/myDashboard/components/DashboardList/Dashboard.module.scss b/src/pages/myDashboard/components/DashboardList/Dashboard.module.scss index 05e9348..58172b2 100644 --- a/src/pages/myDashboard/components/DashboardList/Dashboard.module.scss +++ b/src/pages/myDashboard/components/DashboardList/Dashboard.module.scss @@ -44,7 +44,7 @@ @include mobile { .dashboard, .addDashboard { - width: 260px; + width: 100%; height: 58px; } } diff --git a/src/pages/myDashboard/components/DashboardList/DashboardList.module.scss b/src/pages/myDashboard/components/DashboardList/DashboardList.module.scss index bd18b78..92d85ad 100644 --- a/src/pages/myDashboard/components/DashboardList/DashboardList.module.scss +++ b/src/pages/myDashboard/components/DashboardList/DashboardList.module.scss @@ -35,7 +35,7 @@ @include mobile { .container { - width: 260px; + width: 100%; } .dashboardList { diff --git a/src/pages/myDashboard/components/Invited/Invited.module.scss b/src/pages/myDashboard/components/Invited/Invited.module.scss index 0f74298..f759368 100644 --- a/src/pages/myDashboard/components/Invited/Invited.module.scss +++ b/src/pages/myDashboard/components/Invited/Invited.module.scss @@ -38,10 +38,14 @@ @include mobile { .container { - width: 260px; + width: 100%; } .title { - width: 228px; + width: 100%; + } + + .tableContainer { + width: 100%; } } diff --git a/src/pages/myDashboard/components/Invited/Search/Search.module.scss b/src/pages/myDashboard/components/Invited/Search/Search.module.scss index 7d7ce4b..66202a3 100644 --- a/src/pages/myDashboard/components/Invited/Search/Search.module.scss +++ b/src/pages/myDashboard/components/Invited/Search/Search.module.scss @@ -1,4 +1,5 @@ @use '/src/styles/global.scss' as colors; +@import '/src/styles/utils.scss'; .container { width: 966px; @@ -22,15 +23,15 @@ } } -@media screen and (max-width: 1024px) { +@include tablet { .container { width: 448px; } } -@media screen and (max-width: 768px) { +@include mobile { .container { - width: 228px; + width: 100%; } .searchInput { diff --git a/src/pages/myDashboard/components/Invited/Table/Table.module.scss b/src/pages/myDashboard/components/Invited/Table/Table.module.scss index 379b188..0a05964 100644 --- a/src/pages/myDashboard/components/Invited/Table/Table.module.scss +++ b/src/pages/myDashboard/components/Invited/Table/Table.module.scss @@ -45,7 +45,7 @@ @include mobile { .table { - width: 228px; + width: 100%; } .head { diff --git a/src/pages/myDashboard/index.module.scss b/src/pages/myDashboard/index.module.scss index 00f2e60..7c59bf6 100644 --- a/src/pages/myDashboard/index.module.scss +++ b/src/pages/myDashboard/index.module.scss @@ -32,5 +32,9 @@ grid-row: 2 / span 1; grid-column: 2 / span 2; overflow-x: auto; + + @include mobile { + margin: 40px; + } } } From 02a3d9b6b1a91fea99cb7931afcf12403b13148e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=80=EC=A7=80?= <103625348+eunji-0623@users.noreply.github.com> Date: Fri, 14 Jun 2024 13:45:56 +0900 Subject: [PATCH 02/30] =?UTF-8?q?Style:=20=EB=8C=80=EC=8B=9C=EB=B3=B4?= =?UTF-8?q?=EB=93=9C=20=EC=88=98=EC=A0=95=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/dashboardEdit/MemberEdit/MemberEdit.module.scss | 2 +- src/pages/dashboardEdit/NameEdit/NameEdit.module.scss | 4 ++-- src/pages/dashboardEdit/index.module.scss | 4 ++++ 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/pages/dashboardEdit/MemberEdit/MemberEdit.module.scss b/src/pages/dashboardEdit/MemberEdit/MemberEdit.module.scss index e2d780c..da38d76 100644 --- a/src/pages/dashboardEdit/MemberEdit/MemberEdit.module.scss +++ b/src/pages/dashboardEdit/MemberEdit/MemberEdit.module.scss @@ -72,7 +72,7 @@ @include mobile { .container { - width: 284px; + width: max(100%, 284px); padding: 20px; gap: 25px; } diff --git a/src/pages/dashboardEdit/NameEdit/NameEdit.module.scss b/src/pages/dashboardEdit/NameEdit/NameEdit.module.scss index 04df102..7fd511a 100644 --- a/src/pages/dashboardEdit/NameEdit/NameEdit.module.scss +++ b/src/pages/dashboardEdit/NameEdit/NameEdit.module.scss @@ -83,7 +83,7 @@ @include mobile { .container { - width: 284px; + width: max(284px, 100%); gap: 25px; } @@ -97,7 +97,7 @@ .change { .newNameInput { - width: 244px; + width: max(100%, 244px); height: 42px; } diff --git a/src/pages/dashboardEdit/index.module.scss b/src/pages/dashboardEdit/index.module.scss index a59f530..888221b 100644 --- a/src/pages/dashboardEdit/index.module.scss +++ b/src/pages/dashboardEdit/index.module.scss @@ -53,4 +53,8 @@ padding: 16px 80px; font-size: 16px; } + + .mainContents { + padding: 40px; + } } From f63d91e622b8b4866e0efe0969a3f7abc2942782 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=80=EC=A7=80?= <103625348+eunji-0623@users.noreply.github.com> Date: Fri, 14 Jun 2024 13:49:14 +0900 Subject: [PATCH 03/30] =?UTF-8?q?Style:=20=EB=82=98=EC=9D=98=20=EB=8C=80?= =?UTF-8?q?=EC=8B=9C=EB=B3=B4=EB=93=9C=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/DashboardList/Dashboard.module.scss | 2 +- .../components/DashboardList/DashboardList.module.scss | 2 +- src/pages/myDashboard/components/Invited/Invited.module.scss | 4 ++-- .../myDashboard/components/Invited/Search/Search.module.scss | 2 +- .../myDashboard/components/Invited/Table/Table.module.scss | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/pages/myDashboard/components/DashboardList/Dashboard.module.scss b/src/pages/myDashboard/components/DashboardList/Dashboard.module.scss index 58172b2..ed49633 100644 --- a/src/pages/myDashboard/components/DashboardList/Dashboard.module.scss +++ b/src/pages/myDashboard/components/DashboardList/Dashboard.module.scss @@ -44,7 +44,7 @@ @include mobile { .dashboard, .addDashboard { - width: 100%; + width: max(100%, 260px); height: 58px; } } diff --git a/src/pages/myDashboard/components/DashboardList/DashboardList.module.scss b/src/pages/myDashboard/components/DashboardList/DashboardList.module.scss index 92d85ad..b3a2cf0 100644 --- a/src/pages/myDashboard/components/DashboardList/DashboardList.module.scss +++ b/src/pages/myDashboard/components/DashboardList/DashboardList.module.scss @@ -35,7 +35,7 @@ @include mobile { .container { - width: 100%; + width: max(100%, 260px); } .dashboardList { diff --git a/src/pages/myDashboard/components/Invited/Invited.module.scss b/src/pages/myDashboard/components/Invited/Invited.module.scss index f759368..1c2e5a9 100644 --- a/src/pages/myDashboard/components/Invited/Invited.module.scss +++ b/src/pages/myDashboard/components/Invited/Invited.module.scss @@ -38,11 +38,11 @@ @include mobile { .container { - width: 100%; + width: max(100%, 260px); } .title { - width: 100%; + width: max(100%, 228px); } .tableContainer { diff --git a/src/pages/myDashboard/components/Invited/Search/Search.module.scss b/src/pages/myDashboard/components/Invited/Search/Search.module.scss index 66202a3..0e63037 100644 --- a/src/pages/myDashboard/components/Invited/Search/Search.module.scss +++ b/src/pages/myDashboard/components/Invited/Search/Search.module.scss @@ -31,7 +31,7 @@ @include mobile { .container { - width: 100%; + width: max(100%, 228px); } .searchInput { diff --git a/src/pages/myDashboard/components/Invited/Table/Table.module.scss b/src/pages/myDashboard/components/Invited/Table/Table.module.scss index 0a05964..1a18df8 100644 --- a/src/pages/myDashboard/components/Invited/Table/Table.module.scss +++ b/src/pages/myDashboard/components/Invited/Table/Table.module.scss @@ -45,7 +45,7 @@ @include mobile { .table { - width: 100%; + width: max(100%, 228px); } .head { From 7e1d0f4d533fb135f849a69bee0da8b06c4bbf94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=80=EC=A7=80?= <103625348+eunji-0623@users.noreply.github.com> Date: Fri, 14 Jun 2024 14:00:40 +0900 Subject: [PATCH 04/30] =?UTF-8?q?Style:=20header=20z-index=201=EB=A1=9C=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 --- .../components/GnbHeader/GnbHeader.module.scss | 2 +- src/pages/myDashboard/components/Header/Header.module.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/dashboard.{dashboardid}/components/GnbHeader/GnbHeader.module.scss b/src/pages/dashboard.{dashboardid}/components/GnbHeader/GnbHeader.module.scss index c26b586..253dd66 100644 --- a/src/pages/dashboard.{dashboardid}/components/GnbHeader/GnbHeader.module.scss +++ b/src/pages/dashboard.{dashboardid}/components/GnbHeader/GnbHeader.module.scss @@ -9,7 +9,7 @@ padding: 0 80px 0 40px; border-bottom: 1px solid #d9d9d9e0; background-color: #ffffff; - z-index: 10; + z-index: 1; @include tablet { padding: 0 40px 0 68px; diff --git a/src/pages/myDashboard/components/Header/Header.module.scss b/src/pages/myDashboard/components/Header/Header.module.scss index ee78d96..c563eca 100644 --- a/src/pages/myDashboard/components/Header/Header.module.scss +++ b/src/pages/myDashboard/components/Header/Header.module.scss @@ -10,7 +10,7 @@ align-items: center; padding: 0 80px 0 40px; background: white; - z-index: 10; + z-index: 1; @include tablet { padding: 0 40px 0 40px; } From 9a7b9c003130665ea7b1d0df992f0a2c292b50b8 Mon Sep 17 00:00:00 2001 From: Park Sumin Date: Fri, 14 Jun 2024 15:57:22 +0900 Subject: [PATCH 05/30] =?UTF-8?q?Feat:=20=EC=82=AC=EC=9D=B4=EB=93=9C?= =?UTF-8?q?=EB=B0=94=20=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=9C=A0=EC=A7=80,=20=EC=83=88=EB=A1=9C?= =?UTF-8?q?=EC=9A=B4=20=EB=8C=80=EC=8B=9C=20=EB=B3=B4=EB=93=9C=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=EC=8B=9C=20,context=20=EB=B0=98=EC=98=81=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/sidebar/sidebar.tsx | 13 +++++++--- src/contexts/DashboardContext.tsx | 9 +++++++ src/contexts/UserContext.tsx | 24 +++++++++++++++---- .../components/GnbHeader/GnbHeader.tsx | 7 ++++++ .../components/Members/Members.tsx | 2 +- src/pages/dashboard.{dashboardid}/index.tsx | 2 ++ .../components/utils/useLoginFrom.ts | 1 + src/pages/modal/NewDashModal/NewDashModal.tsx | 18 ++++++++++---- src/pages/myDashboard/index.module.scss | 1 + .../components/Header/Header.module.scss | 2 +- src/pages/mypage/components/Header/Header.tsx | 7 ++++++ 11 files changed, 73 insertions(+), 13 deletions(-) diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index 3ee5ada..be85df7 100644 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -52,7 +52,10 @@ function SideBar() { // 상태 관리 const [dashboardItems, setDashboardItems] = useState([]); - const [currentPage, setCurrentPage] = useState(1); + const [currentPage, setCurrentPage] = useState(() => { + const savedPage = localStorage.getItem('currentPage'); + return savedPage ? Number(savedPage) : 1; + }); const [totalPages, setTotalPages] = useState(1); const [isError, setIsError] = useState(false); const [errorMessage, setErrorMessage] = useState(''); @@ -65,7 +68,7 @@ function SideBar() { useEffect(() => { const fetchData = async () => { try { - const { items: dashboards, totalCount } = await fetchDashboards(1, itemsPerPage); + const { items: dashboards, totalCount } = await fetchDashboards(currentPage, itemsPerPage); setDashboardItems(dashboards); setTotalPages(Math.ceil(totalCount / itemsPerPage)); } catch (error) { @@ -75,7 +78,11 @@ function SideBar() { }; fetchData(); - }, [itemsPerPage]); + }, [itemsPerPage, currentPage]); + + useEffect(() => { + localStorage.setItem('currentPage', currentPage.toString()); + }, [currentPage]); const fetchPageData = async (page: number) => { try { diff --git a/src/contexts/DashboardContext.tsx b/src/contexts/DashboardContext.tsx index 7549767..01e7ece 100644 --- a/src/contexts/DashboardContext.tsx +++ b/src/contexts/DashboardContext.tsx @@ -64,6 +64,15 @@ export function DashboardProvider({ children }: DashboardProviderProps) { } }, [activeTitle]); + useEffect(() => { + // Clear local storage when navigating to /dashboard + if (location.pathname === '/dashboard') { + localStorage.removeItem('activeDashboard'); + localStorage.removeItem('isCreatedByMe'); + localStorage.removeItem('activeTitle'); + } + }, [location.pathname]); + const contextValue = useMemo( () => ({ activeDashboard, diff --git a/src/contexts/UserContext.tsx b/src/contexts/UserContext.tsx index 48bbb4b..046a40e 100644 --- a/src/contexts/UserContext.tsx +++ b/src/contexts/UserContext.tsx @@ -5,7 +5,7 @@ import { ReactNode, useMemo, } from 'react'; -import { useNavigate } from 'react-router-dom'; +import { useNavigate, useLocation } from 'react-router-dom'; import { apiInquireMyInfo } from '../api/apiModule'; /* @@ -27,7 +27,7 @@ export interface UserInfo { interface UserContextProps { userInfo: UserInfo | null; - setUserInfo: (info: UserInfo) => void; + setUserInfo: (info: UserInfo | null) => void; } interface UserProviderProps { @@ -41,12 +41,13 @@ export const UserContext = createContext(null); export function UserProvider({ children }: UserProviderProps) { const [userInfo, setUserInfo] = useState(null); const navigate = useNavigate(); + const location = useLocation(); useEffect(() => { const fetchUserInfo = async () => { try { - const Info = await apiInquireMyInfo(); - setUserInfo(Info); + const info = await apiInquireMyInfo(); + setUserInfo(info); } catch (error) { setUserInfo(null); navigate('/login'); @@ -56,6 +57,21 @@ export function UserProvider({ children }: UserProviderProps) { fetchUserInfo(); }, [navigate]); + useEffect(() => { + const checkAuthOnUrlChange = async () => { + if (userInfo === null) { + try { + const info = await apiInquireMyInfo(); + setUserInfo(info); + } catch (error) { + navigate('/login'); + } + } + }; + + checkAuthOnUrlChange(); + }, [location.pathname, userInfo, navigate]); + const value = useMemo( () => ({ userInfo, setUserInfo }), [userInfo], diff --git a/src/pages/dashboard.{dashboardid}/components/GnbHeader/GnbHeader.tsx b/src/pages/dashboard.{dashboardid}/components/GnbHeader/GnbHeader.tsx index af14302..f4d2e38 100644 --- a/src/pages/dashboard.{dashboardid}/components/GnbHeader/GnbHeader.tsx +++ b/src/pages/dashboard.{dashboardid}/components/GnbHeader/GnbHeader.tsx @@ -13,6 +13,12 @@ import Members from '../Members/Members'; */ function ProfileKebab() { + const context = useContext(UserContext); + if (!context) { + throw new Error('반드시 DashboardProvider 안에서 사용해야 합니다.'); + } + const {setUserInfo} = context; + const navigate = useNavigate(); const myPageClick = () => { @@ -20,6 +26,7 @@ function ProfileKebab() { }; const logoutClick = () => { + setUserInfo(null); localStorage.clear(); // 모든 localStorage 항목을 제거 navigate('/login'); // 페이지 새로고침 }; diff --git a/src/pages/dashboard.{dashboardid}/components/Members/Members.tsx b/src/pages/dashboard.{dashboardid}/components/Members/Members.tsx index d67fb2a..2dcca81 100644 --- a/src/pages/dashboard.{dashboardid}/components/Members/Members.tsx +++ b/src/pages/dashboard.{dashboardid}/components/Members/Members.tsx @@ -108,7 +108,7 @@ function Members({ dashboardId }: { dashboardId: number | undefined }) { key={member.id} isImg={false} nickname={member.nickname} - profileImageUrl={member.profileImageUrl} + profileImageUrl={'#f0f0f0'} /> ))} {extraMembersCount > 0 && ( diff --git a/src/pages/dashboard.{dashboardid}/index.tsx b/src/pages/dashboard.{dashboardid}/index.tsx index c3a2e94..e9580d6 100644 --- a/src/pages/dashboard.{dashboardid}/index.tsx +++ b/src/pages/dashboard.{dashboardid}/index.tsx @@ -4,6 +4,8 @@ import ColumnList from './components/ColumnList/ColumnList'; import styles from './index.module.scss'; function DashboardMain() { + + return (
diff --git a/src/pages/login-signup/components/utils/useLoginFrom.ts b/src/pages/login-signup/components/utils/useLoginFrom.ts index 7581559..914ec25 100644 --- a/src/pages/login-signup/components/utils/useLoginFrom.ts +++ b/src/pages/login-signup/components/utils/useLoginFrom.ts @@ -48,6 +48,7 @@ function useLoginForm() { const response = await apiLoginRequest({ email, password }); setUser(response.user ?? null); navigate('/mydashboard'); // 로그인 성공 시 mydashboard 페이지로 이동 + window.location.reload(); } catch (error) { setIsModalOpen(true); // 로그인 실패 시 모달 창 띄우기 } finally { diff --git a/src/pages/modal/NewDashModal/NewDashModal.tsx b/src/pages/modal/NewDashModal/NewDashModal.tsx index a0b9c29..cf390e5 100644 --- a/src/pages/modal/NewDashModal/NewDashModal.tsx +++ b/src/pages/modal/NewDashModal/NewDashModal.tsx @@ -1,4 +1,4 @@ -import { useCallback, useState } from 'react'; +import { useCallback, useContext, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import ModalContainer from '../ModalContainer/ModalContainer'; import { DeleteBtn } from '../../../components/Btn/Btn'; @@ -6,6 +6,7 @@ import ColorCircle from '../../../components/chip/ColorCircle/ColorCircle'; import { apiCreateDashboards } from '../../../api/apiModule'; import CheckedIcon from '/icon/checked.svg'; import styles from './NewDashModal.module.scss'; +import { DashboardContext } from '../../../contexts/DashboardContext'; /* 대시보드 이름, 색을 선택해서 생성 버튼을 클릭하면 `/dashboard/${id}` 페이지로 이동합니다. @@ -23,9 +24,18 @@ function NewDashModal({ isOpen, setIsOpen }: ModalProps) { const [colorId, setColorId] = useState(null); const [colorValue, setColorValue] = useState(''); const [inputValue, setInputValue] = useState(''); + const context = useContext(DashboardContext); + if (!context) { + throw new Error('반드시 DashboardProvider 안에서 사용해야 합니다.'); + } + const {setActiveTitle, setActiveDashboard, setIsCreateByMe} = context; // /dashboard/{dashboardid}로 이동 - const goDashboard = (id: number) => { + const goDashboard = (id: number, title : string, createdByMe : boolean) => { + setActiveDashboard(id) + setActiveTitle(title); + setIsCreateByMe(createdByMe); + localStorage.setItem('currentPage', '1'); navigate(`/dashboard/${id}`); window.location.reload(); }; @@ -44,14 +54,14 @@ function NewDashModal({ isOpen, setIsOpen }: ModalProps) { try { const response = await apiCreateDashboards(newDashboard); - const { id } = response; + const { id, title, createdByMe } = response; if (response) { setIsOpen(false); } if (id) { - goDashboard(id); + goDashboard(id, title, createdByMe); } } catch (error) { throw new Error('error'); diff --git a/src/pages/myDashboard/index.module.scss b/src/pages/myDashboard/index.module.scss index f9925ac..f3741a7 100644 --- a/src/pages/myDashboard/index.module.scss +++ b/src/pages/myDashboard/index.module.scss @@ -1,4 +1,5 @@ @import '../../styles/utils.scss'; +@import '../../styles//global.scss'; .container { display: grid; diff --git a/src/pages/mypage/components/Header/Header.module.scss b/src/pages/mypage/components/Header/Header.module.scss index 9b26979..adc88e9 100644 --- a/src/pages/mypage/components/Header/Header.module.scss +++ b/src/pages/mypage/components/Header/Header.module.scss @@ -87,7 +87,7 @@ } .userName { - color: $black_333236, #333236; + color: #333236; font-size: 16px; font-weight: 500; } diff --git a/src/pages/mypage/components/Header/Header.tsx b/src/pages/mypage/components/Header/Header.tsx index f097d9d..ea7e912 100644 --- a/src/pages/mypage/components/Header/Header.tsx +++ b/src/pages/mypage/components/Header/Header.tsx @@ -8,6 +8,12 @@ import { UserContext } from '../../../../contexts/UserContext'; /mydashboard 에서 사용되는 헤더 컴포넌트입니다. */ function ProfileKebab() { + const context = useContext(UserContext); + if (!context) { + throw new Error('반드시 DashboardProvider 안에서 사용해야 합니다.'); + } + const {setUserInfo} = context; + const navigate = useNavigate(); const myPageClick = () => { @@ -15,6 +21,7 @@ function ProfileKebab() { }; const logoutClick = () => { + setUserInfo(null); localStorage.clear(); // 모든 localStorage 항목을 제거 navigate('/login'); // 페이지 새로고침 }; From bbc1a94957981f0d3a25857293222bda15d3f83d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=80=EC=A7=80?= <103625348+eunji-0623@users.noreply.github.com> Date: Fri, 14 Jun 2024 16:47:36 +0900 Subject: [PATCH 06/30] =?UTF-8?q?Feat:=20=EA=B0=99=EC=9D=80=20=EB=8C=80?= =?UTF-8?q?=EC=8B=9C=EB=B3=B4=EB=93=9C=EC=97=90=EC=84=9C=20=EB=B3=B4?= =?UTF-8?q?=EB=82=B8=20=EC=B4=88=EB=8C=80=20=EC=A4=91=EB=B3=B5=20=EC=88=98?= =?UTF-8?q?=EB=9D=BD=20=EC=95=88=EB=90=98=EA=B2=8C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Invited/Invited.tsx | 108 +++++++++++++----- .../components/Invited/Table/Table.tsx | 39 +++++-- .../components/Invited/Table/TableBody.tsx | 21 +++- 3 files changed, 124 insertions(+), 44 deletions(-) diff --git a/src/pages/myDashboard/components/Invited/Invited.tsx b/src/pages/myDashboard/components/Invited/Invited.tsx index 0190e53..18bd0ee 100644 --- a/src/pages/myDashboard/components/Invited/Invited.tsx +++ b/src/pages/myDashboard/components/Invited/Invited.tsx @@ -1,4 +1,4 @@ -import { useState, useCallback, useEffect } from 'react'; +import { useState, useCallback } from 'react'; import Search from './Search/Search'; import Table from './Table/Table'; import Empty from './Empty/Empty'; @@ -44,7 +44,7 @@ const PAGE_SIZE = 6; const fetchInvitations = async ( cursor: number, - title: string, + title: string ): Promise => { const data = await apiMyInvitationsList({ size: PAGE_SIZE, @@ -65,27 +65,42 @@ function Invited() { const [empty, setEmpty] = useState(false); const loadMoreInvitations = useCallback(async () => { - if (!hasNext) return; + if (!hasNext) { + setEmpty(true); + return; + } try { const newInvitations = await fetchInvitations(cursor, title); + + // 중복 초대 필터링 + const filteredInvitations = newInvitations.invitations.filter( + (invitation) => + !invitations.some( + (existingInvitation) => + existingInvitation.inviter.id === invitation.inviter.id && + existingInvitation.dashboard.id === invitation.dashboard.id + ) + ); + if (cursor === 0) { // 검색어가 변경되어 초기 로드일 경우 - setInvitations(newInvitations.invitations); + setInvitations(filteredInvitations); } else { - setInvitations((prev) => [...prev, ...newInvitations.invitations]); + setInvitations((prev) => [...prev, ...filteredInvitations]); } + setCursor(newInvitations.cursorId); - if (hasNext && newInvitations.invitations.length === 0) { - setEmpty(true); + if (filteredInvitations.length === 0) { + setHasNext(false); } - if (newInvitations.invitations.length <= PAGE_SIZE) { + if (newInvitations.invitations.length < PAGE_SIZE) { setHasNext(false); } } catch (error) { setEmpty(true); } - }, [cursor, hasNext, title]); + }, [cursor, hasNext, title, invitations]); const setElement = useInfiniteScroll(loadMoreInvitations, { root: null, @@ -93,32 +108,65 @@ function Invited() { threshold: 0.5, }); - const handleSearch = useCallback((searchWord: string) => { - setTitle(searchWord); - setCursor(0); - setInvitations([]); - setHasNext(true); - setEmpty(false); - }, []); - - useEffect(() => { - setCursor(0); - setInvitations([]); - setHasNext(true); - loadMoreInvitations(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [title]); - - const handleInvitation = async (id: number, isAccept: boolean) => { + const handleSearch = useCallback( + (searchWord: string) => { + setTitle(searchWord); + setCursor(0); + setInvitations([]); + setHasNext(true); + setEmpty(false); + loadMoreInvitations(); + }, + [loadMoreInvitations] + ); + + const handleInvitation = async ( + id: number, + inviterId: number, + dashboardId: number, + title: string, + isAccept: boolean + ) => { await apiInvitationAccept( { invitationId: id }, - { inviteAccepted: isAccept }, + { inviteAccepted: isAccept } ); - setInvitations((prev) => prev.filter((invitation) => invitation.id !== id)); - if (invitations.length - 1 < PAGE_SIZE && hasNext) { - await loadMoreInvitations(); + // 중복 초대 중 하나 수락 시 나머지 초대 모두 거절로 처리 + if (isAccept) { + const response = await apiMyInvitationsList({ + cursorId: 0, + title: title, + size: 100, + }); + const promises = response.invitations.map(async (invitation) => { + if ( + invitation.inviter.id === inviterId && + invitation.dashboard.id === dashboardId + ) { + await apiInvitationAccept( + { invitationId: invitation.id }, + { inviteAccepted: false } + ); + } + }); + + await Promise.all(promises); + + setInvitations((prev) => + prev.filter((invitation) => { + return ( + invitation.id !== id && + !( + invitation.inviter.id === inviterId && + invitation.dashboard.id === dashboardId + ) + ); + }) + ); } + + setInvitations((prev) => prev.filter((invitation) => invitation.id !== id)); }; return ( diff --git a/src/pages/myDashboard/components/Invited/Table/Table.tsx b/src/pages/myDashboard/components/Invited/Table/Table.tsx index 5643464..19155db 100644 --- a/src/pages/myDashboard/components/Invited/Table/Table.tsx +++ b/src/pages/myDashboard/components/Invited/Table/Table.tsx @@ -10,9 +10,11 @@ interface Invitation { id: number; inviter: { nickname: string; + id: number; }; dashboard: { title: string; + id: number; }; } @@ -20,7 +22,13 @@ interface TableProps { invitations: Invitation[]; hasNext: boolean; setElement: React.Dispatch>; - handleInvitation: (id: number, isAccept: boolean) => void; + handleInvitation: ( + id: number, + inviterId: number, + dashboardId: number, + title: string, + isAccept: boolean + ) => void; } function Table({ @@ -37,10 +45,19 @@ function Table({ <> - {invitations.map((invitation) => ( + {[ + ...new Map( + invitations.map((invitation) => [ + `${invitation.inviter.id}-${invitation.dashboard.id}`, + invitation, + ]) + ).values(), + ].map((invitation) => ( ) : ( - {invitations.map((invitation) => ( - - ))} + {/* {invitations + .filter((invitation) => !invitation.inviteAccepted) + .map((invitation) => ( + + ))} */} {hasNext && } )} diff --git a/src/pages/myDashboard/components/Invited/Table/TableBody.tsx b/src/pages/myDashboard/components/Invited/Table/TableBody.tsx index 6a58cd3..009b2ee 100644 --- a/src/pages/myDashboard/components/Invited/Table/TableBody.tsx +++ b/src/pages/myDashboard/components/Invited/Table/TableBody.tsx @@ -5,20 +5,33 @@ import styles from './Table.module.scss'; interface Props { id: number; + inviterId: number; + dashboardId: number; title: string; name: string; - handleInvitation: (id: number, isAccept: boolean) => void; + handleInvitation: ( + id: number, + inviterId: number, + dashboardId: number, + title: string, + isAccept: boolean + ) => void; } function TableBody({ - id, title, name, handleInvitation, + id, + inviterId, + dashboardId, + title, + name, + handleInvitation, }: Props) { const handleAcceptClick = () => { - handleInvitation(id, true); + handleInvitation(id, inviterId, dashboardId, title, true); }; const handleRejectClick = () => { - handleInvitation(id, false); + handleInvitation(id, inviterId, dashboardId, title, false); }; return ( From 9794953d7a62603a288deae8a31aa37f7f4e168e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=80=EC=A7=80?= <103625348+eunji-0623@users.noreply.github.com> Date: Fri, 14 Jun 2024 16:53:16 +0900 Subject: [PATCH 07/30] =?UTF-8?q?Fix:=20linter=20=EC=98=A4=EB=A5=98=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Invited/Invited.tsx | 44 ++++++++----------- .../components/Invited/Table/Table.tsx | 30 ++++++++----- .../components/Invited/Table/TableMobile.tsx | 31 +++++++++---- 3 files changed, 61 insertions(+), 44 deletions(-) diff --git a/src/pages/myDashboard/components/Invited/Invited.tsx b/src/pages/myDashboard/components/Invited/Invited.tsx index 18bd0ee..b757379 100644 --- a/src/pages/myDashboard/components/Invited/Invited.tsx +++ b/src/pages/myDashboard/components/Invited/Invited.tsx @@ -44,7 +44,7 @@ const PAGE_SIZE = 6; const fetchInvitations = async ( cursor: number, - title: string + title: string, ): Promise => { const data = await apiMyInvitationsList({ size: PAGE_SIZE, @@ -75,12 +75,10 @@ function Invited() { // 중복 초대 필터링 const filteredInvitations = newInvitations.invitations.filter( - (invitation) => - !invitations.some( - (existingInvitation) => - existingInvitation.inviter.id === invitation.inviter.id && - existingInvitation.dashboard.id === invitation.dashboard.id - ) + (invitation) => !invitations.some( + (existingInvitation) => existingInvitation.inviter.id === invitation.inviter.id + && existingInvitation.dashboard.id === invitation.dashboard.id, + ), ); if (cursor === 0) { @@ -117,53 +115,49 @@ function Invited() { setEmpty(false); loadMoreInvitations(); }, - [loadMoreInvitations] + [loadMoreInvitations], ); const handleInvitation = async ( id: number, inviterId: number, dashboardId: number, - title: string, - isAccept: boolean + dashboardName: string, + isAccept: boolean, ) => { await apiInvitationAccept( { invitationId: id }, - { inviteAccepted: isAccept } + { inviteAccepted: isAccept }, ); // 중복 초대 중 하나 수락 시 나머지 초대 모두 거절로 처리 if (isAccept) { const response = await apiMyInvitationsList({ cursorId: 0, - title: title, + title: dashboardName, size: 100, }); const promises = response.invitations.map(async (invitation) => { if ( - invitation.inviter.id === inviterId && - invitation.dashboard.id === dashboardId + invitation.inviter.id === inviterId + && invitation.dashboard.id === dashboardId ) { await apiInvitationAccept( { invitationId: invitation.id }, - { inviteAccepted: false } + { inviteAccepted: false }, ); } }); await Promise.all(promises); - setInvitations((prev) => - prev.filter((invitation) => { - return ( - invitation.id !== id && - !( - invitation.inviter.id === inviterId && - invitation.dashboard.id === dashboardId + setInvitations((prev) => prev.filter((invitation) => ( + invitation.id !== id + && !( + invitation.inviter.id === inviterId + && invitation.dashboard.id === dashboardId ) - ); - }) - ); + ))); } setInvitations((prev) => prev.filter((invitation) => invitation.id !== id)); diff --git a/src/pages/myDashboard/components/Invited/Table/Table.tsx b/src/pages/myDashboard/components/Invited/Table/Table.tsx index 19155db..f866e6f 100644 --- a/src/pages/myDashboard/components/Invited/Table/Table.tsx +++ b/src/pages/myDashboard/components/Invited/Table/Table.tsx @@ -50,7 +50,7 @@ function Table({ invitations.map((invitation) => [ `${invitation.inviter.id}-${invitation.dashboard.id}`, invitation, - ]) + ]), ).values(), ].map((invitation) => ( ) : ( - {/* {invitations - .filter((invitation) => !invitation.inviteAccepted) - .map((invitation) => ( - - ))} */} + {[ + ...new Map( + invitations.map((invitation) => [ + `${invitation.inviter.id}-${invitation.dashboard.id}`, + invitation, + ]), + ).values(), + ].map((invitation) => ( + + ))} {hasNext && } )} diff --git a/src/pages/myDashboard/components/Invited/Table/TableMobile.tsx b/src/pages/myDashboard/components/Invited/Table/TableMobile.tsx index 48d2167..6e287aa 100644 --- a/src/pages/myDashboard/components/Invited/Table/TableMobile.tsx +++ b/src/pages/myDashboard/components/Invited/Table/TableMobile.tsx @@ -1,20 +1,35 @@ import styles from './Table.module.scss'; import { AcceptAndRejectBtn } from '../../../../../components/Btn/Btn'; -import { apiInvitationAccept } from '../../../../../api/apiModule'; interface Props { id: number; + inviterId: number; + dashboardId: number; title: string; name: string; + handleInvitation: ( + id: number, + inviterId: number, + dashboardId: number, + title: string, + isAccept: boolean + ) => void; } -function TableMobile({ id, title, name }: Props) { - const handleAccept = async () => { - await apiInvitationAccept({ invitationId: id }, { inviteAccepted: true }); +function TableMobile({ + id, + inviterId, + dashboardId, + title, + name, + handleInvitation, +}: Props) { + const handleAcceptClick = () => { + handleInvitation(id, inviterId, dashboardId, title, true); }; - const handleReject = async () => { - await apiInvitationAccept({ invitationId: id }, { inviteAccepted: false }); + const handleRejectClick = () => { + handleInvitation(id, inviterId, dashboardId, title, false); }; return ( @@ -31,8 +46,8 @@ function TableMobile({ id, title, name }: Props) { From 654007ead9e8c6bdfd1a4ffff72596b57dffe099 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=80=EC=A7=80?= <103625348+eunji-0623@users.noreply.github.com> Date: Fri, 14 Jun 2024 17:04:33 +0900 Subject: [PATCH 08/30] =?UTF-8?q?Fix:=20=EC=B4=88=EB=8C=80=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=EB=AA=A8=EB=8B=AC=20Props=20=EB=B3=80=EA=B2=BD?= =?UTF-8?q?=EC=82=AC=ED=95=AD=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/dashboardEdit/MemberEdit/EditHeader.tsx | 10 ++++++---- src/pages/dashboardEdit/MemberEdit/EmailEdit.tsx | 7 ++++--- src/pages/dashboardEdit/MemberEdit/MemberEdit.tsx | 5 +++-- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/src/pages/dashboardEdit/MemberEdit/EditHeader.tsx b/src/pages/dashboardEdit/MemberEdit/EditHeader.tsx index 44b7304..55e7d1e 100644 --- a/src/pages/dashboardEdit/MemberEdit/EditHeader.tsx +++ b/src/pages/dashboardEdit/MemberEdit/EditHeader.tsx @@ -16,6 +16,7 @@ interface Props { totalPages: number; handlePrevClick: () => void; handleNextClick: () => void; + dashboardId?: number; } function EditHeader({ @@ -27,7 +28,10 @@ function EditHeader({ totalPages, handlePrevClick, handleNextClick, + dashboardId, }: Props) { + if (!dashboardId) return; + const { width } = useWindowSize(); const [sendInvitation, setSendInvitation] = useState(false); @@ -41,10 +45,7 @@ function EditHeader({

{title}

- {totalPages} - {' '} - 페이지 중 - {currentPage} + {totalPages} 페이지 중{currentPage}

) : null} diff --git a/src/pages/dashboardEdit/MemberEdit/EmailEdit.tsx b/src/pages/dashboardEdit/MemberEdit/EmailEdit.tsx index 8675802..96d3b10 100644 --- a/src/pages/dashboardEdit/MemberEdit/EmailEdit.tsx +++ b/src/pages/dashboardEdit/MemberEdit/EmailEdit.tsx @@ -41,11 +41,11 @@ interface EmailResponse { function EmailEdit({ dashboardId }: Props) { const fetchInvitations = async ( id: number, - page: number, + page: number ): Promise<{ items: EmailResponse[]; totalCount: number }> => { const data = await apiInvitationList( { dashboardId: id }, - { page, size: ITEMS_PER_PAGE }, + { page, size: ITEMS_PER_PAGE } ); return { items: data.invitations, @@ -55,7 +55,7 @@ function EmailEdit({ dashboardId }: Props) { const fetchDataCallback = useCallback( () => fetchInvitations(dashboardId, 1), - [dashboardId], + [dashboardId] ); const { @@ -82,6 +82,7 @@ function EmailEdit({ dashboardId }: Props) { totalPages={totalPages} handlePrevClick={handlePrevClick} handleNextClick={handleNextClick} + dashboardId={dashboardId} /> diff --git a/src/pages/dashboardEdit/MemberEdit/MemberEdit.tsx b/src/pages/dashboardEdit/MemberEdit/MemberEdit.tsx index 726b17e..3569b6d 100644 --- a/src/pages/dashboardEdit/MemberEdit/MemberEdit.tsx +++ b/src/pages/dashboardEdit/MemberEdit/MemberEdit.tsx @@ -29,7 +29,7 @@ interface MemberResponse { function MemberEdit({ dashboardId }: Props) { const fetchMembers = async ( - id: number, + id: number ): Promise<{ items: MemberResponse[]; totalCount: number }> => { const data = await apiMemberList({ dashboardId: id }); return { @@ -40,7 +40,7 @@ function MemberEdit({ dashboardId }: Props) { const fetchDataCallback = useCallback( () => fetchMembers(dashboardId), - [dashboardId], + [dashboardId] ); const { @@ -66,6 +66,7 @@ function MemberEdit({ dashboardId }: Props) { totalPages={totalPages} handlePrevClick={handlePrevClick} handleNextClick={handleNextClick} + dashboardId={dashboardId} />
From 85315c8287a1bbc6a47f700676c786d2f11192f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=80=EC=A7=80?= <103625348+eunji-0623@users.noreply.github.com> Date: Fri, 14 Jun 2024 17:09:15 +0900 Subject: [PATCH 09/30] =?UTF-8?q?Fix:=20=EB=8C=80=EC=8B=9C=EB=B3=B4?= =?UTF-8?q?=EB=93=9C=20=EC=88=98=EC=A0=95=20>=20=EB=A9=A4=EB=B2=84=20?= =?UTF-8?q?=EB=AA=A9=EB=A1=9D=EC=97=90=EC=84=9C=20=EB=A9=A4=EB=B2=84=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EC=8B=9C=20=EC=83=88=EB=A1=9C=EA=B3=A0?= =?UTF-8?q?=EC=B9=A8=20=EB=90=98=EA=B2=8C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/dashboardEdit/MemberEdit/Member.tsx | 10 ++++------ src/pages/dashboardEdit/MemberEdit/MemberEdit.tsx | 11 +++++++++-- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/pages/dashboardEdit/MemberEdit/Member.tsx b/src/pages/dashboardEdit/MemberEdit/Member.tsx index 1cde3b8..51aa16b 100644 --- a/src/pages/dashboardEdit/MemberEdit/Member.tsx +++ b/src/pages/dashboardEdit/MemberEdit/Member.tsx @@ -10,13 +10,13 @@ interface Props { profile: string; name: string; isOwner: boolean; + handleReload: () => void; } -function Member({ - memberId, name, profile, isOwner, -}: Props) { +function Member({ memberId, name, profile, isOwner, handleReload }: Props) { const handleDeleteButton = async () => { await apiDeleteMemeber({ memberId }); + handleReload(); }; return ( @@ -25,9 +25,7 @@ function Member({ 프로필
- {name} - {' '} - {isOwner ? 왕관 : null} + {name} {isOwner ? 왕관 : null} {!isOwner ? ( diff --git a/src/pages/dashboardEdit/MemberEdit/MemberEdit.tsx b/src/pages/dashboardEdit/MemberEdit/MemberEdit.tsx index 3569b6d..2d3f692 100644 --- a/src/pages/dashboardEdit/MemberEdit/MemberEdit.tsx +++ b/src/pages/dashboardEdit/MemberEdit/MemberEdit.tsx @@ -1,4 +1,4 @@ -import { useCallback } from 'react'; +import { useCallback, useState } from 'react'; import { apiMemberList } from '../../../api/apiModule'; import usePagination from '../../../hooks/pagination/usePagination'; import EditHeader from './EditHeader'; @@ -28,6 +28,8 @@ interface MemberResponse { } function MemberEdit({ dashboardId }: Props) { + const [reload, setReload] = useState(false); + const fetchMembers = async ( id: number ): Promise<{ items: MemberResponse[]; totalCount: number }> => { @@ -40,7 +42,7 @@ function MemberEdit({ dashboardId }: Props) { const fetchDataCallback = useCallback( () => fetchMembers(dashboardId), - [dashboardId] + [dashboardId, reload] ); const { @@ -56,6 +58,10 @@ function MemberEdit({ dashboardId }: Props) { itemsPerPage: ITEMS_PER_PAGE, }); + const handleReload = () => { + setReload(!reload); + }; + return (
))} From ff568d351c06b137ef382a6f919f7fa96a424e5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=80=EC=A7=80?= <103625348+eunji-0623@users.noreply.github.com> Date: Fri, 14 Jun 2024 17:26:47 +0900 Subject: [PATCH 10/30] =?UTF-8?q?Fix:=20linter=20=EC=98=A4=EB=A5=98=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/dashboardEdit/MemberEdit/EditHeader.tsx | 9 +++++---- src/pages/dashboardEdit/MemberEdit/EmailEdit.tsx | 6 +++--- src/pages/dashboardEdit/MemberEdit/Member.tsx | 8 ++++++-- src/pages/dashboardEdit/MemberEdit/MemberEdit.tsx | 5 +++-- 4 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/pages/dashboardEdit/MemberEdit/EditHeader.tsx b/src/pages/dashboardEdit/MemberEdit/EditHeader.tsx index 55e7d1e..cbe8727 100644 --- a/src/pages/dashboardEdit/MemberEdit/EditHeader.tsx +++ b/src/pages/dashboardEdit/MemberEdit/EditHeader.tsx @@ -16,7 +16,7 @@ interface Props { totalPages: number; handlePrevClick: () => void; handleNextClick: () => void; - dashboardId?: number; + dashboardId: number; } function EditHeader({ @@ -30,8 +30,6 @@ function EditHeader({ handleNextClick, dashboardId, }: Props) { - if (!dashboardId) return; - const { width } = useWindowSize(); const [sendInvitation, setSendInvitation] = useState(false); @@ -45,7 +43,10 @@ function EditHeader({

{title}

- {totalPages} 페이지 중{currentPage} + {totalPages} + {' '} + 페이지 중 + {currentPage}

=> { const data = await apiInvitationList( { dashboardId: id }, - { page, size: ITEMS_PER_PAGE } + { page, size: ITEMS_PER_PAGE }, ); return { items: data.invitations, @@ -55,7 +55,7 @@ function EmailEdit({ dashboardId }: Props) { const fetchDataCallback = useCallback( () => fetchInvitations(dashboardId, 1), - [dashboardId] + [dashboardId], ); const { diff --git a/src/pages/dashboardEdit/MemberEdit/Member.tsx b/src/pages/dashboardEdit/MemberEdit/Member.tsx index 51aa16b..2f6f8cd 100644 --- a/src/pages/dashboardEdit/MemberEdit/Member.tsx +++ b/src/pages/dashboardEdit/MemberEdit/Member.tsx @@ -13,7 +13,9 @@ interface Props { handleReload: () => void; } -function Member({ memberId, name, profile, isOwner, handleReload }: Props) { +function Member({ + memberId, name, profile, isOwner, handleReload, +}: Props) { const handleDeleteButton = async () => { await apiDeleteMemeber({ memberId }); handleReload(); @@ -25,7 +27,9 @@ function Member({ memberId, name, profile, isOwner, handleReload }: Props) { 프로필
- {name} {isOwner ? 왕관 : null} + {name} + {' '} + {isOwner ? 왕관 : null} {!isOwner ? ( diff --git a/src/pages/dashboardEdit/MemberEdit/MemberEdit.tsx b/src/pages/dashboardEdit/MemberEdit/MemberEdit.tsx index 2d3f692..cef2d1a 100644 --- a/src/pages/dashboardEdit/MemberEdit/MemberEdit.tsx +++ b/src/pages/dashboardEdit/MemberEdit/MemberEdit.tsx @@ -31,7 +31,7 @@ function MemberEdit({ dashboardId }: Props) { const [reload, setReload] = useState(false); const fetchMembers = async ( - id: number + id: number, ): Promise<{ items: MemberResponse[]; totalCount: number }> => { const data = await apiMemberList({ dashboardId: id }); return { @@ -42,7 +42,8 @@ function MemberEdit({ dashboardId }: Props) { const fetchDataCallback = useCallback( () => fetchMembers(dashboardId), - [dashboardId, reload] + // eslint-disable-next-line react-hooks/exhaustive-deps + [dashboardId, reload], ); const { From 0dc0b6a8e51f62e8bd9aff8b7cac7c3fbd023424 Mon Sep 17 00:00:00 2001 From: Park Sumin Date: Fri, 14 Jun 2024 19:29:16 +0900 Subject: [PATCH 11/30] =?UTF-8?q?Feat=20:=20=EB=82=B4=20=EB=8C=80=EC=8B=9C?= =?UTF-8?q?=EB=B3=B4=EB=93=9C,=20=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=A0=91=EC=86=8D=EC=9D=B4=20=EB=8C=80=EC=8B=9C?= =?UTF-8?q?=EB=B3=B4=EB=93=9C=20context=20=EC=A0=95=EB=B3=B4=20=ED=95=B4?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/UserProfileImg/UserProfileImg.tsx | 2 +- src/contexts/DashboardContext.tsx | 6 +++++- .../components/GnbHeader/GnbHeader.tsx | 8 ++++---- src/pages/myDashboard/components/Header/Header.tsx | 7 ++++--- 4 files changed, 14 insertions(+), 9 deletions(-) diff --git a/src/components/UserProfileImg/UserProfileImg.tsx b/src/components/UserProfileImg/UserProfileImg.tsx index 49c3faa..fd91116 100644 --- a/src/components/UserProfileImg/UserProfileImg.tsx +++ b/src/components/UserProfileImg/UserProfileImg.tsx @@ -60,7 +60,7 @@ svg 생성기가 있으면, 사용할 프로필 이미지 컴포넌트 props로 url 하나만 받아옵니다. */ interface UserProfileImgSvgProps { - profileImageUrl: string; + profileImageUrl: string | undefined; } export function UserProfileImgSvg({ profileImageUrl }: UserProfileImgSvgProps) { diff --git a/src/contexts/DashboardContext.tsx b/src/contexts/DashboardContext.tsx index 01e7ece..1c482ce 100644 --- a/src/contexts/DashboardContext.tsx +++ b/src/contexts/DashboardContext.tsx @@ -66,10 +66,14 @@ export function DashboardProvider({ children }: DashboardProviderProps) { useEffect(() => { // Clear local storage when navigating to /dashboard - if (location.pathname === '/dashboard') { + if (location.pathname === '/mydashboard' || location.pathname === '/mypage') { + setActiveDashboard(undefined); + setActiveTitle(undefined); + setIsCreateByMe(undefined); localStorage.removeItem('activeDashboard'); localStorage.removeItem('isCreatedByMe'); localStorage.removeItem('activeTitle'); + localStorage.setItem('currentPage', '1'); } }, [location.pathname]); diff --git a/src/pages/dashboard.{dashboardid}/components/GnbHeader/GnbHeader.tsx b/src/pages/dashboard.{dashboardid}/components/GnbHeader/GnbHeader.tsx index f4d2e38..67481ca 100644 --- a/src/pages/dashboard.{dashboardid}/components/GnbHeader/GnbHeader.tsx +++ b/src/pages/dashboard.{dashboardid}/components/GnbHeader/GnbHeader.tsx @@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom'; import styles from './GnbHeader.module.scss'; import { DashboardContext } from '../../../../contexts/DashboardContext'; import { UserContext } from '../../../../contexts/UserContext'; -import UserProfileImg from '../../../../components/UserProfileImg/UserProfileImg'; +import { UserProfileImgSvg } from '../../../../components/UserProfileImg/UserProfileImg'; import CrownImg from '/icon/crown.svg'; import { InviteBtn, SettingBtn } from '../Btn/Btn'; import Members from '../Members/Members'; @@ -87,15 +87,15 @@ function GnbHeader() {
- {/* 대시보드 id 가져와야 함. */}
- + /> */} +
{userInfo?.nickname}
{ProfileKebabOpen && } diff --git a/src/pages/myDashboard/components/Header/Header.tsx b/src/pages/myDashboard/components/Header/Header.tsx index 47a343e..a80cf90 100644 --- a/src/pages/myDashboard/components/Header/Header.tsx +++ b/src/pages/myDashboard/components/Header/Header.tsx @@ -1,7 +1,7 @@ import { useContext, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import styles from './Header.module.scss'; -import UserProfileImg from '../../../../components/UserProfileImg/UserProfileImg'; +import { UserProfileImgSvg } from '../../../../components/UserProfileImg/UserProfileImg'; import { UserContext } from '../../../../contexts/UserContext'; /* @@ -65,11 +65,12 @@ function MyDashboardHeader() { onMouseLeave={ProfileLeave} onFocus={profileOver} > - + /> */} +
{userInfo?.nickname}
{ProfileKebabOpen && } {' '} From 0a3ad3c799b68705c625d64753be920f7660b97c Mon Sep 17 00:00:00 2001 From: Park Sumin Date: Fri, 14 Jun 2024 20:23:01 +0900 Subject: [PATCH 12/30] =?UTF-8?q?Feat=20:=20=EC=82=AC=EC=9D=B4=EB=93=9C?= =?UTF-8?q?=EB=B0=94=20=EB=B0=98=EC=9D=91=ED=98=95=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=9C=A0=EC=A7=80=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/sidebar/sidebar.tsx | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index be85df7..099ac86 100644 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -56,6 +56,10 @@ function SideBar() { const savedPage = localStorage.getItem('currentPage'); return savedPage ? Number(savedPage) : 1; }); + const [prevPage, setPrevPage] = useState(() => { + const savedPage = localStorage.getItem('currentPage'); + return savedPage ? Number(savedPage) : 1; + }); const [totalPages, setTotalPages] = useState(1); const [isError, setIsError] = useState(false); const [errorMessage, setErrorMessage] = useState(''); @@ -84,6 +88,21 @@ function SideBar() { localStorage.setItem('currentPage', currentPage.toString()); }, [currentPage]); + useEffect(() => { + const isMobileSetPage = () => { + if(isMobile) { + localStorage.setItem('currentPage', '1'); + setCurrentPage(1); + } + else { + localStorage.setItem('currentPage', currentPage.toString()); + setCurrentPage(prevPage); + } + } + + isMobileSetPage(); + }, [isMobile]) + const fetchPageData = async (page: number) => { try { const { items: dashboards } = await fetchDashboards(page, itemsPerPage); @@ -99,6 +118,7 @@ function SideBar() { const prevPage = currentPage - 1; fetchPageData(prevPage); setCurrentPage(prevPage); + setPrevPage(prevPage); } }; @@ -107,6 +127,7 @@ function SideBar() { const nextPage = currentPage + 1; fetchPageData(nextPage); setCurrentPage(nextPage); + setPrevPage(nextPage); } }; From b80f5589ac6d86303b741453894d57ea7d17b700 Mon Sep 17 00:00:00 2001 From: Park Sumin Date: Fri, 14 Jun 2024 20:51:23 +0900 Subject: [PATCH 13/30] =?UTF-8?q?Feat=20:=20=EA=B4=80=EB=A6=AC=EC=9E=90=20?= =?UTF-8?q?=EA=B6=8C=ED=95=9C=20=EC=97=86=EC=9D=84=20=EC=8B=9C,=20?= =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=EB=B2=84=ED=8A=BC=20=EC=A0=9C=EA=B1=B0,?= =?UTF-8?q?=20=EC=9E=84=EC=9D=98=20=EC=A0=91=EC=86=8D=EB=8F=84=20=EC=B0=A8?= =?UTF-8?q?=EB=8B=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/sidebar/sidebar.tsx | 8 ++++---- .../components/GnbHeader/GnbHeader.tsx | 2 +- src/pages/dashboardEdit/index.tsx | 7 ++++++- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index 099ac86..674567b 100644 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -65,7 +65,7 @@ function SideBar() { const [errorMessage, setErrorMessage] = useState(''); // 화면 크기에 따라 한 페이지당 보여줄 대시보드 수를 결정 - const isMobile = useMediaQuery({ maxWidth: 768 }); + const isMobile = useMediaQuery({ maxWidth: 767 }); const itemsPerPage = isMobile ? ITEMS_PER_PAGE_MOBILE : ITEMS_PER_PAGE; // 데이터 로드 및 페이지 설정 @@ -82,7 +82,7 @@ function SideBar() { }; fetchData(); - }, [itemsPerPage, currentPage]); + }, [itemsPerPage, currentPage, prevPage]); useEffect(() => { localStorage.setItem('currentPage', currentPage.toString()); @@ -95,13 +95,13 @@ function SideBar() { setCurrentPage(1); } else { - localStorage.setItem('currentPage', currentPage.toString()); + localStorage.setItem('currentPage', prevPage.toString()); setCurrentPage(prevPage); } } isMobileSetPage(); - }, [isMobile]) + }, [prevPage, isMobile]) const fetchPageData = async (page: number) => { try { diff --git a/src/pages/dashboard.{dashboardid}/components/GnbHeader/GnbHeader.tsx b/src/pages/dashboard.{dashboardid}/components/GnbHeader/GnbHeader.tsx index 67481ca..5658ecc 100644 --- a/src/pages/dashboard.{dashboardid}/components/GnbHeader/GnbHeader.tsx +++ b/src/pages/dashboard.{dashboardid}/components/GnbHeader/GnbHeader.tsx @@ -82,7 +82,7 @@ function GnbHeader() {
- + {isCreateByMe ? :
}
diff --git a/src/pages/dashboardEdit/index.tsx b/src/pages/dashboardEdit/index.tsx index f4034f5..9453b25 100644 --- a/src/pages/dashboardEdit/index.tsx +++ b/src/pages/dashboardEdit/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useContext, useEffect, useState } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; import { apiDashboardsDetail } from '../../api/apiModule'; import SideBar from '../../components/sidebar/sidebar'; @@ -9,6 +9,7 @@ import NameEdit from './NameEdit/NameEdit'; import styles from './index.module.scss'; import { DeleteDashBoardBtn } from '../../components/Btn/Btn'; import DeleteDashboardModal from '../modal/DeleteDashboardModal/DeleteDashboardModal'; +//import { DashboardContext } from '../../contexts/DashboardContext'; /* 대시보드 수정 페이지 - 전체적인 레이아웃 */ @@ -29,6 +30,10 @@ function DashboardEdit() { setDashboardId(+id); setDashboardName(data.title); setDashboardColor(data.color); + if(!data.createdByMe) { + console.log('접근불가'); + navigate('/404'); + } } }; From 9216d88abbd3d54a4844821d1653c5aefbea2690 Mon Sep 17 00:00:00 2001 From: foxholic9 Date: Fri, 14 Jun 2024 23:27:24 +0900 Subject: [PATCH 14/30] =?UTF-8?q?Feat:=20=EC=BB=AC=EB=9F=BC=EC=B9=B4?= =?UTF-8?q?=EB=93=9C=EC=97=90=20=EC=9C=A0=EC=A0=80=20=ED=94=84=EB=A1=9C?= =?UTF-8?q?=ED=95=84=EC=9D=B4=EB=AF=B8=EC=A7=80=20=ED=91=9C=EC=8B=9C?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 이미지 없을 시 기존처럼 닉네임이 표시되게 예외처리했습니다. 테스트는 아직 못해봤습니다.. 유저 프로필이미지가 있는 계정을 못만들고있어요 --- .../components/ColumnCard/ColumnCard.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/pages/dashboard.{dashboardid}/components/ColumnCard/ColumnCard.tsx b/src/pages/dashboard.{dashboardid}/components/ColumnCard/ColumnCard.tsx index 4d1079a..fcf9907 100644 --- a/src/pages/dashboard.{dashboardid}/components/ColumnCard/ColumnCard.tsx +++ b/src/pages/dashboard.{dashboardid}/components/ColumnCard/ColumnCard.tsx @@ -4,6 +4,7 @@ import styles from './ColumnCard.module.scss'; import Tag from '../../../../components/chip/Tag/Tag'; import TodoCardManagement from '../../../modal/TodoCardManagement/TodoCardManagement'; import { CardOverAll } from '../../../../api/apiModule'; +import { UserProfileImgSvg } from '../../../../components/UserProfileImg/UserProfileImg'; interface CardProps { cardId: number; @@ -23,12 +24,7 @@ const formatDate = (date: string) => { // 일정을 카드 모양으로 보여주는 컴포넌트입니다. // 사진, 제목, 태그, 기한, 작성자이미지를 prop으로 받습니다. -// 현재 작성자 이미지 대신 이름만 보여지게 처리했습니다. 수정 필요합니다. -function ColumnCard({ - cardId, - cardData, - columnData, -}: CardProps) { +function ColumnCard({ cardId, cardData, columnData }: CardProps) { const [manageCardModalOpen, setManageCardModalOpen] = useState(false); const { assignee, @@ -37,7 +33,6 @@ function ColumnCard({ tags, imageUrl, } = cardData; - // 버튼 이벤트 핸들러 const cardOnClick = () => { setManageCardModalOpen(true); @@ -71,7 +66,13 @@ function ColumnCard({ calendarImg {formatDate(dueDate)}
-
{assignee.nickname}
+
+ {assignee.profileImageUrl ? ( + + ) : ( + assignee.nickname + )} +
From 3967eb377525b895339ff660c73e5beae1a267d0 Mon Sep 17 00:00:00 2001 From: foxholic9 Date: Fri, 14 Jun 2024 23:43:05 +0900 Subject: [PATCH 15/30] =?UTF-8?q?Feat:=20=EB=A9=94=ED=83=80=20=ED=83=9C?= =?UTF-8?q?=EA=B7=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit OG 태그, SEO관련 태그 추가했습니다. --- index.html | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/index.html b/index.html index 1d6c622..344594a 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,26 @@ + + + + + + + + + + + + + + + + + + + + + Taskify From ff02cf6a92f82ae71c6f608538466bbddfdf3df0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=80=EC=A7=80?= <103625348+eunji-0623@users.noreply.github.com> Date: Sat, 15 Jun 2024 12:20:04 +0900 Subject: [PATCH 16/30] =?UTF-8?q?Fix:=20=EB=A9=A4=EB=B2=84=20=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=20=ED=94=84=EB=A1=9C=ED=95=84=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=ED=81=AC=EA=B8=B0=20=EC=98=A4=EB=A5=98=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/dashboardEdit/MemberEdit/Member.tsx | 10 ++--- .../MemberEdit/MemberEdit.module.scss | 6 +++ .../components/Invited/Invited.tsx | 42 +++++++++++-------- 3 files changed, 33 insertions(+), 25 deletions(-) diff --git a/src/pages/dashboardEdit/MemberEdit/Member.tsx b/src/pages/dashboardEdit/MemberEdit/Member.tsx index 2f6f8cd..54e67a9 100644 --- a/src/pages/dashboardEdit/MemberEdit/Member.tsx +++ b/src/pages/dashboardEdit/MemberEdit/Member.tsx @@ -13,9 +13,7 @@ interface Props { handleReload: () => void; } -function Member({ - memberId, name, profile, isOwner, handleReload, -}: Props) { +function Member({ memberId, name, profile, isOwner, handleReload }: Props) { const handleDeleteButton = async () => { await apiDeleteMemeber({ memberId }); handleReload(); @@ -24,12 +22,10 @@ function Member({ return (
- 프로필 + 프로필 - {name} - {' '} - {isOwner ? 왕관 : null} + {name} {isOwner ? 왕관 : null} {!isOwner ? ( diff --git a/src/pages/dashboardEdit/MemberEdit/MemberEdit.module.scss b/src/pages/dashboardEdit/MemberEdit/MemberEdit.module.scss index da38d76..ed546d2 100644 --- a/src/pages/dashboardEdit/MemberEdit/MemberEdit.module.scss +++ b/src/pages/dashboardEdit/MemberEdit/MemberEdit.module.scss @@ -52,6 +52,12 @@ width: 38px; height: 38px; margin-right: 12px; + + .profileImage { + width: 38px; + height: 38px; + object-fit: cover; + } } .email { diff --git a/src/pages/myDashboard/components/Invited/Invited.tsx b/src/pages/myDashboard/components/Invited/Invited.tsx index b757379..2df15e4 100644 --- a/src/pages/myDashboard/components/Invited/Invited.tsx +++ b/src/pages/myDashboard/components/Invited/Invited.tsx @@ -44,7 +44,7 @@ const PAGE_SIZE = 6; const fetchInvitations = async ( cursor: number, - title: string, + title: string ): Promise => { const data = await apiMyInvitationsList({ size: PAGE_SIZE, @@ -75,10 +75,12 @@ function Invited() { // 중복 초대 필터링 const filteredInvitations = newInvitations.invitations.filter( - (invitation) => !invitations.some( - (existingInvitation) => existingInvitation.inviter.id === invitation.inviter.id - && existingInvitation.dashboard.id === invitation.dashboard.id, - ), + (invitation) => + !invitations.some( + (existingInvitation) => + existingInvitation.inviter.id === invitation.inviter.id && + existingInvitation.dashboard.id === invitation.dashboard.id + ) ); if (cursor === 0) { @@ -115,7 +117,7 @@ function Invited() { setEmpty(false); loadMoreInvitations(); }, - [loadMoreInvitations], + [loadMoreInvitations] ); const handleInvitation = async ( @@ -123,41 +125,45 @@ function Invited() { inviterId: number, dashboardId: number, dashboardName: string, - isAccept: boolean, + isAccept: boolean ) => { await apiInvitationAccept( { invitationId: id }, - { inviteAccepted: isAccept }, + { inviteAccepted: isAccept } ); - // 중복 초대 중 하나 수락 시 나머지 초대 모두 거절로 처리 + // 초대 수락 시 if (isAccept) { const response = await apiMyInvitationsList({ cursorId: 0, title: dashboardName, size: 100, }); + // 중복 초대 중 하나 수락 시 나머지 초대 모두 거절로 처리 const promises = response.invitations.map(async (invitation) => { if ( - invitation.inviter.id === inviterId - && invitation.dashboard.id === dashboardId + invitation.inviter.id === inviterId && + invitation.dashboard.id === dashboardId ) { await apiInvitationAccept( { invitationId: invitation.id }, - { inviteAccepted: false }, + { inviteAccepted: false } ); } }); await Promise.all(promises); - setInvitations((prev) => prev.filter((invitation) => ( - invitation.id !== id - && !( - invitation.inviter.id === inviterId - && invitation.dashboard.id === dashboardId + setInvitations((prev) => + prev.filter( + (invitation) => + invitation.id !== id && + !( + invitation.inviter.id === inviterId && + invitation.dashboard.id === dashboardId ) - ))); + ) + ); } setInvitations((prev) => prev.filter((invitation) => invitation.id !== id)); From 4bf8453bdf2445c568c3cf987d5c5f51617e7517 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=80=EC=A7=80?= <103625348+eunji-0623@users.noreply.github.com> Date: Sat, 15 Jun 2024 12:27:11 +0900 Subject: [PATCH 17/30] =?UTF-8?q?Fix:=20=ED=97=A4=EB=8D=94=EA=B0=80=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=EB=B3=B4=EB=8B=A4=20=EC=95=9E=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EB=82=98=EC=98=A4=EB=8A=94=20=ED=98=84=EC=83=81=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ModalContainer/ModalContainer.module.scss | 2 +- .../NewDashModal/NewDashModal.module.scss | 20 +++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/pages/modal/ModalContainer/ModalContainer.module.scss b/src/pages/modal/ModalContainer/ModalContainer.module.scss index f037560..5138906 100644 --- a/src/pages/modal/ModalContainer/ModalContainer.module.scss +++ b/src/pages/modal/ModalContainer/ModalContainer.module.scss @@ -2,7 +2,7 @@ @import '/src/styles/media.scss'; .container { - z-index: 1; + z-index: 2; position: fixed; top: 0; left: 0; diff --git a/src/pages/modal/NewDashModal/NewDashModal.module.scss b/src/pages/modal/NewDashModal/NewDashModal.module.scss index 722a197..5c7ec73 100644 --- a/src/pages/modal/NewDashModal/NewDashModal.module.scss +++ b/src/pages/modal/NewDashModal/NewDashModal.module.scss @@ -11,7 +11,7 @@ padding: 2rem 1.75rem 1.75rem; background-color: $white_FFFFFF; - @include mobile{ + @include mobile { width: 20.4375rem; height: 18.3125rem; padding: 1.75rem 1.25rem; @@ -22,7 +22,7 @@ font-size: 1.5rem; font-weight: 700; - @include mobile{ + @include mobile { font-size: 1.25rem; } } @@ -32,7 +32,7 @@ font-size: 1.125rem; font-weight: 500; - @include mobile{ + @include mobile { font-size: 1rem; } } @@ -49,11 +49,11 @@ background: $white_FFFFFF; &:focus { - outline: none; - border: 1px solid $violet_5534DA + outline: none; + border: 1px solid $violet_5534DA; } - @include mobile{ + @include mobile { font-size: 0.875rem; } } @@ -76,7 +76,7 @@ display: flex; gap: 0.62rem; - @include mobile{ + @include mobile { height: 1.75rem; } } @@ -86,7 +86,7 @@ justify-content: flex-end; gap: 0.75rem; - @include mobile{ + @include mobile { right: 1.25rem; bottom: 1.25rem; } @@ -99,7 +99,7 @@ font-weight: 500; cursor: pointer; - @include mobile{ + @include mobile { width: 8.625rem; height: 2.625rem; font-size: 0.875rem; @@ -143,4 +143,4 @@ border-radius: 4px; border: 0px; color: $white_FFFFFF; -} \ No newline at end of file +} From 29d317018498b26adf8d463c8b2e3bdebe610d98 Mon Sep 17 00:00:00 2001 From: Park Sumin Date: Sat, 15 Jun 2024 12:44:54 +0900 Subject: [PATCH 18/30] =?UTF-8?q?Feat=20:=20404=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 3 + src/components/sidebar/sidebar.tsx | 21 +++-- src/contexts/DashboardContext.tsx | 54 +++++-------- src/pages/NotFound/NotFound.module.scss | 78 +++++++++++++++++++ src/pages/NotFound/NotFound.tsx | 21 +++++ .../components/GnbHeader/GnbHeader.tsx | 6 +- .../components/Members/Members.tsx | 2 +- src/pages/dashboard.{dashboardid}/index.tsx | 2 - src/pages/dashboardEdit/index.tsx | 9 +-- src/pages/modal/NewDashModal/NewDashModal.tsx | 10 +-- src/pages/mypage/components/Header/Header.tsx | 2 +- 11 files changed, 146 insertions(+), 62 deletions(-) create mode 100644 src/pages/NotFound/NotFound.module.scss create mode 100644 src/pages/NotFound/NotFound.tsx diff --git a/src/App.tsx b/src/App.tsx index 7d64cb8..ce58deb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,6 +10,7 @@ import SignUp from './pages/login-signup/signup/SignUp'; import MyPage from './pages/mypage/MyPage'; import { DashboardProvider } from './contexts/DashboardContext'; import { UserProvider } from './contexts/UserContext'; +import NotFound from './pages/NotFound/NotFound'; /* 페이지 라우팅 분리, @@ -21,6 +22,7 @@ function AppLayout() { } /> } /> } /> + } /> {/* 추가된 404 경로 */} ); } @@ -42,6 +44,7 @@ function App() { )} /> + } /> {/* 추가된 404 경로 */} ); diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index 674567b..e8a85b0 100644 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -56,7 +56,7 @@ function SideBar() { const savedPage = localStorage.getItem('currentPage'); return savedPage ? Number(savedPage) : 1; }); - const [prevPage, setPrevPage] = useState(() => { + const [prevBtnPage, setprevBtnPage] = useState(() => { const savedPage = localStorage.getItem('currentPage'); return savedPage ? Number(savedPage) : 1; }); @@ -82,7 +82,7 @@ function SideBar() { }; fetchData(); - }, [itemsPerPage, currentPage, prevPage]); + }, [itemsPerPage, currentPage, prevBtnPage]); useEffect(() => { localStorage.setItem('currentPage', currentPage.toString()); @@ -90,18 +90,17 @@ function SideBar() { useEffect(() => { const isMobileSetPage = () => { - if(isMobile) { + if (isMobile) { localStorage.setItem('currentPage', '1'); setCurrentPage(1); + } else { + localStorage.setItem('currentPage', prevBtnPage.toString()); + setCurrentPage(prevBtnPage); } - else { - localStorage.setItem('currentPage', prevPage.toString()); - setCurrentPage(prevPage); - } - } + }; isMobileSetPage(); - }, [prevPage, isMobile]) + }, [prevBtnPage, isMobile]); const fetchPageData = async (page: number) => { try { @@ -118,7 +117,7 @@ function SideBar() { const prevPage = currentPage - 1; fetchPageData(prevPage); setCurrentPage(prevPage); - setPrevPage(prevPage); + setprevBtnPage(prevPage); } }; @@ -127,7 +126,7 @@ function SideBar() { const nextPage = currentPage + 1; fetchPageData(nextPage); setCurrentPage(nextPage); - setPrevPage(nextPage); + setprevBtnPage(nextPage); } }; diff --git a/src/contexts/DashboardContext.tsx b/src/contexts/DashboardContext.tsx index 1c482ce..aff9f99 100644 --- a/src/contexts/DashboardContext.tsx +++ b/src/contexts/DashboardContext.tsx @@ -5,6 +5,7 @@ import { ReactNode, useMemo, } from 'react'; +import { useLocation } from 'react-router-dom'; /* 사이드 바 대시보드 클릭에 따라 데이터를 옮기고 Navigate 하기 위한 상태관리 Context 입니다. @@ -20,32 +21,28 @@ interface DashboardContextProps { setActiveTitle: (dashboard: string) => void; } -export const DashboardContext = createContext( - null, -); +export const DashboardContext = createContext(null); interface DashboardProviderProps { children: ReactNode; } export function DashboardProvider({ children }: DashboardProviderProps) { - const [activeDashboard, setActiveDashboard] = useState( - () => { - const savedDashboardId = localStorage.getItem('activeDashboard'); - return savedDashboardId ? Number(savedDashboardId) : undefined; - }, - ); - const [isCreateByMe, setIsCreateByMe] = useState( - () => { - const savedIsCreatedByMe = localStorage.getItem('isCreatedByMe'); - return savedIsCreatedByMe ? Boolean(savedIsCreatedByMe) : undefined; - }, - ); + const [activeDashboard, setActiveDashboard] = useState(() => { + const savedDashboardId = localStorage.getItem('activeDashboard'); + return savedDashboardId ? Number(savedDashboardId) : undefined; + }); + const [isCreateByMe, setIsCreateByMe] = useState(() => { + const savedIsCreatedByMe = localStorage.getItem('isCreatedByMe'); + return savedIsCreatedByMe ? savedIsCreatedByMe === 'true' : undefined; + }); const [activeTitle, setActiveTitle] = useState(() => { const savedTitle = localStorage.getItem('activeTitle'); return savedTitle || undefined; }); + const location = useLocation(); + useEffect(() => { if (activeDashboard !== undefined) { localStorage.setItem('activeDashboard', activeDashboard.toString()); @@ -65,7 +62,6 @@ export function DashboardProvider({ children }: DashboardProviderProps) { }, [activeTitle]); useEffect(() => { - // Clear local storage when navigating to /dashboard if (location.pathname === '/mydashboard' || location.pathname === '/mypage') { setActiveDashboard(undefined); setActiveTitle(undefined); @@ -77,24 +73,14 @@ export function DashboardProvider({ children }: DashboardProviderProps) { } }, [location.pathname]); - const contextValue = useMemo( - () => ({ - activeDashboard, - setActiveDashboard, - isCreateByMe, - setIsCreateByMe, - activeTitle, - setActiveTitle, - }), - [ - activeDashboard, - setActiveDashboard, - isCreateByMe, - setIsCreateByMe, - activeTitle, - setActiveTitle, - ], - ); + const contextValue = useMemo(() => ({ + activeDashboard, + setActiveDashboard, + isCreateByMe, + setIsCreateByMe, + activeTitle, + setActiveTitle, + }), [activeDashboard, isCreateByMe, activeTitle]); return ( diff --git a/src/pages/NotFound/NotFound.module.scss b/src/pages/NotFound/NotFound.module.scss new file mode 100644 index 0000000..2104615 --- /dev/null +++ b/src/pages/NotFound/NotFound.module.scss @@ -0,0 +1,78 @@ +@import '../../styles/media.scss'; + +.NotFound { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; // 부모 요소가 relative인 경우 absolute 자식의 기준이 됩니다. +} + +.LogoMain { + z-index: -1; // 가장 뒤로 보내기 위해 -1로 설정 + position: absolute; + width: 30%; + opacity: 20%; +} + +.Error { + z-index: 1; // LogoMain 앞에 위치하도록 z-index 설정 + min-width: 300px; + font-family: Pretendard; + font-size: 80px; + color: #5534da; + @include mobile { + font-size: 50px; + } +} + +.text1 { + z-index: 1; // LogoMain 앞에 위치하도록 z-index 설정 + min-width: 300px; + font-family: Pretendard; + font-size: 30px; + color: black; + font-weight: 700; + margin-bottom: 20px; + margin-top: 20px; + text-align: center; + @include mobile { + font-size: 20px; + } +} + +.text2 { + z-index: 1; // LogoMain 앞에 위치하도록 z-index 설정 + min-width: 300px; + font-family: Pretendard; + font-size: 20px; + color: gray; + font-weight: 700; + margin-bottom: 100px; + text-align: center; + @include mobile { + font-size: 15px; + } +} + +.goToMainBtn { + z-index: 1; // LogoMain 앞에 위치하도록 z-index 설정 + color: var(--white, #fff); + text-align: center; + font-family: Pretendard; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: normal; + display: flex; + width: 280px; + padding: 15px 0px 14px 0px; + justify-content: center; + align-items: center; + border-radius: 8px; + background: var(--violet-violet_5534DA, #5534da); + text-decoration: none; + cursor: pointer; +} diff --git a/src/pages/NotFound/NotFound.tsx b/src/pages/NotFound/NotFound.tsx new file mode 100644 index 0000000..dda39fc --- /dev/null +++ b/src/pages/NotFound/NotFound.tsx @@ -0,0 +1,21 @@ +import { Link } from 'react-router-dom'; +import styles from './NotFound.module.scss'; +import Logo from '/icon/logo_small.svg'; + +function NotFound() { + return ( +
+ Taskify 로고 +

404 ERROR

+
페이지를 찾을 수 없습니다!
+
+ 존재하지 않거나, 사용할 수 없는 페이지 입니다. +
+ +
메인으로
+ +
+ ); +} + +export default NotFound; diff --git a/src/pages/dashboard.{dashboardid}/components/GnbHeader/GnbHeader.tsx b/src/pages/dashboard.{dashboardid}/components/GnbHeader/GnbHeader.tsx index 5658ecc..5aa04fb 100644 --- a/src/pages/dashboard.{dashboardid}/components/GnbHeader/GnbHeader.tsx +++ b/src/pages/dashboard.{dashboardid}/components/GnbHeader/GnbHeader.tsx @@ -17,7 +17,7 @@ function ProfileKebab() { if (!context) { throw new Error('반드시 DashboardProvider 안에서 사용해야 합니다.'); } - const {setUserInfo} = context; + const { setUserInfo } = context; const navigate = useNavigate(); @@ -82,7 +82,7 @@ function GnbHeader() {
- {isCreateByMe ? :
} + {isCreateByMe ? :
}
@@ -95,7 +95,7 @@ function GnbHeader() { profileImageUrl="#A3C4A2" nickname={userInfo?.nickname} /> */} - +
{userInfo?.nickname}
{ProfileKebabOpen && } diff --git a/src/pages/dashboard.{dashboardid}/components/Members/Members.tsx b/src/pages/dashboard.{dashboardid}/components/Members/Members.tsx index 2dcca81..8e5150f 100644 --- a/src/pages/dashboard.{dashboardid}/components/Members/Members.tsx +++ b/src/pages/dashboard.{dashboardid}/components/Members/Members.tsx @@ -108,7 +108,7 @@ function Members({ dashboardId }: { dashboardId: number | undefined }) { key={member.id} isImg={false} nickname={member.nickname} - profileImageUrl={'#f0f0f0'} + profileImageUrl="#f0f0f0" /> ))} {extraMembersCount > 0 && ( diff --git a/src/pages/dashboard.{dashboardid}/index.tsx b/src/pages/dashboard.{dashboardid}/index.tsx index e9580d6..c3a2e94 100644 --- a/src/pages/dashboard.{dashboardid}/index.tsx +++ b/src/pages/dashboard.{dashboardid}/index.tsx @@ -4,8 +4,6 @@ import ColumnList from './components/ColumnList/ColumnList'; import styles from './index.module.scss'; function DashboardMain() { - - return (
diff --git a/src/pages/dashboardEdit/index.tsx b/src/pages/dashboardEdit/index.tsx index 9453b25..ad08632 100644 --- a/src/pages/dashboardEdit/index.tsx +++ b/src/pages/dashboardEdit/index.tsx @@ -1,4 +1,4 @@ -import { useContext, useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; import { apiDashboardsDetail } from '../../api/apiModule'; import SideBar from '../../components/sidebar/sidebar'; @@ -9,7 +9,7 @@ import NameEdit from './NameEdit/NameEdit'; import styles from './index.module.scss'; import { DeleteDashBoardBtn } from '../../components/Btn/Btn'; import DeleteDashboardModal from '../modal/DeleteDashboardModal/DeleteDashboardModal'; -//import { DashboardContext } from '../../contexts/DashboardContext'; +// import { DashboardContext } from '../../contexts/DashboardContext'; /* 대시보드 수정 페이지 - 전체적인 레이아웃 */ @@ -30,15 +30,14 @@ function DashboardEdit() { setDashboardId(+id); setDashboardName(data.title); setDashboardColor(data.color); - if(!data.createdByMe) { - console.log('접근불가'); + if (!data.createdByMe) { navigate('/404'); } } }; fetchDashboards(); - }, [id]); + }, [id, navigate]); const handleBackButton = () => { navigate(`/dashboard/${id}`); diff --git a/src/pages/modal/NewDashModal/NewDashModal.tsx b/src/pages/modal/NewDashModal/NewDashModal.tsx index cf390e5..d646770 100644 --- a/src/pages/modal/NewDashModal/NewDashModal.tsx +++ b/src/pages/modal/NewDashModal/NewDashModal.tsx @@ -25,14 +25,14 @@ function NewDashModal({ isOpen, setIsOpen }: ModalProps) { const [colorValue, setColorValue] = useState(''); const [inputValue, setInputValue] = useState(''); const context = useContext(DashboardContext); - if (!context) { - throw new Error('반드시 DashboardProvider 안에서 사용해야 합니다.'); - } - const {setActiveTitle, setActiveDashboard, setIsCreateByMe} = context; + if (!context) { + throw new Error('반드시 DashboardProvider 안에서 사용해야 합니다.'); + } + const { setActiveTitle, setActiveDashboard, setIsCreateByMe } = context; // /dashboard/{dashboardid}로 이동 const goDashboard = (id: number, title : string, createdByMe : boolean) => { - setActiveDashboard(id) + setActiveDashboard(id); setActiveTitle(title); setIsCreateByMe(createdByMe); localStorage.setItem('currentPage', '1'); diff --git a/src/pages/mypage/components/Header/Header.tsx b/src/pages/mypage/components/Header/Header.tsx index ea7e912..627f3db 100644 --- a/src/pages/mypage/components/Header/Header.tsx +++ b/src/pages/mypage/components/Header/Header.tsx @@ -12,7 +12,7 @@ function ProfileKebab() { if (!context) { throw new Error('반드시 DashboardProvider 안에서 사용해야 합니다.'); } - const {setUserInfo} = context; + const { setUserInfo } = context; const navigate = useNavigate(); From 34b6e80d7360b0be179ea8ab8bd3b55d9ce52bb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=80=EC=A7=80?= <103625348+eunji-0623@users.noreply.github.com> Date: Sat, 15 Jun 2024 12:49:12 +0900 Subject: [PATCH 19/30] =?UTF-8?q?Fix:=20=EC=9D=B4=EB=A6=84=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20=EC=8B=9C=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20?= =?UTF-8?q?=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8,=20=ED=97=A4=EB=8D=94=20?= =?UTF-8?q?=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD=20=EB=90=98=EA=B2=8C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/sidebar/sidebar.tsx | 25 ++++++++++--------- src/pages/dashboardEdit/NameEdit/NameEdit.tsx | 16 ++++++++---- 2 files changed, 24 insertions(+), 17 deletions(-) diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index 3ee5ada..47949f4 100644 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -26,7 +26,7 @@ const ITEMS_PER_PAGE_MOBILE = 100; const fetchDashboards = async ( page: number, - itemsPerPage: number, + itemsPerPage: number ): Promise<{ items: DashboardDetail[]; totalCount: number }> => { const data = await apiDashboardsList({ navigationMethod: 'pagination', @@ -65,7 +65,10 @@ function SideBar() { useEffect(() => { const fetchData = async () => { try { - const { items: dashboards, totalCount } = await fetchDashboards(1, itemsPerPage); + const { items: dashboards, totalCount } = await fetchDashboards( + 1, + itemsPerPage + ); setDashboardItems(dashboards); setTotalPages(Math.ceil(totalCount / itemsPerPage)); } catch (error) { @@ -135,11 +138,7 @@ function SideBar() {
- {isError && ( -
- {errorMessage} -
- )} + {isError &&
{errorMessage}
}
{dashboardItems.map((dashboard) => ( ClickDashboard( - dashboard.id, - dashboard.createdByMe, - dashboard.title, - )} + onClick={() => + ClickDashboard( + dashboard.id, + dashboard.createdByMe, + dashboard.title + ) + } /> ))}
diff --git a/src/pages/dashboardEdit/NameEdit/NameEdit.tsx b/src/pages/dashboardEdit/NameEdit/NameEdit.tsx index 248a388..4e28c40 100644 --- a/src/pages/dashboardEdit/NameEdit/NameEdit.tsx +++ b/src/pages/dashboardEdit/NameEdit/NameEdit.tsx @@ -1,10 +1,15 @@ import { - useState, useEffect, Dispatch, SetStateAction, + useState, + useEffect, + useContext, + Dispatch, + SetStateAction, } from 'react'; import styles from './NameEdit.module.scss'; import { ChangeAndSaveBtn } from '../../../components/Btn/Btn'; import { apiEditDashboards } from '../../../api/apiModule'; import Chips from './Chips'; +import { DashboardContext } from '../../../contexts/DashboardContext'; /* 대시보드 수정 페이지 중 이름과 색상을 바꾸기 위한 부분입니다. */ @@ -16,11 +21,10 @@ interface Props { handleChange: Dispatch>; } -function Info({ - name, color, dashboardId, handleChange, -}: Props) { +function Info({ name, color, dashboardId, handleChange }: Props) { const [newName, setNewName] = useState(''); const [selectedColor, setSelectedColor] = useState(color); + const dashContext = useContext(DashboardContext); const handleChangeName = (event: React.ChangeEvent) => { setNewName(event.target.value); @@ -31,12 +35,14 @@ function Info({ handleChange(name); } else { handleChange(newName); + dashContext?.setActiveTitle(newName); } await apiEditDashboards( { title: newName, color: selectedColor }, - { dashboardId }, + { dashboardId } ); setNewName(''); + window.location.reload(); }; useEffect(() => { From c75143ffb9f53d83ffeb4f4f02b843dd03a99db4 Mon Sep 17 00:00:00 2001 From: juan0444 Date: Sat, 15 Jun 2024 12:59:10 +0900 Subject: [PATCH 20/30] =?UTF-8?q?Feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=97=86=EC=9D=84=20=EA=B2=BD=EC=9A=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modal/EditTodoModal/EditTodoModal.tsx | 4 ++-- .../EditInputImage/EditInputImage.module.scss | 3 ++- .../EditInputImage/EditInputImage.tsx | 22 +++++++++++-------- 3 files changed, 17 insertions(+), 12 deletions(-) diff --git a/src/pages/modal/EditTodoModal/EditTodoModal.tsx b/src/pages/modal/EditTodoModal/EditTodoModal.tsx index 97a33f3..9848905 100644 --- a/src/pages/modal/EditTodoModal/EditTodoModal.tsx +++ b/src/pages/modal/EditTodoModal/EditTodoModal.tsx @@ -55,7 +55,7 @@ function EditTodoModal({ const [description, setDescription] = useState(''); const [dueDate, setDueDate] = useState(''); const [tags, setTags] = useState([]); - const [imageUrl, setImageUrl] = useState(''); + const [imageUrl, setImageUrl] = useState(undefined); const [members, setMembers] = useState([]); const [memberIdList, setMemberIdList] = useState([]); const [clickManagerId, setClickManagerId] = useState(userId); @@ -120,7 +120,7 @@ function EditTodoModal({ setDescription(cardData.description); setDueDate(cardData.dueDate); setTags(cardData.tags); - setImageUrl(cardData.imageUrl || ''); + setImageUrl(cardData.imageUrl || undefined); } }, [cardData]); diff --git a/src/pages/modal/components/EditInputImage/EditInputImage.module.scss b/src/pages/modal/components/EditInputImage/EditInputImage.module.scss index 96eccca..76ba986 100644 --- a/src/pages/modal/components/EditInputImage/EditInputImage.module.scss +++ b/src/pages/modal/components/EditInputImage/EditInputImage.module.scss @@ -24,7 +24,8 @@ } .contentImageBasic, -.contentImage { +.contentImage, +.contentImage2 { width: 4.5rem; height: 4.5rem; border: 1px solid $gray_D9D9D9; diff --git a/src/pages/modal/components/EditInputImage/EditInputImage.tsx b/src/pages/modal/components/EditInputImage/EditInputImage.tsx index 8b239be..8b870de 100644 --- a/src/pages/modal/components/EditInputImage/EditInputImage.tsx +++ b/src/pages/modal/components/EditInputImage/EditInputImage.tsx @@ -3,14 +3,15 @@ import styles from './EditInputImage.module.scss'; import PencilIcon from '/icon/pencil.svg'; import AddIcon from '/icon/add_image_box.svg'; import { apiUploadCardImage } from '../../../../api/apiModule'; +import AddImageIcon from '/icon/add_image_box.svg'; /* 할 일 수정 모달에서 이미지를 첨부할 때 apiUploadCardImage로 카드 이미지를 업로드합니다. */ interface InputImageProps { - imageUrl: string | null; - setImageUrl: React.Dispatch>; + imageUrl: string | undefined; + setImageUrl: React.Dispatch>; columnId: number; } @@ -53,16 +54,19 @@ function EditInputImage({
Date: Sat, 15 Jun 2024 13:15:06 +0900 Subject: [PATCH 21/30] =?UTF-8?q?Fix:=20=EC=B4=88=EB=8C=80=20=EB=B3=B4?= =?UTF-8?q?=EB=82=B8=20=ED=9B=84=20=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8,?= =?UTF-8?q?=20=EC=B4=88=EB=8C=80=20=EB=AA=A8=EB=8B=AC=EC=97=90=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=EB=A9=94=EC=84=B8=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modal/InviteModal/InviteModal.module.scss | 32 +++++++++++++------ src/pages/modal/InviteModal/InviteModal.tsx | 25 +++++++++++++-- 2 files changed, 45 insertions(+), 12 deletions(-) diff --git a/src/pages/modal/InviteModal/InviteModal.module.scss b/src/pages/modal/InviteModal/InviteModal.module.scss index e9ae03f..fc6575f 100644 --- a/src/pages/modal/InviteModal/InviteModal.module.scss +++ b/src/pages/modal/InviteModal/InviteModal.module.scss @@ -11,7 +11,7 @@ padding: 2rem 1.75rem 1.75rem; background-color: $white_FFFFFF; - @include mobile{ + @include mobile { width: 20.4375rem; height: 16.625rem; padding: 1.75rem 1.25rem; @@ -22,7 +22,7 @@ font-size: 1.5rem; font-weight: 700; - @include mobile{ + @include mobile { font-size: 1.25rem; } } @@ -32,7 +32,7 @@ font-size: 1.125rem; font-weight: 500; - @include mobile{ + @include mobile { font-size: 1rem; } } @@ -41,7 +41,7 @@ .content { display: flex; flex-direction: column; - margin: 2rem 0 1.75rem; + margin: 2rem 0 0; } .inputText { @@ -57,11 +57,11 @@ background: $white_FFFFFF; &:focus { - outline: none; - border: 1px solid $violet_5534DA + outline: none; + border: 1px solid $violet_5534DA; } - @include mobile{ + @include mobile { font-size: 0.875rem; } } @@ -71,12 +71,24 @@ border: 1px solid $red_D6173A; } +.errorMessage { + color: $red_D6173A; + margin-bottom: 1.75rem; + margin-left: 0.5rem; +} + +.message { + color: transparent; + margin-bottom: 1.75rem; + margin-left: 0.5rem; +} + .buttonBlock { display: flex; justify-content: flex-end; gap: 0.75rem; - @include mobile{ + @include mobile { right: 1.25rem; bottom: 1.25rem; } @@ -89,7 +101,7 @@ font-weight: 500; cursor: pointer; - @include mobile{ + @include mobile { width: 8.625rem; height: 2.625rem; font-size: 0.875rem; @@ -124,4 +136,4 @@ border-radius: 4px; border: 0px; color: $white_FFFFFF; -} \ No newline at end of file +} diff --git a/src/pages/modal/InviteModal/InviteModal.tsx b/src/pages/modal/InviteModal/InviteModal.tsx index de03de9..d13d118 100644 --- a/src/pages/modal/InviteModal/InviteModal.tsx +++ b/src/pages/modal/InviteModal/InviteModal.tsx @@ -3,6 +3,7 @@ import ModalContainer from '../ModalContainer/ModalContainer'; import { apiInviteDashboards } from '../../../api/apiModule'; import { DeleteBtn } from '../../../components/Btn/Btn'; import styles from './InviteModal.module.scss'; +import axios, { AxiosError } from 'axios'; /* 초대하기 모달입니다. @@ -16,6 +17,7 @@ interface ModalProps { function InviteModal({ isOpen, setIsOpen, dashboardId }: ModalProps) { const [email, setEmail] = useState(''); + const [error, setError] = useState(''); // 모달 닫기 const close = useCallback(() => { @@ -33,11 +35,23 @@ function InviteModal({ isOpen, setIsOpen, dashboardId }: ModalProps) { setIsOpen(false); } } catch (error) { + if (axios.isAxiosError(error)) { + const errorResponse = error.response?.status; + if (errorResponse === 404) { + setError('이메일을 다시 한번 확인해주세요'); + } else if (errorResponse === 403) { + setError('대시보드 초대 권한이 없습니다'); + } + } else { + setError('예상치 못한 오류가 발생했습니다'); + } throw new Error('error'); } + window.location.reload(); }; const handleChange = (event: React.ChangeEvent) => { + setError(''); setEmail(event.target.value); }; @@ -59,13 +73,20 @@ function InviteModal({ isOpen, setIsOpen, dashboardId }: ModalProps) { onChange={handleChange} />
+

+ 존재하지 않는 유저 입니다. +

{email.length !== 0 ? ( - + ) : ( - + )}
From 25dacc2be1c587cb0c14a0e06311289fcd623391 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=80=EC=A7=80?= <103625348+eunji-0623@users.noreply.github.com> Date: Sat, 15 Jun 2024 13:28:17 +0900 Subject: [PATCH 22/30] =?UTF-8?q?Fix:=20=EC=B4=88=EB=8C=80=EB=B0=9B?= =?UTF-8?q?=EC=9D=80=20=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 초대받은 목록 내역이 없을 때 나오던 아이콘이 사라지는 현상 수정 - 초대 수락 시 화면 새로고침 되도록 변경 --- src/pages/modal/InviteModal/InviteModal.tsx | 2 +- src/pages/myDashboard/components/Invited/Invited.tsx | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/pages/modal/InviteModal/InviteModal.tsx b/src/pages/modal/InviteModal/InviteModal.tsx index d13d118..ce9c1f0 100644 --- a/src/pages/modal/InviteModal/InviteModal.tsx +++ b/src/pages/modal/InviteModal/InviteModal.tsx @@ -3,7 +3,7 @@ import ModalContainer from '../ModalContainer/ModalContainer'; import { apiInviteDashboards } from '../../../api/apiModule'; import { DeleteBtn } from '../../../components/Btn/Btn'; import styles from './InviteModal.module.scss'; -import axios, { AxiosError } from 'axios'; +import axios from 'axios'; /* 초대하기 모달입니다. diff --git a/src/pages/myDashboard/components/Invited/Invited.tsx b/src/pages/myDashboard/components/Invited/Invited.tsx index 2df15e4..3a49cdc 100644 --- a/src/pages/myDashboard/components/Invited/Invited.tsx +++ b/src/pages/myDashboard/components/Invited/Invited.tsx @@ -66,12 +66,17 @@ function Invited() { const loadMoreInvitations = useCallback(async () => { if (!hasNext) { - setEmpty(true); + if (invitations.length === 0) { + setEmpty(true); + } return; } try { const newInvitations = await fetchInvitations(cursor, title); + if (hasNext && newInvitations.invitations.length === 0) { + setEmpty(true); + } // 중복 초대 필터링 const filteredInvitations = newInvitations.invitations.filter( @@ -164,6 +169,7 @@ function Invited() { ) ) ); + window.location.reload(); } setInvitations((prev) => prev.filter((invitation) => invitation.id !== id)); From 48d46956414ef53b08f301eb55369c373d6a8d60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=80=EC=A7=80?= <103625348+eunji-0623@users.noreply.github.com> Date: Sat, 15 Jun 2024 13:33:39 +0900 Subject: [PATCH 23/30] =?UTF-8?q?Fix:=20linter=20=EC=98=A4=EB=A5=98=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/sidebar/sidebar.tsx | 16 ++++---- src/pages/dashboardEdit/MemberEdit/Member.tsx | 8 +++- src/pages/dashboardEdit/NameEdit/NameEdit.tsx | 6 ++- src/pages/modal/InviteModal/InviteModal.tsx | 8 ++-- .../components/Invited/Invited.tsx | 41 ++++++++----------- 5 files changed, 39 insertions(+), 40 deletions(-) diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index 47949f4..57de9b2 100644 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -26,7 +26,7 @@ const ITEMS_PER_PAGE_MOBILE = 100; const fetchDashboards = async ( page: number, - itemsPerPage: number + itemsPerPage: number, ): Promise<{ items: DashboardDetail[]; totalCount: number }> => { const data = await apiDashboardsList({ navigationMethod: 'pagination', @@ -67,7 +67,7 @@ function SideBar() { try { const { items: dashboards, totalCount } = await fetchDashboards( 1, - itemsPerPage + itemsPerPage, ); setDashboardItems(dashboards); setTotalPages(Math.ceil(totalCount / itemsPerPage)); @@ -147,13 +147,11 @@ function SideBar() { title={dashboard.title} createdByMe={dashboard.createdByMe} selectedId={dashboard.id} - onClick={() => - ClickDashboard( - dashboard.id, - dashboard.createdByMe, - dashboard.title - ) - } + onClick={() => ClickDashboard( + dashboard.id, + dashboard.createdByMe, + dashboard.title, + )} /> ))}
diff --git a/src/pages/dashboardEdit/MemberEdit/Member.tsx b/src/pages/dashboardEdit/MemberEdit/Member.tsx index 54e67a9..c223e63 100644 --- a/src/pages/dashboardEdit/MemberEdit/Member.tsx +++ b/src/pages/dashboardEdit/MemberEdit/Member.tsx @@ -13,7 +13,9 @@ interface Props { handleReload: () => void; } -function Member({ memberId, name, profile, isOwner, handleReload }: Props) { +function Member({ + memberId, name, profile, isOwner, handleReload, +}: Props) { const handleDeleteButton = async () => { await apiDeleteMemeber({ memberId }); handleReload(); @@ -25,7 +27,9 @@ function Member({ memberId, name, profile, isOwner, handleReload }: Props) { 프로필
- {name} {isOwner ? 왕관 : null} + {name} + {' '} + {isOwner ? 왕관 : null} {!isOwner ? ( diff --git a/src/pages/dashboardEdit/NameEdit/NameEdit.tsx b/src/pages/dashboardEdit/NameEdit/NameEdit.tsx index 4e28c40..9601ab5 100644 --- a/src/pages/dashboardEdit/NameEdit/NameEdit.tsx +++ b/src/pages/dashboardEdit/NameEdit/NameEdit.tsx @@ -21,7 +21,9 @@ interface Props { handleChange: Dispatch>; } -function Info({ name, color, dashboardId, handleChange }: Props) { +function Info({ + name, color, dashboardId, handleChange, +}: Props) { const [newName, setNewName] = useState(''); const [selectedColor, setSelectedColor] = useState(color); const dashContext = useContext(DashboardContext); @@ -39,7 +41,7 @@ function Info({ name, color, dashboardId, handleChange }: Props) { } await apiEditDashboards( { title: newName, color: selectedColor }, - { dashboardId } + { dashboardId }, ); setNewName(''); window.location.reload(); diff --git a/src/pages/modal/InviteModal/InviteModal.tsx b/src/pages/modal/InviteModal/InviteModal.tsx index ce9c1f0..6175f5d 100644 --- a/src/pages/modal/InviteModal/InviteModal.tsx +++ b/src/pages/modal/InviteModal/InviteModal.tsx @@ -1,9 +1,9 @@ import { useCallback, useState } from 'react'; +import axios from 'axios'; import ModalContainer from '../ModalContainer/ModalContainer'; import { apiInviteDashboards } from '../../../api/apiModule'; import { DeleteBtn } from '../../../components/Btn/Btn'; import styles from './InviteModal.module.scss'; -import axios from 'axios'; /* 초대하기 모달입니다. @@ -34,9 +34,9 @@ function InviteModal({ isOpen, setIsOpen, dashboardId }: ModalProps) { if (response) { setIsOpen(false); } - } catch (error) { - if (axios.isAxiosError(error)) { - const errorResponse = error.response?.status; + } catch (e) { + if (axios.isAxiosError(e)) { + const errorResponse = e.response?.status; if (errorResponse === 404) { setError('이메일을 다시 한번 확인해주세요'); } else if (errorResponse === 403) { diff --git a/src/pages/myDashboard/components/Invited/Invited.tsx b/src/pages/myDashboard/components/Invited/Invited.tsx index 3a49cdc..59076e9 100644 --- a/src/pages/myDashboard/components/Invited/Invited.tsx +++ b/src/pages/myDashboard/components/Invited/Invited.tsx @@ -44,7 +44,7 @@ const PAGE_SIZE = 6; const fetchInvitations = async ( cursor: number, - title: string + title: string, ): Promise => { const data = await apiMyInvitationsList({ size: PAGE_SIZE, @@ -80,12 +80,10 @@ function Invited() { // 중복 초대 필터링 const filteredInvitations = newInvitations.invitations.filter( - (invitation) => - !invitations.some( - (existingInvitation) => - existingInvitation.inviter.id === invitation.inviter.id && - existingInvitation.dashboard.id === invitation.dashboard.id - ) + (invitation) => !invitations.some( + (existingInvitation) => existingInvitation.inviter.id === invitation.inviter.id + && existingInvitation.dashboard.id === invitation.dashboard.id, + ), ); if (cursor === 0) { @@ -122,7 +120,7 @@ function Invited() { setEmpty(false); loadMoreInvitations(); }, - [loadMoreInvitations] + [loadMoreInvitations], ); const handleInvitation = async ( @@ -130,11 +128,11 @@ function Invited() { inviterId: number, dashboardId: number, dashboardName: string, - isAccept: boolean + isAccept: boolean, ) => { await apiInvitationAccept( { invitationId: id }, - { inviteAccepted: isAccept } + { inviteAccepted: isAccept }, ); // 초대 수락 시 @@ -147,28 +145,25 @@ function Invited() { // 중복 초대 중 하나 수락 시 나머지 초대 모두 거절로 처리 const promises = response.invitations.map(async (invitation) => { if ( - invitation.inviter.id === inviterId && - invitation.dashboard.id === dashboardId + invitation.inviter.id === inviterId + && invitation.dashboard.id === dashboardId ) { await apiInvitationAccept( { invitationId: invitation.id }, - { inviteAccepted: false } + { inviteAccepted: false }, ); } }); await Promise.all(promises); - setInvitations((prev) => - prev.filter( - (invitation) => - invitation.id !== id && - !( - invitation.inviter.id === inviterId && - invitation.dashboard.id === dashboardId - ) - ) - ); + setInvitations((prev) => prev.filter( + (invitation) => invitation.id !== id + && !( + invitation.inviter.id === inviterId + && invitation.dashboard.id === dashboardId + ), + )); window.location.reload(); } From ce44918e43545e0280925940c81b880f7cc9414a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=80=EC=A7=80?= <103625348+eunji-0623@users.noreply.github.com> Date: Sat, 15 Jun 2024 13:41:42 +0900 Subject: [PATCH 24/30] =?UTF-8?q?Fix:=20=EC=B4=88=EB=8C=80=EB=B0=9B?= =?UTF-8?q?=EC=9D=80=20=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/myDashboard/components/Invited/Invited.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/pages/myDashboard/components/Invited/Invited.tsx b/src/pages/myDashboard/components/Invited/Invited.tsx index 59076e9..87dec6e 100644 --- a/src/pages/myDashboard/components/Invited/Invited.tsx +++ b/src/pages/myDashboard/components/Invited/Invited.tsx @@ -74,7 +74,11 @@ function Invited() { try { const newInvitations = await fetchInvitations(cursor, title); - if (hasNext && newInvitations.invitations.length === 0) { + if ( + hasNext + && newInvitations.invitations.length === 0 + && invitations.length === 0 + ) { setEmpty(true); } From a72de990ca75ae354419397522260dadc1c30b4c Mon Sep 17 00:00:00 2001 From: juan0444 Date: Sat, 15 Jun 2024 13:56:19 +0900 Subject: [PATCH 25/30] =?UTF-8?q?Feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=97=86=EC=9D=84=20=EA=B2=BD=EC=9A=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Calendar/Calendar.module.scss | 5 ---- .../DropdownMenu/DropdownMenu.module.scss | 6 +---- .../EditInputImage/EditInputImage.tsx | 7 +++-- .../EditManagerDropdown.module.scss | 11 +++----- .../ManagerDropdown.module.scss | 13 ++++------ .../ManagerDropdown/ManagerDropdown.tsx | 26 +++++++++---------- .../modal/components/Title/Title.module.scss | 4 --- 7 files changed, 26 insertions(+), 46 deletions(-) diff --git a/src/pages/modal/components/Calendar/Calendar.module.scss b/src/pages/modal/components/Calendar/Calendar.module.scss index f52d9e7..2eb70f9 100644 --- a/src/pages/modal/components/Calendar/Calendar.module.scss +++ b/src/pages/modal/components/Calendar/Calendar.module.scss @@ -30,7 +30,6 @@ @include mobile { width: 21.3rem; - height: 2rem; } } @@ -39,8 +38,4 @@ position: absolute; top: 2.2rem; left: 0.5rem; - - @include mobile { - top: 1.8rem; - } } diff --git a/src/pages/modal/components/DropdownMenu/DropdownMenu.module.scss b/src/pages/modal/components/DropdownMenu/DropdownMenu.module.scss index ae77d4f..5350982 100644 --- a/src/pages/modal/components/DropdownMenu/DropdownMenu.module.scss +++ b/src/pages/modal/components/DropdownMenu/DropdownMenu.module.scss @@ -40,10 +40,6 @@ outline: none; border: 1px solid $violet_5534DA; } - - @include mobile { - height: 2.2rem; - } } .dropdownBlock { @@ -60,7 +56,7 @@ .items { position: relative; width: 100%; - margin-top: 0.12rem; + margin-top: 1rem; display: flex; flex-direction: column; align-items: start; diff --git a/src/pages/modal/components/EditInputImage/EditInputImage.tsx b/src/pages/modal/components/EditInputImage/EditInputImage.tsx index 8b870de..f40e4a5 100644 --- a/src/pages/modal/components/EditInputImage/EditInputImage.tsx +++ b/src/pages/modal/components/EditInputImage/EditInputImage.tsx @@ -1,9 +1,8 @@ import { useRef, useEffect, ChangeEvent } from 'react'; +import { apiUploadCardImage } from '../../../../api/apiModule'; import styles from './EditInputImage.module.scss'; -import PencilIcon from '/icon/pencil.svg'; import AddIcon from '/icon/add_image_box.svg'; -import { apiUploadCardImage } from '../../../../api/apiModule'; -import AddImageIcon from '/icon/add_image_box.svg'; +import PencilIcon from '/icon/pencil.svg'; /* 할 일 수정 모달에서 이미지를 첨부할 때 apiUploadCardImage로 카드 이미지를 업로드합니다. @@ -60,7 +59,7 @@ function EditInputImage({ alt="img" /> */} {imageUrl === undefined - ? img + ? img : ( <> img diff --git a/src/pages/modal/components/EditManagerDropdown/EditManagerDropdown.module.scss b/src/pages/modal/components/EditManagerDropdown/EditManagerDropdown.module.scss index 85db602..29b6732 100644 --- a/src/pages/modal/components/EditManagerDropdown/EditManagerDropdown.module.scss +++ b/src/pages/modal/components/EditManagerDropdown/EditManagerDropdown.module.scss @@ -37,14 +37,9 @@ cursor: pointer; &:focus { - // 클릭 시 생기는 기본 테두리 변경 outline: none; border: 1px solid $violet_5534DA; } - - @include mobile { - height: 2.2rem; - } } .profileImg, @@ -75,7 +70,7 @@ .items { position: relative; width: 100%; - margin-top: 0.12rem; + margin-top: 1rem; display: flex; flex-direction: column; align-items: start; @@ -117,14 +112,16 @@ .searchBlock { position: relative; width: 100%; + height: 3rem; display: flex; + justify-content: center; + align-items: center; padding: 0; cursor: pointer; border-radius: 0.375rem; border: 1px solid #d9d9d9; &:focus { - // 클릭 시 생기는 기본 테두리 변경 outline: none; border: 1px solid $violet_5534DA; } diff --git a/src/pages/modal/components/ManagerDropdown/ManagerDropdown.module.scss b/src/pages/modal/components/ManagerDropdown/ManagerDropdown.module.scss index 85db602..e98b7c0 100644 --- a/src/pages/modal/components/ManagerDropdown/ManagerDropdown.module.scss +++ b/src/pages/modal/components/ManagerDropdown/ManagerDropdown.module.scss @@ -37,14 +37,9 @@ cursor: pointer; &:focus { - // 클릭 시 생기는 기본 테두리 변경 outline: none; border: 1px solid $violet_5534DA; } - - @include mobile { - height: 2.2rem; - } } .profileImg, @@ -68,14 +63,14 @@ width: 100%; @include mobile { - top: 2.2rem; + top: 2rem; } } .items { position: relative; width: 100%; - margin-top: 0.12rem; + margin-top: 1rem; display: flex; flex-direction: column; align-items: start; @@ -117,14 +112,16 @@ .searchBlock { position: relative; width: 100%; + height: 3rem; display: flex; + justify-content: center; + align-items: center; padding: 0; cursor: pointer; border-radius: 0.375rem; border: 1px solid #d9d9d9; &:focus { - // 클릭 시 생기는 기본 테두리 변경 outline: none; border: 1px solid $violet_5534DA; } diff --git a/src/pages/modal/components/ManagerDropdown/ManagerDropdown.tsx b/src/pages/modal/components/ManagerDropdown/ManagerDropdown.tsx index 5a1e846..7f90ee7 100644 --- a/src/pages/modal/components/ManagerDropdown/ManagerDropdown.tsx +++ b/src/pages/modal/components/ManagerDropdown/ManagerDropdown.tsx @@ -2,7 +2,7 @@ import { useEffect, useState, useRef } from 'react'; import styles from './ManagerDropdown.module.scss'; import ArrowDropDown from '/icon/arrow_drop_down.svg'; import checked from '/icon/checked_gray.svg'; -import { UserProfileImgSvg } from '../../../../components/UserProfileImg/UserProfileImg'; +import UserProfileImg, { UserProfileImgSvg } from '../../../../components/UserProfileImg/UserProfileImg'; /* 관리자를 드롭다운 메뉴로 볼 수 있습니다. @@ -132,18 +132,18 @@ function ManagerDropdown({ )}
{ - // profile ? ( - // - // ) : ( - // - // ) - profile && + member.profileImageUrl ? ( + + ) : ( + + ) + // profile && } {member.nickname}
diff --git a/src/pages/modal/components/Title/Title.module.scss b/src/pages/modal/components/Title/Title.module.scss index bd52339..5f38dee 100644 --- a/src/pages/modal/components/Title/Title.module.scss +++ b/src/pages/modal/components/Title/Title.module.scss @@ -10,10 +10,6 @@ .contentInput { height: 3rem; - @include mobile { - height: 2.2rem; - } - &:focus { outline: none; border: 1px solid $violet_5534DA; From 64390d25b6c2f3242b7d76ee79f19d5acbf4f702 Mon Sep 17 00:00:00 2001 From: Park Sumin Date: Sat, 15 Jun 2024 13:57:03 +0900 Subject: [PATCH 26/30] =?UTF-8?q?Fix=20:=20=EB=A6=B0=ED=8A=B8=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 4 ++-- src/components/UserProfileImg/UserProfileImg.tsx | 4 ++-- src/pages/dashboardEdit/MemberEdit/Member.tsx | 7 +++++-- src/pages/mypage/components/Header/Header.tsx | 4 +--- 4 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index ce58deb..44cc740 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -22,7 +22,7 @@ function AppLayout() { } /> } /> } /> - } /> {/* 추가된 404 경로 */} + } /> ); } @@ -44,7 +44,7 @@ function App() { )} /> - } /> {/* 추가된 404 경로 */} + } /> ); diff --git a/src/components/UserProfileImg/UserProfileImg.tsx b/src/components/UserProfileImg/UserProfileImg.tsx index 4d6a957..93832d4 100644 --- a/src/components/UserProfileImg/UserProfileImg.tsx +++ b/src/components/UserProfileImg/UserProfileImg.tsx @@ -44,7 +44,7 @@ export function MembersProfileImg({
{isImg ? ( @@ -62,7 +62,7 @@ svg 생성기가 있으면, 사용할 프로필 이미지 컴포넌트 props로 url 하나만 받아옵니다. */ interface UserProfileImgSvgProps { - profileImageUrl?: string | undefined; + profileImageUrl: string | undefined; } export function UserProfileImgSvg({ profileImageUrl }: UserProfileImgSvgProps) { diff --git a/src/pages/dashboardEdit/MemberEdit/Member.tsx b/src/pages/dashboardEdit/MemberEdit/Member.tsx index f1c1982..0f7a4ea 100644 --- a/src/pages/dashboardEdit/MemberEdit/Member.tsx +++ b/src/pages/dashboardEdit/MemberEdit/Member.tsx @@ -1,6 +1,6 @@ import { apiDeleteMemeber } from '../../../api/apiModule'; import { DeleteBtn } from '../../../components/Btn/Btn'; -import { MembersProfileImg, UserProfileImgSvg } from '../../../components/UserProfileImg/UserProfileImg'; +import { UserProfileImgSvg } from '../../../components/UserProfileImg/UserProfileImg'; import styles from './MemberEdit.module.scss'; /* 각각의 멤버 정보입니다 @@ -25,7 +25,10 @@ function Member({ return (
- + {name} diff --git a/src/pages/mypage/components/Header/Header.tsx b/src/pages/mypage/components/Header/Header.tsx index e253ddf..b3e85b2 100644 --- a/src/pages/mypage/components/Header/Header.tsx +++ b/src/pages/mypage/components/Header/Header.tsx @@ -63,8 +63,6 @@ function MyPageHeader() { } const { userInfo } = userContext; - const profileImageUrl = userInfo?.profileImageUrl || '#A3C4A2'; - return (
계정 관리
@@ -79,7 +77,7 @@ function MyPageHeader() { profileImageUrl={profileImageUrl} nickname={userInfo?.nickname} /> */} - +
{userInfo?.nickname}
{ProfileKebabOpen && } {' '} From e78ec4aa1d38d2a5e4fc3e30020865e525002f7c Mon Sep 17 00:00:00 2001 From: Park Sumin Date: Sat, 15 Jun 2024 14:00:17 +0900 Subject: [PATCH 27/30] =?UTF-8?q?Feat=20:=20=EB=B3=B8=EC=9D=B8=EC=9D=98=20?= =?UTF-8?q?=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=EA=B0=80=20=EC=95=84?= =?UTF-8?q?=EB=8B=90=20=EC=8B=9C=20404=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C?= =?UTF-8?q?=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ColumnList/ColumnList.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/dashboard.{dashboardid}/components/ColumnList/ColumnList.tsx b/src/pages/dashboard.{dashboardid}/components/ColumnList/ColumnList.tsx index 9a7cd11..afbb0c7 100644 --- a/src/pages/dashboard.{dashboardid}/components/ColumnList/ColumnList.tsx +++ b/src/pages/dashboard.{dashboardid}/components/ColumnList/ColumnList.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import { useParams } from 'react-router-dom'; +import { useNavigate, useParams } from 'react-router-dom'; import { AxiosError } from 'axios'; import Column from '../Column/Column'; import ColumnContainer from '../Column/ColumnContainer'; @@ -20,6 +20,8 @@ function ColumnList() { const { id: dashboardId } = useParams<{ id: string }>(); + const navigate = useNavigate(); + // 대시보드 목록 조회 async function getColumnList(id: number) { try { @@ -32,6 +34,7 @@ function ColumnList() { const axiosError = error as AxiosError; setErrorState(axiosError.message); setColumnList([]); + navigate('/404'); } } From 501694979c49cbfd51930c0511d0c35764acc99c Mon Sep 17 00:00:00 2001 From: juan0444 Date: Sat, 15 Jun 2024 14:00:45 +0900 Subject: [PATCH 28/30] =?UTF-8?q?Feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=97=86=EC=9D=84=20=EA=B2=BD=EC=9A=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../EditManagerDropdown/EditManagerDropdown.module.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/modal/components/EditManagerDropdown/EditManagerDropdown.module.scss b/src/pages/modal/components/EditManagerDropdown/EditManagerDropdown.module.scss index 29b6732..14a85cb 100644 --- a/src/pages/modal/components/EditManagerDropdown/EditManagerDropdown.module.scss +++ b/src/pages/modal/components/EditManagerDropdown/EditManagerDropdown.module.scss @@ -140,10 +140,9 @@ .searchInput { width: 100%; - padding: 1rem; + padding: 0.5rem; font-size: 0.8rem; border: none; - background-color: none; border-radius: 0.375rem; &::placeholder { From b7eafebae36e0d10cca768ee26e5afb2b4c36dbd Mon Sep 17 00:00:00 2001 From: Park Sumin Date: Sat, 15 Jun 2024 14:06:53 +0900 Subject: [PATCH 29/30] =?UTF-8?q?Fix=20:=20=EB=A6=B0=ED=8A=B8=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=ED=95=B4=EA=B2=B0=20=EB=B0=8F=20coulumList=20useCa?= =?UTF-8?q?llback=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ColumnList/ColumnList.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/pages/dashboard.{dashboardid}/components/ColumnList/ColumnList.tsx b/src/pages/dashboard.{dashboardid}/components/ColumnList/ColumnList.tsx index afbb0c7..1f021e4 100644 --- a/src/pages/dashboard.{dashboardid}/components/ColumnList/ColumnList.tsx +++ b/src/pages/dashboard.{dashboardid}/components/ColumnList/ColumnList.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useState, useCallback } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { AxiosError } from 'axios'; import Column from '../Column/Column'; @@ -23,7 +23,7 @@ function ColumnList() { const navigate = useNavigate(); // 대시보드 목록 조회 - async function getColumnList(id: number) { + const getColumnList = useCallback(async (id: number) => { try { const res = await apiGetColumnList(id); const list = res.data; @@ -36,15 +36,14 @@ function ColumnList() { setColumnList([]); navigate('/404'); } - } + }, [navigate]); useEffect(() => { getColumnList(Number(dashboardId)); - }, [dashboardId]); + }, [dashboardId, getColumnList]); - // 테스트 아이디 apiLoginRequest({ email: 'test333@codeit.kr', password: 'test1234' }); // 유저 아이디 조회 - async function getUserId() { + const getUserId = useCallback(async () => { try { const res = await apiInquireMyInfo(); setUserId(res.id); @@ -53,10 +52,11 @@ function ColumnList() { setErrorState(axiosError.message); setUserId(0); } - } + }, []); + useEffect(() => { getUserId(); - }, [dashboardId]); + }, [dashboardId, getUserId]); // 버튼 이벤트 핸들러 const handleAddNewColumn = () => { @@ -64,9 +64,9 @@ function ColumnList() { }; // 모달에서 응답이 올 시 - const afterSubmit = (): void => { + const afterSubmit = useCallback(() => { getColumnList(Number(dashboardId)); - }; + }, [dashboardId, getColumnList]); // 컴포넌트 출력 return ( From ebf8989ae15ff2e94feb0c25a253e5605089f730 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=80=EC=A7=80?= <103625348+eunji-0623@users.noreply.github.com> Date: Sat, 15 Jun 2024 18:43:18 +0900 Subject: [PATCH 30/30] =?UTF-8?q?Fix:=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EA=B9=A8=EC=A7=90=20=ED=98=84?= =?UTF-8?q?=EC=83=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/UserProfileImg/UserProfileImg.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/UserProfileImg/UserProfileImg.module.scss b/src/components/UserProfileImg/UserProfileImg.module.scss index 09cfb02..afd8b0c 100644 --- a/src/components/UserProfileImg/UserProfileImg.module.scss +++ b/src/components/UserProfileImg/UserProfileImg.module.scss @@ -21,6 +21,7 @@ width: 38px; height: 38px; border: 1px solid #d9d9d9; + object-fit: cover; } .MembersProfileImg {