[feat] 공통 Result component의 스타일 수정, main 페이지 적용 (#400)

depromeet · Nov 25, 2024 · 5fb7f93 · 5fb7f93
2 parents 00119bd + 82f72cd
commit 5fb7f93
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 10 deletions.
diff --git a/src/components/Result/Result.tsx b/src/components/Result/Result.tsx
@@ -2,6 +2,7 @@ import Image from 'next/image';
 import { css } from '@emotion/react';
 
 import { useCheckWindowSize } from '~/hooks/useCheckWindowSize';
+import { mediaQuery } from '~/styles/media';
 import { theme } from '~/styles/theme';
 
 import { ResultCardList } from './ResultCardList';
@@ -21,15 +22,24 @@ export const Result = () => {
           {isMobileSize && <br />}
           <span css={emphasis.text}>
             <div css={emphasis.imageWrapper}>
-              <Image
-                src="/images/16th/about/emphasis.png"
-                alt="성장추구형 강조"
-                width={124}
-                height={40}
-              />
+              {isMobileSize ? (
+                <Image
+                  src="/images/16th/about/emphasis.png"
+                  alt="성장추구형 강조"
+                  width={95}
+                  height={33}
+                />
+              ) : (
+                <Image
+                  src="/images/16th/about/emphasis.png"
+                  alt="성장추구형 강조"
+                  width={132}
+                  height={43}
+                />
+              )}
             </div>
           </span>
-          <span css={emphasis.text}>성장추구형</span>
+          <span css={emphasis.growText}>성장추구형</span>
           <span css={emphasis.rightText}>커뮤니티입니다.</span>
         </h1>
       </div>
@@ -55,6 +65,11 @@ const title = {
       line-height: 150%;
       text-align: center;
       height: fit-content;
+
+      ${mediaQuery('mobile')} {
+        ${theme.typosV2.pretendard.semibold18}
+        line-height: 150%;
+      }
     }
   `,
 };
@@ -65,13 +80,31 @@ const emphasis = {
   `,
   rightText: css`
     margin-left: 14px;
+
+    ${mediaQuery('mobile')} {
+      margin-left: 8px;
+    }
   `,
   text: css`
     position: relative;
   `,
+  growText: css`
+    position: relative;
+    ${theme.typosV2.pretendard.semibold26};
+
+    ${mediaQuery('mobile')} {
+      ${theme.typosV2.pretendard.semibold20}
+      line-height: 150%;
+    }
+  `,
   imageWrapper: css`
     position: absolute;
     left: -11px;
-    top: -3px;
+    top: -4px;
+
+    ${mediaQuery('mobile')} {
+      left: -6px;
+      top: -4px;
+    }
   `,
 };
diff --git a/src/features/Main/sections/MainResultSection.tsx b/src/features/Main/sections/MainResultSection.tsx
@@ -1,13 +1,25 @@
+import Link from 'next/link';
 import { css, Theme } from '@emotion/react';
 
+import { Icon } from '~/components/Icon/Icon';
 import { Result } from '~/components/Result';
+import { mediaQuery } from '~/styles/media';
+import { theme } from '~/styles/theme';
 
 export const MainResultSection = () => {
   return (
     <section css={layoutCss}>
-      <Result />
+      <div css={resultWrapper}>
+        <h1 css={titleCss}>생각을 현실로, 열정을 성취로</h1>
+        <Result />
+      </div>
 
-      <button>디프만 소개 보기</button>
+      <Link href={'/about'} css={button.containerCss}>
+        <div css={button.wrapperCss}>
+          디프만 소개 보기
+          <Icon icon={'ic_arrow_white'} size={24} />
+        </div>
+      </Link>
     </section>
   );
 };
@@ -21,3 +33,50 @@ const layoutCss = (theme: Theme) => css`
   align-items: center;
   background-color: ${theme.colors.white};
 `;
+
+const resultWrapper = css`
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  width: 100%;
+  text-align: center;
+`;
+
+const titleCss = css`
+  ${theme.typosV2.pretendard.bold44};
+  line-height: 150%;
+
+  ${mediaQuery('mobile')} {
+    ${theme.typosV2.pretendard.bold28};
+    line-height: 150%;
+  }
+`;
+
+const button = {
+  containerCss: css`
+    padding: 12px 36px;
+    border-radius: 100px;
+    background-color: black;
+  `,
+
+  wrapperCss: css`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    color: white;
+    ${theme.typosV2.pretendard.semibold20};
+    line-height: 150%;
+
+    ${mediaQuery('mobile')} {
+      ${theme.typosV2.pretendard.semibold16};
+      line-height: 150%;
+    }
+  `,
+
+  iconCss: css`
+    width: 24px;
+    height: 24px;
+    background-color: black;
+    border-radius: 400px;
+  `,
+};
diff --git a/src/styles/typo.ts b/src/styles/typo.ts
@@ -155,6 +155,13 @@ export const typosV2 = {
       line-height: ${pxToRem(74)};
       letter-spacing: -0.04em;
     `,
+    bold44: css`
+      font-size: ${pxToRem(44)};
+      font-style: normal;
+      font-weight: 700;
+      line-height: ${pxToRem(53)};
+      letter-spacing: -0.04em;
+    `,
     bold32: css`
       font-size: ${pxToRem(32)};
       font-style: normal;