Create carousel

SPARCS-Service-Hackathon-2024 · Feb 15, 2024 · fcfd2f4 · fcfd2f4
1 parent 06cdb8c
commit fcfd2f4
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 56 deletions.
diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React</title>
   </head>
-  <body>
+  <body style="margin: 8px 0;">
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>

diff --git a/src/App.css b/src/App.css
@@ -1,41 +1,12 @@
 #root {
-  max-width: 1280px;
+  max-width: 375px;
   margin: 0 auto;
-  text-align: center;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
+.bottom-container {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  border-top: solid 1px var(--adm-color-border);
 }
 
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/src/App.jsx b/src/App.jsx
@@ -7,6 +7,40 @@ import HomePage from "./components/HomePage";
 import MainPage from "./components/MainPage";
 import MapPage from "./components/MapPage";
 import ChatLayout from "./components/ChatLayout";
+import { useNavigate, useLocation } from "react-router-dom";
+import "./App.css";
+
+import { TabBar } from "antd-mobile";
+import {
+  HomeOutlined,
+  UnorderedListOutlined,
+  MessageOutlined,
+  UserOutlined,
+} from "@ant-design/icons";
+
+const Bottom = () => {
+  const tabs = [
+    { key: "/", title: "홈", icon: <HomeOutlined /> },
+    { key: "/main", title: "방 목록", icon: <UnorderedListOutlined /> },
+    { key: "/chatroomlist", title: "채팅", icon: <MessageOutlined /> },
+    { key: "/profile", title: "프로필", icon: <UserOutlined /> },
+  ];
+
+  const location = useLocation();
+  const { pathname } = location;
+  const navigateTo = useNavigate();
+  const setRouteActive = (value) => {
+    navigateTo(value);
+  };
+
+  return (
+    <TabBar activeKey={pathname} onChange={(value) => setRouteActive(value)}>
+      {tabs.map((item) => (
+        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
+      ))}
+    </TabBar>
+  );
+};
 
 function App() {
   return (
@@ -25,7 +59,11 @@ function App() {
               </ChatLayout>
             }
           />
+          <Route path="/profile" />
         </Routes>
+        <div className="bottom-container">
+          <Bottom />
+        </div>
       </Router>
     </ChatRoomsProvider>
   );

diff --git a/src/components/HomePage.css b/src/components/HomePage.css
@@ -22,4 +22,38 @@
 
 .meetup-item {
   text-align: center;
+  width: 300px;
+  height: 400px;
+  background-color: '#364d79';
+}
+
+.item-img {
+  width: 100%;
+  height: 300px;
+  object-fit: cover;
+}
+
+.div-box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+}
+
+.info-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.meetup-name {
+  font-weight: bold;
+  margin-bottom: 5px; /* 이름과 위치 정보 사이의 여백 */
+}
+
+.location-info {
+  color: #666; /* 위치 정보 텍스트 색상 */
+}
+
+.icon-section {
+  /* 채팅 아이콘 스타일링 필요시 추가 */
 }
diff --git a/src/components/HomePage.jsx b/src/components/HomePage.jsx
@@ -5,19 +5,24 @@ import { Carousel } from "antd";
 import {
   EnvironmentOutlined,
   MoreOutlined,
-  HomeOutlined,
-  UnorderedListOutlined,
   MessageOutlined,
-  UserOutlined,
 } from "@ant-design/icons";
 import "./HomePage.css";
 
 const HomePage = () => {
-  const tabs = [
-    { key: "home", title: "홈", icon: <HomeOutlined /> },
-    { key: "list", title: "방 목록", icon: <UnorderedListOutlined /> },
-    { key: "chat", title: "채팅", icon: <MessageOutlined /> },
-    { key: "profile", title: "프로필", icon: <UserOutlined /> },
+  const carouselItems = [
+    {
+      id: 1,
+      image: "https://via.placeholder.com/300",
+      name: "모임 이름",
+      location: "위치 정보",
+    },
+    {
+      id: 2,
+      image: "https://via.placeholder.com/300",
+      name: "모임 이름",
+      location: "위치 정보",
+    },
   ];
 
   return (
@@ -31,20 +36,24 @@ const HomePage = () => {
       <div className="nearby-meetup-section">
         <h2>근처 모임</h2>
         <Carousel autoplay={false} infinite>
-          <div className="meetup-item">
-            <h3>모임 이름</h3>
-            <p>
-              <EnvironmentOutlined /> 위치 정보
-            </p>
-          </div>
-          {/* 추가 모임 아이템 */}
+          {carouselItems.map((item) => (
+            <div className="meetup-item" key={item.id}>
+              <img className="item-img" src={item.image} alt={item.name} />
+              <div className="div-box">
+                <div className="info-section">
+                  <h3 className="meetup-name">{item.name}</h3>
+                  <div className="location-info">
+                    <EnvironmentOutlined /> {item.location}
+                  </div>
+                </div>
+                <div className="icon-section">
+                  <MessageOutlined style={{ fontSize: "24px" }} />
+                </div>
+              </div>
+            </div>
+          ))}
         </Carousel>
       </div>
-      <TabBar>
-        {tabs.map((tab) => (
-          <TabBar.Item key={tab.key} icon={tab.icon} title={tab.title} />
-        ))}
-      </TabBar>
     </div>
   );
 };