05. 웹개발 – 카카오

by

(emotion_reigster.js)

window.onload = () => {
    ComponentEvent.getInstance().addClickEventRegisterButton();
    ComponentEvent.getInstance().addClickEventImgAddButton();
    ComponentEvent.getInstance().addChangeEventImgFile();
    ComponentEvent.getInstance().addClickEventImgRegitserButton();
    ComponentEvent.getInstance().addClickEventImgCencelButton();
}

const emoObj = {
    emoCode: "",
    emoName: "", 
    company: "",
    emoDate: ""
}
const fileObj = {
    files: new Array(),
    formData: new FormData()
}

class EmoRegisterApi{
    static #instance = null;
    static getInstance() {
        if(this.#instance == null) {
            this.#instance = new EmoRegisterApi();
        }
        return this.#instance;
    }

    registerEmo() {
        let successFlag = false;

        $.ajax({
            async: false,
            type: "post",
            url: "http://localhost:8000/api/admin/emo",
            contentType: "application/json",
            data: JSON.stringify(emoObj),
            dataType: "json",
            success: response => {
                successFlag = true;
            },
            error: error => {
                console.log(error);
                EmoRegisterService.getInstance();
            }
        });

        return successFlag;
    }

    registerImg() {
        $.ajax({
            async: false,
            type: "post",
            url: `http://localhost:8000/api/admin/emo/${fileObj.emoCode}/images`,
            encType: "multipart/form-data",
            contentType: false,
            processData: false,
            data: fileObj.formData,
            dataType: "json",
            success: response => {
                alert("이모티콘 이미지 등록 완료!
");
                location.reload();
            },
            error: error => {
                console.log(error);
            }
        });
    }
}

class EmoRegisterService{
    static #instance = null;
    static getInstance() {
        if(this.#instance == null) {
            this.#instance = new EmoRegisterService();
        }
        return this.#instance;
    }

    setEmoObjValues() {
        const registerInputs = document.querySelectorAll(".register-input");
    
        emoObj.emoCode = registerInputs(0).value;
        emoObj.emoName = registerInputs(1).value;
        emoObj.company = registerInputs(2).value;
        emoObj.emoDate = registerInputs(3).value;
    }

    setErrors(errors) {
        const errorMessages = document.querySelectorAll(".error-message");
        
        Object.keys(errors).forEach(key => {
            if(key == "emoCode") {
                errorMessages(0).innerHTML = errors(key);
            }else if(key == "emoName") {
                errorMessages(1).innerHTML = errors(key);
            }else if(key == "company") {
                errorMessages(2).innerHTML = errors(key);
            }
        });

    }

    clearErrors() {
        const errorMessages = document.querySelectorAll(".error-message");
        errorMessages.forEach(error => {
            error.innerHTML = "";
        });
    }
}

class ImgFileService {
    static #instance = null;
    static getInstance() {
        if(this.#instance == null) {
            this.#instance = new ImgFileService();
        }
        return this.#instance;
    }

    getImgPreview() {
        const emoImg = document.querySelectorAll(".emo-img");
        const reader = new FileReader();

        reader.onload = (e) => {
            emoImg.src = e.target.result;
        }

        reader.readAsDataURL(fileObj.files(0));
        reader.readAsDataURL(fileObj.files(1));
        reader.readAsDataURL(fileObj.files(2));
        reader.readAsDataURL(fileObj.files(3));
    }
}

class ComponentEvent {
    static #instance = null;
    static getInstance() {
        if(this.#instance == null) {
            this.#instance = new ComponentEvent();
        }
        return this.#instance;
    }

    addClickEventRegisterButton() {
        const registerButton = document.querySelector(".register-btn");

        registerButton.onclick = () => {
            EmoRegisterService.getInstance().setEmoObjValues();
            const successFlag = EmoRegisterApi.getInstance().registerEmo();

            if(!
successFlag) {
                return;
            }

            if(confirm("이모티콘 이미지를 등록하겠습니까?")) {
                const imgAddButton = document.querySelector(".img-add-button");
                const imgCencelButton = document.querySelector(".img-cencel-button");

                imgAddButton.disabled = false;
                imgCencelButton.disabled = false;
            }else {
                location.reload;
            }
        }
    }

    addClickEventImgAddButton() {
        const imgFile = document.querySelector(".img-file");
        const addButton = document.querySelector(".img-add-button");
        
        addButton.onclick = () => {
            imgFile.click();
        }
    }

    addChangeEventImgFile() {
        const imgFile = document.querySelector(".img-file");

        imgFile.onchange = () => {
            const formData = new FormData(document.querySelector(".img-form"));
            let changeFlag = false;

            fileObj.files.pop();

            formData.forEach(value => {
                console.log(value);

                if(value.size !
= 0) {
                    fileObj.files.push(value);
                    changeFlag = true;
                }
            });

            if(changeFlag) {
                const imgRegisterButton = document.querySelector(".img-register-button");
                imgRegisterButton.disabled = false;

                ImgFileService.getInstance().getImgPreview();
                imgFile.value = null;
            }
        }
    }

    addClickEventImgRegitserButton() {
        const imgRegisterButton = document.querySelector(".img-register-button");

        imgRegisterButton.onclick = () => {
            fileObj.formData.append("files", fileObj.files(0));
            EmoRegisterApi.getInstance().registerImg();
        }
    }

    addClickEventImgCencelButton() {
        const imgCencelButton = document.querySelector(".img-cencel-button");

        imgCencelButton.onclick = () => {
            if(confirm("정말로 이미지 등록을 취소하시겠습니까?")) {
                location.reload();
            }
        }
    }

}

– 이미지가 저장되지 않았습니다.

수정 중.

(search.css)

.search-page{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 110px;
  /* z-index: 9999; */

  width: 100%;
  height: 110px;

  background-color: #eeeded;
}
.search-bar{
  display: flex;

  width: 616px;
  height: 56px;

  background-color: #fff;
}
.search-bar-input{
  margin-top: 2.3px;
  padding-top: 2px;
  padding-left: 20px;

  width: 530px;
  height: 49px;

  border: none;
  background-color: white;

  font-size: 18px;
  font-weight: 500;

  cursor: pointer;
}
.search-bar-input:focus{
  outline: 2.5px solid #1b1b1b;
  border-radius: 8px;
}
.search-bar-button{
  margin-left: 5px;

  width: 50px;
  height: 54px;

  border: none;
  background-color: white;

  font-size: 25px;

  cursor: pointer;
}

– 고정 입력창

'추천 관련글,

( searchpage.html )

<!
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>카카오 이모티콘샵</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="http://lol009.tistory.com/static/css/reset.css">
    <link rel="stylesheet" href="http://lol009.tistory.com/static/css/index.css">
    <link rel="stylesheet" href="http://lol009.tistory.com/static/css/search.css">
    <link rel="stylesheet" href="http://lol009.tistory.com/static/css/search_content.css">
</head>
<body>
    <header class="header">
        <div class="header-top">
            <button class="toggle-button">
              <i class="fa-solid fa-bars"></i>
            </button>

            <a class="logo-button">
                <h1>kakao<span>emoticon</span> shop</h1>
            </a>

            <button class="search-button">
              <i class="fa-solid fa-magnifying-glass"></i>
            </button>

            <button class="mypage-button">
                <img src="/static/images/profile_default.png" alt="">
            </button>
        </div>

        <nav class="header-menu">
            <ul class="menu-list">
                <li class="menu-list-button"><a href="">홈</a></li>
                <li class="menu-list-button"><a href="">신규</a></liu>
                <li class="menu-list-button"><a href="">인기</a></li>
            </ul>
        </nav>
        
        <div class="search-page">
            <div class="search-bar">
                <input class="search-bar-input" type="text" placeholder="이모티콘을 검색해보세요!
">
                <button class="search-bar-button">
                    <i class="fa-solid fa-magnifying-glass"></i>
                </button>
            </div>
        </div>
    </header>

    <div class="content">
        <div class="search-view">
            <div class="search-tilte">
                <h2>검색 결과</h2>
                <p>8</p>
            </div>
            <ul>
                <li>
                    <div class="emotion-tilte">
                        <h3>이모티콘 이름1</h3>
                        <h4>제작사1</h4>
                        <button class="like-button">
                            <i class="fa-regular fa-heart"></i>
                        </button>
                    </div>
                    <a href="">
                        <div class="emotion-view-img">
                            <img src="/static/images/noimg.jpg" alt="">
                        </div>
                    </a>
                </li>
                <li>
                    <div class="emotion-tilte">
                        <h3>이모티콘 이름2</h3>
                        <h4>제작사2</h4>
                        <button class="like-button">
                            <i class="fa-regular fa-heart"></i>
                        </button>
                    </div>
                    <a href="" class="emotion-view">
                        <div class="emotion-view-img">
                            <img src="/static/images/noimg.jpg" alt="">
                        </div>
                    </a>
                </li>
                <li>
                    <div class="emotion-tilte">
                        <h3>이모티콘 이름3</h3>
                        <h4>제작사3</h4>
                        <button class="like-button">
                            <i class="fa-regular fa-heart"></i>
                        </button>
                    </div>
                    <a href="" class="emotion-view">
                        <div class="emotion-view-img">
                            <img src="/static/images/noimg.jpg" alt="">
                        </div>
                    </a>
                </li>
                <li>
                    <div class="emotion-tilte">
                        <h3>이모티콘 이름4</h3>
                        <h4>제작사4</h4>
                        <button class="like-button">
                            <i class="fa-regular fa-heart"></i>
                        </button>
                    </div>
                    <a href="" class="emotion-view">
                        <div class="emotion-view-img">
                            <img src="/static/images/noimg.jpg" alt="">
                        </div>
                    </a>
                </li>
                <li>
                    <div class="emotion-tilte">
                        <h3>이모티콘 이름5</h3>
                        <h4>제작사5</h4>
                        <button class="like-button">
                            <i class="fa-regular fa-heart"></i>
                        </button>
                    </div>
                    <a href="" class="emotion-view">
                        <div class="emotion-view-img">
                            <img src="/static/images/noimg.jpg" alt="">
                        </div>
                    </a>
                </li>
                <li>
                    <div class="emotion-tilte">
                        <h3>이모티콘 이름6</h3>
                        <h4>제작사6</h4>
                        <button class="like-button">
                            <i class="fa-regular fa-heart"></i>
                        </button>
                    </div>
                    <a href="" class="emotion-view">
                        <div class="emotion-view-img">
                            <img src="/static/images/noimg.jpg" alt="">
                        </div>
                    </a>
                </li>
                <li>
                    <div class="emotion-tilte">
                        <h3>이모티콘 이름7</h3>
                        <h4>제작사7</h4>
                        <button class="like-button">
                            <i class="fa-regular fa-heart"></i>
                        </button>
                    </div>
                    <a href="" class="emotion-view">
                        <div class="emotion-view-img">
                            <img src="/static/images/noimg.jpg" alt="">
                        </div>
                    </a>
                </li>
                <li>
                    <div class="emotion-tilte">
                        <h3>이모티콘 이름8</h3>
                        <h4>제작사8</h4>
                        <button class="like-button">
                            <i class="fa-regular fa-heart"></i>
                        </button>
                    </div>
                    <a href="" class="emotion-view">
                        <div class="emotion-view-img">
                            <img src="/static/images/noimg.jpg" alt="">
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <footer class="footer">
        <div class="info">
          <h3 class="searvice-info">
            <a href="">이용약관</a>
            <a href="">유료이용안내</a>
            <a href="">개인정보처리방침</a>
            <a href="">기업고객</a>
            <a href="">문의하기</a>
            <a href="">공정위사업자정보</a>
            <a href="">(주) 카카오</a>
          </h3>
          <h4 class="warp-info">
            카카오 이모티콘샵에서 판매되는 콘텐츠의 저작권은 콘텐츠 제공자에게 있으며, 이를 무단 이용하는 경우 저작권법 등에 따라 처벌될 수 있습니다.


            <br/>
            <br/>
            대표: 홍은택 사업자등록번호: 120-81-47521 통신판매업신고번호: 제2015-제주아라-0032호
            <br/>
            주소: 제주특별자치도 제주시 첨단로 242(영평동) 호스팅사업자: (주)카카오고객센터 1577-3754 메일: [email protected]
          </h4>
        </div>
      </footer>

</body>
</html>

– 추가 검색 결과 변경 사항을 만듭니다.

( search_content.css )

/* =============== 검색 창 ================ */
.content{
  width: 100%;

  background-color: white;
}

.search-view{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  margin-top: 125px;
  width: 1124px;

  background-color: white;
}
.search-tilte{
  display: flex;
  justify-content: center;

  width: 500px;
  height: 50px;

  background-color: white;
}
.search-tilte h2{
  margin-top: 20px;

  font-size: 20px;
  font-weight: 400;
}
.search-tilte p{
  margin-top: 20px;
  margin-left: 10px;

  font-size: 20px;
  font-family: 800;

  color: red;
}

.search-view ul{
  display: flex;
  flex-flow: wrap;
  justify-content: space-around;

  margin-top: 15px;

  width: 1124px;
  height: 100%;
}
.search-view ul li{
  display: flex;
  justify-content: space-around;

  width: 500px;
  height: 150px;

  border-bottom: 2px solid #dbdbdb;
  background-color: white;
}
.emotion-tilte{
  margin-top: 50px;

  width: 300px;
  height: 50px;

  background-color:  white;
}
.emotion-tilte h3{
  font-size: 22px;
  font-weight: 800;
  text-align: left;

  cursor: pointer;
}
.emotion-tilte h3:hover{
  text-decoration: underline;
}
.emotion-tilte h4{
  font-size: 18px;
  font-weight: 500;
  text-align: left;

  color: #535252;

  cursor: pointer;
}
.like-button{
  margin-top: 5px;

  width: 36px;
  height: 36px;

  border: 1px solid #dbdbdb;
  border-radius: 50px;
  background-color: white;

  cursor: pointer;
}
.fa-heart{
  margin-top: 5px;

  width: 16px;
  height: 16px;

  font-size: 13px;
}

.emotion-view-img img{
  margin-top: 13px;
  
  width: 125px;
  height: 125px;
}


(WebMvcConfig)

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

– @configuration 추가

(계정 컨트롤러)

package com.korit.kakaoemotionshop.web.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/account")
public class AccountController {

    @GetMapping("/login")
    public String login() { return "account/login"; }

    @GetMapping("/register")
    public String register() { return "account/register_sign"; }
}


(관리자 컨트롤러)

package com.korit.kakaoemotionshop.web.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/admin")
public class AdminController {

    @GetMapping("/emo")
    public String registerEmo() { return "admin/re_emotion_register"; }
}