Merge pull request #307 from themoment-team/feature/guide

[Client] Add Guide
themoment-team · Oct 10, 2023 · 53ebc5a · 53ebc5a · vercel · Oct 10, 2023
2 parents 80e56ad + 097e0fa
commit 53ebc5a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 0 deletions.
diff --git a/packages/hello-gsm/public/절차_가이드.pdf b/packages/hello-gsm/public/절차_가이드.pdf
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,6 +187,9 @@ const MainPage: NextPage<ApplicationDataType> = ({ data }) => {
             </S.TermWrapper>
           </div>
         </div>
+        <S.GuideAnchor href="/절차_가이드.pdf" target="_blank" rel="noreferrer">
+          ℹ️ 입학 절차 확인하기
+        </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;