Merge pull request #13 from LikeLionHGU/hwan_#10/메인-페이지

Hwan #10/메인 페이지

src/components/Slide.jsx

@@ -21,7 +21,8 @@ export default function Slide({ mode }) {
   return (
     <div className="slide-container">
       {mode === 1 ? (
-        <div className="arrow"></div>
+        // <div className="arrow"></div>
+        <></>
       ) : (
         <button className="arrow" ref={prevRef}>
           <img src={PrevArrowImg} alt="prevarrow" />
@@ -48,6 +49,8 @@ export default function Slide({ mode }) {
           prevEl: prevRef.current, // 이전 버튼
           nextEl: nextRef.current, // 다음 버튼
         }}
+        // 시작지점 빈공간
+        slidesOffsetBefore={mode === 1 ? 85 : 0}
         onInit={(swiper) => {
           swiper.params.navigation.prevEl = prevRef.current;
           swiper.params.navigation.nextEl = nextRef.current;
@@ -72,7 +75,8 @@ export default function Slide({ mode }) {
         <SwiperSlide></SwiperSlide>
       </Swiper>
       {mode === 1 ? (
-        <div className="arrow"></div>
+        // <div className="arrow"></div>
+        <></>
       ) : (
         <button className="arrow" ref={nextRef}>
           <img src={NextArrowImg} alt="nextarrow" />

src/pages/Mainpage.jsx

@@ -7,8 +7,10 @@ export default function Mainpage() {
     <div className="main">
       <Header />
       <div className="main-container">
-        <div className="section">
-          <div className="section-above">베스트 책</div>
+        <div className="section" id="best-book">
+          <div className="section-above" id="best-above">
+            베스트 책
+          </div>
           <div className="slide-container">
             <Slide mode={1} />
           </div>

src/pages/project/List.jsx

@@ -1,5 +1,63 @@
 // 프로젝트 전체 페이지
+import { useState } from "react";
+import Header from "../../components/Header";
+import "../../styles/list.css";
+
+import Test1 from "../../imgs/test1.png";
+import Test2 from "../../imgs/test2.png";
+import Test3 from "../../imgs/test3.png";
+import Test4 from "../../imgs/test4.png";
+
+const imageData = [
+  {
+    id: 1,
+    title: "Image 1",
+    src: Test1, // 여기에 실제 이미지 경로를 입력하세요
+  },
+  {
+    id: 2,
+    title: "Image 2",
+    src: Test2, // 여기에 실제 이미지 경로를 입력하세요
+  },
+  {
+    id: 3,
+    title: "Image 3",
+    src: Test3, // 여기에 실제 이미지 경로를 입력하세요
+  },
+  {
+    id: 4,
+    title: "Image 4",
+    src: Test4, // 여기에 실제 이미지 경로를 입력하세요
+  },
+  // 필요한 만큼 추가
+];
+
 export default function List() {
-    return <>Hi</>;
-  }
-
+  const [dropdown, setDropdown] = useState("");
+
+  const handleSelectChange = (event) => {
+    setDropdown(event.target.value);
+  };
+  return (
+    <>
+      <Header mode={1} />
+      <select value={dropdown} onChange={handleSelectChange}>
+        <option value="option1">모집 중</option>
+        <option value="option2">완결</option>
+        <option value="option3">연재중</option>
+      </select>
+      <div className="list-container">
+        {imageData.map((image) => (
+          <div key={image.id} className="list-card">
+            <div
+              className="list-img"
+              style={{ backgroundImage: `url(${image.src})` }}
+            />
+            {/* <img src={image.src} alt={image.title} className="list-img" /> */}
+            <h2>{image.title}</h2>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}

src/styles/list.css

@@ -0,0 +1,22 @@
+.list-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  /* gap: 10px; */
+  /* padding: 10px; */
+}
+
+.list-card {
+  /* border: 1px solid #ccc; */
+  border-radius: 8px;
+  overflow: hidden;
+  text-align: center;
+  height: 300px;
+}
+
+.list-img {
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}

src/styles/mainpage.css

@@ -11,7 +11,7 @@
   flex-direction: column;
   align-items: center;
 
-  max-width: 90%;
+  width: 100%;
 }
 
 .slide-container {
@@ -21,10 +21,20 @@
 
 .section {
   width: 100%;
+  max-width: 90%;
 }
 
 .section-above {
   display: flex;
   justify-content: space-between;
-  padding: 0 50px;
+  padding: 0 35px;
+}
+
+#best-book {
+  max-width: 100%;
+  background-image: linear-gradient(to bottom, #e5f0e2, white);
+}
+
+#best-above {
+  padding-left: 85px;
 }

src/styles/slide.css

@@ -6,7 +6,6 @@
 .swiper {
   width: 100%;
   height: 100%;
-  margin: 0 20px;
 }
 
 /* 슬라이드 안 */