codeit-bootcamp-frontend · Ahseo · Feb 23, 2024 · Feb 22, 2024 · Feb 22, 2024 · Ahseo
diff --git a/.DS_Store b/.DS_Store
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -2,19 +2,24 @@
 
 ### 기본
 
-- [x]
-- []
-- []
+- [x]UI 디자인 기초 토픽을 수강해 보세요. (https://www.codeit.kr/topics/ui-design-basics)
+- [x]피그마 디자인에 맞게 PC사이즈 랜딩 페이지,회원가입 페이지를 만들어 주세요.
+- [x]React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.
+- [x]랜딩 페이지의 url path는 루트(‘/’)입니다.
+- [x]로그인 페이지의 url path는 ‘/signin’ 입니다.
+- [x]회원가입 페이지의 url path는 ‘/signup’ 입니다.
+- [x]아래로 스크롤 해도 “Linkbrary” 로고와 “로그인” 버튼이 있는 상단 네비게이션 바(Global Navigation Bar)가 최상단에 고정되게 해주세요.
+- [x]HTML, CSS 파일을 Netlify로 배포해 주세요. (참고: https://www.codeit.kr/learn/5309)
 
 ### 심화
 
-- [x]
-- []
+- [x]palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.
+- [x]비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 아이콘을 추가해 주세요.
 
 ## 주요 변경사항
 
--
--
+- 비밀번호 표시 토글 버튼 기능 구현.
+- 회원가입 페이지에서 비밀번호 불일치 시 경고 메시지 출력과 인풋 테두리 색 변경 기능 구현.
 
 ## 스크린샷
 

diff --git a/asset/eye-off.svg b/asset/eye-off.svg
diff --git a/asset/eye-on.svg b/asset/eye-on.svg
diff --git a/asset/fill_facebook_icon.svg b/asset/fill_facebook_icon.svg
diff --git a/asset/fill_instagram_icon.svg b/asset/fill_instagram_icon.svg
diff --git a/asset/fill_twitter_icon.svg b/asset/fill_twitter_icon.svg
diff --git a/asset/fill_youtube_icon.svg b/asset/fill_youtube_icon.svg
diff --git a/asset/google_icon.svg b/asset/google_icon.svg
diff --git a/asset/kakao_icon.svg b/asset/kakao_icon.svg
diff --git a/asset/logo.svg b/asset/logo.svg
diff --git a/asset/main_folder.png b/asset/main_folder.png
diff --git a/asset/main_folder.svg b/asset/main_folder.svg
diff --git a/asset/main_header.png b/asset/main_header.png
diff --git a/asset/main_link.png b/asset/main_link.png
diff --git a/asset/main_link.svg b/asset/main_link.svg
diff --git a/asset/main_share.png b/asset/main_share.png
diff --git a/asset/main_share.svg b/asset/main_share.svg
diff --git a/asset/main_sns.png b/asset/main_sns.png
diff --git a/asset/main_sns.svg b/asset/main_sns.svg
diff --git a/components/eyesOnOff.js b/components/eyesOnOff.js
@@ -0,0 +1,19 @@
+export const $eyes = document.querySelector('.password_eyes');
+export const $password = document.querySelector('#passwordToggle');
+export const $passwordRe = document.querySelector('#passwordToggleRepeat');
+
+const handlePasswordSight = () => {
+  if ($password.type === 'password') {
+    $password.type = 'text';
+    $eyes.src = '/asset/eye-off.svg';
+    $eyes.classList.add('eyes_offset');
+    $passwordRe.type = 'text';
+  } else if ($password.type === 'text') {
+    $password.type = 'password';
+    $eyes.src = '/asset/eye-on.svg';
+    $eyes.classList.remove('eyes_offset');
+    $passwordRe.type = 'password';
+  }
+};
+
+export default handlePasswordSight;
diff --git a/components/passwordRepeat.js b/components/passwordRepeat.js
@@ -0,0 +1,20 @@
+import { $password, $passwordRe } from './eyesOnOff.js'; // 패스워드 인풋창이랑 패스워드 재입력 인풋창
+const $wrongMessage = document.getElementById('wrong_message'); // 비밀번호가 틀렸습니다 메세지 div
+// const $signUpButton = document.querySelector('.signup_button');
+
+const valueWrong = (e) => {
+  e.preventDefault();
+  if ($passwordRe.value) {
+    if ($passwordRe.value !== $password.value) {
+      $wrongMessage.classList.remove('hidden');
+      $passwordRe.className = 'wrong_password';
+    } else {
+      $wrongMessage.className = 'hidden';
+      $passwordRe.classList.remove('wrong_password');
+    }
+  }
+};
+
+// const ifWrongValue = () => {};
+
+export default valueWrong;
diff --git a/faq/index.html b/faq/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    faq
+  </body>
+</html>