diff --git a/keyword/chapter05/keyword.md b/keyword/chapter05/keyword.md
new file mode 100644
index 0000000..113fd13
--- /dev/null
+++ b/keyword/chapter05/keyword.md
@@ -0,0 +1,45 @@
+- useRef 🍠
+    
+    함수형 컴포넌트 내에서 DOM 요소나 다른 React 요소를 참조하기 위해 사용되는 Hook
+    
+    - 기본 형태
+        
+        ```jsx
+        const 변수명 = useRef(초기값);
+        ```
+        
+         결과값으로 초기값 {current : 초기값}을 지닌 객체가 반환
+        
+    - 특징
+        1. 컴포넌트가 계속해서 **렌더링이 되어도** 컴포넌트가 언마운드되기 전까지는 **값을 그대로 유지**
+        2. **currnet 속성은 값을 변경해도** 상태를 변경할 때 처럼 **React 컴포넌트가 재렌더링 되지 않음 → 성능향상**
+    - useRef를 사용하는 경우
+        1. 컴포넌트의 렌더링과 관련이 없는 값들을 저장할 때
+        2. DOM 요소에 대한 참조를 저장할 때
+        3. 렌더링 과정에서 값이 변경되어도 다시 렌더링되지 않아도 되는 경우
+
+- input의 주요 프로퍼티 🍠
+    - 아래 내용 이외에, 자주 사용하는 프로퍼티가 있으면 추가로 더 정리해주세요! 🍠
+        - **pattern**: 특정 정규표현식을 적용하여 입력 값을 검사함
+            
+            ```html
+            
+            <input type="text" pattern="[A-Za-z]{3,}" title="Only letters allowed" />
+            
+            ```
+            
+        - **autofocus**: 페이지 로드 시 해당 입력 필드에 자동으로 포커스를 설정
+            
+            ```html
+            
+            <input type="text" autofocus />
+            
+            ```
+            
+        - **size**: 입력 필드의 너비(글자 수 기준)를 지정
+            
+            ```html
+            
+            <input type="text" size="20" />
+            
+            ```
\ No newline at end of file
diff --git a/keyword/chapter05/loginPage.jsx b/keyword/chapter05/loginPage.jsx
new file mode 100644
index 0000000..4798e1d
--- /dev/null
+++ b/keyword/chapter05/loginPage.jsx
@@ -0,0 +1,33 @@
+import useForm  from "../../../hooks/useForm.js";
+import './loginPage.css';
+import {validateLogin} from "../../../utils/validate";
+
+const LoginPage = ()=>{
+    const login = useForm({
+        initialValue:{
+            email: '',
+            password: '',
+        },
+        validate: validateLogin
+    })
+    return(
+        <div className="login_form_container">
+            <h2>로그인</h2>     
+            <form className="login_form" >
+            <input className = {`${(login.touched.email && login.errors.email) ? 'error' : 'nonerror'}`}
+            type={'email'}{...login.getTextInputProps('email')} placeholder="이메일을 입력해주세요!" />
+            {login.touched.email && login.errors.email && <p style={{color: 'red'}}>{login.errors.email}</p> }
+            <input className = {`${(login.touched.password && login.errors.password) ? 'error' : ''}`}
+            type={'password'}{...login.getTextInputProps('password')} placeholder="비밀번호를 입력해주세요!" />
+            {login.touched.password && login.errors.password && <p style={{color: 'red'}}>{login.errors.password}</p>}
+            {(login.touched.password && !login.errors.password &&login.touched.email && !login.errors.email)
+            ?<input type={'submit'} value="로그인" className="submit" />
+             :<input type={'submit'} value="로그인" className="submit gray" disabled/>}
+            
+            </form>
+        </div>
+        
+    )
+}
+
+export default LoginPage;
\ No newline at end of file
diff --git a/keyword/chapter05/myloginPage.css b/keyword/chapter05/myloginPage.css
new file mode 100644
index 0000000..c69787d
--- /dev/null
+++ b/keyword/chapter05/myloginPage.css
@@ -0,0 +1,22 @@
+.login_form_container{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+.login_form input{
+  height: 50px;
+  width: 350px;
+  border-radius: 8px;
+}
+.login_form p{
+    margin-top: 0px ;
+    font-size: 13px;
+}
+.submit {
+    background-color: #ff007c;
+    color: white;
+    font-weight: 400;
+    font-size: 16px
+}
\ No newline at end of file
diff --git a/keyword/chapter05/myloginPage.jsx b/keyword/chapter05/myloginPage.jsx
new file mode 100644
index 0000000..67a2975
--- /dev/null
+++ b/keyword/chapter05/myloginPage.jsx
@@ -0,0 +1,40 @@
+import { useForm } from "react-hook-form";
+import { useState } from "react";
+import * as yup from 'yup';
+import {yupResolver} from '@hookform/resolvers/yup';
+import './loginPage.css';
+const LoginPage = ()=>{
+    const emailSchema = yup.object().shape({
+        email : yup.string().email('올바른 이메일 형식이 아닙니다 다시 확인해주세요!').required('이메일을 반드시 입력해주세요.'),
+    })
+    const pwdSchema = yup.object().shape({
+        password : yup.string().min(8,'비밀번호는 8자~ 16자 사이로 입력해주세요!',).max(16,'비밀번호는 8자~ 16자 사이로 입력해주세요!').required('비밀번호를 반드시 입력해주세요.'),
+    })
+    const emailForm = useForm({
+        resolver: yupResolver(emailSchema)
+    })
+    const pwdForm = useForm({
+        resolver: yupResolver(pwdSchema)
+    })
+
+    const onSubmit = (data)=>{
+        console.log('폼 데이터 제출');
+        console.log(data);
+    }
+
+    return(
+        <div className="login_form_container">
+            <h2>로그인</h2>
+            <form className="login_form" >
+            <input type={'email'}{...emailForm.register("email")} placeholder="이메일을 입력해주세요!" onFocus={emailForm.handleSubmit(onSubmit)} />
+            <p style={{color: 'red'}}>{emailForm.formState.errors.email?.message}</p>
+            <input type={'password'}{...pwdForm.register("password")} placeholder="비밀번호를 입력해주세요!" onFocus={pwdForm.handleSubmit(onSubmit)} />
+            <p style={{color: 'red'}}>{pwdForm.formState.errors.password?.message}</p>
+            <input type={'submit'} value="로그인" className="submit" />
+            </form>
+        </div>
+        
+    )
+}
+
+export default LoginPage;
\ No newline at end of file