+
+
+
+
+
-
+
-
- {/* TODO: 로그인 상태에 따라 Notification 버튼, 로그인/회원가입 버튼 다르게 보이도록 처리 */}
-
-
-
-
- {/*
*/}
+
+ {/* TODO: 로그인 상태에 따라 Notification 버튼, 로그인/회원가입 버튼 다르게 보이도록 처리 */}
+
+
+
+
+ {/*
*/}
+
+
-
diff --git a/src/components/Pagination/index.tsx b/src/components/Pagination/index.tsx
index be1c934..a339258 100644
--- a/src/components/Pagination/index.tsx
+++ b/src/components/Pagination/index.tsx
@@ -19,17 +19,28 @@ const Pagination = ({
totalPages: number,
maxVisiblePages: number,
): number[] => {
- const startPage = Math.max(
- 1,
- currentPage - Math.floor(maxVisiblePages / 2),
+ if (totalPages <= maxVisiblePages) {
+ return Array.from({ length: totalPages }, (_, i) => i + 1);
+ }
+
+ const currentPageGroup = Math.ceil(currentPage / maxVisiblePages);
+ const groupStartPage = (currentPageGroup - 1) * maxVisiblePages + 1;
+ const groupEndPage = Math.min(
+ currentPageGroup * maxVisiblePages,
+ totalPages,
);
- const endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
- const adjustedStartPage = Math.max(1, endPage - maxVisiblePages + 1);
- return Array.from(
- { length: endPage - adjustedStartPage + 1 },
- (_, i) => adjustedStartPage + i,
+ const visiblePages = Array.from(
+ { length: groupEndPage - groupStartPage + 1 },
+ (_, i) => groupStartPage + i,
);
+
+ if (groupEndPage < totalPages) {
+ if (groupEndPage < totalPages - 1) visiblePages.push(-1);
+ visiblePages.push(totalPages);
+ }
+
+ return visiblePages;
};
const visiblePages = calculateVisiblePages(currentPage, totalPages, 5);
@@ -42,7 +53,7 @@ const Pagination = ({
disabled={isFirstPage}
aria-label='Go to first page'
className={`p-2 rounded ${
- isFirstPage ? 'text-gray-600 cursor-not-allowed' : 'text-gray-300'
+ isFirstPage ? 'text-gray-800 cursor-not-allowed' : 'text-gray-500'
}`}
>
@@ -53,7 +64,7 @@ const Pagination = ({
disabled={isFirstPage}
aria-label='Go to previous page'
className={`p-2 rounded ${
- isFirstPage ? 'text-gray-600 cursor-not-allowed' : 'text-gray-300'
+ isFirstPage ? 'text-gray-800 cursor-not-allowed' : 'text-gray-500'
}`}
>
@@ -61,20 +72,27 @@ const Pagination = ({
- {visiblePages.map((page) => (
-
- ))}
+ {visiblePages.map((page, index) =>
+ page === -1 ? (
+
+
+
+ ) : (
+
+ ),
+ )}
@@ -83,7 +101,7 @@ const Pagination = ({
disabled={isLastPage}
aria-label='Go to next page'
className={`p-2 rounded ${
- isLastPage ? 'text-gray-600 cursor-not-allowed' : 'text-gray-300'
+ isLastPage ? 'text-gray-800 cursor-not-allowed' : 'text-gray-500'
}`}
>
@@ -94,7 +112,7 @@ const Pagination = ({
disabled={isLastPage}
aria-label='Go to last page'
className={`p-2 rounded ${
- isLastPage ? 'text-gray-600 cursor-not-allowed' : 'text-gray-300'
+ isLastPage ? 'text-gray-800 cursor-not-allowed' : 'text-gray-500'
}`}
>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index d29de18..f22feba 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -4,21 +4,21 @@
@layer base {
html {
- font-family: 'PretendardRegular';
+ font-family: 'pretendard';
letter-spacing: -0.02em; /* 자간 -2% */
- line-height: normal; /* 행간 자동 */
+ line-height: 1.6; /* 행간 160% */
}
body {
padding-top: 60px;
}
- p {
- line-height: 1.6; /* 160% */
+ .title-l {
+ font-size: 2.813rem; /* 45px */
}
h1 {
- font-size: 1.75rem; /* 28px */
+ font-size: 2rem; /* 32px */
}
h2 {
@@ -29,51 +29,28 @@
font-size: 1.5rem; /* 24px */
}
- h4 {
+ h4,
+ .button-l {
font-size: 1.375rem; /* 22px */
}
- .title-l {
- font-size: 2.813rem; /* 45px */
- }
-
.subtitle1 {
font-size: 1.25rem; /* 20px */
}
- .subtitle2 {
+ .body1,
+ .subtitle2,
+ .button-m {
font-size: 1.125rem; /* 18px */
}
- .body1 {
- font-size: 1rem; /* 16px */
- }
-
- .body2 {
- font-size: 0.875rem; /* 14px */
- }
-
- .placeholder {
- font-size: 1rem; /* 16px */
- }
-
+ .body2,
+ .placeholder,
.custom-label {
font-size: 1rem; /* 16px */
- font-weight: 500; /* Medium */
- }
-
- .small-chip {
- font-size: 0.875rem; /* 14px */
- }
-
- .button-l {
- font-size: 1.375rem; /* 22px */
- }
-
- .button-m {
- font-size: 1rem; /* 16px */
}
+ .small-chip,
.button-s {
font-size: 0.875rem; /* 14px */
}
@@ -81,30 +58,31 @@
h1,
h2,
h3,
- h4 {
- font-weight: 600; /* Semi-bold */
- line-height: 1.6; /* 160% */
- }
-
- .body1,
- .body2 {
- font-weight: 400; /* Regular */
- }
-
+ h4,
.title-l,
.subtitle1,
.small-chip,
.button-m {
- font-weight: 600;
+ font-weight: 600; /* SemiBold */
}
- .placeholder,
+ .custom-label,
.subtitle2,
+ .placeholder,
.button-l,
.button-s {
font-weight: 500; /* Medium */
}
+ p,
+ span,
+ div,
+ li,
+ .body1,
+ .body2 {
+ font-weight: 400; /* Regular */
+ }
+
svg {
display: inline-block;
vertical-align: middle;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 324239a..c93c7ae 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -39,7 +39,7 @@ export default {
theme: {
extend: {
fontFamily: {
- sans: ['var(--font-geist-sans)'],
+ sans: ['var(--font-montserrat)'],
},
colors,
spacing: {