[27기] 프론트 자체 QA 진행 반영

components/common/AnimatedBox/index.tsx

@@ -64,18 +64,25 @@ function AnimatedBox({
 
 export default AnimatedBox;
 
-const StyledBox = styled(Box)`
+const StyledBox = styled.section<{
+  backgroundColor: PaletteKeyTypes;
+  fontColor: PaletteKeyTypes;
+  borderRadius: number;
+}>`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   padding: 20px 24px;
   width: auto;
+  min-width: 195px;
+  border-radius: ${({ borderRadius }) => borderRadius}px;
   background-color: ${({ theme, backgroundColor }) =>
     backgroundColor && theme.palette[backgroundColor]};
   color: ${({ theme, fontColor }) => fontColor && theme.palette[fontColor]};
 
   ${media.mobile} {
     width: auto;
+    height: 175px;
   }
 `;

components/common/SectionTitle/index.tsx

@@ -41,20 +41,22 @@ const StyledSubTitle = styled.span<{ subFontColor: PaletteKeyTypes }>`
   margin-top: 8px;
   color: ${({ theme, subFontColor }) => theme.palette[subFontColor]};
   ${({ theme }) => theme.textStyleV2.resp.subtitle_md};
-  white-space: pre;
+  white-space: nowrap;
 
   ${media.mobile} {
     ${({ theme }) => theme.textStyleV2.resp.subtitle_sm};
+    white-space: break-spaces;
   }
 `;
 
 const StyledTitle = styled.span<{ fontColor: PaletteKeyTypes }>`
   color: ${({ theme, fontColor }) => theme.palette[fontColor]};
   ${({ theme }) => theme.textStyleV2.resp.title1_md};
-  white-space: pre;
+  white-space: nowrap;
 
   ${media.mobile} {
     ${({ theme }) => theme.textStyleV2.resp.title1_sm};
+    white-space: break-spaces;
   }
 `;
 

components/home/NewsSection/index.tsx

@@ -10,6 +10,7 @@ import { useInView } from 'react-intersection-observer';
 import SectionTitle from 'components/common/SectionTitle';
 import { useRouter } from 'next/router';
 import Path from 'constants/path';
+import { NEWS_SECTION } from 'database/home';
 
 const colors = [
   'circus_red',
@@ -19,6 +20,7 @@ const colors = [
 const fontColors = ['white_100', 'black_100', 'white_100'] as PaletteKeyTypes[];
 
 function MainContainer({ data }: { data: Medium[] }): ReactElement {
+  const { title, subTitle } = NEWS_SECTION;
   const router = useRouter();
   const loopData = [...data, ...data];
   const trackRef = useRef<HTMLDivElement>(null);
@@ -62,8 +64,8 @@ function MainContainer({ data }: { data: Medium[] }): ReactElement {
         <SectionTitle
           fontColor="black_100"
           subFontColor="black_60"
-          title="YAPP 안의 사람들, 그리고 이야기"
-          subTitle="야뿌들의 성장 과정, 활동 후기, 밋업 현장과 다양한 이야기를 담고 있어요."
+          title={title}
+          subTitle={subTitle}
         />
       </PaddingSection>
 

components/home/ProjectSection/index.tsx

@@ -3,13 +3,14 @@ import styled from 'styled-components';
 import Router from 'next/router';
 import { SectionTemplate } from 'components/home';
 import { Button, Carousel } from 'components/common';
-import { CAROUSEL_DATA } from 'database/home';
+import { CAROUSEL_DATA, PROJECT_SECTION } from 'database/home';
 import media from 'styles/media';
 import SectionTitle from 'components/common/SectionTitle';
 import { motion } from 'framer-motion';
 import { useScrollAnimation } from 'hooks/useScrollAnimation';
 
 function ProjectSection(): ReactElement {
+  const { title, subTitle } = PROJECT_SECTION;
   const { ref, controls, containerVariants } = useScrollAnimation({
     containerVariants: {
       hidden: { opacity: 0, y: 40 },
@@ -32,13 +33,13 @@ function ProjectSection(): ReactElement {
         fontColor="black_100"
         subFontColor="black_60"
         align="center"
-        title="YAPP의 서비스들"
-        subTitle="YAPP에서 활동하는 구성원인 ‘야뿌’들이 만들어낸 프로젝트들이에요."
+        title={title}
+        subTitle={subTitle}
       />
       <Carousel data={CAROUSEL_DATA} />
-      <StyledButton variant="black" onClick={() => Router.push('/project')}>
+      <Button variant="black" onClick={() => Router.push('/project')}>
         프로젝트 더보기
-      </StyledButton>
+      </Button>
     </ProjectContainer>
   );
 }
@@ -48,20 +49,6 @@ const ProjectContainer = styled(SectionTemplate)`
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 48px;
-`;
-
-const StyledButton = styled(Button)`
-  transition: background-color 0.5s;
-
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.grey_700};
-  }
-
-  ${media.mobile} {
-    width: 162px;
-    height: 56px;
-  }
 `;
 
 export default ProjectSection;

components/home/SponsorSection/index.tsx

@@ -1,5 +1,5 @@
 import Yapp from 'constants/yapp';
-import { SPONSOR_DATA } from 'database/home';
+import { SPONSOR_DATA, SPONSOR_SECTION } from 'database/home';
 import type { ReactElement } from 'react';
 import styled from 'styled-components';
 import media from 'styles/media';
@@ -11,6 +11,7 @@ import { motion } from 'framer-motion';
 import { useScrollAnimation } from 'hooks/useScrollAnimation';
 
 function SponsorSection(): ReactElement {
+  const { title, subTitle } = SPONSOR_SECTION;
   const { ref, controls, containerVariants, itemVariants } = useScrollAnimation(
     {
       threshold: 0.2,
@@ -31,8 +32,8 @@ function SponsorSection(): ReactElement {
           fontColor="black_100"
           subFontColor="black_60"
           align="left"
-          title="YAPP의 후원사"
-          subTitle="YAPP과 새로운 가치를 만들어갈 후원 및 협업 문의, 언제든 기다리고 있습니다."
+          title={title}
+          subTitle={subTitle}
         />
       </motion.div>
 
@@ -47,8 +48,7 @@ function SponsorSection(): ReactElement {
       <ButtonContainer variants={itemVariants}>
         <Button variant="black">
           <ButtonLinked
-            href={`mailto:${Yapp.YAPP_OFFICIAL_EMAIL}`}
-            rel="noreferrer"
+            href={`https://mail.google.com/mail/?view=cm&fs=1&to=${Yapp.YAPP_OFFICIAL_EMAIL}&su=후원문의&body=안녕하세요, 후원 관련 문의드립니다.`}
             target="_blank"
           >
             후원 문의하기
@@ -113,6 +113,11 @@ const Sponsor = styled.li`
       width: 180px;
       height: 80px;
     }
+
+    ${media.small} {
+      width: 120px;
+      height: 80px;
+    }
   }
 `;
 

components/project/ProjectContent/index.tsx

@@ -153,9 +153,13 @@ const SubTitle = styled.div`
 const BodyText = styled.div`
   display: flex;
   flex: 1;
-  ${({ theme }) => theme.textStyleV2.fix.font_18};
-  color: ${({ theme }) => theme.palette.black_70};
+  ${({ theme }) => theme.textStyleV2.resp.body_point_md};
+  color: ${({ theme }) => theme.palette.black_50};
   flex-wrap: wrap;
+
+  ${media.mobile} {
+    ${({ theme }) => theme.textStyleV2.resp.body_point_sm};
+  }
 `;
 
 const TextItem = styled.div`

components/story/MediumCard/index.tsx

@@ -69,6 +69,14 @@ const ImageContainer = styled.div`
 const MediumInfo = styled.section`
   width: 100%;
   margin: 0;
+
+  ${media.small} {
+    max-width: 260px;
+  }
+
+  ${media.xSmall} {
+    max-width: 230px;
+  }
 `;
 
 const MediumTitle = styled.h3`

database/home.ts

@@ -142,7 +142,22 @@ export const NEWS_DATA = [
 
 export const GRID_SECTION = {
   title: '지금 YAPP은 이렇게 움직여요',
-  subTitle: '실무 기반 협업 시스템으로 운영되는 연합 기업형 IT 동아리',
+  subTitle: `실무 기반 협업 시스템으로 운영되는\n연합 기업형 IT 동아리`,
+};
+
+export const PROJECT_SECTION = {
+  title: 'YAPP의 서비스들',
+  subTitle: `YAPP에서 활동하는 구성원인 ‘야뿌’들이 만들어낸\n프로젝트들이에요.`,
+};
+
+export const NEWS_SECTION = {
+  title: 'YAPP 안의 사람들, 그리고 이야기',
+  subTitle: `야뿌들의 성장 과정, 활동 후기,\n밋업 현장과 다양한 이야기를 담고 있어요.`,
+};
+
+export const SPONSOR_SECTION = {
+  title: 'YAPP의 후원사',
+  subTitle: `YAPP과 새로운 가치를 만들어갈 후원 및 협업 문의,\n언제든 기다리고 있습니다.`,
 };
 
 /** Sponsor 이미지 경로 */

pages/project/index.tsx

@@ -112,13 +112,9 @@ function Project({ projects }: ProjectProps) {
           else return true;
         }).length > viewCardCount && (
           <ButtonWrapper>
-            <StyledButton
-              variant="black"
-              borderRadius={99}
-              onClick={handleMoreButtonClick}
-            >
+            <Button variant="black" onClick={handleMoreButtonClick}>
               프로젝트 더보기
-            </StyledButton>
+            </Button>
           </ButtonWrapper>
         )}
       </ProjectContainer>
@@ -167,6 +163,8 @@ const ProjectGridWrapper = styled.div`
 `;
 
 const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: center;
   text-align: center;
   margin: 56px 0 80px 0;
 `;