v2.2.2 QA 반영 (#78)

* navigation item list font-size 수정

* Person 컴포넌트 아이콘 모바일 뷰 사이즈 수정

* subtitle text 크기 수정

* size 재조정

* Footer 수정

README.md

@@ -1,3 +1,9 @@
 # Official Website of Depromeet
 
-## 디프만 공식 웹사이트
+## Contributing
+
+디프만 홈페이지와 관련해 제보할 점이 있으신 분들은 [Issues](https://github.com/depromeet/www.depromeet.com/issues) 홈페이지에 새로운 이슈를 등록해주시면 감사하겠습니다.
+
+## Documentation
+
+- [Version History](https://github.com/depromeet/www.depromeet.com/releases)

common/components/Footer/Footer.tsx

@@ -12,7 +12,9 @@ export default function Footer() {
   return (
     <Container>
       <ContentWrapper device={device}>
-        <Logo />
+        <LogoWrapper device={device}>
+          <Logo layout="fill" objectFit="cover" />
+        </LogoWrapper>
 
         <div css={{ display: 'flex' }}>
           {socialMediaList.map(({ href, logo }) => (
@@ -69,10 +71,28 @@ const ContentWrapper = styled.div<{ device: Device }>`
   ${({ device }) =>
     device === 'mobile' &&
     css`
+      width: 95%;
       height: 96px;
     `}
 `;
 
+const LogoWrapper = styled.div<{ device: Device }>`
+  display: flex;
+  justify-content: center;
+
+  svg {
+    width: 100%;
+  }
+
+  ${({ device }) =>
+    device === 'mobile' &&
+    css`
+      svg {
+        width: 80%;
+      }
+    `}
+`;
+
 const Button = styled.a<{ device: Device }>`
   display: flex;
   justify-content: center;

common/components/Header/NavigationItem.tsx

@@ -62,10 +62,10 @@ const itemMobileStyles = css`
   margin-right: 0;
   margin-top: 67px;
 
-  font-size: 40px;
+  font-size: 30px;
   font-weight: bold;
   font-family: Gmarket Sans;
-  line-height: 40px;
+  line-height: 30px;
 
   :hover {
     color: #fff;

common/components/Header/NavigationItemList.tsx

@@ -111,8 +111,6 @@ const GoogleFormRedirectButton = styled.div<{ device: Device }>`
   display: flex;
   justify-content: center;
   align-items: center;
-  font-family: Noto Sans, Gmarket Sans, ---apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 
   margin-left: 7px;
   border-radius: 27px;
@@ -147,6 +145,8 @@ const MobileButtonStyles = css`
 
   color: #0038ff;
   background-color: #fff;
+  font-family: Noto Sans, Gmarket Sans, ---apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 
   :hover {
     background-color: #c0c0c0;

modules/member/Member.tsx

@@ -26,7 +26,9 @@ export default function Member() {
             </Title>
 
             <SubText css={{ marginTop: 20, marginBottom: 127 }} device={device}>
-              디프만은 지속적인 성장의 순환을 추구합니다. 디프만에서 성장을 경험하고 다시 나누고자 하는 사람들이
+              디프만은 지속적인 성장의 순환을 추구합니다.
+              <br />
+              디프만에서 성장을 경험하고 다시 나누고자 하는 사람들이
               <mark> 운영진으로 모여 성장을 순환시킵니다.</mark>
             </SubText>
 
@@ -135,8 +137,8 @@ const SubText = styled.h2<{ device: Device }>`
   ${({ device }) =>
     device === 'mobile' &&
     css`
-      width: 276px;
-      font-size: 14px;
+      font-size: 8px;
+      width: 100%;
     `}
 `;
 

modules/member/components/Person.tsx

@@ -121,10 +121,11 @@ const Backdrop = styled.div<{ device: Device }>`
     device === 'mobile' &&
     css`
       border-radius: 5px;
+      column-gap: 8px;
 
       svg {
-        width: 36px;
-        height: 36px;
+        width: 32px;
+        height: 32px;
       }
     `}
 `;

modules/project/Project.tsx

@@ -52,7 +52,7 @@ const Container = styled.div<{ device: Device }>`
   align-items: center;
 
   background-color: transparent;
-  margin: 240px 0 340px 0;
+  margin: 180px 0 340px 0;
   padding: 0 24px;
 
   ${({ device }) =>
@@ -79,8 +79,8 @@ const Catchphrase = styled.h1<{ device: Device }>`
     device === 'mobile' &&
     css`
       font-weight: 300;
-      font-size: 28px;
-      line-height: 40px;
+      font-size: 18px;
+      line-height: 30px;
       margin-bottom: 48px;
     `}
 `;