From 180959a3eead5d91bde2ac5bec96f2f1a198ad90 Mon Sep 17 00:00:00 2001 From: Lee Jeong Ron <83465749+JeongRon@users.noreply.github.com> Date: Fri, 6 Sep 2024 17:11:38 +0900 Subject: [PATCH 1/4] =?UTF-8?q?Fix:=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20/=2042intra=20API=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20API=20=ED=98=B8?= =?UTF-8?q?=EC=B6=9C=20=EA=B3=BC=EC=A0=95=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- hooks/agenda/useFetchGet.ts | 4 +- pages/agenda/profile/user.tsx | 102 +++++++++++++---------- types/agenda/profile/profileCardTypes.ts | 2 +- 3 files changed, 63 insertions(+), 45 deletions(-) diff --git a/hooks/agenda/useFetchGet.ts b/hooks/agenda/useFetchGet.ts index be934bec4..e2f9a0517 100644 --- a/hooks/agenda/useFetchGet.ts +++ b/hooks/agenda/useFetchGet.ts @@ -27,13 +27,13 @@ const useFetchGet = ({ url, isReady = true, params }: FetchGetProps) => { console.error(error); setError('get error'); } - }, [url, params]); + }, [url, isReady, params]); useEffect(() => { if (url) { getData(); // 조건에 맞을 때만 getData 호출 } - }, [url, JSON.stringify(params)]); + }, [url, isReady, JSON.stringify(params)]); return { data, status, error, getData }; }; diff --git a/pages/agenda/profile/user.tsx b/pages/agenda/profile/user.tsx index 48325ee8a..3db05452e 100644 --- a/pages/agenda/profile/user.tsx +++ b/pages/agenda/profile/user.tsx @@ -19,78 +19,92 @@ import usePageNation from 'hooks/agenda/usePageNation'; import styles from 'styles/agenda/Profile/AgendaProfile.module.scss'; const AgendaProfile = () => { - const intraId = useIntraId(); // 쿼리의 id - const userIntraId = useUser()?.intraId; // 현재 나의 intraId + const queryIntraId = useIntraId(); // 쿼리의 id + const myIntraId = useUser()?.intraId; // 현재 나의 intraId const [profileUrl, setProfileUrl] = useState('/profile'); - const [myProfileCheck, setMyProfileCheck] = useState(null); - const isIntraId = useRef(false); // 인트라 아이디가 42에 있는지 확인 - const isAgendaId = useRef(false); // 인트라 아이디가 agenda에 있는지 확인 + const isMyProfile = useRef(false); // 내 프로필 페이지인지 아닌지 확인 + const [isIntraId, setIsIntraId] = useState(false); // 인트라 아이디가 42에 있는지 확인 + const [isAgendaId, setIsAgendaId] = useState(false); // 인트라 아이디가 agenda에 있는지 확인 + /** queryIntraId, myIntraId -> 내 프로필 페이지인지 확인 */ useEffect(() => { - if (intraId && userIntraId) { - if (intraId === userIntraId) { - setMyProfileCheck(true); + if (queryIntraId && myIntraId) { + if (queryIntraId === myIntraId) { + isMyProfile.current = true; } else { - setProfileUrl(`/profile/${intraId}`); - setMyProfileCheck(false); + isMyProfile.current = false; + setProfileUrl(`/profile/${queryIntraId}`); // 다른 유저 프로필 페이지이면 profileUrl 변경 } } - }, [intraId, userIntraId]); - const { data: intraData, getData: getIntraData } = - useFetchGet({ - url: `/profile/intra/${intraId}`, - isReady: Boolean(intraId), - }); + }, [queryIntraId, myIntraId]); + + /** queryIntraId 불러 왔을 시 API 호출 */ + // GET: intraData (42 인트라 데이터 가져오기) + const { data: intraData } = useFetchGet({ + url: `/profile/intra/${queryIntraId}`, + isReady: Boolean(queryIntraId), + }); + + // intraData 있을시 = 42인트라 아이디 있음 (isIntraId = true) + useEffect(() => { + if (intraData) { + setIsIntraId(true); + } + }, [intraData]); - /** Agenda API GET */ + /** 42 인트라 아이디 있을 시 API 호출 + * GET: agendaProfileData (GG 아젠다 유저 데이터 가져오기) + */ const { data: agendaProfileData, getData: getAgendaProfileData } = useFetchGet({ url: profileUrl, - // 본인이거나 42에 아이디가 있는 경우에만 데이터 요청 - isReady: Boolean( - intraId === userIntraId || (intraId && isIntraId.current) - ), + // 42에 아이디가 있는 경우에만 데이터 요청 + isReady: isIntraId, }); - // useEffect(() => { - // if (intraId) { - // getProfileData(); - // } - // }, [intraId]); + // 아젠다 프로필 데이터 있음 = 아젠다 유저 등록 되어 있음 (isAgendaId = true) + useEffect(() => { + if (agendaProfileData) { + setIsAgendaId(true); + } + }, [agendaProfileData]); - // host current + /** 아젠다 유저 등록 되어 있을 시 API 호출 */ + // GET: host current const { content: hostCurrentListData, PagaNationElementProps: PagaNationHostCurrent, } = usePageNation({ - url: `/host/current/list/${intraId}`, - isReady: Boolean(intraId && isAgendaId.current), + url: `/host/current/list/${queryIntraId}`, + isReady: isAgendaId, }); - // current team + // GET: current team const currentListData = useFetchGet({ url: '/profile/current/list', + isReady: isAgendaId, }).data; - // host history + // GET: host history const { content: hostHistoryListData, PagaNationElementProps: PagaNationHostHistory, } = usePageNation({ - url: `/host/history/list/${intraId}`, - isReady: Boolean(intraId && isAgendaId.current), + url: `/host/history/list/${queryIntraId}`, + isReady: isAgendaId, }); - // history + // GET: history const { content: historyListData, PagaNationElementProps: PagaNationHistory, } = usePageNation({ - url: `/profile/history/list/${intraId}`, - isReady: Boolean(intraId && isAgendaId.current), + url: `/profile/history/list/${queryIntraId}`, + isReady: isAgendaId, }); - if (!intraId || !userIntraId) { + /** UI Rendering */ + if (!queryIntraId || !myIntraId) { return ; } return ( @@ -101,9 +115,9 @@ const AgendaProfile = () => { {/* ProfileCard */} - {intraData && intraId && ( + {intraData && ( { imageUrl={intraData.imageUrl} achievements={intraData.achievements} getProfileData={getAgendaProfileData} - isMyProfile={myProfileCheck} + isMyProfile={isMyProfile.current} /> )} {/* Ticket */} - {myProfileCheck ? : ''} + {isMyProfile.current && agendaProfileData ? ( + + ) : ( + '' + )} {/* Host Current List */} {hostCurrentListData && hostCurrentListData.length > 0 ? ( <> @@ -127,7 +145,7 @@ const AgendaProfile = () => { '' )} {/* Current List */} - {myProfileCheck && currentListData ? ( + {isMyProfile.current && currentListData ? ( ) : ( '' diff --git a/types/agenda/profile/profileCardTypes.ts b/types/agenda/profile/profileCardTypes.ts index 7edf51c8d..77d014215 100644 --- a/types/agenda/profile/profileCardTypes.ts +++ b/types/agenda/profile/profileCardTypes.ts @@ -7,5 +7,5 @@ export interface ProfileCardProps { imageUrl: string; achievements: AchievementProps[]; getProfileData: () => void; - isMyProfile: boolean | null; + isMyProfile: boolean; } From 1015500c8054679f0d28d4c52b85c84b90f6f3b2 Mon Sep 17 00:00:00 2001 From: Lee Jeong Ron <83465749+JeongRon@users.noreply.github.com> Date: Fri, 6 Sep 2024 17:30:49 +0900 Subject: [PATCH 2/4] =?UTF-8?q?Refactor:=20useEffect=20=EC=BD=94=EB=93=9C?= =?UTF-8?q?=20=ED=95=A9=EC=B9=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/agenda/profile/user.tsx | 60 ++++++++++++++--------------------- 1 file changed, 23 insertions(+), 37 deletions(-) diff --git a/pages/agenda/profile/user.tsx b/pages/agenda/profile/user.tsx index 3db05452e..65e76e0da 100644 --- a/pages/agenda/profile/user.tsx +++ b/pages/agenda/profile/user.tsx @@ -26,50 +26,18 @@ const AgendaProfile = () => { const [isIntraId, setIsIntraId] = useState(false); // 인트라 아이디가 42에 있는지 확인 const [isAgendaId, setIsAgendaId] = useState(false); // 인트라 아이디가 agenda에 있는지 확인 - /** queryIntraId, myIntraId -> 내 프로필 페이지인지 확인 */ - useEffect(() => { - if (queryIntraId && myIntraId) { - if (queryIntraId === myIntraId) { - isMyProfile.current = true; - } else { - isMyProfile.current = false; - setProfileUrl(`/profile/${queryIntraId}`); // 다른 유저 프로필 페이지이면 profileUrl 변경 - } - } - }, [queryIntraId, myIntraId]); - - /** queryIntraId 불러 왔을 시 API 호출 */ + /** API GET */ // GET: intraData (42 인트라 데이터 가져오기) const { data: intraData } = useFetchGet({ url: `/profile/intra/${queryIntraId}`, isReady: Boolean(queryIntraId), }); - - // intraData 있을시 = 42인트라 아이디 있음 (isIntraId = true) - useEffect(() => { - if (intraData) { - setIsIntraId(true); - } - }, [intraData]); - - /** 42 인트라 아이디 있을 시 API 호출 - * GET: agendaProfileData (GG 아젠다 유저 데이터 가져오기) - */ + // GET: agendaProfileData (GG 아젠다 유저 데이터 가져오기) const { data: agendaProfileData, getData: getAgendaProfileData } = useFetchGet({ url: profileUrl, - // 42에 아이디가 있는 경우에만 데이터 요청 isReady: isIntraId, }); - - // 아젠다 프로필 데이터 있음 = 아젠다 유저 등록 되어 있음 (isAgendaId = true) - useEffect(() => { - if (agendaProfileData) { - setIsAgendaId(true); - } - }, [agendaProfileData]); - - /** 아젠다 유저 등록 되어 있을 시 API 호출 */ // GET: host current const { content: hostCurrentListData, @@ -78,13 +46,11 @@ const AgendaProfile = () => { url: `/host/current/list/${queryIntraId}`, isReady: isAgendaId, }); - // GET: current team const currentListData = useFetchGet({ url: '/profile/current/list', isReady: isAgendaId, }).data; - // GET: host history const { content: hostHistoryListData, @@ -93,7 +59,6 @@ const AgendaProfile = () => { url: `/host/history/list/${queryIntraId}`, isReady: isAgendaId, }); - // GET: history const { content: historyListData, @@ -103,6 +68,27 @@ const AgendaProfile = () => { isReady: isAgendaId, }); + /** useEffect */ + useEffect(() => { + // 1. queryIntraId와 myIntraId가 있을 때 프로필 URL 설정 + if (queryIntraId && myIntraId) { + if (queryIntraId === myIntraId) { + isMyProfile.current = true; + } else { + isMyProfile.current = false; + setProfileUrl(`/profile/${queryIntraId}`); // 다른 유저 프로필 URL 설정 + } + } + // 2. intraData가 있으면 인트라 아이디가 42에 있다는 뜻이므로 isIntraId = true + if (intraData) { + setIsIntraId(true); + } + // 3. agendaProfileData가 있으면 아젠다에 등록된 사용자이므로 isAgendaId = true + if (agendaProfileData) { + setIsAgendaId(true); + } + }, [queryIntraId, myIntraId, intraData, agendaProfileData]); + /** UI Rendering */ if (!queryIntraId || !myIntraId) { return ; From 665c88674c6e2218089e8f27f5b04a3d6e6056d8 Mon Sep 17 00:00:00 2001 From: Kimmy Haecho <118002501+siwolee@users.noreply.github.com> Date: Sun, 8 Sep 2024 15:17:48 +0900 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20=EC=83=89=EC=83=81=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=EB=82=9C=20=EB=B6=80=EB=B6=84=20=EB=93=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/agenda/Home/AgendaList.tsx | 2 +- components/agenda/Ticket/Ticket.tsx | 2 +- components/agenda/agendaDetail/AgendaInfo.tsx | 2 +- components/agenda/utils/PageController.tsx | 2 +- components/takgu/Layout/Header.tsx | 2 +- styles/agenda/common.scss | 2 +- styles/globals.css | 1 - 7 files changed, 6 insertions(+), 7 deletions(-) diff --git a/components/agenda/Home/AgendaList.tsx b/components/agenda/Home/AgendaList.tsx index e54a3e78a..40b5df849 100644 --- a/components/agenda/Home/AgendaList.tsx +++ b/components/agenda/Home/AgendaList.tsx @@ -73,7 +73,7 @@ const AgendaListItem = ({ ${className && className}`} style={{ background: `linear-gradient(180deg, #fff 5rem, rgba(0, 0, 0, 0) 10rem), url(${ - agendaInfo.agendaPosterUrl || '/image/agenda/42.jpg' + agendaInfo.agendaPosterUrl || 'var(--default-bg)' }) lightgray 50% / cover no-repeat`, }} key={idx} diff --git a/components/agenda/Ticket/Ticket.tsx b/components/agenda/Ticket/Ticket.tsx index b79e39918..6adefd82a 100644 --- a/components/agenda/Ticket/Ticket.tsx +++ b/components/agenda/Ticket/Ticket.tsx @@ -11,7 +11,7 @@ interface TicketProps { const Ticket = ({ type }: { type: string }) => { const { data } = useFetchGet({ url: '/ticket' }); const { openModal } = useModal(); - + console.log(data); return ( <> {type === 'page' ? ( diff --git a/components/agenda/agendaDetail/AgendaInfo.tsx b/components/agenda/agendaDetail/AgendaInfo.tsx index 80ed47c3f..a69f4c848 100644 --- a/components/agenda/agendaDetail/AgendaInfo.tsx +++ b/components/agenda/agendaDetail/AgendaInfo.tsx @@ -139,7 +139,7 @@ export default function AgendaInfo({ className={`${styles.infoContainer} ${containerSize}`} style={{ background: `linear-gradient(0deg, #fff 7rem, rgba(0, 0, 0, 0) 10rem), url(${ - agendaData.agendaPosterUrl || '/image/agenda/42.jpg' + agendaData.agendaPosterUrl || 'var(--color-bg)' }) lightgray 50% / cover no-repeat`, }} > diff --git a/components/agenda/utils/PageController.tsx b/components/agenda/utils/PageController.tsx index e3fa3766a..1f5f485f2 100644 --- a/components/agenda/utils/PageController.tsx +++ b/components/agenda/utils/PageController.tsx @@ -77,7 +77,7 @@ const PageController = ({ className={styles.agendaInfoContainer} style={{ background: `linear-gradient(180deg, #fff 7rem, rgba(0, 0, 0, 0) 10rem), url(${ - data[current]?.agendaPosterUrl || '/image/agenda/42.jpg' + data[current]?.agendaPosterUrl || 'var(--color-bg)' }) lightgray 50% / cover no-repeat`, }} > diff --git a/components/takgu/Layout/Header.tsx b/components/takgu/Layout/Header.tsx index 7aac9bb40..3ab150d9d 100644 --- a/components/takgu/Layout/Header.tsx +++ b/components/takgu/Layout/Header.tsx @@ -78,7 +78,7 @@ export default function Header() { )} - + 42GG
diff --git a/styles/agenda/common.scss b/styles/agenda/common.scss index 5787e4643..7485a5931 100644 --- a/styles/agenda/common.scss +++ b/styles/agenda/common.scss @@ -37,7 +37,7 @@ $bg-color-deadline-finish: rgba(102, 58, 142, 0.8); $bg-color-deadline-cancel: rgba(18, 18, 18, 0.8); $agenda-list-bg: linear-gradient(180deg, #fff 65px, rgba(0, 0, 0, 0) 100%), - url('/image/agenda/42.jpg') lightgray 50% / cover no-repeat; + var(--color-bg) lightgray 50% / cover no-repeat; // font-family $font-text-bold: '11StreetGothicBold'; diff --git a/styles/globals.css b/styles/globals.css index 0492a5524..14bca1fa9 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -36,7 +36,6 @@ h4, h5, h6, span, -div, li, ul, ol, From b08eb51ddfaa51a668349bd557556605cb7336d2 Mon Sep 17 00:00:00 2001 From: Kimmy Haecho <118002501+siwolee@users.noreply.github.com> Date: Sun, 8 Sep 2024 15:18:23 +0900 Subject: [PATCH 4/4] =?UTF-8?q?style:=20=EC=9E=90=EC=9E=98=ED=95=9C=20?= =?UTF-8?q?=EC=83=89=EC=83=81=20=EC=98=A4=EB=A5=98=20=EB=93=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/toastmsg/toastmsg.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/components/toastmsg/toastmsg.tsx b/components/toastmsg/toastmsg.tsx index f81b9aeb0..ab3f2bdf2 100644 --- a/components/toastmsg/toastmsg.tsx +++ b/components/toastmsg/toastmsg.tsx @@ -32,7 +32,11 @@ export default function CustomizedSnackbars() { return ( - + {message}