Merge pull request #181 from DaleStudy/176-responsive-certificate

수료증 페이지 반응형 적용
DaleStudy · Jan 11, 2025 · 5582f15 · 5582f15
2 parents 25cb191 + 8c78d1a
commit 5582f15
Show file tree

Hide file tree

Showing 5 changed files with 301 additions and 115 deletions.
diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css
@@ -11,7 +11,7 @@
   background-color: var(--bg-200);
   z-index: var(--z-index-header);
 
-  header {
+  & > div {
     display: flex;
     margin: 0 auto;
     justify-content: space-between;

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -2,8 +2,8 @@ import styles from "./Header.module.css";
 
 export default function Header() {
   return (
-    <div className={styles.headerWrapper}>
-      <header>
+    <header className={styles.headerWrapper}>
+      <div>
         <a
           href="http://www.dalestudy.com"
           aria-label="홈페이지로 이동"
@@ -12,7 +12,7 @@ export default function Header() {
           <img src="/logo-icon.svg" alt="로고 아이콘"></img>
           <span>달레 스터디</span>
         </a>
-      </header>
-    </div>
+      </div>
+    </header>
   );
 }
diff --git a/src/pages/Certificate/Certificate.module.css b/src/pages/Certificate/Certificate.module.css
@@ -1,122 +1,307 @@
-.certificate {
-  /* 컴포넌트가 헤더에 가려져서 임의로 지정했으니 컴포넌트 개발자가 설계에 맞게 수정해주시면 됩니다  */
-  margin-top: 100px;
+/* NOTE print 기능은 certificate에서 사용하기에 현재 css파일에서 다룬다 */
+@media print {
+  @page {
+    margin: 0;
+    padding: 0;
+  }
 
-  & > section {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  h1,
+  header,
+  footer {
+    display: none !important;
+  }
 
-    & > div {
-      padding: 16px 0 70px 0;
-      width: 822px;
-      min-width: 822px;
-    }
+  main {
+    margin-top: 0px !important;
+    height: 100%;
   }
 
-  & > div,
-  h1,
-  footer,
-  .buttons {
-    @media print {
-      display: none;
-    }
+  section {
+    margin-top: 0px !important;
+    padding-bottom: 0px !important;
   }
+}
 
-  @media print {
-    margin-top: 200px;
+.certificate {
+  margin-top: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  & > section {
+    width: 100%;
+    max-width: 900px;
+    padding: 0 0 60px;
+
+    @media (max-width: 768px) {
+      padding: 0 32px 40px;
+    }
   }
 }
 
 .content {
-  margin-top: 30px;
+  position: relative;
+  margin-top: 15px;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   height: 575px;
   min-height: 575px;
-  border: 16px solid var(--bg-400);
-  padding: 15px;
-}
+  border: 5px solid var(--bg-400);
 
-.contentSide {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
+  @media (min-width: 768px) {
+    margin-top: 30px;
+    border-width: 16px;
+  }
 
-.reverse {
-  transform: rotate(180deg);
+  @media print {
+    border-width: 16px;
+  }
 }
 
 .description {
-  margin-top: 35px;
+  margin-top: 54px;
   display: flex;
   align-items: center;
   flex-direction: column;
 
   & > h2 {
-    font-size: 20px;
+    font-size: 14px;
     line-height: 15px;
     color: var(--bg-400);
     font-weight: var(--font-weight-bold);
     margin-top: 30px;
   }
 
   & > h3 {
-    font-size: 20px;
+    font-size: 14px;
     line-height: 25px;
     font-weight: var(--font-weight-regular);
     margin-top: 10px;
   }
 
   & > h4 {
-    font-size: 40px;
-    line-height: 50px;
+    font-size: 32px;
+    line-height: 40px;
     font-weight: var(--font-weight-bold);
     color: var(--bg-400);
     margin-top: 35px;
   }
 
   & > p {
     margin: 30px 0 0;
-    font-size: 18px;
+    font-size: 11px;
+    line-height: 18px;
     text-align: center;
     white-space: pre;
   }
 
   & > .signature {
+    width: 88px;
+    height: 25px;
+
     margin-top: 45px;
     padding-bottom: 4px;
     border-bottom: 1px solid var(--bg-400);
   }
 
   & > h5 {
-    font-size: 18px;
+    font-size: 15px;
     color: var(--bg-400);
     line-height: 26px;
   }
 
   & > span {
-    font-size: 14px;
+    font-size: 12px;
     margin-top: 5px;
   }
+
+  @media (min-width: 768px) {
+    & > h2 {
+      font-size: 20px;
+    }
+
+    & > h3 {
+      font-size: 20px;
+      line-height: 18px;
+    }
+
+    & > h4 {
+      font-size: 40px;
+      line-height: 50px;
+    }
+
+    & > p {
+      font-size: 18px;
+    }
+
+    & > .signature {
+      width: 116px;
+      height: 33px;
+    }
+
+    & > h5 {
+      font-size: 18px;
+    }
+
+    & > span {
+      font-size: 14px;
+    }
+  }
+
+  @media print {
+    & > h2 {
+      font-size: 20px;
+    }
+
+    & > h3 {
+      font-size: 20px;
+      line-height: 18px;
+    }
+
+    & > h4 {
+      font-size: 40px;
+      line-height: 50px;
+    }
+
+    & > p {
+      font-size: 18px;
+    }
+
+    & > .signature {
+      width: 116px;
+      height: 33px;
+    }
+
+    & > h5 {
+      font-size: 18px;
+    }
+
+    & > span {
+      font-size: 14px;
+    }
+  }
+}
+
+.cornerAccent {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+
+  @media (min-width: 768px) {
+    width: 84px;
+    height: 84px;
+  }
+
+  @media print {
+    width: 84px;
+    height: 84px;
+  }
+}
+
+.top {
+  top: 6px;
+
+  @media (min-width: 768px) {
+    top: 15px;
+  }
+}
+
+.left {
+  left: 6px;
+
+  @media (min-width: 768px) {
+    left: 15px;
+  }
+}
+
+.right {
+  right: 6px;
+
+  @media (min-width: 768px) {
+    right: 15px;
+  }
+}
+
+.bottom {
+  bottom: 6px;
+
+  @media (min-width: 768px) {
+    bottom: 15px;
+  }
 }
 
 .buttons {
   margin-top: 15px;
+  width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
 
   & a {
-    max-height: 60px;
-    height: 60px;
-    font-size: 20px;
+    flex: 1;
+    max-height: 45px;
+    height: 45px;
+    font-size: 15px;
+  }
+
+  & > a {
+    display: none;
   }
 
   & > div {
+    flex: 1;
     display: flex;
-    column-gap: 15px;
+    column-gap: 10px;
+
+    & > button {
+      max-height: 45px;
+      height: 45px;
+      font-size: 15px;
+    }
+  }
+
+  @media (min-width: 768px) {
+    margin-top: 20px;
+
+    & a {
+      flex: none;
+      max-height: 60px;
+      height: 60px;
+      font-size: 20px;
+    }
+
+    & > a {
+      display: inline-flex;
+    }
+
+    & > div {
+      flex: none;
+      column-gap: 15px;
+
+      & > button {
+        max-height: 60px;
+        height: 60px;
+        font-size: 20px;
+      }
+    }
+  }
+
+  @media print {
+    display: none;
+  }
+}
+
+.mobileButtonWrapper {
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+
+  @media (min-width: 768px) {
+    display: none;
+  }
+
+  @media print {
+    display: none;
   }
 }
 

diff --git a/src/pages/Certificate/Certificate.test.tsx b/src/pages/Certificate/Certificate.test.tsx
@@ -189,10 +189,12 @@ test("render learderboard link", () => {
   location.href = new URL(`?member=test1`, location.href).toString();
   render(<Certificate />);
 
-  const leaderboardLink = screen.getByRole("link", {
+  const linkList = screen.getAllByRole("link", {
     name: "리더보드로 돌아가기",
   });
-  expect(leaderboardLink).toHaveAttribute("href", `/`);
+  expect(linkList).toHaveLength(2);
+  expect(linkList[0]).toHaveAttribute("href", `/`);
+  expect(linkList[1]).toHaveAttribute("href", `/`);
 });
 
 test("render print button", () => {