[Style] CSS 스타일 개선

.github/workflows/main-deploy.yml

@@ -20,6 +20,7 @@ jobs:
       - name: Build
         env:
           NEXT_PUBLIC_SERVER_ENDPOINT: ${{ secrets.NEXT_PUBLIC_SERVER_ENDPOINT }}
+          NEXT_PUBLIC_AGENDA_SERVER_ENDPOINT: ${{ secrets.NEXT_PUBLIC_AGENDA_SERVER_ENDPOINT }}
           NEXT_PUBLIC_CLIENT_ENDPOINT: ${{ secrets.NEXT_PUBLIC_CLIENT_ENDPOINT }}
           NEXT_PUBLIC_MANAGE_SERVER_ENDPOINT: ${{ secrets.NEXT_PUBLIC_MANAGE_SERVER_ENDPOINT }}
           NEXT_PUBLIC_PARTY_MANAGE_SERVER_ENDPOINT: ${{ secrets.NEXT_PUBLIC_PARTY_MANAGE_SERVER_ENDPOINT }}

components/agenda/Home/AgendaInfo.tsx

@@ -3,6 +3,7 @@ import { AgendaDataProps } from 'types/agenda/agendaDetail/agendaTypes';
 import { showPeriod } from 'utils/handleTime';
 import AgendaTags from 'components/agenda/utils/AgendaTags';
 import StartDate from 'components/agenda/utils/StartDate';
+import RightArrow from 'public/image/agenda/ChevronRight.svg';
 import styles from 'styles/agenda/Home/AgendaInfo.module.scss';
 
 // Props: API data
@@ -14,7 +15,15 @@ const AgendaInfo = ({
   idx: number;
 }) => {
   if (!agendaInfo) {
-    return <div>There is no agenda</div>;
+    return (
+      <div className={styles.emptyContainer}>
+        <div>현재 모집 중인 행사가 없습니다.</div>
+        <div className={styles.emptyContent}>
+          <div>Agenda 페이지 이동</div>
+          <RightArrow className={styles.arrowIcon} />
+        </div>
+      </div>
+    );
   }
   const startDate = new Date(agendaInfo.agendaStartTime);
   const endDate = new Date(agendaInfo.agendaEndTime);

components/agenda/Home/AgendaTitle.tsx

@@ -7,7 +7,7 @@ const AgendaTitle = () => {
   return (
     <>
       <div className={styles.agendaTitleContainer}>
-        <div className={`${styles.agendaTitle}`}>AGENDA</div>
+        <div className={`${styles.agendaTitle}`}>Agenda</div>
         <div className={styles.agendaTitleButton}>
           <Link href={`/agenda/create`}>
             <button className={styles.agendaCreateBtn}>

components/agenda/Layout/AgendaHeader.tsx

@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import { useRouter } from 'next/router';
 import { createContext, Dispatch, SetStateAction, useState } from 'react';
 import { FiMenu } from 'react-icons/fi';
 import Logo from 'public/image/main-logo.svg';

components/agenda/Profile/CurrentList.tsx

@@ -16,7 +16,9 @@ const CurrentList = ({
           </div>
         ))
       ) : (
-        <div className={styles.currentTeamEmpty}>참여중 아젠다가 없습니다.</div>
+        <div className={styles.currentTeamEmpty}>
+          아젠다 목록이 비어있습니다. 새로운 아젠다를 시작해보세요!
+        </div>
       )}
     </div>
   );

components/agenda/Profile/HistoryList.tsx

@@ -110,7 +110,9 @@ const HistoryList = ({ historyListData }: HistoryListProps) => {
             }
           )
         ) : (
-          <div className={styles.historyEmpty}>아젠다 기록이 없습니다.</div>
+          <div className={styles.historyEmpty}>
+            아젠다 기록이 없습니다. 새로운 아젠다를 시작해보세요!
+          </div>
         )}
       </div>
     </>

components/agenda/Profile/ProfileCard.tsx

@@ -217,7 +217,12 @@ const ProfileCard = ({
                             key={index}
                             className={styles.acheivementImageWrapper}
                           >
-                            <CustomImage src={parsedUrl} alt='achievement' />
+                            <CustomImage
+                              src={parsedUrl}
+                              alt='achievement'
+                              name={data.name}
+                              description={data.description}
+                            />
                           </div>
                         );
                       }

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/tabs/AgendaAnnouncements.tsx

@@ -17,6 +17,10 @@ export default function AgendaAnnouncements() {
     size: 5,
     isReady: Boolean(agendaKey),
   });
+  const newHandler = (page: number) => {
+    setSelected(0);
+    return PagaNationElementProps.pageChangeHandler(page);
+  };
 
   if (!agendaKey || !content) {
     return (
@@ -41,16 +45,23 @@ export default function AgendaAnnouncements() {
                 setSelected={() => setSelected(idx)}
               />
             ))}
-            <PageNation {...PagaNationElementProps} />
+            <PageNation
+              {...PagaNationElementProps}
+              pageChangeHandler={newHandler}
+            />
           </div>
-          <AnnouncementItem
-            key={content[selected].id}
-            id={content[selected].id}
-            title={content[selected].title}
-            content={content[selected].content}
-            createdAt={content[selected].createdAt}
-            isSelected={true}
-          />
+          {content[selected] ? (
+            <AnnouncementItem
+              key={content[selected].id}
+              id={content[selected].id}
+              title={content[selected].title}
+              content={content[selected].content}
+              createdAt={content[selected].createdAt}
+              isSelected={true}
+            />
+          ) : (
+            ''
+          )}
         </>
       ) : (
         <div className={styles.emptyContainer}>공지사항이 없습니다.</div>

components/agenda/agendaDetail/tabs/AgendaDescription.tsx

@@ -37,7 +37,7 @@ export default function AgendaDescription({ agendaData }: AgendaProps) {
         <div className={styles.midContainer}>
           <div className={styles.descriptionItem}>
             <h3>대회 설명</h3>
-            <span>{agendaContent}</span>
+            <span className={styles.preWrap}>{agendaContent}</span>
           </div>
           <div className={styles.descriptionItem}>
             <h3>모집 완료 기간</h3>

components/agenda/utils/CustomImage.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image';
 import classNames from 'classnames';
-import { useState } from 'react';
+import { MouseEvent, useState } from 'react';
 import { CustomImageProps } from 'types/agenda/utils/customImageTypes';
 import styles from 'styles/agenda/utils/CustomImage.module.scss';
 
@@ -10,26 +10,54 @@ const CustomImage = ({
   alt,
   addClass,
   isProfileImage,
+  name,
+  description,
 }: CustomImageProps) => {
   const [imgSrc, setImgSrc] = useState(src);
+  const [isHovered, setIsHovered] = useState(false);
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
 
   const handleError = () => {
     isProfileImage
       ? setImgSrc('/image/agenda/default-profile.svg')
       : setImgSrc('/image/agenda/42-icon.svg');
   };
 
+  const handleMouseEnter = (e: MouseEvent<HTMLDivElement>) => {
+    setIsHovered(true);
+    setMousePosition({
+      x: e.clientX,
+      y: e.clientY,
+    });
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
   return src ? (
-    <Image
-      src={imgSrc}
-      key={imgSrc}
-      alt={alt}
-      width={30}
-      height={30}
-      className={classNames(styles.customImage, addClass)}
-      priority={true}
-      onError={handleError}
-    />
+    <div
+      className={styles.imageContainer}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <Image
+        src={imgSrc}
+        key={imgSrc}
+        alt={alt}
+        width={30}
+        height={30}
+        className={classNames(styles.customImage, addClass)}
+        priority={true}
+        onError={handleError}
+      />
+      {isHovered && (
+        <div className={styles.hoverContainer}>
+          <div className={styles.hoverName}>{name}</div>
+          <div className={styles.hoverDescription}>{description}</div>
+        </div>
+      )}
+    </div>
   ) : null;
 };
 

components/agenda/utils/PageController.tsx

@@ -99,7 +99,7 @@ const PageController = ({
               ? handleNavigation(
                   '/agenda/detail?agenda_key=' + data[current].agendaKey
                 )
-              : null;
+              : handleNavigation('/agenda');
           }}
           className={styles.toClick}
         />

pages/agenda/index.tsx

@@ -29,7 +29,7 @@ const Agenda: NextPage = () => {
       <AgendaTitle />
       <div className={styles.agendaContainer}>
         <div className={listStyles.agendaListTextWrapper}>
-          <h2>AGENDA LIST</h2>
+          <h2 className={listStyles.web}>AGENDA LIST</h2>
           <div>
             <button
               className={`${listStyles.agendaListStatus}
@@ -39,7 +39,7 @@ const Agenda: NextPage = () => {
             >
               모집중
             </button>
-            {' | '}
+            {'|'}
             <button
               className={`${listStyles.agendaListStatus}
             ${showCurrent === 'current' ? listStyles.selectedStatus : ''}`}
@@ -48,7 +48,7 @@ const Agenda: NextPage = () => {
             >
               진행중
             </button>
-            {' | '}
+            {'|'}
             <button
               className={`${listStyles.agendaListStatus}
               ${showCurrent === 'history' ? listStyles.selectedStatus : ''}`}