Merge branch 'Style/#1504-responsive-css' of github.com:42organizatio…

…n/42gg.client into Style/#1504-responsive-css
42organization · Aug 30, 2024 · c3c9b19 · c3c9b19
2 parents 2ba9081 + 223165d
commit c3c9b19
Show file tree

Hide file tree

Showing 10 changed files with 185 additions and 57 deletions.
diff --git a/components/agenda/Home/AgendaList.tsx b/components/agenda/Home/AgendaList.tsx
@@ -1,42 +1,84 @@
-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} key={key}>
-        <AgendaInfo agendaInfo={agendaInfo} key={key} />
-        <AgendaDeadLine />
-      </button>
-    </Link>
+    <button
+      className={`${styles.agendaListItemBtn} ${
+        type === 'list' && styles.listType
+      } ${type === 'big' && styles.listBig}
+       ${className && className}`}
+      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/MyAgendaBtn.tsx b/components/agenda/Home/MyAgendaBtn.tsx
@@ -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/pages/agenda/index.tsx b/pages/agenda/index.tsx
@@ -3,7 +3,6 @@ import { AgendaDataProps } from 'types/agenda/agendaDetail/agendaTypes';
 import type { NextPage } from 'next';
 import AgendaList from 'components/agenda/Home/AgendaList';
 import AgendaTitle from 'components/agenda/Home/AgendaTitle';
-import { TestModal, TestModal2 } from 'components/agenda/modal/testModal';
 import PageNation from 'components/Pagination';
 import useFetchGet from 'hooks/agenda/useFetchGet';
 import usePageNation from 'hooks/agenda/usePageNation';
@@ -29,40 +28,40 @@ const Agenda: NextPage = () => {
   return (
     <div className={styles.agendaPageContainer}>
       <AgendaTitle />
-      <div className={listStyles.agendaListTextWrapper}>
-        <h2>AGENDA LIST</h2>
-        <div>
-          <button
-            className={`${listStyles.agendaListStatus} ${
-              showCurrent ? listStyles.selectedStatus : ''
-            }`}
-            name='ongoing'
-            onClick={toggleStatus}
-          >
-            진행중
-          </button>
-          {' | '}
-          <button
-            className={`${listStyles.agendaListStatus} 
+      <div className={styles.agendaContainer}>
+        <div className={listStyles.agendaListTextWrapper}>
+          <h2>AGENDA LIST</h2>
+          <div>
+            <button
+              className={`${listStyles.agendaListStatus} ${
+                showCurrent ? listStyles.selectedStatus : ''
+              }`}
+              name='ongoing'
+              onClick={toggleStatus}
+            >
+              진행중
+            </button>
+            {' | '}
+            <button
+              className={`${listStyles.agendaListStatus} 
             ${showCurrent ? '' : listStyles.selectedStatus}`}
-            name='closed'
-            onClick={toggleStatus}
-          >
-            종료된
-          </button>
+              name='closed'
+              onClick={toggleStatus}
+            >
+              종료된
+            </button>
+          </div>
         </div>
-      </div>
 
-      {showCurrent ? (
-        <AgendaList agendaList={currentData || []} />
-      ) : (
-        <>
-          <AgendaList agendaList={historyData || []} />
-          <PageNation {...PagaNationElementProps} />{' '}
-        </>
-      )}
-      <TestModal />
-      <TestModal2 />
+        {showCurrent ? (
+          <AgendaList agendaList={currentData || []} />
+        ) : (
+          <>
+            <AgendaList agendaList={historyData || []} />
+            <PageNation {...PagaNationElementProps} />{' '}
+          </>
+        )}
+      </div>
     </div>
   );
 };

diff --git a/styles/agenda/Home/Agenda.module.scss b/styles/agenda/Home/Agenda.module.scss
@@ -1,5 +1,15 @@
 @import 'styles/agenda/common.scss';
 
+.agendaContainer {
+  width: calc(100% - 2rem);
+  margin: 0 auto;
+  @media screen and (min-width: 961px) {
+    @include container(2);
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+  }
+}
 .agendaPageContainer {
   @include layout;
   display: flex;

diff --git a/styles/agenda/Home/AgendaDeadLine.module.scss b/styles/agenda/Home/AgendaDeadLine.module.scss
@@ -1,6 +1,7 @@
 @import 'styles/agenda/common.scss';
 
 .agendaItemDeadLineBox {
+  @include gridHidden(mobile);
   position: absolute;
   right: 1rem;
   bottom: 1rem;

diff --git a/styles/agenda/Home/AgendaList.module.scss b/styles/agenda/Home/AgendaList.module.scss
@@ -1,11 +1,26 @@
 @import 'styles/agenda/common.scss';
-
+.container {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  @media screen and (min-width: 961px) {
+    display: grid;
+    grid-template: 'list big' 1fr / auto 1fr;
+  }
+}
 .agendaListContainer {
   display: flex;
   width: 100%;
   flex-direction: column;
   padding: 0 1rem;
   gap: 0.5rem;
+  @media screen and (min-width: 961px) {
+    width: 26rem;
+    height: 70vh;
+    padding: 0 1rem 0 0;
+    overflow-y: auto;
+    grid-area: list;
+  }
 }
 
 .agendaListTextWrapper {
@@ -39,7 +54,17 @@
   display: flex;
   width: 100%;
   flex-direction: column;
-  gap: 1rem;
+  margin-top: 1.5rem;
+  gap: 1.5rem;
+  align-items: center;
+  a {
+    display: flex;
+    width: 100%;
+  }
+  @media screen and (min-width: 961px) {
+    gap: 0.5rem;
+    margin-top: 0;
+  }
 }
 
 .agendaListItemBtn {
@@ -58,6 +83,27 @@
   box-shadow: var(--default-box-shadow);
   justify-content: center;
   align-items: flex-start;
+  @media screen and (min-width: 961px) {
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
+.listBig {
+  @include gridHidden(web);
+  width: 100%;
+  grid-area: big;
+  @media screen and (min-width: 961px) {
+    width: 100%;
+    height: 100%;
+  }
+}
+.listType {
+  @media screen and (min-width: 961px) {
+    width: 100%;
+    height: 6rem;
+    min-height: 6rem;
+    background: var(--box-bg-1);
+  }
 }
 
 .emptyContainer {
@@ -72,3 +118,11 @@
   @include text('description');
   @include container(1);
 }
+
+.selected {
+  @media screen and (min-width: 961px) {
+    border-color: var(--highlight-violet);
+    border-width: 2px;
+    box-shadow: 2px 2px 0 2px var(--highlight-violet);
+  }
+}
diff --git a/styles/agenda/Home/MyAgendaBtn.module.scss b/styles/agenda/Home/MyAgendaBtn.module.scss
@@ -22,12 +22,20 @@
 
 .myAgendaContainer.expandedHeight {
   height: 28rem;
+  overflow-y: auto;
   @include gridHead;
+  @media screen and (min-width: 961px) {
+    height: max-content;
+  }
 }
 
 .myAgendaContainer.expandedWidth {
-  width: 23rem;
+  // width: 23rem;
+  width: max-content;
   @include gridHead;
+  @media screen and (min-width: 961px) {
+    width: 100%;
+  }
 }
 
 .myAgendaBtnToggle {
@@ -71,17 +79,27 @@
   overflow-y: scroll;
   align-items: flex-start;
   gap: 1rem;
+  @media screen and (min-width: 961px) {
+    display: flex;
+    width: auto;
+    height: auto;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
 }
 
 .myagendaItemContainer {
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  width: 100%;
+  width: max-content;
   min-height: 5.5rem;
   padding: 0 1.2rem;
   background-color: var(--box-bg-1);
   border: var(--default-border);
   border-radius: $radius-big;
   box-shadow: var(--default-box-shadow);
+  @media screen and (min-width: 961px) {
+    width: max-content;
+  }
 }
diff --git a/styles/agenda/responsive.scss b/styles/agenda/responsive.scss
@@ -26,6 +26,7 @@
 // 각 페이지 내에서 그리드 템플릿 세팅 필요
 @mixin layout {
   @include action;
+  width: 100%;
   @media screen and (max-width: 480px) {
     display: flex;
     flex-direction: column;
@@ -39,7 +40,6 @@
   }
   @media screen and (min-width: 961px) {
     display: grid;
-    max-width: 1200px;
     padding: 0 5rem;
     border: 2px solid yellow;
   }

diff --git a/styles/color-theme.css b/styles/color-theme.css
@@ -24,6 +24,8 @@
   --highlight-violet-light: #af71ff;
   --highlight-yellow-dark: #fff78a;
   --highlight-violet-dark: #af71ff;
+  --highlight-bg-dark: #af71ff;
+  --highlight-bg-light: #cda7fc;
 
   --box-bg-1-light: #f8f8f8;
   --box-bg-2-light: #c8c8c8ec;
@@ -47,6 +49,7 @@ html[data-theme='light'] {
   --highlight-border: var(--border-highlight-light);
   --default-box-shadow: var(--box-shadow-light);
   --highlight-yellow: var(--highlight-yellow-light);
+  --highlight-bg: var(--highlight-bg-light);
   --highlight-violet: var(--highlight-violet-light);
   --box-bg-1: var(--box-bg-1-light);
   --box-bg-2: var(--box-bg-2-light);
@@ -64,6 +67,7 @@ html[data-theme='dark'] {
   --default-box-shadow: var(--box-shadow-dark);
   --highlight-yellow: var(--highlight-yellow-dark);
   --highlight-violet: var(--highlight-violet-dark);
+  --highlight-bg: var(--highlight-bg-dark);
   --box-bg-1: var(--box-bg-1-dark);
   --box-bg-2: var(--box-bg-2-dark);
   --box-bg-3: var(--box-bg-3-dark);