[김창희] Sprint3 (#49)

* chore: pull request template 파일 수정

pull request template 파일 수정

* chore: 중복 파일 제거

중복 파일 제거

* docs: pull request template 수정

pull request template 수정

* refactor: a 태그 li 태그 위치 수정

a 태그 안 li 태그 -> li 태그 안 a 태그

* refactor: 컴포넌트 로드 기능을 별도의 파일로 분리

- IncludeComponent.js 파일에 있었던 컴포넌트 로드 스크립트를 ComponentCheckFunction.js 파일로 분리
- 코드 재사용성 향상
- JS 파일 이름 수정

* refactor: 일부 js 함수 콜백함수 분리 선언

- ComponentLoader.js HtmlLoader.js 콜백함수 분리

* refactor: 로그인 회원가입 페이지 버튼 기능 수정

- 버튼 disabled 속성 제거, input 값에 따른 버튼 속성 변경 관련 이벤트 리스너와 스크립트 제거

* fix: 로그인 회원가입 페이지 로고 일부 수정

- 로고 앵커 태그 링크 수정
- 로고 가운데 정렬

* style: 회원가입 로그인 페이지 여백 및 코드 공백 수정

* style: 변경가능성 없는 let 선언을 const 선언으로 변경

* refactor: css 반응형 제거

- 미디어쿼리 삭제 및 rem을 px로 고침

* feat: 글로벌 css 반응형 작업 및 페이지별 반응형 css 파일 추가

- 글로벌을 제외한 페이지별 css 파일만 만들어둔 상태며 작업은 하지 않음

* feat: 메인 페이지 반응형 구현 및 일부 css 파일 삭제

- Home.html의 태블릿, 모바일 반응형 구현
- 아무 내용 없는 css 파일 삭제

* fix: 헤더 잘못 적용된 여백 수정

* fix: 메인 페이지 잘못 적용된 여백 수정 - 2

- 바텀 이미지 크기 수정

* feat: 로그인 페이지 반응형 구현

- 태블릿 모바일 반응형 구현
- 로그인 페이지 로고 이미지 수정
- 관련 html 파일 래퍼 영역 변경

## 발생된 이슈
- 인풋 outline 적용안됨

* feat: 회원가입 페이지 반응형 구현

- 태블릿 모바일 추가 구현

* feat: OG태그 Twitter Card 태그 추가

* fix: 회원가입 css 파일 수정 및 패스워드 눈 아이콘 수정

- 회원가입 데스크탑 기준 css 적용 에러 문제 해결
- 눈 아이콘을 나타내는 태그 변경 및 관련 css, js 파일 수정

* fix: input 태그 outline 미적용 문제 해결

* fix: 회원가입 로그인 input 속성 수정, 관련 코드 수정 및 추가

- input 속성 required 부분을 삭제하고 focusin, focusout이벤트 기준으로 경고 메시지를 뜨게끔 수정
- 그에 따라 html 코드 밑에 p태그를 추가해 메시지를 나타낼 때 요소 너비를 차지하도록 추가
- 관련 JS 코드 처리 및 리팩토링

* fix: 눈 아이콘 position 의도대로 수정 및 singup js 코드 오류 수정

- bottom 기준 position 잡았던 것을 top 기준으로 변경
- js 파일 콜백함수 오류 수정

* feat: 로그인 회원가입 버튼 동작 시 조건 확인 후 링크 이동 기능 구현

- 로그인 회원가입 submit 동작 시 input 값 value 및 error-message를 확인 후 /items 혹은 /signin 이동 결정.
- 로그인 회원가입 submit 동작 시 input value를 확인하여 error-message 출력 여부 결정
- passwordcheckIcon 미작동 에러 수정
- 클래스 선언 및 경로 정리
- 버튼 focus 이벤트 삭제 (추후 재추가 예정)

* style: 코드 공백 수정

* chore: ComponentCheckFunction.js 파일 JSDoc 추가

* chore: ComponentLoader.js 파일 JSDoc 추가

* chore: HtmlLoader.js 파일 JSDoc 추가

* chore: LoginSignupUtils.js 파일 JSDoc 추가

* refactor: LoginSignupUtils.js 파일 JSDoc 추가 및 리팩토링

* chore: CompoentCheckFunction.js 파일 JSDoc 수정

* chore: LoginSignupUtils.js JSDoc 수정

* fix: meta 태그 description 부분 일부 수정

- 심화 미션에 맞춰서 수정
title -> 판다 마켓
description -> 일상의 모든 물건을 거래해보세요

* fix: footer 여백 수정

* fix: 이미지 파일 벡터 이미지로 변경 및 모바일 기준 width 오류 수정

* fix: 현재 안 쓰는 css 파일 삭제

* fix: 데스크탑 기준 메인 페이지 요소 여백 수정

* Revert "fix: footer 여백 수정"

This reverts commit 7ee3f91.

* fix: 벡터 이미지 삽입에 따른 메인 페이지의 padding, margin, 기타 여백 수정

- svg의 preserveAspectRatio="none" 으로 css로 크기 컨트롤 가능케 함

* fix: 회원가입 페이지 요소 크기 수정

* fix 로그인 페이지 모바일 max-width 수정

* style: Signup.html 코드 여백 수정

* style: Footer.html 코드 여백 수정

* style: Header.html 코드 여백 수정

* style: Home.html 코드 여백 수정

* style: Login.html 코드 여백 수정

* style: Signup.js 코드 여백 수정

.github/pull_request_template.md

@@ -1,27 +1,68 @@
-## 요구사항
-
 ### 기본
 
-- [x]
-- []
-- []
+- [x] 
+- [x] 
+- [x] 
+- [x] 
+- [x] 
+- [x] 
+- [x] 
+- [x] 
+- [x] 
+- [x] 
+- [x] 
+- [x] 
+- [x] 
+- [x] 
+- [x] 
+- [x] 
+- [x] 
+- [x] 
+
 
 ### 심화
 
-- [x]
-- []
+- [x] 
+- [x] 
+- [x] 
+- [x] 
+- [x] 
 
 ## 주요 변경사항
 
--
--
+- 
+- 
+- 
+- 
+- 
+- 
+- 
+- 
+- 
+- 
 
 ## 스크린샷
 
-![image](이미지url)
+
+
+## 배포 사이트
+
+
+
+## 앞으로 수정해야할 사항
+
+- 
+- 
+- 
+- 
+- 
 
 ## 멘토에게
 
--
--
-- 셀프 코드 리뷰를 통해 질문 이어가겠습니다.
+- 
+- 
+- 
+- 
+- 
+- 
+

index.html

@@ -5,18 +5,33 @@
   <title>판다마켓</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="판다마켓 구경오라이">
+  <meta name="description" content="일상의 모든 물건을 거래해보세요">
+
+  <meta property="og:title" content="판다 마켓">
+  <meta property="og:description" content="일상의 모든 물건을 거래해보세요">
+  <meta property="og:image" content="/src/assets/img/hamster1.jpg">
+  <meta property="og:url" content="https://panda-kuwan">
+  <meta property="og:type" content="website">
+  <meta property="og:site_name" content="판다 마켓">
+
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:title" content="판다 마켓">
+  <meta name="twitter:description" content="일상의 모든 물건을 거래해보세요">
+  <meta name="twitter:image" content="/src/assets/img/hamster1.jpg">
+  <meta name="twitter:site" content="@판다 마켓">
 
   <link rel="icon" href="/src/assets/img/panda_head.svg">
 
   <link rel="stylesheet" href="/src/styles/base.css">
+  <link rel="stylesheet" href="/src/styles/base-tablet.css">
+  <link rel="stylesheet" href="/src/styles/base-mobile.css">
 </head>
 
 <body>
 
   <div data-include-html="/src/pages/home.html"></div>
 
-  <script src="/src/js/IncludeHtml.js"></script>
+  <script type="module" src="/src/js/HtmlLoader.js"></script>
 </body>
 
 </html>