Merge pull request #91 from LikeLionHGU/yeji-feat/#87

style : css 살짝 고치기

src/App.js

@@ -14,8 +14,12 @@ import SignUp from "./account/SignUp";
 import Complete from "./account/Complete";
 import Calendarr from "./calendar/Calendarr";
 import MentoCalendar from "./calendarMento/MentoCalendar";
+
+import SearchBoard from "./search/SearchBoard";
+
 import UploadPost from "./uploadPost/UploadPost";
 
+
 function App() {
   return (
     <div className="App">
@@ -30,6 +34,7 @@ function App() {
           <Route path="/calendarmento" element={<MentoCalendar />}></Route>
 
           <Route path="/board" element={<BoardList />} />
+          <Route path="/searchboard" element={<SearchBoard />} />
           <Route path="/write" element={<BoardWrite />} />
           <Route path="/uploadPost" element={<UploadPost />} />
         </Routes>

src/account/LogIn.js

@@ -119,7 +119,6 @@ const LogIn = () => {
               </span>
             </div>
             <div className={styles.warning}>
-              {/* <img src="warningicon" /> */}
               <p>{message}</p>
             </div>
           </div>

src/account/LogIn.module.css

@@ -1,6 +1,5 @@
 .login {
-  padding-left: 30vh;
-  padding-right: 24.7vh;
+  padding: auto;
   position: absolute;
   top: 50%;
   left: 50%;
@@ -11,10 +10,10 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-bottom: 40px;
+  padding-bottom: 30px;
 }
 .login .logo img {
-  width: 150px;
+  width: 200px;
 }
 
 .rect {
@@ -44,8 +43,9 @@
 .input_rect {
   width: 502px;
   height: 52px;
-  margin-left: 74px;
-  margin-right: 74px;
+  margin: auto;
+  /* margin-left: 74px;
+  margin-right: 74px; */
   border: 1.5px solid #ff8bc5;
   border-radius: 20px;
   display: flex;
@@ -104,6 +104,7 @@
   justify-content: center;
   align-items: center;
 }
+
 .btn button {
   width: 326px;
   height: 60px;
@@ -112,14 +113,15 @@
   border: none;
 }
 .buttonlogin {
-  margin-top: 44px;
+  margin-top: 30px;
   margin-bottom: 15px;
   background-color: #fc389a;
 }
 .buttonkakaologin {
   background-color: #ffe812;
 }
 .warning {
+  padding-top: 10px;
   color: red;
   font-size: small;
 }

src/account/SignUp.module.css

@@ -10,6 +10,11 @@
   padding-bottom: 40px;
 }
 
+.logo img {
+  width: 200px;
+  height: 40px;
+}
+
 .signup_rect {
   border-radius: 30px;
   text-align: center;
@@ -50,7 +55,7 @@
   display: none;
 }
 .gender input[type="radio"] + label {
-  width: 240px;
+  width: 245px;
   height: 30px;
   border-radius: 10px;
   display: inline-block;
@@ -95,3 +100,7 @@ label {
 .signup_input input:focus {
   border: 1px solid red;
 }
+
+.signup_input p {
+  font-size: small;
+}

src/banner/Slider.jsx

@@ -45,9 +45,7 @@ export default function Slider() {
       pagination={{ clickable: true }}
     >
       <SwiperSlide>
-        <div className="underbar">
-          <img src={banner1} />
-        </div>
+        <img src={banner1} />
       </SwiperSlide>
       <SwiperSlide>
         <img src={banner2} />

src/header/search/Search.js

@@ -8,6 +8,7 @@ export default function Search() {
   const onChange = (e) => {
     setSearch(e.target.value);
   };
+
   const filterResult = member.filter((p) => {
     return (
       p.title

src/search/SearchBoard.jsx

@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+import heart from "./heart.png";
+
+import Header from "../header/Header";
+
+import styles from "./searchboard.module.css";
+
+export default function SearchBoard() {
+  const navigate = useNavigate();
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    // API 호출
+    fetch("https://api.zionhann.shop/app/makeup/posts/images")
+      .then((response) => response.json())
+      .then((data) => setData(data.data));
+  }, []);
+
+  const handleContainerClick = (num) => {
+    navigate("/post/" + num);
+  };
+
+  const truncate = (str, n) => {
+    return str?.length > n ? str.substr(0, n - 1) + "..." : str;
+  };
+
+  if (data.length === 0) return <>loading...</>;
+
+  return (
+    <div className={styles.searchboard}>
+      <Header></Header>
+      <div className={styles.container}>
+        {[...Array(4)].map((_, colIndex) => (
+          <div key={colIndex}>
+            {[...Array(4)].map((_, rowIndex) => {
+              const itemIndex = rowIndex * 4 + colIndex;
+              const item = data[itemIndex];
+              if (!item) return null;
+              return (
+                <div className={styles.bottom}>
+                  <div
+                    key={item.photo_id}
+                    className={styles.rect}
+                    onClick={() => handleContainerClick(item.photo_id)}
+                    style={{ backgroundImage: `url(${item.imageUrl})` }}
+                  >
+                    <div className={styles.hoverText}>
+                      {truncate(item.text, 12)}
+                    </div>
+
+                    <img
+                      src={heart}
+                      alt="heartimg"
+                      className={styles.heart}
+                    ></img>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/search/searchboard.module.css

@@ -0,0 +1,66 @@
+.searchboard .container {
+  display: flex;
+  justify-content: center;
+  white-space: pre-line;
+  margin-bottom: 111px;
+  background-color: #efc4b8;
+  padding-top: 127px;
+  padding-bottom: 127px;
+}
+
+.bottom > .rect {
+  width: 220px;
+  height: 220px;
+  margin-left: 8px;
+  margin-top: 8px;
+  display: flex;
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+.rect:hover .hoverText {
+  display: flex;
+  margin-top: 234px;
+  margin-left: 5px;
+  font-family: "Pretendard-Regular";
+  font-weight: 400;
+  font-size: 12px;
+}
+
+.hoverText {
+  display: none;
+}
+
+.bottom {
+  width: 236px;
+  height: 267px;
+  border-color: white;
+  border-style: solid;
+  border-radius: 5px;
+  background-color: white;
+  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15);
+  margin-bottom: 29px;
+  margin-right: 25px;
+}
+
+.bottom:hover {
+  box-shadow: 0px 0px 25px rgba(255, 135, 159, 0.4);
+}
+
+.heart {
+  position: absolute;
+  width: 24px;
+  height: 19px;
+  margin-top: 234px;
+  left: 195px;
+}
+
+.title {
+  font-family: "Pretendard-Regular";
+  font-size: 30px;
+  font-weight: bold;
+  padding-top: 146px;
+  padding-bottom: 30px;
+  padding-left: 241px;
+}