From be302799adb431832264a5ea339e0a5755f5de4e Mon Sep 17 00:00:00 2001 From: SeonjaeLee Date: Fri, 3 Jan 2025 21:30:38 +0900 Subject: [PATCH 1/5] =?UTF-8?q?style:=20layout=20=EC=99=B8=EB=B6=80?= =?UTF-8?q?=EC=97=90=EC=84=9C=20css=20=EC=A0=91=EA=B7=BC=ED=95=98=EA=B8=B0?= =?UTF-8?q?=20=EC=9C=84=ED=95=B4=20header=20dom=20=EC=9C=84=EC=B9=98=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header/Header.module.css | 2 +- src/components/Header/Header.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css index fe479aa..c8d49e8 100644 --- 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 index 914cb0f..fa41dc4 100644 --- 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 ( -
-
+
+
달레 스터디 -
-
+ + ); } From deceb68789508059dab404b8504f5e0531104401 Mon Sep 17 00:00:00 2001 From: SeonjaeLee Date: Fri, 3 Jan 2025 23:12:31 +0900 Subject: [PATCH 2/5] =?UTF-8?q?style:=20certificate,=20print=20style=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Certificate/Certificate.module.css | 55 +++++---- src/pages/Certificate/Certificate.tsx | 121 +++++++++---------- 2 files changed, 91 insertions(+), 85 deletions(-) diff --git a/src/pages/Certificate/Certificate.module.css b/src/pages/Certificate/Certificate.module.css index 48717f1..82feaa0 100644 --- a/src/pages/Certificate/Certificate.module.css +++ b/src/pages/Certificate/Certificate.module.css @@ -1,30 +1,37 @@ -.certificate { - /* 컴포넌트가 헤더에 가려져서 임의로 지정했으니 컴포넌트 개발자가 설계에 맞게 수정해주시면 됩니다 */ - margin-top: 100px; - - & > section { - display: flex; - align-items: center; - justify-content: center; - - & > div { - padding: 16px 0 70px 0; - width: 822px; - min-width: 822px; - } +/* NOTE print 기능은 certificate에서 사용하기에 현재 css파일에서 다룬다 */ +@media print { + @page { + margin: 0; + padding: 0; } - & > div, h1, - footer, - .buttons { - @media print { - display: none; - } + header, + footer { + display: none !important; } - @media print { - margin-top: 200px; + main { + margin-top: 0px !important; + height: 100%; + } + + section { + margin-top: 0px !important; + padding-bottom: 0px !important; + } +} + +.certificate { + margin-top: 100px; + display: flex; + align-items: center; + justify-content: center; + + & > section { + width: 100%; + max-width: 900px; + padding-bottom: 60px; } } @@ -118,6 +125,10 @@ display: flex; column-gap: 15px; } + + @media print { + display: none !important; + } } .serverErrorWrapper { diff --git a/src/pages/Certificate/Certificate.tsx b/src/pages/Certificate/Certificate.tsx index 543ef95..97698e0 100644 --- a/src/pages/Certificate/Certificate.tsx +++ b/src/pages/Certificate/Certificate.tsx @@ -70,70 +70,65 @@ export default function Certificate() {
-
-

수료증

-
- {/* TODO Icon component 구현시 className에 style값만 추가할 것*/} -
- 좌상단 모서리 테두리 - 좌하단 모서리 테두리 -
- -
- 수료증 로고 -

CERTIFICATE OF ACHIEVEMENT

-

DaleStudy

-

{member.name}

- -

{`For successfully completing ${member.solvedProblems.length === 75 ? "all" : member.solvedProblems.length} problems\nin the LeetCode Blind 75 and contributing\nto knowledge sharing in the ${member.currentCohort}${cohortSuffix?.[member.currentCohort ?? 0] ?? "th"} DaleStudy.`}

- - 서명 -
Dale Seo
- DaleStudy Organizer -
- -
- 우상단 모서리 테두리 - 우하단 모서리 테두리 -
-
- -
- - 리더보드로 돌아가기 - +

수료증

+ +
+ {/* TODO Icon component 구현시 className에 style값만 추가할 것*/} +
+ 좌상단 모서리 테두리 + 좌하단 모서리 테두리 +
+ +
+ 수료증 로고 +

CERTIFICATE OF ACHIEVEMENT

+

DaleStudy

+

{member.name}

+ +

{`For successfully completing ${member.solvedProblems.length === 75 ? "all" : member.solvedProblems.length} problems\nin the LeetCode Blind 75 and contributing\nto knowledge sharing in the ${member.currentCohort}${cohortSuffix?.[member.currentCohort ?? 0] ?? "th"} DaleStudy.`}

+ + 서명 +
Dale Seo
+ DaleStudy Organizer +
+ +
+ 우상단 모서리 테두리 + 우하단 모서리 테두리 +
+
-
- - - - 링크드인 공유 - -
-
-
+
+ + 리더보드로 돌아가기 + + +
+ + + + 링크드인 공유 + +
+
From 91cbcdef794f5de525623884cc38b12a294595c7 Mon Sep 17 00:00:00 2001 From: SeonjaeLee Date: Sat, 4 Jan 2025 01:44:27 +0900 Subject: [PATCH 3/5] =?UTF-8?q?style:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=8C=80=EC=9D=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Certificate/Certificate.module.css | 226 ++++++++++++++++--- src/pages/Certificate/Certificate.tsx | 48 ++-- 2 files changed, 226 insertions(+), 48 deletions(-) diff --git a/src/pages/Certificate/Certificate.module.css b/src/pages/Certificate/Certificate.module.css index 82feaa0..01d4439 100644 --- a/src/pages/Certificate/Certificate.module.css +++ b/src/pages/Certificate/Certificate.module.css @@ -31,38 +31,41 @@ & > section { width: 100%; max-width: 900px; - padding-bottom: 60px; + 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); @@ -70,15 +73,15 @@ } & > 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; @@ -86,48 +89,219 @@ & > 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 !important; + 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.tsx b/src/pages/Certificate/Certificate.tsx index 97698e0..e56ff42 100644 --- a/src/pages/Certificate/Certificate.tsx +++ b/src/pages/Certificate/Certificate.tsx @@ -72,19 +72,13 @@ export default function Certificate() {

수료증

-
- {/* TODO Icon component 구현시 className에 style값만 추가할 것*/} -
- 좌상단 모서리 테두리 - 좌하단 모서리 테두리 -
+
+ + 리더보드로 돌아가기 + +
+
수료증 로고

CERTIFICATE OF ACHIEVEMENT

@@ -98,16 +92,26 @@ export default function Certificate() { DaleStudy Organizer
-
- 우상단 모서리 테두리 - 우하단 모서리 테두리 -
+ 좌상단 모서리 테두리 + 좌하단 모서리 테두리 + 우상단 모서리 테두리 + 우하단 모서리 테두리
From a5f0475ca75f326fa95774052ab7b48f056abb88 Mon Sep 17 00:00:00 2001 From: SeonjaeLee Date: Sat, 4 Jan 2025 02:01:28 +0900 Subject: [PATCH 4/5] =?UTF-8?q?test:=20=EB=B0=98=EC=9D=91=ED=98=95?= =?UTF-8?q?=EB=8C=80=EC=9D=91=EC=9C=BC=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20lin?= =?UTF-8?q?k=20component=20render=20test?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Certificate/Certificate.test.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/Certificate/Certificate.test.tsx b/src/pages/Certificate/Certificate.test.tsx index 298119a..9ce0f14 100644 --- 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(); - 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", () => { From 4e62f5f01835323c315e4e44d2031fa318372c25 Mon Sep 17 00:00:00 2001 From: SeonjaeLee Date: Sat, 11 Jan 2025 23:42:51 +0900 Subject: [PATCH 5/5] =?UTF-8?q?style:=20=EC=84=B8=EB=AF=B8=EC=BD=9C?= =?UTF-8?q?=EB=A1=A0=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Certificate/Certificate.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Certificate/Certificate.tsx b/src/pages/Certificate/Certificate.tsx index e56ff42..cfc4e4d 100644 --- a/src/pages/Certificate/Certificate.tsx +++ b/src/pages/Certificate/Certificate.tsx @@ -33,7 +33,7 @@ export default function Certificate() {

수료증

- ; +