#08 페이지 레이아웃 설정

src/App.jsx

@@ -10,17 +10,17 @@ function App() {
     return (
         <BrowserRouter>
             <Routes>
-                <Route path="/" element={<Layout/>}>
+                <Route path="/" element={<Layout />}>
                     <Route path="ingredient">
-                        <Route index element={<Ingredient/>}/>
+                        <Route index element={<Ingredient />} />
                         {/* <Route path=':ingredientMyRefrigeratorPk' element={<UsersIngredientItem/>} /> */}
                     </Route>
                     <Route path="recipe" >
                         <Route index element={<Recipe/>} />
                         <Route path='create' element={<AddRecipe/>} />
                         <Route path=':recipePk' element={<RecipeDetail/>}/>
                     </Route>
-                    <Route path="join" element={<Join/>} />
+                    <Route path="join" element={<Join />} />
                 </Route>
 
             </Routes>

src/assets/css/Ingredient/ingredient/Ingredient.module.css

@@ -2,7 +2,7 @@
 .mainLayout {
   display: flex;
   min-height: 100vh;
-  background-color: #f0fff0;
+  background-color: #ffffff;
 }
 
 .searchSection {

src/assets/css/Ingredient/ingredient/SearchIngredient.module.css

@@ -2,6 +2,8 @@
 .searchContainer {
   padding: 1rem;
   width: 100%;
+  border: 1px solid #e0e0e0;
+  border-radius: 5px;
 }
 
 .searchSection {

src/assets/css/Ingredient/ingredient/SearchIngredientList.module.css

@@ -81,35 +81,39 @@
 
 /* 카드 관련 스타일 */
 .cardContainer {
+  background-color: white;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
   padding: 10px;
-  display: flex; /* 왼쪽 이미지, 오른쪽 텍스트 영역으로 나누기 */
+  display: flex; /* 수평 배치 */
   gap: 10px;
+  width: 100%; /* 전체 너비 사용 */
+  height: 120px; /* 카드 높이 고정 */
 }
 
 .ingredientCard {
-  background: white;
-  width: 150px; /* 이미지 영역 너비 고정 */
-  height: 100px;
   position: relative;
-  border: 1px solid #e0e0e0;
+  width: 150px; /* 이미지 영역 너비 고정 */
+  height: 90px;
   border-radius: 4px;
+  overflow: hidden;
+  flex-shrink: 0; /* 이미지 영역 크기 고정 */
 }
 
-.whitespace {
+.ingredientImage {
   width: 100%;
   height: 100%;
-  background: white;
+  object-fit: cover;
+  border-radius: 4px;
 }
 
 .statusDot {
   position: absolute;
-  left: -6px;
-  bottom: -6px; /* 위치를 하단으로 변경 */
+  left: 1px;
+  bottom: 2px;
   width: 24px;
   height: 24px;
-  background-color: #4caf50;
+  background-color: rgba(139, 226, 38, 0.912);
   border-radius: 50%;
   border: none;
   color: white;
@@ -120,16 +124,21 @@
   cursor: pointer;
   padding: 0;
   line-height: 1;
-  z-index: 1; /* 버튼이 다른 요소 위에 올라오도록 */
+  z-index: 1;
+  transition: background-color 0.3s ease;
+}
+
+.statusDot:hover {
+  background-color: rgba(112, 182, 30, 0.912);
+  color: white;
 }
 
 .textContent {
-  flex: 1; /* 남은 공간 모두 차지 */
+  flex: 1;
   display: flex;
-  flex-direction: column; /* 세로로 배치 */
-  justify-content: flex-start;
-  padding: 5px 0;
-  gap: 5px; /* 재료명과 카테고리 사이 간격 */
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
 }
 
 .ingredientName {
@@ -145,9 +154,10 @@
 
 .ingredientsGrid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr); /* 고정적으로 2개의 컬럼 */
+  grid-template-columns: repeat(2, 1fr);
   gap: 1rem;
   padding: 1rem;
+  min-height: 600px;
 }
 
 /* 반응형 미디어 쿼리 */
@@ -194,3 +204,71 @@
     transform: rotate(360deg);
   }
 }
+/* 페이지네이션 컨테이너 */
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  margin: 2rem 0;
+  padding: 0 1rem;
+}
+
+/* 페이지 버튼 기본 스타일 */
+.pageButton {
+  min-width: 36px;
+  height: 36px;
+  border: 1px solid #e0e0e0;
+  background-color: white;
+  border-radius: 6px;
+  color: #666;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 호버 효과 */
+.pageButton:hover {
+  background-color: #f5f5f5;
+  border-color: #d0d0d0;
+  color: #333;
+}
+
+/* 활성화된 페이지 버튼 */
+.activePage {
+  background-color: #4caf50;
+  border-color: #4caf50;
+  color: white;
+  font-weight: 500;
+}
+
+/* 활성화된 버튼 호버 효과 */
+.activePage:hover {
+  background-color: #45a049;
+  border-color: #45a049;
+  color: white;
+}
+
+/* 비활성화된 버튼 (선택사항) */
+.pageButton:disabled {
+  background-color: #f5f5f5;
+  border-color: #e0e0e0;
+  color: #bdbdbd;
+  cursor: not-allowed;
+}
+
+/* 반응형 조정 */
+@media (max-width: 768px) {
+  .pagination {
+    gap: 4px;
+  }
+
+  .pageButton {
+    min-width: 32px;
+    height: 32px;
+    font-size: 13px;
+  }
+}

src/assets/css/Ingredient/userIngredient/UsersIngredient.module.css

@@ -1,82 +1,65 @@
+/* UserIngredient.module.css */
 .container {
   padding: 1rem;
-  background-color: #f0fff0; /* 연한 녹색 배경 */
   text-align: center;
+  border: 1px solid #e0e0e0;
+  border-radius: 5px;
 }
 
 .cardContainer {
   display: grid;
-  grid-template-columns: repeat(3, 1fr); /* 기본적으로 3개 열 */
-  gap: 1rem; /* 카드 간 간격 */
-  justify-content: flex-start; /* 카드들을 왼쪽 정렬 */
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  justify-content: flex-start;
+  margin-bottom: 2rem;
 }
 
 /* 대형 화면 (1200px 이상) */
 @media (max-width: 1200px) {
   .cardContainer {
-    grid-template-columns: repeat(3, 1fr); /* 3개 열 유지 */
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 
 /* 중간 화면 (992px ~ 1200px) */
 @media (max-width: 992px) {
   .cardContainer {
-    grid-template-columns: repeat(2, 1fr); /* 2개 열로 변경 */
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
 /* 작은 화면 (768px ~ 992px) */
 @media (max-width: 768px) {
   .cardContainer {
-    grid-template-columns: repeat(2, 1fr); /* 2개 열 유지 */
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
 /* 모바일 화면 (768px 미만) */
 @media (max-width: 576px) {
   .cardContainer {
-    grid-template-columns: 1fr; /* 1개 열로 변경 */
+    grid-template-columns: 1fr;
   }
 }
 
 .header {
   display: flex;
-  flex-direction: column; /* 수직으로 배치 */
-  align-items: center; /* 수평 가운데 정렬 */
-  justify-content: center; /* 수직 가운데 정렬 */
-  margin-bottom: 1rem; /* 제목과 카드 간격 추가 */
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 2rem;
   padding: 0 1rem;
 }
 
 .header h1 {
   font-size: 1.8rem;
   color: #333;
-  margin: 0 0 0.5rem; /* 아래 간격 추가 */
-}
-
-.filterDropdown {
-  padding: 0.5rem 1rem;
-  font-size: 1rem;
-  border: 1px solid #ddd; /* 드롭다운 테두리 */
-  border-radius: 5px; /* 모서리 둥글게 */
-  cursor: pointer;
-  background-color: #ffffff; /* 드롭다운 배경 */
-  color: #333; /* 텍스트 색상 */
-  transition: border-color 0.3s ease;
-}
-
-.filterDropdown:focus {
-  outline: none;
-  border-color: #28a745; /* 초록색 테두리 */
-}
-
-.filterDropdown:hover {
-  border-color: #28a745; /* 호버 시 테두리 색상 */
+  margin: 0 0 1rem;
 }
 
 .filters {
   display: flex;
-  gap: 1rem; /* 필터 간 간격 */
+  gap: 1rem;
   align-items: center;
 }
 
@@ -91,6 +74,15 @@
   transition: border-color 0.3s ease;
 }
 
+.filterDropdown:focus {
+  outline: none;
+  border-color: #28a745;
+}
+
+.filterDropdown:hover {
+  border-color: #28a745;
+}
+
 .favoriteButton {
   padding: 0.5rem 1rem;
   font-size: 1rem;
@@ -99,16 +91,78 @@
   cursor: pointer;
   background-color: #ffffff;
   color: #333;
-  transition: background-color 0.3s ease, border-color 0.3s ease;
+  transition: all 0.3s ease;
 }
 
 .favoriteButton.active {
-  background-color: #28a745; /* 활성화 상태 */
-  color: white; /* 텍스트 색상 */
+  background-color: #28a745;
+  color: white;
   border-color: #28a745;
 }
 
 .favoriteButton:hover {
-  background-color: #218838; /* Hover 시 어두운 초록색 */
+  background-color: #218838;
   color: white;
 }
+
+/* 페이지네이션 스타일 */
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  margin: 2rem 0;
+  padding: 0 1rem;
+}
+
+.pageButton {
+  min-width: 36px;
+  height: 36px;
+  border: 1px solid #e0e0e0;
+  background-color: white;
+  border-radius: 6px;
+  color: #666;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pageButton:hover:not(:disabled) {
+  background-color: #f5f5f5;
+  border-color: #d0d0d0;
+  color: #333;
+}
+
+.activePage {
+  background-color: #28a745 !important;
+  border-color: #28a745 !important;
+  color: white !important;
+  font-weight: 500;
+}
+
+.activePage:hover {
+  background-color: #218838 !important;
+  border-color: #218838 !important;
+}
+
+.pageButton:disabled {
+  background-color: #f5f5f5;
+  border-color: #e0e0e0;
+  color: #bdbdbd;
+  cursor: not-allowed;
+}
+
+@media (max-width: 768px) {
+  .pagination {
+    gap: 4px;
+  }
+
+  .pageButton {
+    min-width: 32px;
+    height: 32px;
+    font-size: 13px;
+  }
+}