From 73c228e73d8a11f5678bb3d11d45695f86e05514 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=99=8D=EC=84=9C=ED=98=84?= <ghdtjgus76@naver.com>
Date: Wed, 11 Sep 2024 00:00:11 +0900
Subject: [PATCH] =?UTF-8?q?[Chore]=20=ED=81=B4=EB=9D=BC=EC=9D=B4=EC=96=B8?=
 =?UTF-8?q?=ED=8A=B8=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EB=AA=A8=EB=B0=94?=
 =?UTF-8?q?=EC=9D=BC=20=EC=A0=91=EC=86=8D=20=ED=99=94=EB=A9=B4=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20=EC=97=90=EB=9F=AC=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=A1=9C=EA=B3=A0=20=EB=A6=AC=EB=8B=A4=EC=9D=B4?=
 =?UTF-8?q?=EB=A0=89=ED=8A=B8=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?(#149)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: 에러, not-found 페이지 로고 클릭 시 랜딩 페이지로 가도록 처리 추가

* design: 로그인 모바일 화면 수정

* design: check 아이콘 색 변경

* feat: ui css 변경사항 반영
---
 apps/client/app/(beforeLogin)/auth/page.tsx   | 38 +++++++++++++++----
 apps/client/public/images/check-blue.svg      |  3 ++
 .../images/{check.svg => check-gray.svg}      |  0
 packages/ui/src/components/Header/index.tsx   |  6 ++-
 packages/ui/src/styles.css                    |  6 +--
 5 files changed, 40 insertions(+), 13 deletions(-)
 create mode 100644 apps/client/public/images/check-blue.svg
 rename apps/client/public/images/{check.svg => check-gray.svg} (100%)

diff --git a/apps/client/app/(beforeLogin)/auth/page.tsx b/apps/client/app/(beforeLogin)/auth/page.tsx
index 05efe166..856aceaf 100644
--- a/apps/client/app/(beforeLogin)/auth/page.tsx
+++ b/apps/client/app/(beforeLogin)/auth/page.tsx
@@ -17,27 +17,35 @@ const AuthPage = async () => {
           <Image
             alt="check-icon"
             height={20}
-            src="/images/check.svg"
+            src="/images/check-gray.svg"
             width={20}
           />
           <Text as="p" color="sub" typo="body1">
             와우클래스는 GDSC Hongik 정회원만 이용 가능해요.
           </Text>
         </div>
-        <div
-          className={descriptionTextContainerStyle}
-          style={{ marginBottom: "48px" }}
-        >
+        <div className={descriptionTextContainerStyle}>
           <Image
             alt="check-icon"
             height={20}
-            src="/images/check.svg"
+            src="/images/check-gray.svg"
             width={20}
           />
           <Text as="p" color="sub" typo="body1">
             GDSC Hongik 가입을 위해선 GitHub 계정이 필요해요.
           </Text>
         </div>
+        <div className={mobileDescriptionTextContainerStyle}>
+          <Image
+            alt="check-icon"
+            height={20}
+            src="/images/check-blue.svg"
+            width={20}
+          />
+          <Text as="p" color="primary" typo="body1">
+            PC에 최적화되어 있어요. PC로 이용해주세요.
+          </Text>
+        </div>
         <Button
           aria-label="github 로그인"
           asProp={Link}
@@ -48,7 +56,7 @@ const AuthPage = async () => {
           GitHub 로그인
         </Button>
       </section>
-      <section className={imageContainerStyle}>
+      <section className={rightColStyle}>
         <Image
           fill
           alt="auth-background-image"
@@ -78,6 +86,9 @@ const mainContentStyle = css({
   height: "100vh",
   alignItems: "center",
   justifyContent: "center",
+  "@media (max-width: 599px)": {
+    gridTemplateColumns: "1fr 0",
+  },
 });
 
 const leftColStyle = css({
@@ -95,9 +106,19 @@ const descriptionTextContainerStyle = css({
   marginBottom: "4px",
   display: "flex",
   gap: "10px",
+  stroke: "primary",
+});
+
+const mobileDescriptionTextContainerStyle = css({
+  display: "none",
+  marginBottom: "4px",
+  "@media (max-width: 599px)": {
+    display: "flex",
+    gap: "10px",
+  },
 });
 
-const imageContainerStyle = css({
+const rightColStyle = css({
   position: "relative",
   width: "100%",
   height: "100%",
@@ -112,4 +133,5 @@ const authImageStyle = css({
 const githubLoginButtonStyle = {
   backgroundColor: `${color.github}`,
   maxWidth: "328px",
+  marginTop: "40px",
 };
diff --git a/apps/client/public/images/check-blue.svg b/apps/client/public/images/check-blue.svg
new file mode 100644
index 00000000..5d6c8e0b
--- /dev/null
+++ b/apps/client/public/images/check-blue.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
+<path d="M16.5 6L8.5 13L4.5 9.5" stroke="#368FF7" stroke-width="1.4" stroke-linejoin="bevel"/>
+</svg>
\ No newline at end of file
diff --git a/apps/client/public/images/check.svg b/apps/client/public/images/check-gray.svg
similarity index 100%
rename from apps/client/public/images/check.svg
rename to apps/client/public/images/check-gray.svg
diff --git a/packages/ui/src/components/Header/index.tsx b/packages/ui/src/components/Header/index.tsx
index 042b029b..c753da6f 100644
--- a/packages/ui/src/components/Header/index.tsx
+++ b/packages/ui/src/components/Header/index.tsx
@@ -1,5 +1,6 @@
 import { css } from "@styled-system/css";
 import Image from "next/image";
+import Link from "next/link";
 
 import logoImageUrl from "../../assets/images/logo.svg";
 
@@ -10,7 +11,7 @@ import logoImageUrl from "../../assets/images/logo.svg";
 const Header = () => {
   return (
     <header className={headerContainerStyle} role="banner">
-      <div className={logoContainerStyle}>
+      <Link className={logoContainerStyle} href="/landing">
         <Image
           alt="gdsc logo"
           className={imageStyle}
@@ -24,7 +25,7 @@ const Header = () => {
         <div aria-level={2} className={subTitleStyle} role="heading">
           Hongik Univ.
         </div>
-      </div>
+      </Link>
     </header>
   );
 };
@@ -48,6 +49,7 @@ const logoContainerStyle = css({
   width: "956px",
   paddingX: "16px",
   alignItems: "center",
+  cursor: "pointer",
 });
 
 const imageStyle = css({
diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css
index 8a3a60aa..c9711fe5 100644
--- a/packages/ui/src/styles.css
+++ b/packages/ui/src/styles.css
@@ -367,6 +367,9 @@ progress {
 .px_16px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   padding-inline: 16px;
 }
+.cursor_pointer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  cursor: pointer;
+}
 .w_49px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   width: 49px;
 }
@@ -409,9 +412,6 @@ progress {
 .pos_absolute:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   position: absolute;
 }
-.cursor_pointer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  cursor: pointer;
-}
 .li-s_none:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   list-style: none;
 }