Merge remote-tracking branch 'origin/feature/#20/senior-to-junior' in…

…to origin/feat/Competition/#23

src/components/common/page/index.style.ts

@@ -0,0 +1,49 @@
+import styled from "styled-components";
+
+export const PaginationWrapper = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 0;
+    list-style-type: none;
+
+    button {
+        padding: 10px;
+        margin: 0 5px;
+        background: none;
+        border: none;
+        cursor: pointer;
+        font-size: 16px;
+        color: #777;
+
+        &:disabled {
+            color: #e0e0e0;
+            cursor: not-allowed;
+        }
+    }
+
+    .page-number {
+        padding: 10px;
+        margin: 0 5px;
+        cursor: pointer;
+        border-radius: 50%;
+        width: 20px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #FFF;
+        font-family: 'Inter', sans-serif;
+        font-size: 16px; 
+        font-style: normal; 
+        font-weight: 700; 
+        line-height: normal; 
+        /* background-color: #555;  */
+        color: #000;
+
+        &.active {
+            background-color: #0D6B23; 
+            color: white;
+        }
+    }
+`;

src/components/common/page/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import * as S from 'src/components/common/page/index.style';
+
+interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    displayTotalPages: number;
+    onNextPage: () => void;
+    onPrevPage: () => void;
+    onPageClick: (page: number) => void;
+}
+
+const Pagination: React.FC<PaginationProps> = ({
+    currentPage,
+    totalPages,
+    displayTotalPages,
+    onNextPage,
+    onPrevPage,
+    onPageClick,
+}) => {
+    return (
+        <S.PaginationWrapper>
+            <button onClick={onPrevPage} disabled={currentPage === 1}>
+                &larr;
+            </button>
+            {[...Array(displayTotalPages)].map((_, index) => (
+                <div
+                    key={index}
+                    className={`page-number ${currentPage === index + 1 ? 'active' : ''}`}
+                    onClick={() => onPageClick(index + 1)}
+                >
+                    {index + 1}
+                </div>
+            ))}
+            <button onClick={onNextPage} disabled={currentPage === displayTotalPages}>
+                &rarr;
+            </button>
+        </S.PaginationWrapper>
+    );
+};
+
+export default Pagination;

src/components/common/sidebar/index.style.ts

@@ -77,8 +77,8 @@ export const MenuItem = styled.div<MenuItemProps>`
 `;
 
 export const MenuIcon = styled.img`
-  width: 14px;
-  height: 14px;
+  width: 24px;
+  height: 24px;
 `;
 
 export const MenuText = styled.span`

src/components/home/markdown/index.tsx

@@ -28,9 +28,7 @@ const MarkdownEditor = () => {
 
     const handleBackArrowClick = () => {
         const path = location.pathname.split('/')[1];
-        if (path === 'portfolio') {
-            navigate('/portfolio');
-        } else if (path === 'seniortojunior') {
+        if (path === 'seniortojunior') {
             navigate('/seniortojunior');
         } else if (path === 'contest') {
             navigate('/contest');
@@ -55,8 +53,6 @@ const MarkdownEditor = () => {
     const getPageTitle = () => {
         const path = location.pathname.split('/')[1];
         switch (path) {
-            case 'portfolio':
-                return '포트폴리오';
             case 'seniortojunior':
                 return '선배가 후배에게';
             case 'contest':
@@ -69,8 +65,6 @@ const MarkdownEditor = () => {
     const getPageIcon = () => {
         const path = location.pathname.split('/')[1];
         switch (path) {
-            case 'portfolio':
-                return Portfolio;
             case 'seniortojunior':
                 return MentoMenti;
             case 'contest':