Merge pull request #59 from KNU-Design-Web/feature/44

Feature/44
KNU-Design-Web · Oct 27, 2024 · 40729d8 · 40729d8
2 parents 2f209ca + f6af393
commit 40729d8
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 34 deletions.
diff --git a/src/assets/img/MainMap.webp b/src/assets/img/MainMap.webp
diff --git a/src/common/components/Footer/Footer.style.ts b/src/common/components/Footer/Footer.style.ts
@@ -40,6 +40,7 @@ export const Item = styled.div`
     display: flex;
     flex-direction: column;
     gap: 6px;
+    width: 100%;
 
     span {
         display: block;

diff --git a/src/common/components/Footer/Footer.tsx b/src/common/components/Footer/Footer.tsx
@@ -1,62 +1,75 @@
 import * as FooterStyles from "./Footer.style";
-import { Text } from "@/common/components/Text/Text";
+import { Text as _Text } from "@/common/components/Text/Text";
+import styled from "@emotion/styled";
 
 export const Footer = () => {
     return (
         <FooterStyles.Wrapper>
             <FooterStyles.Container>
                 <FooterStyles.Item>
-                    <Text size="m" weight={700}>
+                    <Ltext size="m" weight={700}>
                         40th Graduation Exhibition
-                    </Text>
-                    <Text size="m" weight={700}>
+                    </Ltext>
+                    <Ltext size="m" weight={700}>
                         2024 Kyungpook National University
-                    </Text>
-                    <Text size="m" weight={700}>
+                    </Ltext>
+                    <Ltext size="m" weight={700}>
                         합니다. 디자인
-                    </Text>
+                    </Ltext>
                 </FooterStyles.Item>
 
                 <FooterStyles.Item>
-                    <Text size="s" weight={500} color="#909090">
+                    <Stext size="s" weight={500} color="#909090">
                         Instagram @knu_design_
-                    </Text>
-                    <Text size="s" weight={500} color="#909090">
+                    </Stext>
+                    <Stext size="s" weight={500} color="#909090">
                         T. 053-950-5694
-                    </Text>
-                    <Text size="s" weight={500} color="#909090">
+                    </Stext>
+                    <Stext size="s" weight={500} color="#909090">
                         https://vcd.knu.ac.kr
-                    </Text>
+                    </Stext>
                 </FooterStyles.Item>
             </FooterStyles.Container>
 
             <FooterStyles.InfoContainer>
                 <FooterStyles.InfoItem>
-                    <Text size="s" weight={700}>
+                    <Stext size="s" weight={700}>
                         장소
-                    </Text>
-                    <Text size="s" weight={500}>
+                    </Stext>
+                    <Stext size="s" weight={500}>
                         <span>북구 대학로 80 경북대학교</span> <span>대구캠퍼스 스페이스 나인</span>
-                    </Text>
+                    </Stext>
                 </FooterStyles.InfoItem>
                 <FooterStyles.InfoItem>
-                    <Text size="s" weight={700}>
+                    <Stext size="s" weight={700}>
                         일시
-                    </Text>
-                    <Text size="s" weight={500}>
+                    </Stext>
+                    <Stext size="s" weight={500}>
                         <span>2024. 10. 28 MON - </span>
                         <span>2024.11.09 SUN</span>
-                    </Text>
+                    </Stext>
                 </FooterStyles.InfoItem>
                 <FooterStyles.InfoItem>
-                    <Text size="s" weight={700}>
+                    <Stext size="s" weight={700}>
                         오프닝
-                    </Text>
-                    <Text size="s" weight={500}>
+                    </Stext>
+                    <Stext size="s" weight={500}>
                         2024. 10. 31 THU
-                    </Text>
+                    </Stext>
                 </FooterStyles.InfoItem>
             </FooterStyles.InfoContainer>
         </FooterStyles.Wrapper>
     );
 };
+
+const Ltext = styled(_Text)`
+    @media (max-width: 430px) {
+        font-size: 20px;
+    }
+`;
+
+const Stext = styled(_Text)`
+    @media (max-width: 430px) {
+        font-size: 16px;
+    }
+`;
diff --git a/src/common/components/Grid/Grid.style.ts b/src/common/components/Grid/Grid.style.ts
@@ -6,7 +6,6 @@ export const GridContainer = styled.div<{ rows: number; cols: number }>`
     inset: 0;
 
     width: 100%;
-    height: 100%;
 
     display: grid;
     grid-template-rows: repeat(${(props) => props.rows}, 1fr);

diff --git a/src/common/components/Section/SectionRoute.style.ts b/src/common/components/Section/SectionRoute.style.ts
@@ -3,7 +3,6 @@ import styled from "@emotion/styled";
 export const Wrapper = styled.div`
     flex: 1;
     width: 100%;
-
     overflow: hidden;
     white-space: nowrap;
 

diff --git a/src/pages/about/AboutPage.tsx b/src/pages/about/AboutPage.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useRef } from "react";
 
+import map from "@/assets/img/MainMap.webp";
 import manage from "@/assets/img/Manage.webp";
-import map from "@/assets/img/Map.svg";
 import editor from "@/assets/img/editor.webp";
 import gA from "@/assets/img/gA.webp";
 import gB from "@/assets/img/gB.webp";
@@ -65,16 +65,15 @@ export default function AboutPage() {
                 </HeaderContent>
                 <BodyContent>
                     <Section>
-                        <SectionTitle>‘합’니다. 디자인</SectionTitle>
+                        <SectionTitle>‘합’니다 디자인</SectionTitle>
                         <SectionContent>
                             ‘합’은 다양한 의미를 담고 있습니다. 먼저, ‘+’ 기호로 상징되는 ‘합’은 서로 다른 요소들이 모여
                             새로운 형태, 결과를 이루는 것을 나타냅니다. 우리가 정의하는 ‘합’은 개인의 개성과 창의적인
                             아이디어가 모여 하나의 전시회를 완성하는 과정을 뜻합니다. 또한, 기합의 소리인 ‘합’은 졸업
                             전시 참여자들의 사고가 모여 이루는 결단과 의지를 상징합니다.
                             <br />
                             <br />
-                            이러한 의미를 담고 있는 [합니다디자인]의 ‘합’은 단순히 디자인 작업을 ‘하는’ 것에 그치지
-                            않고,
+                            이러한 의미를 담고 있는 [합니다디자인]의 ‘합’은 단순히 디자인 작업을 ‘하는’ 것에 그치지않고,
                             <br />
                             <br />
                             22명의 디자인 전공 학생들이 모여 창출한 시너지를 통해 디자인의 새로운 가능성을 열어가겠다는
@@ -132,7 +131,7 @@ export default function AboutPage() {
                             <InfoSection>
                                 <InfoTitle>예술대학 학과장</InfoTitle>
                                 <InfoContent>조철희</InfoContent>
-                                <InfoDate>2004년 10월</InfoDate>
+                                <InfoDate>2024년 10월</InfoDate>
                             </InfoSection>
                         </SectionContent>
                     </Section>
@@ -236,7 +235,7 @@ export default function AboutPage() {
                             <ChartContent>
                                 <ChartItem>
                                     <ChartTitle>기획팀</ChartTitle>
-                                    <Memebers>구지원 황수정 문예림 정유정 김은정 손희주</Memebers>
+                                    <Memebers>구지원 황수정 문예림 정유정 김정은 손희주</Memebers>
                                 </ChartItem>
                                 <ChartItem>
                                     <ChartTitle>그래픽 A팀</ChartTitle>
@@ -357,7 +356,7 @@ export default function AboutPage() {
                                 </ChartItem>
                                 <ChartItem>
                                     <ChartItemTitle>일시</ChartItemTitle>
-                                    <ChartItemMemebers>2024. 10. 28 MON -2024. 11. 09 SUN</ChartItemMemebers>
+                                    <ChartItemMemebers>2024. 10. 29 THU -2024. 11. 08 SAT</ChartItemMemebers>
                                 </ChartItem>
                                 <ChartItem>
                                     <ChartItemTitle>오프닝</ChartItemTitle>
@@ -618,6 +617,11 @@ const TeamImg = styled.img`
     -khtml-user-drag: none; // 구형 브라우저 지원
     -moz-user-drag: none; // Firefox에서 드래그 방지
     -o-user-drag: none; // Opera에서 드래그 방지
+
+    @media (max-width: 430px) {
+        width: 100%;
+        height: 270px;
+    }
 `;
 
 const TeamInfo = styled.div`