Merge pull request #249 from urinaner/refactor/247

[FE] 교수소개, 논문, 게시글 디자인 수정
urinaner · Jan 9, 2025 · 064f126 · 064f126
2 parents 0d8df52 + 35dbe6e
commit 064f126
Show file tree

Hide file tree

Showing 11 changed files with 302 additions and 128 deletions.
diff --git 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
@@ -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/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
@@ -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
@@ -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;

diff --git 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
@@ -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;

diff --git 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>(