Add Guide Anchor

themoment-team · Oct 10, 2023 · 097e0fa · 097e0fa
1 parent b306491
commit 097e0fa
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/packages/hello-gsm/src/PageContainer/MainPage/index.tsx b/packages/hello-gsm/src/PageContainer/MainPage/index.tsx
@@ -20,6 +20,7 @@ import {
 } from 'shared/Date/firstScreening';
 import { formatDate } from 'Utils/Format';
 import { ApplicationDataType, EvaluationStatusType } from 'type/application';
+import Link from 'next/link';
 
 const contentSelects = [
   '원서 작성',
@@ -186,9 +187,9 @@ const MainPage: NextPage<ApplicationDataType> = ({ data }) => {
             </S.TermWrapper>
           </div>
         </div>
-        <BubbleButton link="/절차_가이드.pdf">
+        <S.GuideAnchor href="/절차_가이드.pdf" target="_blank" rel="noreferrer">
           ℹ️ 입학 절차 확인하기
-        </BubbleButton>
+        </S.GuideAnchor>
         <BubbleButton link="/calculator/choose">
           🧾 모의 성적 계산해보기
         </BubbleButton>

diff --git a/packages/hello-gsm/src/PageContainer/MainPage/style.ts b/packages/hello-gsm/src/PageContainer/MainPage/style.ts
@@ -91,6 +91,30 @@ export const TermWrapper = styled.ul`
   padding-left: 0.8125rem;
 `;
 
+export const GuideAnchor = styled.a`
+  ${({ theme }) => theme.typo.h4}
+  position: absolute;
+  right: 10%;
+  padding: 1rem 1.5rem;
+  text-align: center;
+  background-color: #f3f3f3;
+  border-radius: 0.75rem;
+  cursor: pointer;
+  border: none;
+  color: ${({ theme }) => theme.color.black};
+  font-weight: 600;
+  top: 35rem;
+
+  &:hover {
+    background: rgba(243, 243, 243, 0.52);
+    transition: 0.3s;
+  }
+
+  @media ${device.mobile} {
+    display: none;
+  }
+`;
+
 export const ApplyTerm = styled.li`
   ${({ theme }) => theme.typo.h3}
   font-weight: 400;

diff --git a/packages/hello-gsm/src/components/BubbleButton/style.ts b/packages/hello-gsm/src/components/BubbleButton/style.ts
@@ -15,12 +15,9 @@ export const ToCalculator = styled.button`
   font-weight: 600;
 
   &:nth-of-type(1) {
-    top: 35rem;
-  }
-  &:nth-of-type(2) {
     top: 40rem;
   }
-  &:nth-of-type(3) {
+  &:nth-of-type(2) {
     top: 45rem;
   }