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/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} 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..65e76e0da 100644 --- a/pages/agenda/profile/user.tsx +++ b/pages/agenda/profile/user.tsx @@ -19,78 +19,78 @@ 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에 있는지 확인 - useEffect(() => { - if (intraId && userIntraId) { - if (intraId === userIntraId) { - setMyProfileCheck(true); - } else { - setProfileUrl(`/profile/${intraId}`); - setMyProfileCheck(false); - } - } - }, [intraId, userIntraId]); - const { data: intraData, getData: getIntraData } = - useFetchGet({ - url: `/profile/intra/${intraId}`, - isReady: Boolean(intraId), - }); - - /** Agenda API GET */ + /** API GET */ + // GET: intraData (42 인트라 데이터 가져오기) + const { data: intraData } = useFetchGet({ + url: `/profile/intra/${queryIntraId}`, + isReady: Boolean(queryIntraId), + }); + // GET: agendaProfileData (GG 아젠다 유저 데이터 가져오기) const { data: agendaProfileData, getData: getAgendaProfileData } = useFetchGet({ url: profileUrl, - // 본인이거나 42에 아이디가 있는 경우에만 데이터 요청 - isReady: Boolean( - intraId === userIntraId || (intraId && isIntraId.current) - ), + isReady: isIntraId, }); - - // useEffect(() => { - // if (intraId) { - // getProfileData(); - // } - // }, [intraId]); - - // host current + // 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) { + /** 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 ; } return ( @@ -101,9 +101,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 +131,7 @@ const AgendaProfile = () => { '' )} {/* Current List */} - {myProfileCheck && currentListData ? ( + {isMyProfile.current && currentListData ? ( ) : ( '' 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, 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; }