Rename:Section7 수정

KERT-core · Oct 8, 2024 · c3c81a1 · c3c81a1
1 parent b9d25d4
commit c3c81a1
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
     "prettier": "^3.3.3",
-    "vite": "^5.3.4",
+    "vite": "^5.4.8",
     "vite-plugin-svgr": "^4.2.0"
   },
   "optionalDependencies": {

diff --git a/src/pages/Section6.jsx b/src/pages/Section6.jsx
@@ -94,9 +94,7 @@ const StyledLink = styled(Link)`
 export default function Section6() {
   return (
     <SectionWrapper>
-      {/* Scale 100% Fixed */}
       <Graph />
-      {/* Center Fixed */}
       <Content>
         <LeftContent>
           <Title>

diff --git a/src/pages/Section7.jsx b/src/pages/Section7.jsx
@@ -5,7 +5,6 @@ import PR_director from "../assets/PR_director.png"; // 홍보부장 이미지
 import study_director from "../assets/study_director.png"; // 학술부장 이미지
 import technic_director from "../assets/technic_director.png"; // 기술부장 이미지
 import affairs_manger from "../assets/affairs_manger.png"; // 총무부장 이미지
-import '../font/main_font.css';
 import styled from 'styled-components';
 import { Text, Span } from '../components/typograph/Text';
 import { useNavigate } from 'react-router-dom';
@@ -21,8 +20,19 @@ const BackFirstStyle = styled.div`
   background-position: center center;
   background-image: url(${bg_img});
   background-size: cover;
-  padding-top: 60px;
+  padding-top: 70px;
   padding-left: 60px;
+
+  @media (max-width: 768px) {
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top: 120px; 
+  }
+
+  @media (max-width: 480px) {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
 `;
 
 const Title = styled(Span).attrs({
@@ -32,6 +42,12 @@ const Title = styled(Span).attrs({
     $color: '--primary-text-color',
   })`
     margin-bottom: 20px;
+    margin-Top:50px;
+
+    @media (max-width: 768px) {
+    font-size: 1.5em;
+    margin-top: 20px;
+  }
   `;
 
 const ProfilesWrapper = styled.div`
@@ -40,6 +56,11 @@ const ProfilesWrapper = styled.div`
   align-items: flex-start; 
   width: 65%; 
   gap: 5px;
+
+  @media (max-width: 768px) {
+    width: 100%;
+    gap: 10px;
+  }
 `;
 
 const ProfileContainer = styled.div`
@@ -52,6 +73,11 @@ const ProfileContainer = styled.div`
     align-self: flex-end;
   }
   gap: 15px;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    gap: 10px;
+  }
 `;
 
 const ProfileContainerReverse = styled(ProfileContainer)`
@@ -63,8 +89,25 @@ const ProfileDescription = styled.div`
   flex-direction: column;
   align-items: flex-start;
   gap: 10px;
+
+  @media (max-width: 768px) {
+    align-items: center;
+    text-align: center;
+  }
+`;
+
+const PositionName = styled(Span).attrs({
+  $weight: 'bold',
+})`
+  font-size: clamp(16px, 2vw, 20px);
+  word-break: keep-all;
+  background-image: ${({ colorGradient }) => colorGradient || 'linear-gradient(to right, #FFFFFF, #0047FF)'};
+  -webkit-background-clip: text;
+  color: transparent;
 `;
 
+
+
 const ProfileDescriptionReverse = styled(ProfileDescription)`
   align-items: flex-end;
 `;
@@ -134,6 +177,14 @@ const StyledButton = styled.button`
     transform: scale(0.98);
   }
 
+  @media (max-width: 768px) {
+    margin-top: 30px;
+  }
+
+  @media (max-width: 480px) {
+    padding: 10px 20px;
+    font-size: 14px;
+  }
   
 `;
 
@@ -153,7 +204,7 @@ export default function Section7() {
                     <ProfileDescription>
                         <NameMajorBatchContainer>
                             <PositionNameContainer>
-                                <Text size="m" weight="regular" background-image="linear-gradient(to right, #FFFFFF, #6F8CB8)">회장</Text>
+                                <PositionName colorGradient="linear-gradient(to right, #FFFFFF,#0047FF)">회장</PositionName>
                                 <Text size="xl" weight="bold">박소현</Text>
                             </PositionNameContainer>
                             <BatchMajorContainer>
@@ -172,7 +223,7 @@ export default function Section7() {
                     <ProfileDescriptionReverse>
                         <NameMajorBatchContainer>
                             <PositionNameContainer>
-                                <Text size="m" weight="regular" background="linear-gradient(to right,#FFFFFF,#0047FF)">총무부장</Text>
+                            <PositionName colorGradient="linear-gradient(to right, #FFFFFF,#FA00FF)">총무부장</PositionName>
                                 <Text size="xl" weight="bold">박규연</Text>
                             </PositionNameContainer>
                             <BatchMajorContainer>
@@ -191,7 +242,7 @@ export default function Section7() {
                     <ProfileDescription>
                         <NameMajorBatchContainer>
                             <PositionNameContainer>
-                                <Text size="m" weight="regular" background="linear-gradient(to right,#FFFFFF,#0047FF)">기술부장</Text>
+                            <PositionName colorGradient="linear-gradient(to right, #FFFFFF,#00FF0A)">기술부장</PositionName>
                                 <Text size="xl" weight="bold">시연우</Text>
                             </PositionNameContainer>
                             <BatchMajorContainer>
@@ -208,7 +259,7 @@ export default function Section7() {
                     <ProfileDescriptionReverse>
                         <NameMajorBatchContainer>
                             <PositionNameContainer>
-                                <Text size="m" weight="regular" background="linear-gradient(to right,#FFFFFF,#0047FF)">홍보부장</Text>
+                            <PositionName colorGradient="linear-gradient(to right, #FFFFFF,#FFF500)">홍보부장</PositionName>
                                 <Text size="xl" weight="bold">조은정</Text>
                             </PositionNameContainer>
                             <BatchMajorContainer>
@@ -227,9 +278,7 @@ export default function Section7() {
                     <ProfileDescription>
                         <NameMajorBatchContainer>
                             <PositionNameContainer>
-                            <Text size="m"  weight="regular">
-                                학술부장
-                            </Text>
+                            <PositionName colorGradient="linear-gradient(to right, #FFFFFF,#0094FF)">학술부장</PositionName>
                                 <Text size="xl" weight="bold">김수진</Text>
                             </PositionNameContainer>
                             <BatchMajorContainer>
@@ -245,4 +294,4 @@ export default function Section7() {
             </StyledButton>
         </BackFirstStyle>
     );
-}
+}