From 13c69e4caa817b5ac8a8b4d43431c2bb124452f2 Mon Sep 17 00:00:00 2001
From: Yeeun Park <ye6194@naver.com>
Date: Wed, 8 Jan 2025 00:42:08 +0900
Subject: [PATCH 1/4] =?UTF-8?q?#247=20fix:=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=B0=8F=20=ED=8C=A8=ED=82=A4=EC=A7=80=20?=
 =?UTF-8?q?=EC=9E=AC=EC=84=A4=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package.json                                       | 3 ++-
 frontend/src/AppContent.tsx                                 | 5 ++++-
 frontend/src/pages/News/NoticeBoard/hooks/useNoticeBoard.ts | 5 ++++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index f8058af0..c315a7d0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,9 +16,10 @@
     "@types/styled-components": "^5.1.34",
     "axios": "^1.7.7",
     "dompurify": "^3.1.7",
-    "framer-motion": "^11.15.0",
+    "framer-motion": "^11.16.0",
     "lucide-react": "^0.456.0",
     "moment": "^2.30.1",
+    "motion": "^11.16.0",
     "react": "^18.3.1",
     "react-calendar": "^5.1.0",
     "react-dom": "^18.3.1",
diff --git a/frontend/src/AppContent.tsx b/frontend/src/AppContent.tsx
index 36ef8e72..498a0a1f 100644
--- a/frontend/src/AppContent.tsx
+++ b/frontend/src/AppContent.tsx
@@ -201,7 +201,10 @@ function AppContent() {
 
               {/* graduate */}
               <Route path="graduate/overview" element={<GraduateOverview />} />
-              <Route path="graduate/curriculum" element={<GraduateCurriculum />} />
+              <Route
+                path="graduate/curriculum"
+                element={<GraduateCurriculum />}
+              />
 
               {/* about */}
               <Route path="/about" element={<Overview />} />
diff --git a/frontend/src/pages/News/NoticeBoard/hooks/useNoticeBoard.ts b/frontend/src/pages/News/NoticeBoard/hooks/useNoticeBoard.ts
index 7a4feea1..537d09c1 100644
--- a/frontend/src/pages/News/NoticeBoard/hooks/useNoticeBoard.ts
+++ b/frontend/src/pages/News/NoticeBoard/hooks/useNoticeBoard.ts
@@ -60,7 +60,10 @@ export const useNoticeBoard = () => {
 
       if (allowedSortFields.includes(state.filters.sort.field)) {
         params.append('sort', state.filters.sort.field);
-        params.append('sortDirection', state.filters.sort.direction.toUpperCase());
+        params.append(
+          'sortDirection',
+          state.filters.sort.direction.toUpperCase(),
+        );
       }
 
       const response = await axios.get<ApiResponse>(

From fcd9c8b3bf237fea145297a029325600420489ae Mon Sep 17 00:00:00 2001
From: Yeeun Park <ye6194@naver.com>
Date: Wed, 8 Jan 2025 03:43:43 +0900
Subject: [PATCH 2/4] =?UTF-8?q?#247=20style:=20=EA=B5=90=EC=88=98=20?=
 =?UTF-8?q?=EC=86=8C=EA=B0=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/About/Faculty/TabSectionStyle.ts    |   1 +
 .../pages/About/Faculty/tabs/Publications.tsx | 110 +++++++++---------
 .../About/Faculty/tabs/PublicationsStyle.ts   |  33 ++++++
 3 files changed, 90 insertions(+), 54 deletions(-)

diff --git a/frontend/src/pages/About/Faculty/TabSectionStyle.ts b/frontend/src/pages/About/Faculty/TabSectionStyle.ts
index 0b941f2e..b7e5cad1 100644
--- a/frontend/src/pages/About/Faculty/TabSectionStyle.ts
+++ b/frontend/src/pages/About/Faculty/TabSectionStyle.ts
@@ -65,6 +65,7 @@ export const TabButton = styled.button<{ $isActive: boolean }>`
 export const TabContent = styled.div`
   padding: 2rem;
   min-height: 400px;
+  width: fit-content;
 
   ${media.mobile} {
     padding: 1.5rem;
diff --git a/frontend/src/pages/About/Faculty/tabs/Publications.tsx b/frontend/src/pages/About/Faculty/tabs/Publications.tsx
index 91ed8a2d..a7cf9db6 100644
--- a/frontend/src/pages/About/Faculty/tabs/Publications.tsx
+++ b/frontend/src/pages/About/Faculty/tabs/Publications.tsx
@@ -1,12 +1,5 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import {
-  AlertTriangle,
-  Search,
-  Calendar,
-  Book,
-  ExternalLink,
-  FileText,
-} from 'lucide-react';
+import { AlertTriangle, Search, ExternalLink } from 'lucide-react';
 import axios from 'axios';
 import { apiEndpoints } from '../../../../config/apiConfig';
 import * as S from './PublicationsStyle';
@@ -142,7 +135,7 @@ const Publications: React.FC<PublicationsProps> = ({ professorId }) => {
           value={selectedYear}
           onChange={(e) => setSelectedYear(e.target.value)}
         >
-          <option value="all">전체 년도</option>
+          <option value="all">전체 연도</option>
           {years.slice(1).map((year) => (
             <option key={year} value={year}>
               {year}년
@@ -155,51 +148,60 @@ const Publications: React.FC<PublicationsProps> = ({ professorId }) => {
         {filteredTheses.length === 0 ? (
           <S.EmptyMessage>검색 결과가 없습니다.</S.EmptyMessage>
         ) : (
-          filteredTheses.map((thesis, index) => (
-            <S.ThesisCard key={index}>
-              <S.ThesisHeader>
-                <S.Content>{thesis.content}</S.Content>
-                {thesis.link && (
-                  <S.LinkButton
-                    onClick={() =>
-                      window.open(thesis.link, '_blank', 'noopener noreferrer')
-                    }
-                    aria-label="논문 링크 열기"
-                  >
-                    <ExternalLink size={18} />
-                  </S.LinkButton>
-                )}
-              </S.ThesisHeader>
-
-              <S.ThesisInfo>
-                <S.InfoItem>
-                  <Book size={16} />
-                  <span>{thesis.author}</span>
-                </S.InfoItem>
-                <S.InfoItem>
-                  <FileText size={16} />
-                  <span>{thesis.journal}</span>
-                </S.InfoItem>
-                <S.InfoItem>
-                  <Calendar size={16} />
-                  <span>{new Date(thesis.publicationDate).getFullYear()}</span>
-                </S.InfoItem>
-              </S.ThesisInfo>
-
-              {(thesis.publicationCollection ||
-                thesis.publicationIssue ||
-                thesis.publicationPage) && (
-                <S.ThesisDetails>
-                  {`Vol. ${thesis.publicationCollection || '-'}${
-                    thesis.publicationIssue
-                      ? `, No. ${thesis.publicationIssue}`
-                      : ''
-                  }${thesis.publicationPage ? `, pp. ${thesis.publicationPage}` : ''}`}
-                  {thesis.issn && ` (ISSN: ${thesis.issn})`}
-                </S.ThesisDetails>
-              )}
-            </S.ThesisCard>
-          ))
+          <S.Table>
+            <thead>
+              <tr>
+                <S.Th>번호</S.Th>
+                <S.Th>논문 제목</S.Th>
+                <S.Th>저자</S.Th>
+                <S.Th>학술지</S.Th>
+                <S.Th>출판 연도</S.Th>
+                <S.Th>출판 정보</S.Th>
+                <S.Th>바로가기</S.Th>
+              </tr>
+            </thead>
+            <tbody>
+              {filteredTheses.map((thesis, index) => (
+                <tr key={index}>
+                  <S.Td>{index + 1}</S.Td>
+                  <S.Td>{thesis.content}</S.Td>
+                  <S.Td>{thesis.author}</S.Td>
+                  <S.Td>{thesis.journal}</S.Td>
+                  <S.Td>{new Date(thesis.publicationDate).getFullYear()}</S.Td>
+                  <S.Td>
+                    {thesis.publicationCollection ||
+                    thesis.publicationIssue ||
+                    thesis.publicationPage ? (
+                      <span>
+                        {`Vol. ${thesis.publicationCollection || '-'}${
+                          thesis.publicationIssue
+                            ? `, No. ${thesis.publicationIssue}`
+                            : ''
+                        }${thesis.publicationPage ? `, pp. ${thesis.publicationPage}` : ''}`}
+                        {thesis.issn && ` (ISSN: ${thesis.issn})`}
+                      </span>
+                    ) : (
+                      '-'
+                    )}
+                  </S.Td>
+                  <S.Td>
+                    <S.LinkButton
+                      onClick={() =>
+                        window.open(
+                          thesis.link,
+                          '_blank',
+                          'noopener noreferrer',
+                        )
+                      }
+                      aria-label="논문 링크 열기"
+                    >
+                      <ExternalLink size={18} />
+                    </S.LinkButton>
+                  </S.Td>
+                </tr>
+              ))}
+            </tbody>
+          </S.Table>
         )}
       </S.ThesisList>
 
diff --git a/frontend/src/pages/About/Faculty/tabs/PublicationsStyle.ts b/frontend/src/pages/About/Faculty/tabs/PublicationsStyle.ts
index 1a671e48..674d77e2 100644
--- a/frontend/src/pages/About/Faculty/tabs/PublicationsStyle.ts
+++ b/frontend/src/pages/About/Faculty/tabs/PublicationsStyle.ts
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { LoadingWrapper, ErrorMessage } from '../TabSectionStyle';
+import * as token from '../../../../constants/colors';
 
 export { LoadingWrapper, ErrorMessage };
 
@@ -175,6 +176,38 @@ export const EmptyMessage = styled.div`
   border: 1px dashed #e2e8f0;
 `;
 
+export const THead = styled.thead``;
+
+export const Th = styled.th`
+  white-space: nowrap;
+  padding: 1rem 0 2rem 0;
+  border-bottom: 1px solid ${token.SEJONG_COLORS.COOL_GRAY};
+
+  &:nth-child(1) {
+    width: 2rem;
+  }
+  &:nth-child(2) {
+    width: 23.25rem;
+  }
+  &:nth-child(3) {
+    width: 5rem;
+  }
+`;
+
+export const Td = styled.td`
+  word-wrap: break-word;
+  text-align: center;
+  padding: 1.5rem 0.75rem;
+`;
+
+export const Table = styled.table`
+  border-collapse: collapse;
+
+  tr:nth-child(2) {
+    padding-top: 2rem !important;
+  }
+`;
+
 export const Pagination = styled.div`
   display: flex;
   justify-content: center;

From 6d7d54a6ecf45db26da33af5a495947ddb1b1435 Mon Sep 17 00:00:00 2001
From: Yeeun Park <ye6194@naver.com>
Date: Thu, 9 Jan 2025 01:17:27 +0900
Subject: [PATCH 3/4] =?UTF-8?q?#247=20style:=20=EB=85=BC=EB=AC=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=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

---
 frontend/src/pages/News/Thesis/ThesisList.tsx | 100 ++++++++--------
 frontend/src/pages/News/Thesis/ThesisStyle.ts | 112 +++++++++++++++++-
 frontend/src/pages/Seminar/SeminarList.tsx    |   1 +
 3 files changed, 155 insertions(+), 58 deletions(-)

diff --git a/frontend/src/pages/News/Thesis/ThesisList.tsx b/frontend/src/pages/News/Thesis/ThesisList.tsx
index 51a28f91..feaaf69f 100644
--- a/frontend/src/pages/News/Thesis/ThesisList.tsx
+++ b/frontend/src/pages/News/Thesis/ThesisList.tsx
@@ -100,58 +100,54 @@ const ThesisList: React.FC = () => {
         )}
       </S.Header>
 
-      <S.ThesisList>
-        {theses.length > 0 ? (
-          theses.map((thesis) => (
-            <S.ThesisItem key={thesis.id}>
-              <S.ThesisThumbnail>
-                <img
-                  src={thesis.thesisImage || '/paperImage.png'}
-                  alt="논문 썸네일"
-                  onError={(e) => {
-                    const target = e.target as HTMLImageElement;
-                    target.src = '/paperImage.png';
-                  }}
-                />
-              </S.ThesisThumbnail>
-              <S.ThesisContent
-                onClick={() => navigate(`/news/thesis/${thesis.id}`)}
-              >
-                <S.ThesisTitle>{thesis.content}</S.ThesisTitle>
-                <S.ThesisInfo>
-                  <span>저자: {thesis.author}</span>
-                  <span>저널: {thesis.journal}</span>
-                  <span>발행일: {formatDate(thesis.publicationDate)}</span>
-                </S.ThesisInfo>
-                {thesis.publicationCollection && (
-                  <S.PublicationInfo>
-                    {`Vol. ${thesis.publicationCollection}${
-                      thesis.publicationIssue
-                        ? `, No. ${thesis.publicationIssue}`
-                        : ''
-                    }${thesis.publicationPage ? `, pp. ${thesis.publicationPage}` : ''}`}
-                  </S.PublicationInfo>
-                )}
-                {auth?.isAuthenticated && (
-                  <S.ActionButtonGroup>
-                    <S.EditButton
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        navigate(`/news/thesis/edit/${thesis.id}`);
-                      }}
-                    >
-                      <Edit size={16} />
-                      수정
-                    </S.EditButton>
-                  </S.ActionButtonGroup>
-                )}
-              </S.ThesisContent>
-            </S.ThesisItem>
-          ))
-        ) : (
-          <S.EmptyMessage>등록된 논문이 없습니다.</S.EmptyMessage>
-        )}
-      </S.ThesisList>
+      <S.ThesisTable>
+        <thead>
+          <S.Tr>
+            <S.Th>번호</S.Th>
+            <S.Th></S.Th>
+            <S.Th>논문 제목</S.Th>
+            <S.Th>저자</S.Th>
+            <S.Th>저널</S.Th>
+            <S.Th>발행일</S.Th>
+            <S.Th>출판 정보</S.Th>
+          </S.Tr>
+        </thead>
+        <tbody>
+          {theses.length > 0 ? (
+            theses.map((thesis, index) => (
+              <tr key={thesis.id}>
+                <S.Td>{index + 1}</S.Td>
+                <S.Td>
+                  <S.ThesisThumbnail
+                    src={thesis.thesisImage || '/paperImage.png'}
+                    alt="논문 썸네일"
+                    onError={(e) => {
+                      const target = e.target as HTMLImageElement;
+                      target.src = '/paperImage.png';
+                    }}
+                  />
+                </S.Td>
+                <S.TitleTd
+                  onClick={() => navigate(`/news/thesis/${thesis.id}`)}
+                >
+                  {thesis.content}
+                </S.TitleTd>
+                <S.Td style={{ wordWrap: 'break-word' }}>{thesis.author}</S.Td>
+                <S.Td>{thesis.journal}</S.Td>
+                <S.Td>{formatDate(thesis.publicationDate)}</S.Td>
+                <S.Td>
+                  {thesis.publicationCollection &&
+                    `${thesis.publicationCollection}, ${thesis.publicationIssue ? `No. ${thesis.publicationIssue}` : ''} ${thesis.publicationPage ? `pp. ${thesis.publicationPage}` : ''}`}
+                </S.Td>
+              </tr>
+            ))
+          ) : (
+            <tr>
+              <td colSpan={7}>등록된 논문이 없습니다.</td>
+            </tr>
+          )}
+        </tbody>
+      </S.ThesisTable>
 
       {totalPages > 1 && (
         <S.Pagination>
diff --git a/frontend/src/pages/News/Thesis/ThesisStyle.ts b/frontend/src/pages/News/Thesis/ThesisStyle.ts
index 55306393..1516a23c 100644
--- a/frontend/src/pages/News/Thesis/ThesisStyle.ts
+++ b/frontend/src/pages/News/Thesis/ThesisStyle.ts
@@ -1,4 +1,6 @@
 import styled from 'styled-components';
+import * as token from '../../../constants/colors';
+import { SEJONG_COLORS } from '../../../constants/colors';
 
 export const media = {
   mobile: '@media(max-width: 768px)',
@@ -7,10 +9,18 @@ export const media = {
 
 // Container & Layout
 export const Container = styled.div`
+  /* max-width: 1400px;
+  width: 95%;
+  margin: 0 auto;
+  padding: 40px 20px; */
+
   max-width: 1400px;
   width: 95%;
   margin: 0 auto;
-  padding: 40px 20px;
+  padding: 2rem;
+  background-color: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 
   ${media.mobile} {
     width: 100%;
@@ -41,14 +51,19 @@ export const TopSection = styled.div`
 `;
 
 export const Title = styled.h1`
-  font-size: 28px;
+  /* font-size: 28px;
   font-weight: 600;
   color: #1a202c;
   margin-bottom: 8px;
 
   ${media.mobile} {
     font-size: 24px;
-  }
+  } */
+
+  font-size: 2rem;
+  color: ${SEJONG_COLORS.CRIMSON_RED};
+  margin: 0;
+  font-weight: 600;
 `;
 
 export const Description = styled.p`
@@ -198,6 +213,88 @@ export const ThesisList = styled.div`
   gap: 24px;
 `;
 
+export const ThesisTable = styled.table`
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 1rem;
+  background-color: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  table-layout: fixed;
+`;
+
+export const Th = styled.th`
+  padding: 1.25rem 1rem;
+  background-color: ${SEJONG_COLORS.COOL_GRAY}20;
+  color: ${SEJONG_COLORS.GRAY};
+  font-weight: 600;
+  text-align: center;
+  border-bottom: 2px solid ${SEJONG_COLORS.COOL_GRAY};
+  white-space: nowrap;
+
+  &:first-child {
+    border-top-left-radius: 8px;
+    width: 5rem;
+  }
+
+  &:nth-child(2) {
+    width: 7rem;
+  }
+
+  &:nth-child(3) {
+    width: 27rem;
+  }
+
+  &:nth-child(4) {
+    width: 5rem;
+  }
+
+  &:nth-child(5) {
+    width: 10rem;
+  }
+
+  &:nth-child(6) {
+    width: 9rem;
+  }
+
+  &:last-child {
+    border-top-right-radius: 8px;
+    width: 10rem;
+  }
+`;
+
+export const Tr = styled.tr`
+  /* cursor: pointer; */
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    background-color: ${SEJONG_COLORS.COOL_GRAY}10;
+  }
+`;
+
+export const Td = styled.td`
+  padding: 1.25rem 1rem;
+  text-align: center;
+  border-bottom: 1px solid ${SEJONG_COLORS.COOL_GRAY}20;
+  color: ${SEJONG_COLORS.GRAY};
+  word-wrap: break-word;
+`;
+
+export const TitleTd = styled(Td)`
+  text-align: left;
+  font-weight: 500;
+  color: ${SEJONG_COLORS.CRIMSON_RED};
+  word-wrap: break-word;
+
+  &:hover {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    cursor: pointer;
+  }
+`;
+
 export const ThesisItem = styled.div`
   display: flex;
   gap: 24px;
@@ -222,8 +319,8 @@ export const ThesisItem = styled.div`
   }
 `;
 
-export const ThesisThumbnail = styled.div`
-  width: 140px;
+export const ThesisThumbnail = styled.img`
+  /* width: 140px;
   height: 180px;
   background-color: #f7fafc;
   border: 1px solid #e2e8f0;
@@ -247,7 +344,10 @@ export const ThesisThumbnail = styled.div`
   ${media.mobile} {
     width: 100%;
     height: 200px;
-  }
+  } */
+
+  width: 5rem;
+  height: auto;
 `;
 
 export const ThesisContent = styled.div`
diff --git a/frontend/src/pages/Seminar/SeminarList.tsx b/frontend/src/pages/Seminar/SeminarList.tsx
index 56132931..3a33d2be 100644
--- a/frontend/src/pages/Seminar/SeminarList.tsx
+++ b/frontend/src/pages/Seminar/SeminarList.tsx
@@ -278,6 +278,7 @@ const Th = styled.th`
   font-weight: 600;
   text-align: center;
   border-bottom: 2px solid ${SEJONG_COLORS.COOL_GRAY};
+  white-space: nowrap;
 
   &:first-child {
     border-top-left-radius: 8px;

From 35dbe6ec1cecf8375f768d6035c12d92c124ff9d Mon Sep 17 00:00:00 2001
From: Yeeun Park <ye6194@naver.com>
Date: Thu, 9 Jan 2025 05:56:04 +0900
Subject: [PATCH 4/4] =?UTF-8?q?#247=20style:=20=EA=B3=B5=EC=A7=80=EC=82=AC?=
 =?UTF-8?q?=ED=95=AD=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/News/NoticeBoard/NoticeBoard.tsx    |  5 +-
 .../News/NoticeBoard/NoticeBoardStyle.ts      | 55 +++++++++++++++----
 2 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/frontend/src/pages/News/NoticeBoard/NoticeBoard.tsx b/frontend/src/pages/News/NoticeBoard/NoticeBoard.tsx
index defc173a..a4ddf9d9 100644
--- a/frontend/src/pages/News/NoticeBoard/NoticeBoard.tsx
+++ b/frontend/src/pages/News/NoticeBoard/NoticeBoard.tsx
@@ -168,6 +168,7 @@ const NoticeBoard: React.FC = () => {
 
   return (
     <S.Container>
+      <S.Title>공지사항</S.Title>
       <S.HeaderContainer>
         <S.Navigation>
           <S.NavButtonGroup>
@@ -219,7 +220,7 @@ const NoticeBoard: React.FC = () => {
               onClick={() => handleSort('viewCount')}
               isActive={filters.sort.field === 'viewCount'}
               sortDirection={filters.sort.direction}
-              style={{ textAlign: 'right' }}
+              style={{ width: '7rem' }}
             >
               조회수
             </S.SortableTh>
@@ -229,7 +230,7 @@ const NoticeBoard: React.FC = () => {
           {notices.map((notice: NoticeItem) => (
             <S.Tr key={notice.id}>
               <S.Td>{notice.id}</S.Td>
-              <S.Td>
+              <S.Td style={{ textAlign: 'left' }}>
                 <S.TitleLink
                   onClick={() => navigate(`/news/noticeboard/${notice.id}`)}
                 >
diff --git a/frontend/src/pages/News/NoticeBoard/NoticeBoardStyle.ts b/frontend/src/pages/News/NoticeBoard/NoticeBoardStyle.ts
index fbe72ec9..7284241c 100644
--- a/frontend/src/pages/News/NoticeBoard/NoticeBoardStyle.ts
+++ b/frontend/src/pages/News/NoticeBoard/NoticeBoardStyle.ts
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { SEJONG_COLORS } from './../../../constants/colors';
 
 interface StyledButtonProps {
   isActive?: boolean;
@@ -11,7 +12,7 @@ const media = {
 
 // 세종대학교 컬러 상수
 const colors = {
-  primary: '#B71C1C', // 세종대 메인 레드
+  primary: `${SEJONG_COLORS.CRIMSON_RED}`, // 세종대 메인 레드
   primaryDark: '#8B0000', // 더 진한 레드
   primaryLight: '#D32F2F', // 더 밝은 레드
   hover: '#F5F5F5', // 호버시 밝은 회색
@@ -28,6 +29,16 @@ export const Container = styled.div`
   }
 `;
 
+export const Title = styled.h1`
+  margin: 0 0 2.5rem 0;
+  padding-bottom: 1rem;
+  border-bottom: 2px solid ${SEJONG_COLORS.COOL_GRAY};
+
+  font-size: 2rem;
+  color: ${SEJONG_COLORS.CRIMSON_RED};
+  font-weight: 600;
+`;
+
 export const HeaderContainer = styled.div`
   margin-bottom: 30px;
 `;
@@ -115,20 +126,43 @@ export const Table = styled.table`
   font-size: 1rem;
   background-color: #fff;
   text-align: center;
+  table-layout: fixed;
 `;
 
 export const Th = styled.th`
-  padding: 16px 24px;
-  border-top: 1px solid #ddd;
-  border-bottom: 1px solid #ddd;
-  font-weight: 600;
-  color: #333;
-  background-color: #f8f9fa;
-  text-align: center;
-
+  /*
   ${media.mobile} {
     padding: 12px 16px;
     font-size: 0.9rem;
+  } */
+
+  padding: 1.25rem 1rem;
+  background-color: ${SEJONG_COLORS.COOL_GRAY}20;
+  color: ${SEJONG_COLORS.GRAY};
+  font-weight: 600;
+  text-align: center;
+  border-bottom: 2px solid ${SEJONG_COLORS.COOL_GRAY};
+  white-space: nowrap;
+
+  &:first-child {
+    border-top-left-radius: 8px;
+    width: 5rem;
+  }
+  &:nth-child(2) {
+    width: 30rem;
+  }
+  &:nth-child(3) {
+    width: 7rem;
+  }
+  &:nth-child(4) {
+    width: 9rem;
+  }
+  &:nth-child(5) {
+    width: 9rem;
+  }
+  &:last-child {
+    border-top-right-radius: 8px;
+    width: 9rem;
   }
 `;
 
@@ -151,7 +185,6 @@ export const Tr = styled.tr`
 `;
 
 export const ViewCount = styled.td`
-  text-align: right;
   padding: 16px 24px;
   border-bottom: 1px solid #ddd;
 
@@ -165,7 +198,7 @@ export const TitleLink = styled.span`
   cursor: pointer;
   font-weight: 500;
   color: #333;
-  text-align: left;
+  text-align: left !important;
 
   &:hover {
     color: #666;