[Chore] 클라이언트 로그인 모바일 접속 화면 수정 및 에러 페이지 로고 리다이렉트 기능 추가 (#149)

* chore: 에러, not-found 페이지 로고 클릭 시 랜딩 페이지로 가도록 처리 추가 * design: 로그인 모바일 화면 수정 * design: check 아이콘 색 변경 * feat: ui css 변경사항 반영
GDSC-Hongik · Sep 10, 2024 · 3296897 · 3296897
1 parent e8c61d4
commit 3296897
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 13 deletions.
diff --git 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
diff --git a/apps/client/public/images/check.svg → apps/client/public/images/check-gray.svg b/apps/client/public/images/check.svg → 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
@@ -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
@@ -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;
 }