Merge pull request #55 from Clubber2024/feat/#51-summary

Feat/#51 summary
Clubber2024 · Jun 7, 2024 · 39a0551 · 39a0551
2 parents f4100de + 28abbdd
commit 39a0551
Show file tree

Hide file tree

Showing 9 changed files with 272 additions and 124 deletions.
diff --git a/src/main/_component/mainNotice.module.css b/src/main/_component/mainNotice.module.css
@@ -1,7 +1,8 @@
 @media screen and (min-width: 768px) {
     .container {
         position: relative;
-        width: 70%;
+        width: 80%;
+        margin-left: 5%;
     }
 
     .notice_index {
@@ -24,7 +25,7 @@
         z-index: 2;
         top: 35px;
         left: 0px;
-        width: 90%;
+        width: 75%;
         /* height: 215px; */
         background-color: white;
         border-radius: 13px;

diff --git a/src/main/_component/mainRanking.module.css b/src/main/_component/mainRanking.module.css
@@ -2,13 +2,15 @@
     .container {
         position: relative;
         width: 30%;
+        margin-left: -10%;
+        margin-right: 5%;
     }
 
     .ranking_index {
         position: absolute;
         z-index: 1;
         top: 3px;
-        left: 38px;
+        left: 25px;
         color: black;
         background-color: #9c9c9c1a;
         border: 0.7px solid #0000001a;
@@ -25,8 +27,8 @@
         position: absolute;
         z-index: 2;
         top: 35px;
-        left: 0px;
-        width: 70%;
+        left: -10px;
+        width: 90%;
         /* height: 215px; */
         background-color: white;
         border-radius: 13px;
@@ -65,7 +67,7 @@
         position: relative;
         width: 100px;
         z-index: 1;
-        top: 150px;
+        top: 240px;
         left: 15px;
         color: black;
         background-color: #9c9c9c1a;
@@ -82,7 +84,7 @@
     .ranking_container {
         position: relative;
         z-index: 2;
-        top: 140px;
+        top: 230px;
         left: -20px;
         width: 80%;
         /* height: 215px; */

diff --git a/src/main/mainPage.css b/src/main/mainPage.css
@@ -4,8 +4,9 @@
         flex-direction: row;
         align-items: center;
         justify-content: center;
-        width: 90%;
-        padding-left: 16%;
+        /*width: 80%;*/
+        margin-left: 20%;
+        margin-right: 20%;
         margin-top: 32px;
         margin-bottom: 347px;
     }
@@ -18,11 +19,10 @@
 @media screen and (max-width: 768px) {
     .notice_ranking_container {
         display: block;
-
-        align-items: left;
-        padding-left: 16%;
+        /*align-items: center;*/
+        padding-left: 25%;
         width: 90%;
         margin-top: 32px;
         margin-bottom: 347px;
     }
-}
+}
diff --git a/src/menu/detail/_component/IntroductionTab.jsx b/src/menu/detail/_component/IntroductionTab.jsx
@@ -33,28 +33,28 @@ export default function IntroductionTab({
             <div className="detail_body">
                 <h3>{'<<INTRODUCTION>>'}</h3>
                 {/* 타이틀이랑 내용이랑 css 차이를 어떻게 주면 좋을지 ? */}
-                <strong>📌 단과대 / 학과</strong>
+                <strong>{college === null ? '📌 소속분과' : '📌 단과대 / 학과'}</strong>
                 <p>
                     {college === null ? '중앙동아리' : college} / {department === null ? division : department}
                 </p>
                 <br></br>
-                <strong>📌 소모임 소개</strong>
+                <strong>📌 소개</strong>
                 <p>{introduction}</p>
                 <br></br>
-                <strong>📌 소모임 인스타</strong>
+                <strong>📌 인스타</strong>
                 <a href={instagram} target="_blank" rel="noopener noreferrer">
                     <img className="insta_icon" src="/buttons/instagram_icon.png" alt="instagram" />
                 </a>
                 <br></br>
-                <strong>📌 소모임 활동</strong>
+                <strong>📌 대표 활동</strong>
                 <p>
                     <NewLines text={activity} />
                 </p>
                 <br></br>
-                <strong>📌 소모임장</strong>
+                <strong>📌 동아리장</strong>
                 <p>{leader}</p>
                 <br></br>
-                <strong>📌 소모임실</strong>
+                <strong>📌 동아리실</strong>
                 <p>{room}</p>
             </div>
         </>

diff --git a/src/menu/detail/_component/ReviewStatics.jsx b/src/menu/detail/_component/ReviewStatics.jsx
@@ -6,9 +6,9 @@ import { useEffect } from 'react';
 // 데이터 예시
 // 각 bar마다 color 다르게
 const labels = {
-    ACTIVITY: '😃 "분위기가 좋아요"',
+    ACTIVITY: '🕺🏻 "활동 참여가 자유로워요"',
     CAREER: '🏆 "대외활동에 좋아요"',
-    CULTURE: '🕺🏻 "활동 참여가 자유로워요"',
+    CULTURE: '😃 "분위기가 좋아요"',
     FEE: '💵 "회비가 적당해요"',
     MANAGE: '👍🏻 "운영진이 일을 잘해요"',
 };

diff --git a/src/menu/detail/_component/reviewBox.css b/src/menu/detail/_component/reviewBox.css
@@ -1,46 +1,97 @@
-.review_box_container {
-    width: 100%;
-    background-color: white;
-    box-shadow: 0px 0px 4px 0px #0000004d;
-    border-radius: 15px;
-    margin-bottom: 15px;
-    padding: 16px 18px;
-}
+@media screen and (min-width: 768px) {
+    .review_box_container {
+        width: 125%;
+        background-color: white;
+        box-shadow: 0px 0px 4px 0px #0000004d;
+        border-radius: 15px;
+        margin-bottom: 15px;
+        padding: 16px 18px;
+    }
 
-.review_box_header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
+    .review_box_header {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
 
-.review_box_header p {
-    font-size: 16px;
-    font-weight: 700;
-    margin-right: 7px;
-}
+    .review_box_header p {
+        font-size: 16px;
+        font-weight: 700;
+        margin-right: 7px;
+    }
 
-.review_box_header span {
-    font-size: 12px;
-    font-weight: 400;
-    color: gray;
-}
+    .review_box_header span {
+        font-size: 12px;
+        font-weight: 400;
+        color: gray;
+    }
+
+    .review_box_contents {
+        display: grid;
+        /* 한 줄에 세개의 열 */
+        grid-template-columns: repeat(3, 1fr);
+        gap: 5px;
+        margin-top: 7px;
+        /* width: 100%; */
+    }
 
-.review_box_contents {
-    display: grid;
-    /* 한 줄에 세개의 열 */
-    grid-template-columns: repeat(3, 1fr);
-    gap: 5px;
-    margin-top: 7px;
-    /* width: 100%; */
+    .keyword_container {
+        background-color: #9c9c9c26;
+        border-radius: 5px;
+        border: none;
+        padding: 7px 10px;
+        font-size: 13px;
+        font-weight: 400;
+        /* width: 30%;
+    flex: 1; */
+    }
 }
 
-.keyword_container {
-    background-color: #9C9C9C26;
-    border-radius: 5px;
-    border: none;
-    padding: 7px 10px;
-    font-size: 13px;
-    font-weight: 400;
-    /* width: 30%;
+@media screen and (max-width: 768px) {
+    .review_box_container {
+        width: 125%;
+        background-color: white;
+        box-shadow: 0px 0px 4px 0px #0000004d;
+        border-radius: 15px;
+        margin-bottom: 15px;
+        padding: 16px 18px;
+    }
+
+    .review_box_header {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    .review_box_header p {
+        font-size: 13px;
+        font-weight: 700;
+        margin-right: 7px;
+    }
+
+    .review_box_header span {
+        font-size: 11px;
+        font-weight: 400;
+        color: gray;
+    }
+
+    .review_box_contents {
+        display: grid;
+        /* 한 줄에 세개의 열 */
+        /* grid-template-columns: repeat(3, 1fr);*/
+        gap: 5px;
+        margin-top: 7px;
+        /* width: 100%; */
+    }
+
+    .keyword_container {
+        background-color: #9c9c9c26;
+        border-radius: 5px;
+        border: none;
+        padding: 7px 10px;
+        font-size: 13px;
+        font-weight: 400;
+        /* width: 30%;
     flex: 1; */
-}
+    }
+}
diff --git a/src/menu/detail/_component/reviewStats.css b/src/menu/detail/_component/reviewStats.css
@@ -1,33 +1,71 @@
-.review-stats {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
+@media screen and (min-width: 768px) {
+    .review-stats {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
 
-.bar-container {
-  /* width: 120%; */
-  height: 35px;
-  background-color: #F2F2F2;
-  border-radius: 10px;
-  overflow: hidden;
-  /* position: relative; */
-}
+    .bar-container {
+        /* width: 120%; */
+        height: 35px;
+        background-color: #f2f2f2;
+        border-radius: 10px;
+        overflow: hidden;
+        /* position: relative; */
+    }
 
-.bar {
-  height: 100%;
-  background-color: #9fd8ea;
-  display: flex;
-  align-items: center;
-  padding: 0 8px;
-  border-radius: 12px;
+    .bar {
+        height: 100%;
+        background-color: #9fd8ea;
+        display: flex;
+        align-items: center;
+        padding: 0 8px;
+        border-radius: 12px;
+    }
+
+    .text {
+        color: #000;
+        font-size: 15px;
+        font-weight: 700;
+        white-space: nowrap;
+        overflow: visible;
+        padding-left: 7px;
+        /* text-overflow: ellipsis; */
+    }
 }
 
-.text {
-  color: #000;
-  font-size: 15px;
-  font-weight: 700;
-  white-space: nowrap;
-  overflow: visible;
-  padding-left: 7px;
-  /* text-overflow: ellipsis; */
-}
+@media screen and (max-width: 768px) {
+    .review-stats {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .bar-container {
+        /* width: 120%; */
+        height: 35px;
+        background-color: #f2f2f2;
+        border-radius: 10px;
+        overflow: hidden;
+        /* position: relative; */
+    }
+
+    .bar {
+        height: 100%;
+        background-color: #9fd8ea;
+        display: flex;
+        align-items: center;
+        padding: 0 8px;
+        border-radius: 12px;
+    }
+
+    .text {
+        color: #000;
+        font-size: 14px;
+        font-weight: 700;
+        white-space: nowrap;
+        overflow: visible;
+        padding-left: 7px;
+        /* text-overflow: ellipsis; */
+    }
+}