Merge pull request #198 from Clubber2024/dev

Dev
Clubber2024 · Feb 17, 2025 · d480698 · d480698
2 parents 5eea14e + 0bda080
commit d480698
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 25 deletions.
diff --git a/src/component/search/search.jsx b/src/component/search/search.jsx
@@ -67,24 +67,46 @@ function Search() {
 
     const renderData = (data) => {
         const rows = [];
-        for (let i = 0; i < data.length; i += 4) {
-            const rowItems = data.slice(i, i + 4);
-            rows.push(
-                <div className={styles.container} key={i}>
-                    {rowItems.map((club) => (
-                        <SearchClub
-                            key={club.clubId}
-                            clubId={club.clubId}
-                            imageUrl={club.imageUrl}
-                            clubName={club.clubName}
-                            introduction={club.introduction}
-                            division={club.division}
-                            department={club.department}
-                            agreeToProvideInfo={club.agreeToProvideInfo}
-                        />
-                    ))}
-                </div>
-            );
+        if (window.innerWidth <= 768) {
+            for (let i = 0; i < data.length; i += 2) {
+                const rowItems = data.slice(i, i + 2);
+                rows.push(
+                    <div className={styles.container} key={i}>
+                        {rowItems.map((club) => (
+                            <SearchClub
+                                key={club.clubId}
+                                clubId={club.clubId}
+                                imageUrl={club.imageUrl}
+                                clubName={club.clubName}
+                                introduction={club.introduction}
+                                division={club.division}
+                                department={club.department}
+                                agreeToProvideInfo={club.agreeToProvideInfo}
+                            />
+                        ))}
+                    </div>
+                );
+            }
+        } else {
+            for (let i = 0; i < data.length; i += 4) {
+                const rowItems = data.slice(i, i + 4);
+                rows.push(
+                    <div className={styles.container} key={i}>
+                        {rowItems.map((club) => (
+                            <SearchClub
+                                key={club.clubId}
+                                clubId={club.clubId}
+                                imageUrl={club.imageUrl}
+                                clubName={club.clubName}
+                                introduction={club.introduction}
+                                division={club.division}
+                                department={club.department}
+                                agreeToProvideInfo={club.agreeToProvideInfo}
+                            />
+                        ))}
+                    </div>
+                );
+            }
         }
         return rows;
     };

diff --git a/src/component/search/search.module.css b/src/component/search/search.module.css
@@ -61,8 +61,8 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        padding-top: 20px;
-        padding-bottom: 20px;
+        /* padding-top: 20px; */
+        padding-bottom: 5%;
     }
 
     .warning_container {

diff --git a/src/component/search/searchClub.module.css b/src/component/search/searchClub.module.css
@@ -70,15 +70,22 @@
 @media screen and (max-width: 769px) {
     .rectangle {
         position: relative;
-        width: 20%;
-        height: 21.6%;
+        width: 162px;
+        height: 210px;
         border-radius: 10px;
         background: #ffffff;
         border: 1px solid #d9d9d9;
         box-shadow: 0px 0px 5px 0px #00000033;
         margin: 10px;
         cursor: pointer;
     }
+    .rectangle h3 {
+        background: #ffffff;
+    }
+
+    .rectangle p {
+        background: transparent;
+    }
     .image {
         width: 100%;
         border-radius: 10px 10px 0px 0px;
@@ -93,6 +100,7 @@
         font-weight: 600;
         text-align: left;
         padding: 0 0 0 3%;
+        border-radius: 10px;
     }
     .content {
         width: 100%;
@@ -106,6 +114,7 @@
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow-y: auto;
+        border-radius: 10px;
     }
     .department {
         font-family: Noto Sans KR;

diff --git a/src/pages/detailPage.css b/src/pages/detailPage.css
@@ -205,7 +205,7 @@
         display: flex;
         flex-direction: row;
         align-items: center;
-        width: 80%;
+        width: 90%;
         height: 150px;
         justify-content: flex-start;
         margin-top: 10px;
@@ -324,7 +324,7 @@
         flex-direction: row;
         align-items: center;
         justify-content: space-evenly;
-        width: 70%;
+        width: 80%;
         height: 36px;
         background-color: #7bc8e04d;
     }
@@ -333,7 +333,7 @@
         display: flex;
         flex-direction: column;
         align-items: left;
-        width: 70%;
+        width: 80%;
         margin: 2.5% 0 15% 0;
     }