Sprint3/효준

README.md

@@ -0,0 +1,45 @@
+# sprint 1 미션
+## 내용
+랜딩 페이지 구현
+[Sprint 1 미션 PR](https://github.com/codeit-bootcamp-frontend/13-Sprint-Mission/pull/23)
+
+## 요구사항
+### 기본
+- 랜딩 페이지의 url path는 루트('/')로 설정합니다.
+- title은 “판다마켓”으로 설정해 주세요.
+- 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 해주세요.
+- 화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px“로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 해주세요.
+- 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 cursor: pointer를 설정해 주세요.
+- "판다마켓" 클릭 시 루트 페이지(‘/’)로 이동시켜주세요.
+- "구경하러 가기" 클릭 시 (“/items”)페이지로 이동시켜주세요.(빈 페이지)
+- "Privacy Policy", "FAQ"는 클릭 시 각각 Privacy 페이지('/privacy'), FAQ 페이지('/faq')로 이동합니다.(모두 빈 페이지)
+- 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.
+
+### 심화
+- [ ] 사용자의 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 보세요.(설정값은 자유입니다)
+
+## 구현 내용
+https://github.com/user-attachments/assets/d220c08b-83d8-4d2e-a589-b85a3a8590fc
+
+화면 녹화 특성 상 cursor: pointer;는 안 보임!
+
+# sprint 2 미션
+## 내용
+로그인 및 회원가입 페이지 구현
+[Sprint 2 미션 PR](https://github.com/codeit-bootcamp-frontend/13-Sprint-Mission/pull/38)
+
+### 요구사항
+### 기본
+- "판다마켓" 로고 클릭 시 루트 페이지(“/”)로 이동합니다.
+- 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.
+- input 요소에 focus in 일 때, 테두리 색상은 #3692FF입니다.
+- input 요소에 focus out 일 때, 테두리는 없습니다.
+- SNS 아이콘들은 클릭시 각각 실제 서비스 홈페이지로 이동합니다.
+- "회원가입”버튼 클릭 시 “/signup” 페이지로 이동합니다.
+- 로그인”버튼 클릭 시 “/login” 페이지로 이동합니다.
+
+### 심화
+- 비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 아이콘을 추가해 주세요.
+
+### 구현 내용
+https://github.com/user-attachments/assets/7027bb8a-4f37-4a0d-af8a-0e532979d1fb

index.html

@@ -47,10 +47,10 @@ <h1 class="main-title-h1">
                     <p class="main-content-text-header">
                         Hot item
                     </p>
-                    <p class="main-content-text-title">
+                    <h2 class="main-content-text-title">
                         인기 상품을 <br />
                         확인해 보세요
-                    </p>
+                    </h2>
                     <p class="main-content-text-detail">
                         가장 HOT한 중고거래 물품을 <br />
                         판다 마켓에서 확인해 보세요
@@ -64,10 +64,10 @@ <h1 class="main-title-h1">
                     <p class="main-content-text-header">
                         Search
                     </p>
-                    <p class="main-content-text-title">
+                    <h2 class="main-content-text-title">
                         구매를 원하는 <br />
                         상품을 검색하세요
-                    </p>
+                    </h2>
                     <p class="main-content-text-detail">
                         구매하고 싶은 물품은 검색해서 <br />
                         쉽게 찾아보세요
@@ -87,10 +87,10 @@ <h1 class="main-title-h1">
                     <p class="main-content-text-header">
                         Register
                     </p>
-                    <p class="main-content-text-title">
+                    <h2 class="main-content-text-title">
                         판매를 원하는<br />
                         상품을 등록하세요
-                    </p>
+                    </h2>
                     <p class="main-content-text-detail">
                         어떤 물건이든 판매하고 싶은 상품을 </br />
                         쉽게 등록하세요

src/pages/login.html

@@ -32,10 +32,10 @@
                 <p>간편 로그인하기</p>
                 <ul class="icon-list">
                     <a href="https://www.google.com" class="circle white-background">
-                        <img  class="google-icon" src="/src/assets/icons/google_icon.png" alt="구글 로그인">
+                        <img  class="google-icon" src="/src/assets/icons/google_icon.svg" alt="구글 로그인">
                     </a>
                     <a href="https://www.kakaocorp.com/page/" class="circle kakao-background">
-                        <img class="kakao-icon" src="/src/assets/icons/kakaotalk_icon.png" alt="카카오 로그인">
+                        <img class="kakao-icon" src="/src/assets/icons/kakaotalk_icon.svg" alt="카카오 로그인">
                     </a>
                 </ul>
             </div>

src/pages/signup.html

@@ -43,10 +43,10 @@
                 <p>간편 로그인하기</p>
                 <ul class="icon-list">
                     <a href="https://www.google.com" class="circle white-background">
-                        <img  class="google-icon" src="/src/assets/icons/google_icon.png" alt="구글 로그인">
+                        <img  class="google-icon" src="/src/assets/icons/google_icon.svg" alt="구글 로그인">
                     </a>
                     <a href="https://www.kakaocorp.com/page/" class="circle kakao-background">
-                        <img class="kakao-icon" src="/src/assets/icons/kakaotalk_icon.png" alt="카카오 로그인">
+                        <img class="kakao-icon" src="/src/assets/icons/kakaotalk_icon.svg" alt="카카오 로그인">
                     </a>
                 </ul>
             </div>

src/scripts/formUtils.js

@@ -0,0 +1,56 @@
+const visibilityConfig = {
+    password: {
+        type: "text",
+        src: "/src/assets/icons/visibility_off_btn.svg",
+        alt: "비밀번호 숨기기",
+    },
+    text: {
+        type: "password",
+        src: "/src/assets/icons/visibility_on_btn.svg",
+        alt: "비밀번호 보기",
+    },
+};
+
+export function setVisibilityToggle(inputWrapperSelector) {
+    const inputWrappers = document.querySelectorAll(inputWrapperSelector);
+
+    inputWrappers.forEach((wrapper) => {
+        wrapper.addEventListener("click", (event) => {
+            const clickedElement = event.target;
+
+            if (clickedElement.classList.contains("input-icon")) {
+                const passwordInput = wrapper.querySelector("input");
+                const toggleButton = clickedElement;
+
+                const nextState = passwordInput.type === "password" ? visibilityConfig["password"] : visibilityConfig["text"];
+
+                passwordInput.type = nextState.type;
+                toggleButton.src = nextState.src;
+                toggleButton.alt = nextState.alt;
+            }
+        });
+    });
+}
+
+export function setButtonDisable(parent, buttonClass) {
+    const button = parent.querySelector(buttonClass);
+
+    // 초기 상태 및 입력값 검증 함수
+    function validateInputs() {
+      const inputs = parent.querySelectorAll("input");
+      const allFilled = Array.from(inputs).every(input => input.value.trim() !== "");
+      button.disabled = !allFilled;
+    }
+
+    /*
+        초기 상태에 button을 disabled로 설정하였으나
+        안전성과 일관성을 위해 호출
+    */
+    validateInputs();
+
+    parent.addEventListener("input", (event) => {
+      if (event.target.tagName === "INPUT") {
+        validateInputs();
+      }
+    });
+  }

src/scripts/pages/login.js

@@ -1,4 +1,4 @@
-import { setVisibilityToggle, setButtonDisable } from "/src/scripts/global.js";
+import { setVisibilityToggle, setButtonDisable } from "/src/scripts/formUtils.js";
 
 setVisibilityToggle(".input-wrapper");
 

src/scripts/pages/signup.js

@@ -1,4 +1,4 @@
-import { setVisibilityToggle, setButtonDisable } from "/src/scripts/global.js";
+import { setVisibilityToggle, setButtonDisable } from "/src/scripts/formUtils.js";
 
 setVisibilityToggle(".input-wrapper");