[Web_3] STUSSY CLONE PROJECT 1 🤠

08627·2022년 9월 29일

Spring

목록 보기

9/13

📌 Spring Boot Project 생성
👾 Header / Login / Register Page

💡 STUSSY CLONE PROJECT 생성

👕STUSSY👕

🦎 PROJECT 생성 → stussy.clone.project spring initializr

Settings - Build, Execution, Deployment
- Build Tools - Maven ➡️ Maven Home Path : Bundled
- Compiler - ✅ Build Project Automatically
application.yml 로 바꾸고
server - port ,
spring - mvc(static-path-pattern) , datasource(driver, url, id, pw) 설정.
※ database driver → External Libraries 에서 사용하는 org.db.jdbc:db · · · 파일을 찾아서 넣어준다.
MyBatis
pom.xml → dependency 추가

<dependency>
	<groupId>org.mybatis.spring.boot</groupId>
	<artifactId>mybatis-spring-boot-starter</artifactId>
	<version>2.2.2</version>
</dependency>

마이바티스 mappers 설정 (xml 파일에 붙여넣기)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="org.mybatis.example.BlogMapper">
  
  <select id="selectBlog" resultType="Blog">
    select * from Blog where id = #{id}
  </select>
  
</mapper>

🌀 mybatis 시작하기

▫️ application.yml

server:
  port: 8000

spring:
  mvc:
    static-path-pattern: /static/**

  datasource:
    driver-class-name: org.mariadb.jdbc.Driver
    url: jdbc:mariadb:// . . . :3306/ . . . ?allowMultiQueries=true 
    # allowMultiQueries=true ; 서브쿼리 가능하도록 하는 옵션
    username: . . .
    password: . . .
    
  security:
    user:
      name: admin
      password: . . .

mybatis:
  mapper-locations:
    - /mappers/*.xml

🦎 기본 패키지 설정
java - com . . .
> config
> controller
> api
> domain
> dto
> repository
> service

resources
> mappers
> static
> css
> js
> templates

▫️ header

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Account</title>
  
  	<!-- ⭐ GoogleFont -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/css/header.css">
    <link rel="stylesheet" href="/static/css/account.css">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>    
</head>
<body>
    <div id="container">
        <header>
          
            <div class="header-container">
                <div class="header-flex">
                    <div class="header-left-container">
                        <div class="logo-container">
                            <img class="site-logo" src="/static/images/logo/site_logo.png" alt="site_logo">
                        </div>
                        <div class="menu-container">
                            <div class="site-nav-menu">
                                <a href="#ALL" class="site-nav-parent">SHOP</a>
                            </div>
                        </div>
                    </div>
                    <div class="header-right-container">
                        <button class="site-header-button">SEARCH</button>
                        <button class="site-header-button">BAG(<span class="bac-count">1</span>)</button>
                        <button class="site-header-button"><img class="korea-img" src="/static/images/logo/korea_img.PNG" alt="korea"></button>
                    </div>
                </div>
            </div>
          
            <nav class="nav-invisible">
                <div class="site-nav-mega">
                    <a href="/collections/new-arrivals" class="site-nav-child-link">NEW</a>
                    <a href="/collections/denim" class="site-nav-child-link">DENIM</a>
                    <a href="/collections/tees" class="site-nav-child-link">TEES</a>
                    <a href="/collections/sweats" class="site-nav-child-link">SWEATS</a>
                    <a href="/collections/overdyed" class="site-nav-child-link">OVERDYED</a>
                    <a href="/collections/pants" class="site-nav-child-link">PANTS</a>
                    <a href="/collections/shorts" class="site-nav-child-link">SHORTS</a>
                    <a href="/collections/outerwear" class="site-nav-child-link">OUTERWEAR</a>
                    <a href="/collections/knits" class="site-nav-child-link">KNITS</a>
                    <a href="/collections/tops-shirts" class="site-nav-child-link">TOPS & SHIRTS</a>
                    <a href="/collections/headwear" class="site-nav-child-link">HEADWEAR</a>
                    <a href="/collections/accessories" class="site-nav-child-link">ACCESSORIES</a>
                    <a href="/collections/all" class="site-nav-child-link">ALL</a>
                </div>
                <div class="site-nav-mega">
                    <a href="/account/login" class="site-nav-child-link">ACCOUNT</a>
                    <a href="/pages/customer-support" class="site-nav-child-link">CONTACT</a>
                    <a href="/blogs/features" class="site-nav-child-link">FEATURES</a>
                    <a href="/blogs/chapters" class="site-nav-child-link">CHAPTERS</a>
                </div>
            </nav>
          
            <script src="/static/js/header.js"></script>
        </header>

        <main>
            <!-- 로그인 login / 회원가입 register -->
        </main>

        <footer>
        </footer>
      
    </div>
  	<!--⭐ login ➡️ --> <script src="/static/js/login.js"></script>
  	<!--⭐ register ➡️ --> <script src="/static/js/register.js"></script>
</body>
</html>

※ header - js · css 생략 . . .

▫️ login.html

. . .
		<main>
            <div class="login">
                <h1 class="login-title">ACCOUNT</h1>
                <div class="login-container">
                    <section class="login-new">
                        <h2 class="login-subheader">회원가입</h2>
                        <p class="login-content">회원가입을 하시면, 주문 조회와 개인정보 관리 및 빠른 체크아웃 등 다양한 혜택을 누리실 수 있습니다.</p>
                        <button type="button" class="black-button login-button">신규가입</button>
                    </section>
                    <section class="login-current">
                        <⭐form action="/account/login" method="post">
                            <h2 class="login-subheader">로그인</h2>
                          
                          <!-- 로그인 요청 실패 시 Error 를 띄워줌 -->
                            <div class="account-errors">
                                <ul>
                                    <li th:text="${error}"></li>
                                </ul>
                            </div>
                          
                            <input type="email" class="login-input" name="email" placeholder="이메일" required>
                            <input type="password" class="login-input" name="password" placeholder="비밀번호" required>
                            <a href="" class="login-show-recover">비밀번호를 잊으셨나요?</a>
                            <button 📍type="submit" class="black-button login-button">로그인</button>
                        </form>
                    </section>
                </div>
            </div>
        </main>
. . .

<form> action : 폼 데이터를 보낼 URL 주소

🦎 Thymeleaf

타임리프는 View Template(뷰 템플릿)의 일종으로, 컨트롤러가 전달하는 Model(Key, Value) 객체의 데이터를 가지고 동적으로 화면에 띄워준다.

th:text="${key}"
➡️ 텍스트로 지정하고, key의 value를 호출함.

▫️ login.js

// 신규가입
const registerGoButton = document.querySelectorAll(".login-button")[0]; 
// 로그인
const loginButton = document.querySelectorAll(".login-button")[1]; 

registerGoButton.onclick = () => {
    location.href = "/account/register";
}

loginButton.onclick = () => { // form 에 로그인 정보를 담아서 제출
    const loginform = document.querySelector("form"); 
}

▫️ register.html

. . .
		<main>          
            <div class="login">
                <h1 class="login-title">ACCOUNT</h1>
                <div class="login-container">
                    <section class="login-current">
                        <h2 class="login-subheader">신규 회원가입</h2>
                      
                      <!-- ValidationError 를 띄워줌 -->
                        <div class="account-errors errors-invisible">
                            <ul>
                                
                            </ul>
                        </div>
                      
                        <div class="login-name">
                            <div class="login-half">
                                <input type="text" class="login-input" placeholder="이름">
                            </div>
                            <div class="login-half">
                                <input type="text" class="login-input" placeholder="성">
                            </div>
                        </div>
                        <input type="email" class="login-input" placeholder="이메일">
                        <input type="password" class="login-input" placeholder="비밀번호">
                        <button type="button" class="black-button login-button">확인</button>
                        <a href="/account/login" class="login-return">로그인으로 돌아가기</a>
                    </section>
                </div>
            </div>          
        </main>
. . .

▫️ register.js

const registerButton = document.querySelector(".login-button");
const registerInputs = document.querySelectorAll(".login-input");

registerButton.onclick = () => {

    let registerInfo = {
        lastName: registerInputs[0].value,
        firstName: registerInputs[1].value,
        email: registerInputs[2].value,
        password: registerInputs[3].value
    }

    $.ajax({
        async: false,
        type: "post",
        url: "/api/account/register",
        ✔️ contentType: "application/json",
        ✔️ data: JSON.stringify(registerInfo), // JSON 으로 변환해서 보냄
        dataType: "json",
        success: (response) => {	// 회원가입 성공 시 로그인 페이지로 이동
            location.replace("/account/login"); 
        },
        error: (error) => {
            console.log(error);
          validationError(error.responseJSON.data);
        }
    });
}


function validationError(error) {
    const accountErrors = document.querySelector(".account-errors");
    const accountErrorList = accountErrors.querySelector("ul");

    const errorValues = Object.values(error); // ➡️ error의 value들을 배열로 리턴함. 

    accountErrorList.innerHTML = "";

    errorValues.forEach((value) => {
        accountErrorList.innerHTML += `
            <li>${value}</li>
        `;
    });
	
  	// ※ error 가 있을 경우에만 메소드가 실행됨. 
  	// 기본적으로 보이지 않도록 하고, 메소드가 실행 되는 경우 보이도록 함. (css 설정)
    accountErrors.classList.remove("errors-invisible");
}

※ css 생략 . . .

참고 🧙
- 스프링 가이드 참고 사이트 모음
- 카카오 주소 API
- 로컬(Local) API 구현 방법

📢 소감 🤠
이번주는 왕 바빴다

08627

다음 포스트

[Web_3] STUSSY CLONE PROJECT 1 🤠

Spring

💡 STUSSY CLONE PROJECT 생성

🦎 Thymeleaf

[Web_3] STUSSY CLONE PROJECT 2 🐰

0개의 댓글