Merge pull request #1451 from 42organization/Feat/#1437-agenda-list-l…

…ayout 수정사항까지 잘 반영된 부분 확인했습니다. 역시 꼼꼼하십니다^^
42organization · Jul 18, 2024 · f484dec · f484dec
2 parents cd2bd92 + 7ea1abf
commit f484dec
Show file tree

Hide file tree

Showing 25 changed files with 640 additions and 39 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -5,11 +5,19 @@
   3. 새로운 모듈 설치시 PR message에 기재할 것.
   4. PR 올리기전에 branch 반드시 확인할 것.
  -->
- ## 📌 개요 <!-- PR내용에 대해 축약해서 적어주세요. -->
-  -
- ## 💻 작업사항 <!-- PR내용에 대해 상세설명이 필요하다면 이 부분에 기재 해주세요. -->
-  -
- ## ✅ 변경로직 <!-- 고친 사항을 적어주세요. 재PR 시에만 사용해 주세요! (재PR 아닌 경우 삭제) -->
-  -
- ## 💡관련 Issue <!-- 관련 Issue 번호를 기록해주세요. close가 필요한 경우에는 close #[이슈번호]를 해주세요 -->
-  - 
+
+## 📌 개요 <!-- PR내용에 대해 축약해서 적어주세요. -->
+
+-
+
+## 💻 작업사항 <!-- PR내용에 대해 상세설명이 필요하다면 이 부분에 기재 해주세요. -->
+
+-
+
+## ✅ 변경로직 <!-- 고친 사항을 적어주세요. 재PR 시에만 사용해 주세요! (재PR 아닌 경우 삭제) -->
+
+-
+
+## 💡관련 Issue <!-- 관련 Issue 번호를 기록해주세요. close가 필요한 경우에는 close #[이슈번호]를 해주세요 -->
+
+-
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -5,7 +5,6 @@ import { RecoilRoot } from 'recoil';
 import { QueryClient } from 'react-query';
 import { QueryClientProvider } from 'react-query';
 import 'styles/globals.css';
-// import 'styles/color-theme.css';
 
 const queryClient = new QueryClient();
 

diff --git a/components/agenda/Form/AgendaResultForm.tsx b/components/agenda/Form/AgendaResultForm.tsx
@@ -43,27 +43,29 @@ const AgendaResultForm = ({ teamlist }: AgendaResultFormProps) => {
       <ul className={styles.awardUl}>
         {awardlist?.map((data, idx) => (
           <li key={idx} className={styles.awardLi}>
-            <DragBtn onClick={(e) => alert('DEV::dragbutton called', e)} />
+            <DragBtn onClick={(e) => alert('DEV::dragbutton called' + e)} />
             <div className={styles.awardContainer}>
               <div className={styles.awardTitleContainer}>
                 <p key={idx} className={styles.awardTitle}>
                   {data.award}
                 </p>
                 <RemoveElementBtn
-                  onClick={(e) => alert('DEV::removebtn called', e)}
+                  onClick={(e) => alert('DEV::removebtn called' + e)}
                 />
               </div>
               <div className={styles.awardSelectContainer}>
-                {data.teams.map((team, idx) => (
+                {data.teams.map((team, teamidx) => (
                   <SelectInput
-                    key={idx}
+                    key={teamidx}
                     selected={team}
-                    data={teamlist}
+                    options={teamlist}
+                    name={`selected-team${idx}-${teamidx}`}
                     message='팀을 선택해주세요'
                   />
                 ))}
                 <SelectInput
-                  data={teamlist}
+                  options={teamlist}
+                  name={`unselected-team${idx}`}
                   message='팀을 선택해주세요'
                   onChange={(e) => {
                     addTeam(idx, e.target.value);
@@ -84,11 +86,18 @@ const AgendaResultForm = ({ teamlist }: AgendaResultFormProps) => {
                 placeholder='추가할 상을 입력해주세요...'
               />
               <AddElementBtn
-                onClick={(e) => alert('DEV::addbutton called', e)}
+                onClick={(e) => alert('DEV::addbutton called' + e)}
               />
             </div>
             <div className={styles.awardSelectContainer}>
-              <SelectInput data={teamlist} message='팀을 선택해주세요' />
+              {/* <SelectInput
+                options={teamlist}
+                name={`unselected-team${idx}`}
+                message='팀을 선택해주세요'
+                onChange={(e) => {
+                  addTeam(idx, e.target.value);
+                }}
+              /> */}
             </div>
           </div>
         </li>

diff --git a/components/agenda/Home/AgendaList.tsx b/components/agenda/Home/AgendaList.tsx
@@ -0,0 +1,77 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import React from 'react';
+import AgendaTag from 'components/agenda/utils/AgendaTag';
+import styles from 'styles/agenda/Home/AgendaList.module.scss';
+
+const AgendaList = () => {
+  return (
+    <div className={styles.agendaListContainer}>
+      <div className={styles.agendaListTextWrapper}>AGENDA LIST</div>
+      <div className={styles.agendaListItemContainer}>
+        <AgendaListBtn />
+        <AgendaListBtn />
+      </div>
+    </div>
+  );
+};
+
+const AgendaListBtn = () => {
+  return (
+    <Link href={`/agenda/1`}>
+      <button className={styles.agendaListItemBtn}>
+        <div className={styles.agendaInfoContainer}>
+          <div className={styles.agendaDateBox}>
+            <div className={styles.agendaDateMonth}>12</div>
+            <div className={styles.agendaDateDay}>31</div>
+          </div>
+
+          <div className={styles.agendaInfoWrapper}>
+            <div className={styles.agendaItemTitleBox}>PUSH SWAP 경진대회</div>
+
+            <div className={styles.agendaItemTimeBox}>
+              <div className={styles.agendaItemTimeWrapper}>
+                <div className={styles.imageWrapper}>
+                  <Image
+                    src='/image/agenda/Time.svg'
+                    width={15}
+                    height={15}
+                    alt='Time'
+                    className={styles.imageBox}
+                  />
+                </div>
+                <div>12.31</div>
+                <div>14:00 ~ 17:00</div>
+              </div>
+
+              <div className={styles.agendaItemTimeWrapper}>
+                <div className={styles.imageWrapper}>
+                  <Image
+                    src='/image/agenda/People.svg'
+                    width={15}
+                    height={15}
+                    alt='count'
+                    className={styles.imageBox}
+                  />
+                </div>
+                <div>20/100</div>
+              </div>
+            </div>
+
+            <div className={styles.agendaItemTagBox}>
+              <AgendaTag tagName='공식' />
+              <AgendaTag tagName='팀' />
+              <AgendaTag tagName='과제' />
+            </div>
+          </div>
+        </div>
+        <div className={styles.agendaItemDeadLineBox}>
+          <div className={styles.agendaDeadLineText}>모집마감</div>
+          <div className={styles.agendaDeadLine}>D-2</div>
+        </div>
+      </button>
+    </Link>
+  );
+};
+
+export default AgendaList;
diff --git a/components/agenda/Home/AgendaTitle.tsx b/components/agenda/Home/AgendaTitle.tsx
@@ -0,0 +1,27 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import styles from 'styles/agenda/Home/AgendaTitle.module.scss';
+
+const AgendaTitle = () => {
+  return (
+    <div className={styles.agendaTitleContainer}>
+      <div>AGENDA</div>
+      <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>
+    </div>
+  );
+};
+
+export default AgendaTitle;
diff --git a/components/agenda/Home/MyAgendaBtn.tsx b/components/agenda/Home/MyAgendaBtn.tsx
@@ -0,0 +1,21 @@
+import Image from 'next/image';
+import styles from 'styles/agenda/Home/MyAgendaBtn.module.scss';
+
+const MyAgendaBtn = () => {
+  return (
+    <button className={styles.myagendaBtn}>
+      <div>my agenda</div>
+      <div className={styles.imageWrapper}>
+        <Image
+          src='/image/agenda/ArrowRight.svg'
+          width={35}
+          height={35}
+          alt='Go To My Agenda'
+          className={styles.imageBox}
+        />
+      </div>
+    </button>
+  );
+};
+
+export default MyAgendaBtn;
diff --git a/components/agenda/utils/AgendaTag.tsx b/components/agenda/utils/AgendaTag.tsx
@@ -0,0 +1,29 @@
+import styles from 'styles/agenda/utils/AgendaTag.module.scss';
+
+interface AgendaTagProps {
+  tagName: string;
+}
+
+const AgendaTag: React.FC<AgendaTagProps> = ({ tagName }) => {
+  let backgroundColor;
+  switch (tagName) {
+    case '공식':
+      backgroundColor = '#39B8FF';
+      break;
+    case '팀':
+      backgroundColor = '#FF5D5D';
+      break;
+    case '과제':
+      backgroundColor = '#FFB039';
+      break;
+    default:
+      backgroundColor = '#000000';
+  }
+  return (
+    <div className={styles.agendaTag} style={{ backgroundColor }}>
+      #{tagName}
+    </div>
+  );
+};
+
+export default AgendaTag;
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -31,6 +31,9 @@ function MyApp({ Component, pageProps }: AppProps) {
     <>
       <Head>
         <title>42gg</title>
+        {router.pathname.startsWith('/agenda') && (
+          <link rel='stylesheet' href='/styles/reset.css' />
+        )}
       </Head>
       <Script
         strategy='afterInteractive'

diff --git a/pages/agenda/index.tsx b/pages/agenda/index.tsx
@@ -1,25 +1,15 @@
-import Link from 'next/link';
 import type { NextPage } from 'next';
+import AgendaList from 'components/agenda/Home/AgendaList';
+import AgendaTitle from 'components/agenda/Home/AgendaTitle';
+import MyAgendaBtn from 'components/agenda/Home/MyAgendaBtn';
+import styles from 'styles/agenda/Home/Agenda.module.scss';
 
 const Agenda: NextPage = () => {
-  const agendaKey = 1;
-
   return (
-    <div>
-      <h1>ageda</h1>
-      <div key={agendaKey}>
-        <Link href={`/agenda/${agendaKey}`}>1번방</Link>
-      </div>
-
-      <div>
-        <Link href={`/agenda/create`}>agenda 생성</Link>
-      </div>
-      <div>
-        <Link href={`/agenda/profile`}>내 프로필</Link>
-      </div>
-      <div>
-        <Link href={`/agenda/admin`}>agenda admin</Link>
-      </div>
+    <div className={styles.agendaPageContainer}>
+      <AgendaTitle />
+      <MyAgendaBtn />
+      <AgendaList />
     </div>
   );
 };

diff --git a/public/font/11StreetGothic/11STREET_Gothic_bold.ttf b/public/font/11StreetGothic/11STREET_Gothic_bold.ttf
diff --git a/public/font/11StreetGothic/11STREET_Gothic_light.ttf b/public/font/11StreetGothic/11STREET_Gothic_light.ttf
diff --git a/public/font/11StreetGothic/11STREET_Gothic_regular.ttf b/public/font/11StreetGothic/11STREET_Gothic_regular.ttf
diff --git a/public/image/agenda/42.jpg b/public/image/agenda/42.jpg
diff --git a/public/image/agenda/ArrowRight.svg b/public/image/agenda/ArrowRight.svg
diff --git a/public/image/agenda/People.svg b/public/image/agenda/People.svg
diff --git a/public/image/agenda/Time.svg b/public/image/agenda/Time.svg