헤더, 푸터 수정

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;
 }

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;
+}

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);
+}

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(
-        <h1>Footer</h1>
-    )
+    return (
+        <footer className={style.footer}>
+            <div className={style.leftSection}>
+                <h1 className={style.logo}>
+                    <span className={style.logoReci}>Reci</span>
+                    <span className={style.logoPick}>Pick</span>
+                </h1>
+                <div className={style.socialIcons}>
+                    <a href="#" className={style.icon}>✖</a>
+                    <a href="#" className={style.icon}>📸</a>
+                    <a href="#" className={style.icon}>▶</a>
+                    <a href="#" className={style.icon}>💼</a>
+                </div>
+            </div>
+            <div className={style.rightSection}>
+                <div className={style.linksGroup}>
+                    <h3>Home</h3>
+                    <a href="#">Resource library</a>
+                </div>
+                <div className={style.linksGroup}>
+                    <h3>Fridge</h3>
+                    <a href="#">Ingredient</a>
+                </div>
+                <div className={style.linksGroup}>
+                    <h3>Recipe</h3>
+                    <a href="#">Online whiteboard</a>
+                    <a href="#">Team collaboration</a>
+                </div>
+            </div>
+        </footer>
+    );
 }
 
-export default Footer
+export default Footer;

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(
-        <h1>ReciPick Header</h1>
-    )
+    return (
+        <header className={style.header}>
+            <div className={style.logo}>
+                <h1>
+                    <span className={style.logoReci}>Reci</span>
+                    <span className={style.logoPick}>Pick</span>
+                </h1>
+            </div>
+            <nav className={style.nav}>
+                <a href="/">홈</a>
+                <a href="/ingredient">내 냉장고</a>
+                <a href="/ingredient">즐겨찾기</a>
+            </nav>
+        </header>
+    );
 }
 
-export default Header
+export default Header;

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(
-  <>
+  <div className={style.mainContainer}>
     <App />
-  </>
+  </div>
 )

src/pages/layouts/Layout.jsx

@@ -4,11 +4,11 @@ import Footer from '../../components/main/Footer'
 
 function Layout() {
     return(
-        <>
+        <div  className='mainContainer'>
             <Header/>
             <Outlet/>
             <Footer/>
-        </>
+        </div>
     )
 }