[김지현] sprint5

.github/delete-merged-branch-config.yml

@@ -0,0 +1,15 @@
+name: delete branch on close pr
+
+on:
+  pull_request:
+    types: [closed]
+
+permissions:
+  pull-requests: write
+
+jobs:
+  delete-branch:
+    runs-on: ubuntu-latest
+    steps:
+      - name: delete branch
+        uses: SvanBoxel/delete-merged-branch@main

.github/pull_request_template.md

@@ -1,27 +1,43 @@
 ## 요구사항
 
 ### 기본
-
-- [x]
-- []
-- []
+로그인
+- [x] 이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
+- [x] 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
+- [x] 비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다
+- [x] 비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.
+- [x] input 에 빈 값이 있거나 에러 메세지가 있으면 ‘로그인’ 버튼은 비활성화 됩니다.
+- [x] input 에 유효한 값을 입력하면 ‘로그인' 버튼이 활성화 됩니다.
+- [x] 활성화된 ‘로그인’ 버튼을 누르면 “/items” 로 이동합니다
+
+회원가입
+- [x] 이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
+- [x] 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
+- [x] 닉네임 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “닉네임을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
+- [x] 비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다
+- [x] 비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.
+- [x] 비밀번호 input과 비밀번호 확인 input의 값이 다른 경우, 비밀번호 확인 input 아래에 “비밀번호가 일치하지 않습니다..” 에러 메세지를 보입니다.
+- [x] input 에 빈 값이 있거나 에러 메세지가 있으면 ‘회원가입’ 버튼은 비활성화 됩니다.
+- [x] input 에 유효한 값을 입력하면 ‘회원가입' 버튼이 활성화 됩니다.
+- [x] 활성화된 ‘회원가입’ 버튼을 누르면 “/signup” 로 이동합니다
 
 ### 심화
 
-- [x]
-- []
+- [x] 눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지기도 합니다.
+- [x] 비밀번호의 문자열이 가려질 때는 눈 모양 아이콘에는 사선이 그어져있고, 비밀번호의 문자열이 보일 때는 사선이 없는 눈 모양 아이콘이 보이도록 합니다.
+
 
 ## 주요 변경사항
 
--
--
+- 
+- 
 
 ## 스크린샷
 
 ![image](이미지url)
 
 ## 멘토에게
 
--
+- 
 -
 - 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

.gitignore

@@ -1,23 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,70 +1,12 @@
-# Getting Started with Create React App
+# React + Vite
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
-## Available Scripts
+Currently, two official plugins are available:
 
-In the project directory, you can run:
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
-### `npm start`
+## Expanding the ESLint configuration
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

auth/auth-validation.js

@@ -0,0 +1,88 @@
+import { emailInput, nicknameInput, pwdInput, checkPwdInput } from './constants.js';
+import { emailErrorMessage, nicknameErrorMessage, pwdErrorMessage, checkPwdErrorMessage} from './constants.js';
+import { exptext } from './constants.js';
+import { submitBtn } from './constants.js';
+
+// 에러 메세지 추가
+function setErrorMessage(field, errorPoint, message) {
+    errorPoint.textContent = message;
+    field.classList.add('error');
+}
+// 에러 메세지 삭제
+function clearErrorMessage(field, errorPoint) {
+    errorPoint.textContent = '';
+    field.classList.remove('error');
+}
+
+function emailError (e) {
+    if (e.target.value === '') {
+        setErrorMessage(emailInput, emailErrorMessage, '이메일을 입력해주세요.');
+    } else if (exptext.test(e.target.value) === false) {
+        setErrorMessage(emailInput, emailErrorMessage, '잘못된 이메일 형식입니다.');
+    } else {
+        clearErrorMessage(emailInput, emailErrorMessage);
+    }
+    activeBtn ()
+}
+
+function nicknameError (e) {
+    if (e.target.value === '') {
+        setErrorMessage(nicknameInput, nicknameErrorMessage, '닉네임을 입력해주세요.');
+    } else {
+        clearErrorMessage(nicknameInput, nicknameErrorMessage);
+    }
+    activeBtn ()
+}
+
+function pwdError (e) {
+    if (e.target.value === '') {
+        setErrorMessage(pwdInput, pwdErrorMessage, '비밀번호를 입력해주세요.');
+    } else if (e.target.value.length < 8) {
+        setErrorMessage(pwdInput, pwdErrorMessage, '비밀번호를 8자 이상 입력해주세요.');
+    } else {
+        clearErrorMessage(pwdInput, pwdErrorMessage);
+    }
+    activeBtn ()
+}
+
+pwdInput.addEventListener('focusout', pwdError);
+
+function checkPwdError (e) {
+    if (e.target.value !== pwdInput.value) {
+        setErrorMessage(checkPwdInput, checkPwdErrorMessage, '비밀번호가 일치하지 않습니다.');
+    } else {
+        clearErrorMessage(checkPwdInput, checkPwdErrorMessage);
+    }
+    activeBtn ()
+}
+
+// 버튼 활성화
+function activeBtn () {
+    // 공통 필드
+    const emailValid = (emailInput.value.trim() !== '') && (exptext.test(emailInput.value.trim()));
+    const pwdValid = (pwdInput.value.trim() !== '') && (pwdInput.value.trim().length >= 8);
+
+    // 회원가입 전용 필드
+    const nicknameValid = nicknameInput?.value !== '';
+    const checkPwdValid = checkPwdInput?.value === pwdInput?.value;
+
+    if (emailValid && pwdValid && nicknameValid && checkPwdValid) {
+        submitBtn.classList.remove('disabled');
+        submitBtn.removeAttribute('disabled');
+    } else {
+        submitBtn.classList.add('disabled');
+        submitBtn.setAttribute('disabled', true);
+    }
+}
+
+function movePage(e) {
+    e.preventDefault();
+    if (window.location.pathname === '/auth/signin') {
+        location.href = '/items';
+    } else if (window.location.pathname === '/auth/signup') {
+        location.href = '/auth/signin';
+    }
+}
+
+export { setErrorMessage, clearErrorMessage, emailError, nicknameError, pwdError, checkPwdError };
+export { movePage };

auth/constants.js

@@ -0,0 +1,18 @@
+const emailInput = document.getElementById('emailId');
+const nicknameInput = document.getElementById('nicknameId');
+const pwdInput = document.getElementById('pwdId');
+const checkPwdInput = document.getElementById('checkPwdId');
+
+const emailErrorMessage = document.querySelector('.error-message.email');
+const nicknameErrorMessage = document.querySelector('.error-message.nickname');
+const pwdErrorMessage = document.querySelector('.error-message.pwd');
+const checkPwdErrorMessage = document.querySelector('.error-message.check-pwd');
+
+const exptext = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
+
+const submitBtn = document.getElementById('submitBtn');
+
+export { emailInput, nicknameInput, pwdInput, checkPwdInput };
+export { emailErrorMessage, nicknameErrorMessage, pwdErrorMessage, checkPwdErrorMessage};
+export { exptext };
+export { submitBtn };

auth/password-visibility.js

@@ -0,0 +1,18 @@
+const passwordToggleButton = document.getElementsByClassName('visible');
+
+function passwordVisibility (e) {
+    const toggleButton = e.target;
+    const input = e.target.parentElement.previousElementSibling;
+
+    if (toggleButton.getAttribute("src") === "/img/visibility_off.png") {
+        toggleButton.setAttribute("src", "/img/visibility_on.png");
+        input.setAttribute("type", "text");
+    } else {
+        toggleButton.setAttribute("src", "/img/visibility_off.png");
+        input.setAttribute("type", "password");
+    }
+}
+
+for (const icon of passwordToggleButton) {
+    icon.addEventListener('click', passwordVisibility);
+}

auth/signin.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>판다마켓 - 로그인</title>
+    <link rel="icon" href="img/favicon.png">
+    <link rel="stylesheet" href="/style/reset.css">
+    <link rel="stylesheet" href="/style/global.css">
+    <link rel="stylesheet" href="/style/auth.css">
+    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css"/>
+</head>
+<body>
+    <script type="module" src="signin.js" defer></script>
+    <script type="module" src="password-visibility.js" defer></script>
+
+    <header class="sign-in-page">
+        <a  class="logo" href="/">
+            <img class="logo-img" src="../img/logo_img.png" alt="판다마켓 로고">
+            <img class="logo-text" src="../img/logo_text.png" alt="판다마켓 로고">
+        </a>
+    </header>
+    <form class="sign-in-form">
+        <div>
+            <label for="emailId">이메일</label>
+            <input id="emailId" type="email" name="email" placeholder="이메일을 입력해주세요">
+            <div class="error-message email"></div>
+        </div>
+        <div>
+            <label for="pwdId">비밀번호</label>
+            <div class="show-pwd">
+                <input id="pwdId" type="password" name="password" placeholder="비밀번호를 입력해주세요">
+                <button type="button" tabindex="-1">
+                    <img class="visible" src="/img/visibility_off.png">
+                </button>
+            </div>
+            <div class="error-message pwd"></div>
+        </div>
+        <button id="submitBtn" class="sign-in-btn disabled" type="submit" disabled>로그인</button>
+
+        <div class="quick-sign-in">
+            <span>간편 로그인하기</span>
+            <ul class="sns">
+                <li>
+                    <a href="https://www.google.com"><img src="../img/ic_google.png" alt="Google"></a>
+                </li>
+                <li>
+                    <a href="https://www.kakaocorp.com/page"><img src="../img/ic_kakaotalk.png" alt="Kakao"></a>
+                </li>
+            </ul>
+        </div>
+        <div class="new-member">
+            <span>판다마켓이 처음이신가요?</span>
+            <a class="sign-up" href="./signup.html">회원가입</a>
+        </div>
+    </form>
+</body>
+</html>

auth/signin.js

@@ -0,0 +1,9 @@
+import { emailInput, pwdInput, submitBtn } from './constants.js';
+import { emailError, pwdError, movePage } from './auth-validation.js';
+
+// 에러 메세지
+emailInput.addEventListener('focusout', emailError);
+pwdInput.addEventListener('focusout', pwdError);
+
+// 버튼 활성화
+submitBtn.addEventListener('click', movePage);