From 1f909faa96a19809da98790fcb8af68c766b6035 Mon Sep 17 00:00:00 2001 From: yunjaeeun Date: Sun, 22 Dec 2024 01:30:08 +0900 Subject: [PATCH] =?UTF-8?q?=ED=97=A4=EB=8D=94,=20=ED=91=B8=ED=84=B0=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/main.module.css | 15 ++++++ src/assets/css/main/footer.module.css | 75 +++++++++++++++++++++++++++ src/assets/css/main/header.module.css | 44 ++++++++++++++++ src/components/main/Footer.jsx | 39 ++++++++++++-- src/components/main/Header.jsx | 23 ++++++-- src/main.jsx | 5 +- src/pages/layouts/Layout.jsx | 4 +- 7 files changed, 193 insertions(+), 12 deletions(-) create mode 100644 src/assets/css/main/footer.module.css create mode 100644 src/assets/css/main/header.module.css diff --git a/src/assets/css/main.module.css b/src/assets/css/main.module.css index 6da1abc..21aa0a2 100644 --- a/src/assets/css/main.module.css +++ b/src/assets/css/main.module.css @@ -7,4 +7,19 @@ * { font-family: Pretendard-Regular; + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.mainContainer { + display: flex; + flex-direction: column; /* 상하 레이아웃 정렬 */ + min-height: 1200px; /* 화면 전체 높이 */ + background-color: #f9f9f9; +} + +main { + flex: 1; /* 메인 콘텐츠가 남은 공간을 차지 */ + padding: 1rem; } \ No newline at end of file diff --git a/src/assets/css/main/footer.module.css b/src/assets/css/main/footer.module.css new file mode 100644 index 0000000..4da668b --- /dev/null +++ b/src/assets/css/main/footer.module.css @@ -0,0 +1,75 @@ +.footer { + display: flex; + justify-content: space-between; /* 좌우로 영역 나눔 */ + align-items: center; + background-color: #e0f7ff; /* 연한 파란색 배경 */ + color: #333; + padding: 2rem; +} + +.leftSection { + display: flex; + flex-direction: column; + align-items: flex-start; /* 왼쪽 정렬 */ + gap: 1rem; +} + +.logo { + font-size: 2.2rem; + font-weight: bold; + margin: 0; +} + +.logoReci { + color: black; +} + +.logoPick { + color: #007bff; /* 파란색 */ +} + +.socialIcons { + display: flex; + gap: 1rem; +} + +.icon { + font-size: 1.1rem; + text-decoration: none; + color: black; + transition: transform 0.3s ease, color 0.3s ease; +} + +.icon:hover { + transform: scale(1.2); /* 아이콘 확대 */ + color: #007bff; +} + +.rightSection { + display: flex; + gap: 3rem; /* 각 링크 섹션 간 간격 */ + text-align: left; +} + +.linksGroup { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.linksGroup h3 { + font-size: 1.2rem; + font-weight: bold; + margin-bottom: 0.5rem; +} + +.linksGroup a { + text-decoration: none; + color: #333; + font-size: 1rem; + transition: color 0.3s ease; +} + +.linksGroup a:hover { + color: #007bff; +} diff --git a/src/assets/css/main/header.module.css b/src/assets/css/main/header.module.css new file mode 100644 index 0000000..7115f26 --- /dev/null +++ b/src/assets/css/main/header.module.css @@ -0,0 +1,44 @@ +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 2rem; + color: black; + box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); + background-color: white; + margin-bottom: 15px; + position: sticky; /* 스크롤 시 상단 고정 */ + top: 0; + z-index: 1000; /* 다른 요소 위로 */ + padding: 0.8rem 2rem; +} + +.logo h1 { + font-size: 1.8rem; + font-weight: bolder; + margin: 0; +} +.logoReci { + color: black; /* Reci의 기본 색상 */ +} + +.logoPick { + color: #3FA2F6; /* Pick의 초록색 */ + font-weight: 900; /* 강조 */ +} + +.nav { + display: flex; + gap: 1.5rem; +} + +.nav a { + color: black; + text-decoration: none; + font-size: 1rem; + transition: color 0.3s ease; +} + +.nav a:hover { + color: rgb(61, 60, 60); +} diff --git a/src/components/main/Footer.jsx b/src/components/main/Footer.jsx index 8a222d2..a556024 100644 --- a/src/components/main/Footer.jsx +++ b/src/components/main/Footer.jsx @@ -1,7 +1,38 @@ +import React from "react"; +import style from '../../assets/css/main/Footer.module.css'; + function Footer() { - return( -

Footer

- ) + return ( + + ); } -export default Footer \ No newline at end of file +export default Footer; diff --git a/src/components/main/Header.jsx b/src/components/main/Header.jsx index 74f2fb5..3099bd4 100644 --- a/src/components/main/Header.jsx +++ b/src/components/main/Header.jsx @@ -1,7 +1,22 @@ +import React from "react"; +import style from '../../assets/css/main/header.module.css'; + function Header() { - return( -

ReciPick Header

- ) + return ( +
+
+

+ Reci + Pick +

+
+ +
+ ); } -export default Header \ No newline at end of file +export default Header; diff --git a/src/main.jsx b/src/main.jsx index 3e82602..b67a5e1 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,10 +1,11 @@ import { createRoot } from 'react-dom/client' import App from './App.jsx' import './assets/css/main.module.css' +import style from './assets/css/main.module.css' createRoot(document.getElementById('root')).render( - <> +
- +
) diff --git a/src/pages/layouts/Layout.jsx b/src/pages/layouts/Layout.jsx index d80002b..5f3618d 100644 --- a/src/pages/layouts/Layout.jsx +++ b/src/pages/layouts/Layout.jsx @@ -4,11 +4,11 @@ import Footer from '../../components/main/Footer' function Layout() { return( - <> +
) }