From fcfd2f4c47386864fa9a18d7a87acf45723c7097 Mon Sep 17 00:00:00 2001
From: YoungWan Kwon <87213416+000wan@users.noreply.github.com>
Date: Thu, 15 Feb 2024 18:57:34 +0900
Subject: [PATCH] Create carousel
---
index.html | 2 +-
src/App.css | 41 +++++--------------------------
src/App.jsx | 38 ++++++++++++++++++++++++++++
src/components/HomePage.css | 34 +++++++++++++++++++++++++
src/components/HomePage.jsx | 49 ++++++++++++++++++++++---------------
5 files changed, 108 insertions(+), 56 deletions(-)
diff --git a/index.html b/index.html
index b43f611..718b927 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
Vite + React
-
+
diff --git a/src/App.css b/src/App.css
index f131ab4..f8be4ec 100644
--- 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
index 83c3fe6..db4a549 100644
--- 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: },
+ { key: "/main", title: "방 목록", icon: },
+ { key: "/chatroomlist", title: "채팅", icon: },
+ { key: "/profile", title: "프로필", icon: },
+ ];
+
+ const location = useLocation();
+ const { pathname } = location;
+ const navigateTo = useNavigate();
+ const setRouteActive = (value) => {
+ navigateTo(value);
+ };
+
+ return (
+ setRouteActive(value)}>
+ {tabs.map((item) => (
+
+ ))}
+
+ );
+};
function App() {
return (
@@ -25,7 +59,11 @@ function App() {
}
/>
+
+
+
+
);
diff --git a/src/components/HomePage.css b/src/components/HomePage.css
index 520559d..3ce54e4 100644
--- 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
index 4c88d77..925d496 100644
--- 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: },
- { key: "list", title: "방 목록", icon: },
- { key: "chat", title: "채팅", icon: },
- { key: "profile", title: "프로필", icon: },
+ 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 = () => {
근처 모임
-
- {/* 추가 모임 아이템 */}
+ {carouselItems.map((item) => (
+
+
+
+
+
{item.name}
+
+ {item.location}
+
+
+
+
+
+
+
-
- {tabs.map((tab) => (
-
- ))}
-
);
};