Shkim Header

* header Arrow img type added

헤더에 뒤로가기로 사용할 이미지를 추가하였고,
index.d.ts 에 기본적으로 .png 타입이 적용되도록 작성하였으며, tsconfig.json 에 해당 내용이 반영되도록 추가하였습니다.

* header 관련 내용 추가

디자인 변경으로 해당 내용 적용하였습니다.
이제 Header 컴포넌트에 title 이라는 props를 내려주어야합니다.
해당 내용은 정중앙에 위치하도록 설정되었습니다.

* 로그인 css 변경

* Lostinfo에 Header, navigate 내용 추가

* 스타일 수정, 아이디비밀번호 일치 내용 변경

index.d.ts

@@ -1 +1,2 @@
 declare module "*.ttf";
+declare module "*.png"

src/assets/components/header.css

@@ -0,0 +1,27 @@
+.login-header {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  font-size: 18px;
+  font-weight: bold;
+  justify-content: center;
+  color: #121212;
+  vertical-align: middle;
+  line-height: 60px;
+  border-bottom: 1px solid #E9E7E2;
+}
+.go-back-iconimg{
+  width: 20px;
+  height: 100%;
+}
+.go-back-iconimg:hover{
+  cursor: pointer;
+}
+.header-text{
+  flex: 1;
+}
+.header-text > p {
+  width: fit-content;
+  padding: 17px auto 17px 162px;
+  margin: 0 auto;
+}

src/assets/pages/auth/login.css

@@ -1,6 +1,7 @@
 .startGomingText {
   font-size: 20px;
   text-align: center;
+  line-height: 32px;
   margin-top: 60px;
 }
 .inputArea {

src/components/auth/Header.tsx

@@ -1,17 +1,31 @@
-const Header = () => {
+import LeftVector from 'assets/images/Vector.png';
+import 'assets/components/header.css'
+import { useNavigate } from 'react-router-dom';
+/**
+ * @설명 Header 컴포넌트
+ * @작성자 김상훈
+ * @일자 2023.04.04.
+ * @내용 Header Component 
+ * @param {string} title 표시할 텍스트
+ */
+const Header = ({title}: HEADER_INFO) => {
+  const navigate = useNavigate()
+  const goBack = () => {
+    navigate(-1)
+  }
   return (
-    <h1 style={loginHeader}>Goming.</h1>
+    <div className='login-header'>
+      <div className='go-back-iconimg' onClick={goBack}>
+        <img src={LeftVector} alt="뒤로가기" width={7} height={14}  />
+      </div>
+      <div className='header-text'>
+        <p>{title}</p>
+      </div>
+    </div>
   ) 
 }
-
-const loginHeader = {
-  width: '100%',
-  height: '60px',
-  fontSize: '24px',
-  fontWeight: 'bold',
-  color: '#121212',
-  verticalAlign: 'middle',
-  lineHeight: '60px',
-
+type HEADER_INFO = {
+  title: string
 }
+
 export default Header

src/pages/auth/Login.tsx

@@ -20,7 +20,7 @@ const Login:React.FC = () =>{
   const [passwordVerify, setPasswordVerify] = useState<boolean>(false)
   const [rememberEmail, setRememberEmail] = useState<boolean>(true) //id저장여부 확인
   const [emailFormChk, setEmailFormChk] = useState<boolean>(false) //* 이메일 형식체크
-  const [invalid, setInvalid] = useState<boolean>(false) //아이디비밀번호 일치x
+  const [invalid, setInvalid] = useState<boolean>(true) //아이디비밀번호 일치x
 
   useEffect(()=>{
     if (localStorage.getItem('bside-remember-login')) { //로컬스토리지에서 email 가져오기
@@ -102,7 +102,7 @@ const Login:React.FC = () =>{
     <>
       <div className="container">
         <div>
-        <Header />
+        <Header title="로그인" />
         <h1 className='startGomingText text-color'>로그인하고<br />오늘의 Goming을 시작해보세요!</h1>
         <form onSubmit={loginAttempt}>
           <div className='inputArea'>
@@ -111,7 +111,7 @@ const Login:React.FC = () =>{
           </div>
           <div className='checkbox-area'>
             <input type="checkbox" className='save-id-check-box' name="rememberme" id="rememberId" checked={rememberEmail} onChange={handleRememberEmail} />
-            <label htmlFor="rememberId">이메일 주소 기억하기</label>
+            <label htmlFor="rememberId" className='save-id-label'>이메일 주소 기억하기</label>
           </div>
           <div>
             <label htmlFor="password" className='login-label-text'>비밀번호</label>

src/pages/auth/LostInfo.tsx

@@ -2,9 +2,11 @@ import Header from "components/auth/Header"
 import { useState } from "react"
 import 'assets/pages/auth/lostInfo.css'
 import AlertText from "components/AlertText";
+import { useNavigate } from "react-router-dom";
 const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 
 const LostInfo = () => {
+  const navigate = useNavigate();
   const [email, setEmail] = useState<string>('')
   const [emailFormChk, setEmailFormChk] = useState<boolean>(false) //* 이메일 형식체크
   const [emailVerify, setEmailVerify] = useState<boolean>(false)
@@ -23,10 +25,15 @@ const LostInfo = () => {
       setEmailVerify(true)
     }
   }
+
+  // 로그인 페이지로 이동
+  const goToLogin = () => {
+    navigate('/login')
+  }
   return (
     <>
       <div className="container">
-        <Header />
+        <Header title="비밀번호 찾기" />
         <h1 className='startGomingText text-color'>비밀번호 찾기</h1>
         <form onSubmit={submitEmail}>
           <div className='inputArea'>
@@ -35,7 +42,7 @@ const LostInfo = () => {
           </div>
           <div className='login-btn-area'>
             <button type="submit" className='btn reset-password-btn'>비밀번호 초기화하기</button>
-            <button type="submit" className='btn goto-login-btn'>로그인 하러가기</button>
+            <button type="submit" className='btn goto-login-btn' onClick={()=>goToLogin()}>로그인 하러가기</button>
           </div>
           <div>
             <p className="find-id-caption-text">

tsconfig.json

@@ -22,6 +22,7 @@
     "baseUrl": "src",                     //base 경로 src로 설정. @/~ : src/~
   },
   "include": [
-    "src"
+    "src",
+    "index.d.ts"
   ]
 }