Merge pull request #1508 from 42organization/Style/#1504-responsive-css

[Style] 일부 페이지 반응형 css 적용, padding/margin 전체 정돈
42organization · Aug 30, 2024 · 80a3f40 · 80a3f40
2 parents 2a74325 + 656a870
commit 80a3f40
Show file tree

Hide file tree

Showing 40 changed files with 618 additions and 254 deletions.
diff --git a/Layout/AgendaLayout.tsx b/Layout/AgendaLayout.tsx
@@ -25,7 +25,7 @@ function AgendaAppLayout({ children }: AgendaLayoutProps) {
     <>
       <AgendaHeader />
       <div className={styles.background}></div>
-      <div className={styles.container}>
+      <div className={styles.app}>
         {children}
         <Footer />
         <AgendaModalProvider />

diff --git a/components/agenda/Home/AgendaList.tsx b/components/agenda/Home/AgendaList.tsx
@@ -1,50 +1,90 @@
-import Link from 'next/link';
-import React from 'react';
+import { useRouter } from 'next/router';
+import React, { useState } from 'react';
 import { AgendaDataProps } from 'types/agenda/agendaDetail/agendaTypes';
 import AgendaDeadLine from 'components/agenda/Home/AgendaDeadLine';
 import AgendaInfo from 'components/agenda/Home/AgendaInfo';
 import styles from 'styles/agenda/Home/AgendaList.module.scss';
 
 const AgendaList = ({ agendaList }: { agendaList: AgendaDataProps[] }) => {
+  const [selectedItem, setSelectedItem] = useState<number | null>(0);
+
   return (
-    <div className={styles.agendaListContainer}>
-      <div className={styles.agendaListItemContainer}>
-        {!agendaList || !agendaList.length ? (
-          <div>
-            <div className={styles.emptyContainer}>일정이 없습니다.</div>
-          </div>
-        ) : (
-          agendaList.map((agendaInfo, idx) => (
-            <AgendaListItem agendaInfo={agendaInfo} key={idx} />
-          ))
-        )}
+    <div className={styles.container}>
+      <div className={styles.agendaListContainer}>
+        <div className={styles.agendaListItemContainer}>
+          {!agendaList || !agendaList.length ? (
+            <div>
+              <div className={styles.emptyContainer}>일정이 없습니다.</div>
+            </div>
+          ) : (
+            agendaList.map((agendaInfo, idx) => {
+              agendaInfo.idx = idx;
+              return (
+                <AgendaListItem
+                  agendaInfo={agendaInfo}
+                  key={idx}
+                  type='list'
+                  className={idx === selectedItem ? styles.selected : ''}
+                  setSelectedItem={setSelectedItem}
+                />
+              );
+            })
+          )}
+        </div>
       </div>
+      {agendaList.length && (
+        <AgendaListItem
+          agendaInfo={agendaList[selectedItem || 0]}
+          key={selectedItem || 0}
+          type='big'
+        />
+      )}
     </div>
   );
 };
 
 const AgendaListItem = ({
   agendaInfo,
   key,
+  type,
+  className,
+  setSelectedItem,
 }: {
   agendaInfo: AgendaDataProps;
   key: number;
+  type?: string;
+  className?: string;
+  setSelectedItem?: (key: number) => void;
 }) => {
+  const router = useRouter();
+  const href = `/agenda/${agendaInfo.agendaKey}`;
   return (
-    <Link href={`/agenda/${agendaInfo.agendaKey}`}>
-      <button
-        className={styles.agendaListItemBtn}
-        style={{
-          background: `linear-gradient(180deg, #fff 5rem, rgba(0, 0, 0, 0) 10rem), url(${
-            agendaInfo.agendaPosterUrl || '/image/agenda/42.jpg'
-          })`,
-        }}
-        key={key}
-      >
-        <AgendaInfo agendaInfo={agendaInfo} key={key} />
-        <AgendaDeadLine />
-      </button>
-    </Link>
+    <button
+      className={`${styles.agendaListItemBtn} ${
+        type === 'list' && styles.listType
+      } ${type === 'big' && styles.listBig}
+       ${className && className}`}
+      style={{
+        background: `linear-gradient(180deg, #fff 5rem, rgba(0, 0, 0, 0) 10rem), url(${
+          agendaInfo.agendaPosterUrl || '/image/agenda/42.jpg'
+        }) lightgray 50% / cover no-repeat`,
+      }}
+      key={key}
+      onClick={() => {
+        if (window.innerWidth < 961) {
+          router.push(href);
+          return;
+        }
+        if (type === 'list' && setSelectedItem && agendaInfo.idx) {
+          setSelectedItem(agendaInfo.idx);
+          return;
+        }
+        router.push(href);
+      }}
+    >
+      <AgendaInfo agendaInfo={agendaInfo} key={key} />
+      <AgendaDeadLine />
+    </button>
   );
 };
 

diff --git a/components/agenda/Home/AgendaTitle.tsx b/components/agenda/Home/AgendaTitle.tsx
@@ -1,42 +1,46 @@
 import Image from 'next/image';
 import Link from 'next/link';
+import MyAgendaBtn from 'components/agenda/Home/MyAgendaBtn';
 import styles from 'styles/agenda/Home/AgendaTitle.module.scss';
 
 const AgendaTitle = () => {
   return (
-    <div className={styles.agendaTitleContainer}>
-      <div className={styles.agendaTitleButtonContainer}>AGENDA</div>
-      <div className={styles.agendaTitleButtonContainer}>
-        <Link href={`/agenda/create`}>
-          <button className={styles.agendaCreateBtn}>
-            <div>개최신청</div>
-            <div className={styles.imageWrapper}>
-              <Image
-                src='/image/agenda/ArrowRight.svg'
-                width={35}
-                height={35}
-                alt='Create Agenda'
-                className={styles.imageBox}
-              />
-            </div>
-          </button>
-        </Link>
-        <Link href={`/agenda/ticket`}>
-          <button className={styles.agendaCreateBtn}>
-            <div>티켓 확인하기</div>
-            <div className={styles.imageWrapper}>
-              <Image
-                src='/image/agenda/ArrowRight.svg'
-                width={35}
-                height={35}
-                alt='Create Agenda'
-                className={styles.imageBox}
-              />
-            </div>
-          </button>
-        </Link>
+    <>
+      <div className={styles.agendaTitleContainer}>
+        <div className={`${styles.agendaTitle}`}>AGENDA</div>
+        <div className={styles.agendaTitleButton}>
+          <Link href={`/agenda/create`}>
+            <button className={styles.agendaCreateBtn}>
+              <div>개최신청</div>
+              <div className={styles.imageWrapper}>
+                <Image
+                  src='/image/agenda/ArrowRight.svg'
+                  width={35}
+                  height={35}
+                  alt='Create Agenda'
+                  className={styles.imageBox}
+                />
+              </div>
+            </button>
+          </Link>
+          <Link href={`/agenda/ticket`}>
+            <button className={styles.agendaCreateBtn}>
+              <div>티켓 확인하기</div>
+              <div className={styles.imageWrapper}>
+                <Image
+                  src='/image/agenda/ArrowRight.svg'
+                  width={35}
+                  height={35}
+                  alt='Create Agenda'
+                  className={styles.imageBox}
+                />
+              </div>
+            </button>
+          </Link>
+        </div>
       </div>
-    </div>
+      <MyAgendaBtn />
+    </>
   );
 };
 

diff --git a/components/agenda/Home/MyAgendaBtn.tsx b/components/agenda/Home/MyAgendaBtn.tsx
@@ -31,7 +31,7 @@ const MyAgendaBtn = () => {
   };
   const myList =
     useFetchGet<MyTeamDataProps[]>('/profile/current/list')?.data || [];
-
+  console.log(myList);
   return (
     <div
       className={`${styles.myAgendaContainer} ${
@@ -59,7 +59,6 @@ const MyAgendaBtn = () => {
             <Link
               href={`/agenda/${myTeamInfo.agendaKey}/${myTeamInfo.teamKey}`}
               key={idx}
-              style={{ width: '100%' }}
             >
               <div className={styles.myagendaItemContainer} key={idx}>
                 <MyTeamInfo myTeamInfo={myTeamInfo} key={idx} />

diff --git a/components/agenda/Home/MyTeamInfo.tsx b/components/agenda/Home/MyTeamInfo.tsx
@@ -16,19 +16,19 @@ const MyTeamInfo = ({
     return <div>참가중인 일정이 없습니다.</div>;
   }
   // myTeamInfo.isOfficial = true; //css test
-  // const startDate = new Date();
+  const startDate = new Date(myTeamInfo.agendaStartTime);
   //아래 주석달린 부분은 api 변경시 추가 예정입니다.
   return (
     <div className={styles.Container} key={key}>
-      {/* <div className={agendastyles.agendaDateBox}>
+      <div className={agendastyles.agendaDateBox}>
         <div className={agendastyles.agendaStartDateMonth}>
           {fillZero(`${startDate.getMonth()}`, 2)}
         </div>
 
         <div className={agendastyles.agendaStartDateDay}>
           {fillZero(`${startDate.getDate()}`, 2)}
         </div>
-      </div> */}
+      </div>
       <div className={styles.infoContainer}>
         <div className={styles.teamInfoContainer}>
           <h2 className={styles.teamTitle}>

diff --git a/components/agenda/Layout/MenuBar.tsx b/components/agenda/Layout/MenuBar.tsx
@@ -1,4 +1,3 @@
-import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { useUser } from 'hooks/agenda/Layout/useUser';

diff --git a/components/agenda/Ticket/Ticket.tsx b/components/agenda/Ticket/Ticket.tsx
@@ -12,76 +12,81 @@ const Ticket = ({ type }: { type: string }) => {
   const { data } = useFetchGet<TicketProps>('/ticket');
   const { openModal } = useModal();
 
-  return type === 'page' ? (
-    <div className={styles.container}>
-      <h1 className={styles.h1}>내 티켓</h1>
-      <div className={styles.ticketSection}>
-        <div className={styles.ticketFrame}>
-          <h1>{data && data.ticketCount}</h1>
+  return (
+    <div className={styles.pageContainer}>
+      {' '}
+      {type === 'page' ? (
+        <div className={styles.container}>
+          <h1 className={styles.h1}>내 티켓</h1>
+          <div className={styles.ticketSection}>
+            <div className={styles.ticketFrame}>
+              <h1>{data && data.ticketCount}</h1>
+            </div>
+            <h1>개</h1>
+          </div>
+          <div className={styles.section}>
+            <h3>발급 방법</h3>
+            <div className={styles.line} />
+            <p>발급 시작 누르기</p>
+            <div className={styles.arrowDown} />
+            <p>
+              평가 포인트 기부하기
+              <br />
+              {`(최대 2개까지 반영)`}
+            </p>
+            <div className={styles.arrowDown} />
+            <p>현재 페이지로 돌아와 발급완료 누르기</p>
+          </div>
+          {data && data.setupTicket ? (
+            <button
+              className={styles.submitButton}
+              onClick={() => {
+                instanceInAgenda.patch('/ticket');
+              }}
+            >
+              발급 완료
+            </button>
+          ) : (
+            <button
+              className={styles.submitButton}
+              onClick={() => {
+                openModal({
+                  type: 'proceedCheck',
+                  description: '평가 포인트를 기부하시겠습니까?',
+                  onProceed: () => {
+                    instanceInAgenda.post('/ticket').then(() => {
+                      location.href = 'https://profile.intra.42.fr/';
+                    });
+                  },
+                });
+              }}
+            >
+              발급 시작
+            </button>
+          )}
+          <Link href='/agenda/ticket/history' style={{ width: '100%' }}>
+            <button className={styles.logButton}>내역 보기</button>
+          </Link>
         </div>
-        <h1>개</h1>
-      </div>
-      <div className={styles.section}>
-        <h3>발급 방법</h3>
-        <div className={styles.line} />
-        <p>발급 시작 누르기</p>
-        <div className={styles.arrowDown} />
-        <p>
-          평가 포인트 기부하기
-          <br />
-          {`(최대 2개까지 반영)`}
-        </p>
-        <div className={styles.arrowDown} />
-        <p>현재 페이지로 돌아와 발급완료 누르기</p>
-      </div>
-      {data && data.setupTicket ? (
-        <button
-          className={styles.submitButton}
-          onClick={() => {
-            instanceInAgenda.patch('/ticket');
-          }}
-        >
-          발급 완료
-        </button>
       ) : (
-        <button
-          className={styles.submitButton}
-          onClick={() => {
-            openModal({
-              type: 'proceedCheck',
-              description: '평가 포인트를 기부하시겠습니까?',
-              onProceed: () => {
-                instanceInAgenda.post('/ticket').then(() => {
-                  location.href = 'https://profile.intra.42.fr/';
-                });
-              },
-            });
-          }}
-        >
-          발급 시작
-        </button>
-      )}
-      <Link href='/agenda/ticket/history' style={{ width: '100%' }}>
-        <button className={styles.logButton}>내역 보기</button>
-      </Link>
-    </div>
-  ) : (
-    <div className={styles.container}>
-      <h1 className={styles.h1}>내 티켓</h1>
-      <div
-        className={styles.ticketSection}
-        style={{ gap: '2rem', alignItems: 'center' }}
-      >
-        <Link href='/agenda/ticket'>
-          <button className={styles.submitButton}>발급하러가기</button>
-        </Link>
-        <div className={styles.ticketSection}>
-          <div className={styles.ticketFrame}>
-            <h1>{data && data.ticketCount}</h1>
+        <div className={styles.container}>
+          <h1 className={styles.h1}>내 티켓</h1>
+          <div
+            className={styles.ticketSection}
+            style={{ gap: '2rem', alignItems: 'center' }}
+          >
+            <Link href='/agenda/ticket'>
+              <button className={styles.submitButton}>발급하러가기</button>
+            </Link>
+            <div className={styles.ticketSection}>
+              <div className={styles.ticketFrame}>
+                <h1>{data && data.ticketCount}</h1>
+              </div>
+              <h1>개</h1>
+            </div>
           </div>
-          <h1>개</h1>
         </div>
-      </div>
+      )}
     </div>
   );
 };