[27기] 리디자인 반영안 최종 QA

components/common/AnimatedBox/index.tsx

@@ -83,6 +83,6 @@ const StyledBox = styled.section<{
 
   ${media.mobile} {
     width: auto;
-    height: 175px;
+    height: 120px;
   }
 `;

components/common/Banner/index.tsx

@@ -17,26 +17,48 @@ function Banner({
 }: BannerProps): ReactElement {
   return (
     <StyledBox backgroundImg={backgroundImg} className={className}>
-      <StyledTitle>{title}</StyledTitle>
-      <StyledDescription>{description}</StyledDescription>
+      <InnerTextContainer>
+        <StyledTitle>{title}</StyledTitle>
+        <StyledDescription>{description}</StyledDescription>
+      </InnerTextContainer>
     </StyledBox>
   );
 }
 
 const StyledBox = styled.div<BannerProps>`
   background-repeat: no-repeat;
   background-size: cover;
+  background-position: center;
   background-image: url(${({ backgroundImg }) => backgroundImg});
   background-color: ${({ theme, backgroundImg }) =>
     !backgroundImg && theme.palette.grey_800};
   padding: 146px 0 93px 0;
   width: 100%;
   display: flex;
+  align-items: center;
   flex-direction: column;
   justify-content: center;
   gap: 8px;
 `;
 
+const InnerTextContainer = styled.div`
+  max-width: 1200px;
+  margin: 0 80px;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: flex-start;
+  gap: 8px;
+
+  ${media.tablet} {
+    width: -webkit-fill-available;
+  }
+
+  ${media.mobile} {
+    margin: 0;
+  }
+`;
+
 const slideUp = keyframes`
   0% {
     opacity: 0;
@@ -51,8 +73,9 @@ const slideUp = keyframes`
 const StyledTitle = styled.h1`
   color: ${({ theme }) => theme.palette.white_100};
   ${({ theme }) => theme.textStyleV2.resp.title1_md};
-  margin: 0 80px;
   white-space: nowrap;
+  margin-top: 0;
+  margin-bottom: 0;
 
   animation: ${slideUp} 0.6s ease forwards;
   animation-delay: 0.2s;
@@ -67,8 +90,9 @@ const StyledTitle = styled.h1`
 const StyledDescription = styled.p`
   color: ${({ theme }) => theme.palette.white_50};
   ${({ theme }) => theme.textStyleV2.resp.subtitle_md};
-  margin: 0 80px;
   white-space: nowrap;
+  margin-top: 0;
+  margin-bottom: 0;
 
   animation: ${slideUp} 0.6s ease forwards;
   animation-delay: 0.2s;

components/common/CircusCard/index.tsx

@@ -17,7 +17,7 @@ function CircusCard(
   index: number,
 ) {
   return (
-    <AnimatedBox
+    <CardLayout
       key={index}
       color={color as PaletteKeyTypes}
       fontColor={fontColor as PaletteKeyTypes}
@@ -27,12 +27,18 @@ function CircusCard(
         <CardTitle>{content}</CardTitle>
       </CardInnerBox>
       {icon && <Image src={icon} alt={title} width={70} height={70} />}
-    </AnimatedBox>
+    </CardLayout>
   );
 }
 
 export default CircusCard;
 
+const CardLayout = styled(AnimatedBox)`
+  ${media.mobile} {
+    max-height: 156px;
+  }
+`;
+
 const CardInnerBox = styled.div`
   padding-top: 24px;
   display: flex;

components/common/Footer/index.tsx

@@ -36,6 +36,7 @@ function Footer(): ReactElement {
               </li>
             ))}
           </ul>
+          <Divider className="not-in-mobile" />
           <ul>
             {link2.map(({ name, href }, idx) => (
               <li key={name}>
@@ -94,7 +95,6 @@ const YappInfo = styled.div`
   display: flex;
   align-items: center;
   flex-direction: row;
-  gap: 15px;
 
   & ul {
     display: flex;
@@ -108,6 +108,7 @@ const YappInfo = styled.div`
   }
 
   ${media.mobile} {
+    gap: 15px;
     flex-direction: column;
     align-items: flex-start;
   }
@@ -125,6 +126,12 @@ const Divider = styled.div`
   height: 14px;
   background: ${({ theme }) => theme.palette.black_20};
   margin: 0 13px;
+
+  ${media.mobile} {
+    &.not-in-mobile {
+      display: none;
+    }
+  }
 `;
 
 const Copyright = styled.div`

components/common/Header/index.tsx

@@ -56,6 +56,8 @@ function Header(): ReactElement {
 }
 
 const HeaderBlock = styled.header`
+  display: flex;
+  justify-content: center;
   width: 100%;
   border-bottom: 1px solid ${({ theme }) => theme.palette.black_5};
   background-color: ${({ theme }) => theme.palette.black_10};
@@ -68,7 +70,9 @@ const HeaderBlock = styled.header`
 `;
 
 const HeaderInner = styled.div`
-  height: 70px;
+  width: 100%;
+  max-width: 1200px;
+  height: 60px;
   padding: 0 80px;
   display: flex;
   justify-content: space-between;
@@ -86,9 +90,10 @@ const Logo = styled(YappLogo)`
 
 const HeaderMenu = styled.div`
   width: 470px;
+  gap: 56px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
   ${media.mobile} {
     display: none;
   }

components/common/JoinSection/index.tsx

@@ -3,51 +3,54 @@ import styled from 'styled-components';
 import media from 'styles/media';
 import SectionTemplate from '../../home/SectionTemplate';
 import SectionTitle from '../SectionTitle';
-import { useRouter } from 'next/router';
 import Button from '../Button';
 import Yapp from 'constants/yapp';
 
 interface JoinSectionProps {
   title?: string;
   subTitle?: string;
   btnText?: string;
+  caution?: string;
   url?: string;
 }
 
 function JoinSection({
   title,
   subTitle,
   btnText,
+  caution,
   url,
 }: JoinSectionProps): ReactElement {
-  const router = useRouter();
-
   return (
     <JoinSectionContainer>
-      <ImageContainer>
-        <InnerContainer>
-          <SectionTitle
-            title={title || 'FIND YOUR BALANCE'}
-            subTitle={
-              subTitle || `지원하기 버튼 하나로\nYAPP 27기의 야뿌가 되어보세요.`
-            }
-            align="center"
-          />
-          <Button
-            type="button"
-            variant="primary"
-            onClick={() => {
-              if (!url) {
-                window.open(Yapp.YAPP_RECRUIT_ALL, '_blank');
-              } else {
-                window.open(url, '_blank');
+      <SectionInner>
+        <ImageContainer>
+          <InnerContainer>
+            <SectionTitle
+              title={title || 'FIND YOUR BALANCE'}
+              subTitle={
+                subTitle ||
+                `지원하기 버튼 하나로\nYAPP 27기의 야뿌가 되어보세요.`
               }
-            }}
-          >
-            {btnText || '27기 지원하기'}
-          </Button>
-        </InnerContainer>
-      </ImageContainer>
+              caution={caution}
+              align="center"
+            />
+            <Button
+              type="button"
+              variant="primary"
+              onClick={() => {
+                if (!url) {
+                  window.open(Yapp.YAPP_RECRUIT_ALL, '_blank');
+                } else {
+                  window.open(url, '_blank');
+                }
+              }}
+            >
+              {btnText || '27기 지원하기'}
+            </Button>
+          </InnerContainer>
+        </ImageContainer>
+      </SectionInner>
     </JoinSectionContainer>
   );
 }
@@ -62,6 +65,11 @@ const JoinSectionContainer = styled(SectionTemplate)`
   }
 `;
 
+const SectionInner = styled.div`
+  max-width: 1200px;
+  width: 100%;
+`;
+
 const ImageContainer = styled.div`
   position: relative;
   width: 100%;

components/common/NewsCard/index.tsx

@@ -42,7 +42,6 @@ const StyledNewsCard = styled.div<{
   min-width: 330px;
   min-height: 480px;
   border-radius: 25px;
-  margin: 15px;
   background-color: ${({ theme, color }) => theme.palette[color]};
   color: ${({ theme, fontColor }) => theme.palette[fontColor]};
   cursor: pointer;

components/common/ProjectCard/index.tsx

@@ -54,6 +54,7 @@ const StyledProjectCard = styled.div<{ isSubCard?: boolean }>`
   overflow: hidden;
   will-change: transform;
   animation: ${fadeIn} 0.5s ease-in-out;
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
 
   ${({ isSubCard }) =>
     isSubCard

components/common/SectionTitle/index.tsx

@@ -9,7 +9,8 @@ interface SectionTitleProps {
   subFontColor?: PaletteKeyTypes;
   title?: string;
   subTitle?: string;
-  align?: 'left' | 'center' | 'right';
+  caution?: string;
+  align?: 'flex-start' | 'center' | 'right';
 }
 
 function SectionTitle({
@@ -18,23 +19,31 @@ function SectionTitle({
   subFontColor = 'white_50',
   title = '',
   subTitle = '',
-  align = 'left',
+  align = 'flex-start',
+  caution,
 }: SectionTitleProps): ReactElement {
   return (
     <TitleBox align={align}>
       <StyledTitle className={className} fontColor={fontColor}>
         {title}
       </StyledTitle>
       <StyledSubTitle subFontColor={subFontColor}>{subTitle}</StyledSubTitle>
+      {caution && (
+        <CautionText subFontColor={subFontColor}>{caution}</CautionText>
+      )}
     </TitleBox>
   );
 }
 
-const TitleBox = styled.div<{ align: 'left' | 'center' | 'right' }>`
+const TitleBox = styled.div<{ align: 'flex-start' | 'center' | 'right' }>`
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: ${({ align }) => align};
+
+  ${media.mobile} {
+    margin: 0 12px;
+  }
 `;
 
 const StyledSubTitle = styled.span<{ subFontColor: PaletteKeyTypes }>`
@@ -52,12 +61,26 @@ const StyledSubTitle = styled.span<{ subFontColor: PaletteKeyTypes }>`
 const StyledTitle = styled.span<{ fontColor: PaletteKeyTypes }>`
   color: ${({ theme, fontColor }) => theme.palette[fontColor]};
   ${({ theme }) => theme.textStyleV2.resp.title1_md};
-  white-space: nowrap;
+  white-space: pre-line;
 
   ${media.mobile} {
+    width: max-content;
     ${({ theme }) => theme.textStyleV2.resp.title1_sm};
     white-space: break-spaces;
   }
 `;
 
+const CautionText = styled.span<{ subFontColor: PaletteKeyTypes }>`
+  color: ${({ theme, subFontColor }) => theme.palette[subFontColor]};
+  ${({ theme }) => theme.textStyleV2.resp.caption_md};
+  margin-top: 6px;
+  white-space: pre-line;
+
+  ${media.mobile} {
+    width: max-content;
+    ${({ theme }) => theme.textStyleV2.resp.caption_sm};
+    white-space: break-spaces;
+  }
+`;
+
 export default SectionTitle;