[FE][REAFACTOR] 연구논문, 교수 상세 논문 반응형 로직

frontend/src/components/Footer/FooterStyle.ts

@@ -1,4 +1,3 @@
-// FooterStyle.ts
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 import * as token from '../../constants/colors';

frontend/src/pages/About/Faculty/ProfileSection.tsx

@@ -21,7 +21,6 @@ const ProfileSection = memo(
         setCopyMessage(`${label} 복사되었습니다`);
         setIsCopyModalOpen(true);
 
-        // 2초 후 자동으로 모달 닫기
         setTimeout(() => {
           setIsCopyModalOpen(false);
         }, 2000);
@@ -33,41 +32,56 @@ const ProfileSection = memo(
     };
 
     const handleExternalLink = (url: string) => {
+      if (!url.startsWith('http')) {
+        url = `https://${url}`;
+      }
       window.open(url, '_blank', 'noopener noreferrer');
     };
 
+    const majors = professor.major.split(',').map((major) => major.trim());
+
     return (
       <>
         <S.ProfileContainer>
-          <S.ImageSection>
-            <S.ProfileImage
-              src={professor.profileImage || defaultImage}
-              alt={`${professor.name} 교수`}
-              onError={onImageError}
-              loading="lazy"
-            />
-          </S.ImageSection>
+          <S.ImageWrapper>
+            <S.ImageSection>
+              <S.ProfileImage
+                src={professor.profileImage || defaultImage}
+                alt={`${professor.name} 교수`}
+                onError={onImageError}
+                loading="lazy"
+              />
+            </S.ImageSection>
+          </S.ImageWrapper>
 
           <S.InfoSection>
             <S.InfoGroup>
-              <S.InfoTitle>전공 분야</S.InfoTitle>
+              <S.InfoTitle>
+                <span>전공 분야</span>
+                <S.TagCount>{majors.length}</S.TagCount>
+              </S.InfoTitle>
               <S.MajorTags>
-                {professor.major.split(',').map((major, index) => (
-                  <S.MajorTag key={index}>{major.trim()}</S.MajorTag>
+                {majors.map((major, index) => (
+                  <S.MajorTag key={index}>{major}</S.MajorTag>
                 ))}
               </S.MajorTags>
             </S.InfoGroup>
 
             <S.InfoGroup>
-              <S.InfoTitle>연락처 정보</S.InfoTitle>
+              <S.InfoTitle>
+                <span>연락처 정보</span>
+              </S.InfoTitle>
               <S.ContactList>
                 {professor.email && (
                   <S.ContactItem>
-                    <Mail size={18} />
+                    <S.ContactIcon>
+                      <Mail size={18} />
+                    </S.ContactIcon>
                     <S.ContactText>{professor.email}</S.ContactText>
                     <S.IconButton
                       onClick={() => handleCopy(professor.email, '이메일이')}
                       aria-label="이메일 복사"
+                      title="이메일 복사"
                     >
                       <Copy size={16} />
                     </S.IconButton>
@@ -76,11 +90,14 @@ const ProfileSection = memo(
 
                 {professor.phoneN && (
                   <S.ContactItem>
-                    <Phone size={18} />
+                    <S.ContactIcon>
+                      <Phone size={18} />
+                    </S.ContactIcon>
                     <S.ContactText>{professor.phoneN}</S.ContactText>
                     <S.IconButton
                       onClick={() => handleCopy(professor.phoneN, '전화번호가')}
                       aria-label="전화번호 복사"
+                      title="전화번호 복사"
                     >
                       <Copy size={16} />
                     </S.IconButton>
@@ -89,18 +106,22 @@ const ProfileSection = memo(
 
                 {professor.lab && (
                   <S.ContactItem>
-                    <MapPin size={18} />
+                    <S.ContactIcon>
+                      <MapPin size={18} />
+                    </S.ContactIcon>
                     <S.ContactText>{professor.lab}</S.ContactText>
                   </S.ContactItem>
                 )}
 
                 {professor.homepage && (
                   <S.ContactItem>
-                    <Globe size={18} />
+                    <S.ContactIcon>
+                      <Globe size={18} />
+                    </S.ContactIcon>
                     <S.ContactLink
                       onClick={() => handleExternalLink(professor.homepage)}
                     >
-                      {professor.homepage}
+                      <span>{professor.homepage}</span>
                       <ExternalLink size={14} />
                     </S.ContactLink>
                   </S.ContactItem>
@@ -110,7 +131,6 @@ const ProfileSection = memo(
           </S.InfoSection>
         </S.ProfileContainer>
 
-        {/* 복사 완료 토스트 모달 */}
         <Modal
           isOpen={isCopyModalOpen}
           onClose={() => setIsCopyModalOpen(false)}

frontend/src/pages/About/Faculty/ProfileSectionStyle.ts

@@ -4,6 +4,7 @@ import { SEJONG_COLORS } from '../../../constants/colors';
 export const media = {
   mobile: '@media(max-width: 768px)',
   tablet: '@media(max-width: 1024px)',
+  desktop: '@media(min-width: 1025px)',
 };
 
 export const ProfileContainer = styled.section`
@@ -14,23 +15,43 @@ export const ProfileContainer = styled.section`
   overflow: hidden;
   border: 1px solid ${(props) => props.theme.colors.grey[200]};
   margin-bottom: 2rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+
+  ${media.tablet} {
+    gap: 1.5rem;
+  }
 
   ${media.mobile} {
     flex-direction: column;
     gap: 1rem;
   }
 `;
 
-export const ImageSection = styled.div`
+export const ImageWrapper = styled.div`
   flex-shrink: 0;
+  position: relative;
+
+  ${media.mobile} {
+    width: 100%;
+  }
+`;
+
+export const ImageSection = styled.div`
   width: 300px;
   height: 360px;
   background: ${(props) => props.theme.colors.grey[100]};
   position: relative;
+  overflow: hidden;
+
+  ${media.tablet} {
+    width: 250px;
+    height: 300px;
+  }
 
   ${media.mobile} {
     width: 100%;
-    height: 300px;
+    height: 280px;
+    border-radius: 0;
   }
 `;
 
@@ -44,6 +65,10 @@ export const ProfileImage = styled.img`
   &:hover {
     transform: scale(1.02);
   }
+
+  ${media.mobile} {
+    object-position: top center;
+  }
 `;
 
 export const InfoSection = styled.div`
@@ -53,6 +78,11 @@ export const InfoSection = styled.div`
   flex-direction: column;
   gap: 1.5rem;
   min-width: 0;
+
+  ${media.mobile} {
+    padding: 1rem;
+    gap: 1.25rem;
+  }
 `;
 
 export const InfoGroup = styled.div`
@@ -62,18 +92,39 @@ export const InfoGroup = styled.div`
 `;
 
 export const InfoTitle = styled.h3`
+  font-family: 'Noto Sans KR', sans-serif;
   font-size: 1.1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   font-weight: 600;
   color: ${SEJONG_COLORS.CRIMSON_RED};
   margin: 0;
   padding-bottom: 0.5rem;
   border-bottom: 2px solid ${(props) => props.theme.colors.grey[200]};
+
+  ${media.mobile} {
+    font-size: 1rem;
+  }
+`;
+
+export const TagCount = styled.span`
+  background-color: ${SEJONG_COLORS.CRIMSON_RED}15;
+  color: ${SEJONG_COLORS.CRIMSON_RED};
+  padding: 0.25rem 0.5rem;
+  border-radius: 12px;
+  font-size: 0.8rem;
+  font-weight: 500;
 `;
 
 export const MajorTags = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
+
+  ${media.mobile} {
+    gap: 0.4rem;
+  }
 `;
 
 export const MajorTag = styled.span`
@@ -83,19 +134,28 @@ export const MajorTag = styled.span`
   border-radius: 20px;
   font-size: 0.9rem;
   font-weight: 500;
-  border: 1px solid ${SEJONG_COLORS.CRIMSON_RED};
+  border: 1px solid ${SEJONG_COLORS.CRIMSON_RED}30;
   transition: all 0.2s;
 
   &:hover {
-    background: ${SEJONG_COLORS.CRIMSON_RED};
-    color: white;
+    background: ${SEJONG_COLORS.CRIMSON_RED}10;
+    border-color: ${SEJONG_COLORS.CRIMSON_RED};
+  }
+
+  ${media.mobile} {
+    font-size: 0.85rem;
+    padding: 0.4rem 0.8rem;
   }
 `;
 
 export const ContactList = styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
+
+  ${media.mobile} {
+    gap: 0.6rem;
+  }
 `;
 
 export const ContactItem = styled.div`
@@ -104,13 +164,29 @@ export const ContactItem = styled.div`
   gap: 0.75rem;
   color: ${(props) => props.theme.colors.grey[500]};
   font-size: 0.95rem;
+  padding: 0.5rem;
+  border-radius: 8px;
+  transition: background-color 0.2s ease;
 
-  svg {
-    color: ${SEJONG_COLORS.CRIMSON_RED};
-    flex-shrink: 0;
+  &:hover {
+    background-color: ${(props) => props.theme.colors.grey[50]};
+  }
+
+  ${media.mobile} {
+    font-size: 0.9rem;
+    gap: 0.6rem;
   }
 `;
 
+export const ContactIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${SEJONG_COLORS.CRIMSON_RED};
+  flex-shrink: 0;
+  width: 24px;
+`;
+
 export const ContactText = styled.span`
   flex: 1;
   min-width: 0;
@@ -131,18 +207,31 @@ export const ContactLink = styled.button`
   font-size: 0.95rem;
   cursor: pointer;
   text-align: left;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+
+  span {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  svg {
+    flex-shrink: 0;
+    opacity: 0.7;
+  }
 
   &:hover {
     text-decoration: underline;
     color: ${(props) => props.theme.colors.primary.crimsonDark};
+
+    svg {
+      opacity: 1;
+    }
   }
 
-  svg {
-    flex-shrink: 0;
+  ${media.mobile} {
+    font-size: 0.9rem;
   }
 `;
 
@@ -152,7 +241,7 @@ export const IconButton = styled.button`
   justify-content: center;
   width: 32px;
   height: 32px;
-  border-radius: 50%;
+  border-radius: 8px;
   border: none;
   background: transparent;
   color: ${(props) => props.theme.colors.grey[400]};
@@ -168,6 +257,11 @@ export const IconButton = styled.button`
   &:active {
     background: ${(props) => props.theme.colors.grey[200]};
   }
+
+  ${media.mobile} {
+    width: 28px;
+    height: 28px;
+  }
 `;
 
 export const CopySuccessMessage = styled.div`
@@ -179,4 +273,9 @@ export const CopySuccessMessage = styled.div`
   box-shadow:
     0 4px 6px -1px rgba(163, 20, 50, 0.1),
     0 2px 4px -1px rgba(163, 20, 50, 0.06);
+
+  ${media.mobile} {
+    padding: 0.75rem 1.5rem;
+    font-size: 0.85rem;
+  }
 `;