Merge pull request #1559 from 42organization/agenda

[test-deploy] 배포 전 마지막 테스트

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}

components/agenda/Ticket/Ticket.tsx

@@ -11,7 +11,7 @@ interface TicketProps {
 const Ticket = ({ type }: { type: string }) => {
   const { data } = useFetchGet<TicketProps>({ url: '/ticket' });
   const { openModal } = useModal();
-
+  console.log(data);
   return (
     <>
       {type === 'page' ? (

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`,
         }}
       >

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`,
         }}
       >

components/takgu/Layout/Header.tsx

@@ -78,7 +78,7 @@ export default function Header() {
             <FiMenu className={styles.menuIcon} onClick={openMenuBarHandler} />
           )}
         </div>
-        <Link className={styles.logoWrap} href={'/takgu'}>
+        <Link className={styles.logoWrap} href={'/'}>
           42GG
         </Link>
         <div className={styles.headerRight}>

components/toastmsg/toastmsg.tsx

@@ -32,7 +32,11 @@ export default function CustomizedSnackbars() {
   return (
     <Stack spacing={2} sx={{ width: '100%' }}>
       <Snackbar open={clicked} autoHideDuration={6000} onClose={handleClose}>
-        <Alert onClose={handleClose} severity={severity} sx={{ width: '100%' }}>
+        <Alert
+          onClose={handleClose}
+          severity={severity}
+          sx={{ width: '100%', color: 'white' }}
+        >
           {message}
         </Alert>
       </Snackbar>

hooks/agenda/useFetchGet.ts

@@ -27,13 +27,13 @@ const useFetchGet = <T>({ 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 };
 };

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<string>('/profile');
-  const [myProfileCheck, setMyProfileCheck] = useState<boolean | null>(null);
-  const isIntraId = useRef(false); // 인트라 아이디가 42에 있는지 확인
-  const isAgendaId = useRef(false); // 인트라 아이디가 agenda에 있는지 확인
+  const isMyProfile = useRef(false); // 내 프로필 페이지인지 아닌지 확인
+  const [isIntraId, setIsIntraId] = useState<boolean>(false); // 인트라 아이디가 42에 있는지 확인
+  const [isAgendaId, setIsAgendaId] = useState<boolean>(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<IntraProfileDataProps>({
-      url: `/profile/intra/${intraId}`,
-      isReady: Boolean(intraId),
-    });
-
-  /** Agenda API GET */
+  /** API GET */
+  //  GET: intraData (42 인트라 데이터 가져오기)
+  const { data: intraData } = useFetchGet<IntraProfileDataProps>({
+    url: `/profile/intra/${queryIntraId}`,
+    isReady: Boolean(queryIntraId),
+  });
+  // GET: agendaProfileData (GG 아젠다 유저 데이터 가져오기)
   const { data: agendaProfileData, getData: getAgendaProfileData } =
     useFetchGet<AgendaProfileDataProps>({
       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<MyTeamDataProps>({
-    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<MyTeamDataProps[]>({
     url: '/profile/current/list',
+    isReady: isAgendaId,
   }).data;
-
-  // host history
+  // GET: host history
   const {
     content: hostHistoryListData,
     PagaNationElementProps: PagaNationHostHistory,
   } = usePageNation<HistoryItemProps>({
-    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<HistoryItemProps>({
-    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 <AgendaLoading />;
   }
   return (
@@ -101,9 +101,9 @@ const AgendaProfile = () => {
           <AgendaUserSearchBar />
         </div>
         {/* ProfileCard */}
-        {intraData && intraId && (
+        {intraData && (
           <ProfileCard
-            userIntraId={intraId}
+            userIntraId={queryIntraId}
             userContent={
               agendaProfileData?.userContent ||
               'GG에 가입하지 않은 사용자입니다.'
@@ -112,11 +112,15 @@ const AgendaProfile = () => {
             imageUrl={intraData.imageUrl}
             achievements={intraData.achievements}
             getProfileData={getAgendaProfileData}
-            isMyProfile={myProfileCheck}
+            isMyProfile={isMyProfile.current}
           />
         )}
         {/* Ticket */}
-        {myProfileCheck ? <Ticket type='component' /> : ''}
+        {isMyProfile.current && agendaProfileData ? (
+          <Ticket type='component' />
+        ) : (
+          ''
+        )}
         {/* Host Current List */}
         {hostCurrentListData && hostCurrentListData.length > 0 ? (
           <>
@@ -127,7 +131,7 @@ const AgendaProfile = () => {
           ''
         )}
         {/* Current List */}
-        {myProfileCheck && currentListData ? (
+        {isMyProfile.current && currentListData ? (
           <CurrentList currentListData={currentListData} isHost={false} />
         ) : (
           ''

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';

styles/globals.css

@@ -36,7 +36,6 @@ h4,
 h5,
 h6,
 span,
-div,
 li,
 ul,
 ol,

types/agenda/profile/profileCardTypes.ts

@@ -7,5 +7,5 @@ export interface ProfileCardProps {
   imageUrl: string;
   achievements: AchievementProps[];
   getProfileData: () => void;
-  isMyProfile: boolean | null;
+  isMyProfile: boolean;
 }