개요
최근에 이리저리 프로젝트와 업무로 인해 바쁨이 이만저만이 아니였다. 그래서 개인공부도 손에 잘 쥐지도 못했고 몇 개월만의 블로그 포스팅을 생각해보다가, 이번 프로젝트에서 그마나 심혈(?)을 기울여 만든 커스텀 페이지 동작을 포스팅 해보려고 한다. 클라이언트의 니즈는 어떠한 위치에서도 이미지를 생성해서 커스텀이 가능한 페이지를 원했고, 구상하는동안 꽤 많은 생각을 해본 기능이다.
- 몇개월만의 포스팅으로 생각해낸 기능
- 어떠한 위치에서도 이미지가 움직이고 삭제되어야 한다.
draggable 이란?
Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.
-
"DOM 요소에서 끌 수 있는 기능을 활성화합니다. 끌 수 있는 개체를 마우스로 클릭하고 뷰포트 내 아무 곳이나 끌어다 놓아 이동합니다." 라고 해석이 된다.
-
JQuery UI의 기능이다.
🛠️개발 체크사항
클라이언트의 요구사항은 다음과 같았다.
(위는 현재 개발된 사이트의 사진을 이용)
- 메탈컬러마다 색상이 존재하는 모든 부위는 색상 변경
- 체인 종류는 클릭 시 왼쪽의 체인 변경
- 보석 및 팬던트는 클릭 시 이미지가 나와야 하며 자유자재로 이동 가능
- 메탈컬러 변경 시 나와있는 이미지, 선택하는 이미지 둘다 색상이 변경되어야함
- 모든 컬러, 체인, 보석, 팬던트는 얼마나 들어갈지 미지수
.
.
.
.
.
(어디까지 요구하는지 듣는중)
일단 현재 참고할만한 사이트는 잘 보이지 않았고 창작으로 기능을 만들어야 했다.
🔥전체 코드
//메인 메탈 컬러 변수
var type = "";
var allch = 0;
//메인메탈컬러
$("input[name='color']").on("click", function(){
var color = $(this).attr("id");
//색깔 타입 받기
if(color == "pink"){
type = "";
}
else if(color == "yellow"){
type = "_g";
}
else if(color == "white"){
type = "_s";
}
$("input[name='line']:checked").each(function(){
var reimg = $("#mainneck").attr("src").slice(0,25);
var imgsrc = reimg+type+".png";
$(".img-con #mainneck").attr("src", imgsrc);
});
if(allch == 0){
var imgsrc = $("#mainneck").attr("src").slice(0,25)+type+".png";
$("#mainneck").attr("src",imgsrc);
}
//체인
$("label[for='line-type1']").children("img").attr("src",$("label[for='line-type1']").children("img").attr("src").slice(0,21)+type);
$("label[for='line-type2']").children("img").attr("src",$("label[for='line-type2']").children("img").attr("src").slice(0,21)+type);
$("label[for='line-type3']").children("img").attr("src",$("label[for='line-type3']").children("img").attr("src").slice(0,21)+type);
//팬던트
var pendantPa = document.getElementsByClassName("pendantType");
var pendantChild = pendantPa[0].childElementCount;
for(var i=1;i<=pendantChild;i++){
$("label[for='pendant"+i+"']").children("img").attr("src","/images/goods/"+$("label[for='pendant"+i+"']").prev().val()+type);
}
$("#pen #delimg img").each(function(){
var chimg = $(this).attr("src").slice(0,18);
$(this).attr("src",chimg+type+".png");
});
});
//체인종류
$("input[name='line']").on("click", function(){
if(type == null || type == ""){
var imgsrc = $(this).val()+"01.png";
$(".img-con #mainneck").attr("src", "../images/goods/"+imgsrc);
}else{
var imgsrc = "../images/goods/"+$(this).val()+"01"+type+".png";
$(".img-con #mainneck").attr("src", imgsrc);
}
allch = 1;
});
//팬던트 선택
$("input[name*='pendant-type']").on("click", function(){
var png = $(this).val();
$(".img-con").prepend("<div id='pen' style='position:absolute;'><div id = 'delimg'><img src='/images/goods/"+ png + type +".png'><span class='btn-close'>x</span></div></div>");
$(".img-con #pen").draggable({
});
});
//보석 선택
$("input[name*='jewel-type']").on("click", function(){
var png = $(this).val();
$(".img-con").prepend("<div id='pens' style='position:absolute;'><div id = 'delimg'><img src='/images/goods/"+png+".png'><span class='btn-close'>x</span></div></div>");
$(".img-con #pens").draggable({
});
});
//삭제 버튼
$(document).on("click", ".btn-close", function(){
$(this).parent().parent("#pens").remove();
});언제나 봐도 클린코딩 마렵다.
👀코드해석
일단, 이 draggable() 쓰기 위해서는
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>를 먼저 선언해야 한다.
주석으로 각 기능별로 정리를 해놨다.
개발당시 나의 관점은 모든 보석, 팬던트 등은 컬러에 의해 컨트롤이 되야 하므로 위와같이 컬러타입과 체인종류를 전역변수로 선언했다.
아무 컬러가 없을때와, 그 컬러에 맞게 텍스트를 넣어줌 으로서 각 색에 맞는 이미지가 나오도록 제작했다.
그리고 클릭 시 모든 이미지들이 색상이 변경되야 하므로, 클릭하면서 모든 영역의 이미지들을 한번씩 체크해주고, 그 밑으로 각 영역의 기능들을 정리했다.
$("input[name*='']")위처럼 몇 개의 이미지가 나올지 모르기에, 네이밍을 순차적으로 하던 디자인팀의 의견을 받아 작성했다.
이 코드는 그렇게 어렵지는 않다. 단지 나눠서 생각을 하다보니 머리를 조금 써야됐었다.
결과는 아래와 같다.
위와 같이 원하는 곳에 이미지를 뿌려주고, 움직임이 가능하면서 보석 같은 경우는 색이 변함에 있어 변화가 없기때문에 그대로 유지되고, x 버튼으로 보석이 삭제된다.
이 개발에 있어서 주요포인트는
- 이미지들의 네이밍 규칙
- 기능의 우선순위
라고 생각을 했다.
🤔자문자답
🤔체인부분은 왜 반복되는 부분을 생각하지 않았나?
💡안그래도 포스팅을 하면서 "어? 저기는 왜 저렇게 되있지?" 라는 생각을 했다.
고쳐서 생각해보자면,
$("label[for='line-type1']").children("img").attr("src",$("label[for='line-type1']").children("img").attr("src").slice(0,21)+type);
$("label[for='line-type2']").children("img").attr("src",$("label[for='line-type2']").children("img").attr("src").slice(0,21)+type);
$("label[for='line-type3']").children("img").attr("src",$("label[for='line-type3']").children("img").attr("src").slice(0,21)+type);여기서
for(var i =1; i< 체인.length; i++){
$("label[for='line-type"+i+"']").children("img").attr("src",$("label[for='line-type"+i+"']").children("img").attr("src").slice(0,21)+type);
}
이런식으로 변경이 가능하지 않을까?
문법이 틀려먹었을 수도 있습니다.
🤔모바일에서도 작동이 될까?
💡모바일 작동부분도 안그래도 문제가 있었다.
미팅때, 모바일에서 작동이 안하는것이였다...!
그래서 얼른 해결법을 찾는 와중에
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>한줄을 상단에 추가해줌으로 해결이 되었다.
출처 : stackoverflow
📋마무리
요즘 연말이라고 너무 바쁘기도 했다.
곧 이직시즌이라서 이리저리 알아보다가 평소에 준비하던 클라우드가 아닌,
눈에 여겨보던 서비스회사가 있어서 그곳의 기술스택을 공부해볼 생각이다.
Node.js, react, Javascript(not jQuery), NoSQL
이렇게 기술스택이다.
몇개월 남지는 않았지만 나의 화려하지 않은 경력기술서 + 위의 기술스택을 이용한 사이드 프로젝트를 준비할 예정이므로
앞으로의 포스팅은 위의 기술스택을 기반으로 작성이 될듯하다.
아자아자 이직화이팅...☆
