Merge pull request #14 from primus-teoSprint/feat/#10

[#10]로그인 ui 구현
primus-teoSprint · Apr 6, 2024 · a2c1006 · a2c1006
2 parents bae1296 + eb8a38c
commit a2c1006
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 27 deletions.
diff --git a/app/(route)/signin/Signin.module.css b/app/(route)/signin/Signin.module.css
@@ -2,39 +2,84 @@
   background: #6c76f4;
   width: 100%;
   height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .wordwrap {
-  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  margin-top: 140px;
 }
 
-.word {
+.largeword {
   color: #fff;
-  text-align: center;
-  font-size: 36px;
+  font-size: 29px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
 }
 
-.intosignup {
-  width: 360px;
-  height: 60px;
-  border-radius: 7px;
-  background: #fff;
+.smallword {
+  color: #fff;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: normal;
+}
 
-  display: flex;
-  align-items: center;
+.img {
+  width: 370px;
+  height: 370px;
+  margin-top: 10px;
+}
+
+.kakaologin {
+  display: inline-flex;
+  height: 60px;
+  padding: 16.5px 95px 15px 94px;
   justify-content: center;
+  align-items: flex-start;
+  gap: 7px;
+  flex-shrink: 0;
+  margin-top: 10px;
+
+  border-radius: 8px;
+  background: #fee500;
+
+  color: #1a1a1a;
 
-  color: #04030d;
   text-align: center;
-  font-size: 20px;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+
+  cursor: pointer;
+}
+.kakaologin:hover {
+  opacity: 0.7;
+}
+
+.nonmember {
+  width: 160px;
+  height: 55px;
+  flex-shrink: 0;
 
+  color: #fff;
+
+  font-size: 15px;
   font-style: normal;
   font-weight: 600;
-  letter-spacing: 0.1px;
+  line-height: normal;
+  text-align: center;
+
+  margin-top: 10px;
+  cursor: pointer;
+}
+
+.nonmember:hover {
+  opacity: 0.7;
 }
diff --git a/app/(route)/signin/_components/Login.tsx b/app/(route)/signin/_components/Login.tsx
@@ -1,21 +1,46 @@
+'use client'
+
 import rocketLogo from '../../../_assets/_images/rocketLogo.png'
 import Image from 'next/image'
+import styles from '../Signin.module.css'
+import { RiKakaoTalkFill } from 'react-icons/ri'
+import { useRouter } from 'next/navigation'
 
 function Login() {
+  const router = useRouter()
+
+  const handleClickNonMember = () => {
+    router.push('/main')
+  }
+
+  const handleClicksignin = () => {
+    router.push('/main')
+  }
+
   return (
-    <div>
-      <p>안녕하세요</p>
-      <p>프리무스입니다</p>
-      <p>서비스 이용을 위해서 로그인 해주세요</p>
-      <Image
-        src={rocketLogo}
-        alt="로켓로고"
-        layout="responsive"
-        width={370}
-        height={370}
-      />
-      <div>카카오로 시작하기</div>
-      <div>비회원으로 둘러보기</div>
+    <div className={styles.background}>
+      <div className={styles.wordwrap}>
+        <p className={styles.largeword}>안녕하세요</p>
+        <p className={styles.largeword}>프리무스입니다</p>
+        <p className={styles.smallword}>서비스 이용을 위해서 로그인 해주세요</p>
+      </div>
+
+      <div className={styles.img}>
+        <Image
+          src={rocketLogo}
+          alt="로켓로고"
+          layout="responsive"
+          width={370}
+          height={370}
+        />
+      </div>
+
+      <div className={styles.kakaologin} onClick={handleClicksignin}>
+        <RiKakaoTalkFill className={styles.icon} /> 카카오로 시작하기
+      </div>
+      <div className={styles.nonmember} onClick={handleClickNonMember}>
+        비회원으로 둘러보기
+      </div>
     </div>
   )
 }