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

…anization/42gg.client into Style/#1504-responsive-css
42organization · Aug 30, 2024 · 36eedaf · 36eedaf
2 parents e3ce786 + f2dc1b3
commit 36eedaf
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 53 deletions.
diff --git a/components/agenda/agendaDetail/AgendaInfo.tsx b/components/agenda/agendaDetail/AgendaInfo.tsx
@@ -81,8 +81,15 @@ export default function AgendaInfo({
       <div className={`${styles.infoContainer} ${containerSize}`}>
         <div className={styles.infoWarp}>
           <div className={styles.contentWarp}>
-            {isAgendaDetail && buttonData && (
-              <div className={styles.enrollWarp}>
+            <h2>{agendaTitle}</h2>
+
+            <div className={styles.organizerWrap}>
+              <span>주최자 : {agendaHost}</span>
+            </div>
+            <div className={styles.buttonWarp}>
+              {isAgendaDetail && <ShareBtn onClick={copyLink} />}
+
+              {isAgendaDetail && buttonData && (
                 <UploadBtn
                   text={buttonData.text}
                   onClick={() => {
@@ -92,14 +99,7 @@ export default function AgendaInfo({
                     });
                   }}
                 />
-              </div>
-            )}
-            <div className={styles.titleWarp}>
-              <h2>{agendaTitle}</h2>
-              {isAgendaDetail && <ShareBtn onClick={copyLink} />}
-            </div>
-            <div className={styles.organizerWrap}>
-              <span>주최자 : {agendaHost}</span>
+              )}
             </div>
           </div>
         </div>

diff --git a/pages/agenda/[agendaKey]/index.tsx b/pages/agenda/[agendaKey]/index.tsx
@@ -23,38 +23,30 @@ const AgendaDetail = () => {
   const intraId = user?.intraId || '';
   const isHost = getIsHost(intraId, agendaData);
 
-  const teamUID = 1;
-
   const { data: myTeam, status: status } = useFetchGet<TeamDataProps>(
     `team/my`,
     { agenda_key: agendaKey }
   );
 
   return (
     <>
-      <div className={styles.layout}>
-        <div className={styles.agendaDetailWrap}>
-          {agendaData ? (
-            <>
-              <AgendaInfo
-                agendaData={agendaData}
-                isHost={isHost}
-                status={status}
-              />
-              <AgendaTab
-                agendaData={agendaData}
-                isHost={isHost}
-                myTeam={myTeam}
-              />
-            </>
-          ) : (
-            <p>Loading...</p>
-          )}
-
-          <div key={teamUID}>
-            <Link href={`/agenda/${agendaKey}/${teamUID}`}>1번 팀</Link>
-          </div>
-        </div>
+      <div className={styles.agendaDetailWrap}>
+        {agendaData ? (
+          <>
+            <AgendaInfo
+              agendaData={agendaData}
+              isHost={isHost}
+              status={status}
+            />
+            <AgendaTab
+              agendaData={agendaData}
+              isHost={isHost}
+              myTeam={myTeam}
+            />
+          </>
+        ) : (
+          <p>Loading...</p>
+        )}
       </div>
     </>
   );

diff --git a/styles/agenda/agendaDetail/AgendaDetail.module.scss b/styles/agenda/agendaDetail/AgendaDetail.module.scss
@@ -11,10 +11,10 @@
 
 .agendaDetailWrap {
   display: flex;
-  width: 100%;
+  width: 100vw;
   height: 100%;
   flex-direction: column;
-  padding: 1rem;
+  padding: 2rem;
   justify-content: center;
   align-items: center;
 }
diff --git a/styles/agenda/agendaDetail/AgendaInfo.module.scss b/styles/agenda/agendaDetail/AgendaInfo.module.scss
@@ -12,10 +12,9 @@ $info-gradient: linear-gradient(
   @include container(1);
   position: relative;
   width: 100%;
-
   min-width: 280px;
   max-width: 100%;
-  padding: 1.5rem;
+  padding: 1.2rem;
   margin: 0rem;
   background: $info-gradient;
 
@@ -26,32 +25,50 @@ $info-gradient: linear-gradient(
   &.smallHeight {
     height: 10rem;
   }
+
   @media screen and (min-width: 481px) and (max-width: 960px) {
     width: 450px;
     max-width: 800px;
   }
+
+  @media screen and (min-width: 961px) {
+    height: 5rem !important;
+    border-radius: 10rem;
+  }
 }
 
 .infoWarp {
   position: absolute;
   right: 1.5rem;
   bottom: 1.5rem;
   left: 1.5rem;
+  @media screen and (min-width: 961px) {
+    bottom: 0.3rem;
+  }
 }
 
 .contentWarp {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.6rem;
+
+  @media screen and (min-width: 961px) {
+    flex-direction: row; // 가로 배치
+    justify-content: space-between; // 간격 조절
+    align-items: center;
+    gap: 1rem;
+  }
 }
 
 .titleWarp {
   display: flex;
-  width: 100%;
-  height: 2.5rem;
-  justify-content: space-between;
   align-items: center;
+  width: 100%;
+  gap: 1.5rem;
+  @media screen and (max-width: 961px) {
+    justify-content: space-between;
+  }
   h2 {
     @include text('agenda-title');
   }
@@ -61,15 +78,28 @@ $info-gradient: linear-gradient(
   cursor: pointer;
 }
 
-.enrollWarp {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-end;
-  gap: 10px;
-  align-self: stretch;
-}
-
 .organizerWrap {
   @include text('default'); // medium
+  margin-right: auto; // UploadBtn과의 간격 확보
+}
+
+.buttonWarp {
+  position: absolute;
+  right: 0;
+  display: flex; // flex 컨테이너로 설정
+  flex-direction: column; // 기본적으로 세로 정렬
+  align-items: flex-end; // 오른쪽 정렬
+  gap: 0.4rem;
+
+  @media screen and (max-width: 960px) {
+    bottom: 100%; // 960px 이하에서 세로 정렬
+  }
+
+  @media screen and (min-width: 961px) {
+    bottom: 26%; // 961px 이상에서 위치 조정
+    flex-direction: row; // 가로 배치
+    justify-content: flex-end; // 오른쪽 정렬
+    align-items: center; // 세로 중앙 정렬
+    gap: 1rem;
+  }
 }
diff --git a/styles/agenda/agendaDetail/AgendaTab.module.scss b/styles/agenda/agendaDetail/AgendaTab.module.scss
@@ -14,7 +14,7 @@
 }
 
 .tabWarp {
-  min-width: 280px;
+  width: 100vw;
   max-width: 100%;
   @media screen and (min-width: 481px) and (max-width: 960px) {
     width: 450px;

diff --git a/styles/agenda/agendaDetail/tabs/AgendaConditions.module.scss b/styles/agenda/agendaDetail/tabs/AgendaConditions.module.scss
@@ -11,6 +11,15 @@
   margin: 0;
   gap: 1.5rem;
   align-items: flex-start;
+  @media screen and (min-width: 481px) and (max-width: 960px) {
+    width: 450px;
+    max-width: 800px;
+  }
+
+  @media screen and (min-width: 961px) {
+    width: 1000px;
+    max-width: 100%;
+  }
 }
 
 .conditionTitle {

diff --git a/styles/agenda/agendaDetail/tabs/AgendaDescription.module.scss b/styles/agenda/agendaDetail/tabs/AgendaDescription.module.scss
@@ -3,14 +3,24 @@
 .descriptionContainer {
   @include container(1);
   display: flex;
-  width: 100%;
+  width: 100vw;
   flex: 1 0 0;
 
   flex-direction: column;
   padding: 1.5rem;
   margin: 0;
   gap: 1.2rem;
   align-items: flex-start;
+
+  @media screen and (min-width: 481px) and (max-width: 960px) {
+    width: 450px;
+    max-width: 800px;
+  }
+
+  @media screen and (min-width: 961px) {
+    width: 1000px;
+    max-width: 100%;
+  }
 }
 
 .descriptionTitle {