Kinolights

liimยท2023๋…„ 3์›” 27์ผ
0

๐Ÿ–ฅ Kinolights ํด๋ก ์ฝ”๋”ฉ / Mobile


๐Ÿ“ข Check Point

  1. ๋žญํ‚น ํ”Œ๋žซํผ ์˜คํ†  ์ „ํ™˜
  2. json ๋ฐ์ดํ„ฐ ํ™œ์šฉ
  3. Tooltip


1. ๋žญํ‚น ํ”Œ๋žซํผ ์˜คํ†  ์ „ํ™˜

๐Ÿ‘‰ 4์ดˆ๋งˆ๋‹ค ํ”Œ๋žซํผ์ด ๋ฐ”๋€Œ๋Š” ์Šคํฌ๋ฆฝํŠธ

$(function(){

	platformArr = ['๋„ทํ”Œ๋ฆญ์Šค','์›จ์ด๋ธŒ','ํ‹ฐ๋น™'];  
    // ๋ฐฐ์—ด์„ ๋งŒ๋“ ๋‹ค (๋ฐฐ์—ด์˜ ๊ธธ์ด๋Š” 3)

    let i = 0;  
    // ๋ณ€์ˆ˜ ์ƒ์„ฑ, i=0์ด๋ผ๊ณ  ์…‹ํŒ…ํ•œ ๊ฒƒ. ๊ทธ๋Ÿผ ๋‹น์—ฐํžˆ 0๋ฒˆ์งธ์ธ ๋„ทํ”Œ๋ฆญ์Šค๊ฐ€ ์‹คํ–‰๋  ๊ฒƒ
    
    setInterval(() => {
        console.log(i);
        if(i > platformArr.length-1){
            i = 0;
        }
        headlineEl = `์˜ค๋Š˜์˜ '${platformArr[i]}' ๋žญํ‚น`;
        $('.sc-ranking .headline').html(headlineEl); 

        rank(i);  
        // rank๋ผ๋Š” ํ•จ์ˆ˜ ๋งŒ๋“ค๊ณ , (i)๋ฅผ ๋ฟŒ๋ฆฐ๋‹ค๋Š” ๋œป

        i++;  // ๊ณ„์† ์ฆ๊ฐ€๋œ๋‹ค
    }, 4000);  // 4์ดˆ ๋’ค์— ์‹คํ–‰

    rank(0);  // ์ตœ์ดˆ 1ํšŒ ์‹คํ–‰์€ ํ•ด์•ผํ•จ, 0๋ฒˆ์ด ๋‚˜์™€์ค˜์•ผ ํ•จ
  • ๋„ทํ”Œ๋ฆญ์Šค = 0 / ์›จ์ด๋ธŒ = 1 / ํ‹ฐ๋น™ = 2
  • i๋ผ๋Š” ๋ณ€์ˆ˜๋ฅผ ์ƒ์„ฑํ•˜์—ฌ i=0์ด๋ผ๊ณ  ์…‹ํŒ…
  • 0๋ฒˆ์งธ์ธ ๋„ทํ”Œ๋ฆญ์Šค๊ฐ€ ์‹คํ–‰๋œ๋‹ค.

โญ๏ธ setTimeout / setInterval

setTimeout : ์ผ์ •์‹œ๊ฐ„ ๋’ค์— ์‹คํ–‰
setInterval : ์ผ์ •์‹œ๊ฐ„ ๋’ค์— ๊ณ„์† ์‹คํ–‰

if(i > platformArr.length-1){

ํ”Œ๋žซํผ ๋ฐฐ์—ด์˜ ๊ธธ์ด์—์„œ 1์„ ๋บ€ ๊ฐ’(=2)๋ณด๋‹ค i๊ฐ€ ํฌ๋‹ค๋ฉด,

i = 0;

i๋Š” 0์ด ๋œ๋‹ค = ๋ฌดํ•œ๊ฐœ์˜ ๋ฐฐ์—ด์ด ์—†์–ด๋„ ๋‹ค์‹œ 0์œผ๋กœ ๋Œ์•„๊ฐ€ ๋ฐ˜๋ณต์‹คํ–‰ ๋œ๋‹ค.

headlineEl = ์˜ค๋Š˜์˜ '${platformArr[i]}' ๋žญํ‚น;

๋ณ€์ˆ˜ ์ฒ˜๋ฆฌํ•  ์˜์—ญ์„ ๋ฐฑํ‹ฑ์œผ๋กœ ์„ค์ •ํ•œ๋‹ค.
๐Ÿ‘‰ ${๋ณ€์ˆ˜๋ช…[i]}
i๋Š” ์ˆœ์„œ๊ฐ€ ๋œ๋‹ค.

$('.sc-ranking .headline').html(headlineEl);

๐Ÿ‘‰ headline ๋ถ€๋ถ„์„ headlineEl ๋‚ด์šฉ์œผ๋กœ ์žฌ๊ตฌ์„ฑํ•œ๋‹ค๋Š” ์˜๋ฏธ


2. json ๋ฐ์ดํ„ฐ ํ™œ์šฉ

๐Ÿ‘‰ fetch๋ฌธ์œผ๋กœ ๋ฐ์ดํ„ฐ ์š”์ฒญํ•˜๊ธฐ

fetch(์ฃผ์†Œ or ํŒŒ์ผ)  // json ํŒŒ์ผ ๊ฐ€์ ธ์˜ค๊ธฐ
.then((response)=>response.json())  // ๊ฐ€์ ธ์˜จ ๋ฐ์ดํ„ฐ๋ฅผ json ํŒŒ์ผ๋กœ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ
.then((json)=>{  //json = ๋ชจ๋“  ๋ฐ์ดํ„ฐ
		//์‹คํ–‰ ๋ถ€๋ถ„
});

๐Ÿ‘‰ ๋žญํฌ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ

function rank(num){
    fetch('./assets/data/rankData.json')
    .then((response)=>response.json())
    .then((json)=>{
        allData = json.items;
        result = allData.filter(function(parm){
            return parm.platform == num;  // ํ”Œ๋žซํผ์ด num์ธ ๊ฒƒ
        });
            
        let html = '';  // ๋นˆ ๋ฌธ์ž์—ด ์ƒ์„ฑ
        let rank = 1;  
        // rank=1์ด๋ผ๋Š” ๋ณ€์ˆ˜ ์ƒ์„ฑ (๋žญํ‚น 1~3์œ„ ์˜์—ญ). ๋‹น์—ฐํžˆ 1๋ถ€ํ„ฐ ๋‚ด์šฉ์ด ๋“ค์–ด๊ฐ„๋‹ค.
            
        result.forEach(element => {  
        // result, ๊ฐ’์„ ์จ์•ผ์ง€ allData๋ฅผ ์“ฐ๋ฉด ์•ˆ๋จ
            
            // ์ˆœ์œ„ ๋ณ€๋™ ํ‘œ์‹œ๋ฅผ ์œ„ํ•œ if๋ฌธ
            if(element.change > 0){
                changeEl = `<span class="num up">${element.change}</span>`
            }else if(element.change < 0){
                changeEl = `<span class="num down">${(element.change)*-1}</span>`
            }else{
                changeEl = `<span class="num">-</span>`
            }

            html+=`<li class="rank-item">
            		<a href="" class="item-wrapper">
                    <img src="${element.thumb}" alt class="poster">
                    <div class="text-box">
                    <img src="./assets/img/ic-rank-${rank}.svg" alt="${rank}์œ„" class="ic-ranknum">
                    <span class="title">${element.title}</span>
                    </div>
                    <div class="updown-box">
                    ${changeEl}
                    </div>
                	</a>
            		</li>`;
        	rank++;  
        	// forEach๊ฐ€ ๋๋‚ ๋•Œ์ฏค rank๋ฅผ ์ฆ๊ฐ€์‹œํ‚จ๋‹ค
        });

        $('#rankList').html(html)
    	});
	};
    
});
  • ํ•„ํ„ฐ๋กœ ๊ฐ ํ”Œ๋žซํผ์— ํ•ด๋‹นํ•˜๋Š” 1~3์œ„ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜จ๋‹ค.
  • rank๋Š” 1๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๊ฒŒ ๋ณ€์ˆ˜๋ฅผ ์ƒ์„ฑํ•˜๊ณ  forEach๊ฐ€ ๋๋‚  ๋•Œ์ฏค rank๋ฅผ ์ฆ๊ฐ€์‹œ์ผœ 3์œ„๊นŒ์ง€ ๋‚˜์˜ค๊ฒŒ ํ•œ๋‹ค.

๐Ÿ‘‰ ๋žญํ‚น ๋ณ€๋™ ํ‘œ์‹œ๋ฅผ ์œ„ํ•œ if๋ฌธ

์˜ค๋ฅธ์ชฝ ์ˆœ์œ„ ๋ณ€๋™ ์ •๋ณด๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์Šคํฌ๋ฆฝํŠธ

if(element.change > 0){
changeEl = <span class="num up">${element.change}</span>

์ˆœ์œ„ ๋ณ€๋™ ์ˆ˜์น˜๊ฐ€ 0๋ณด๋‹ค ํฌ๋ฉด(up)
์ปฌ๋Ÿฌ๋Š” up ํด๋ž˜์Šค ์†์„ฑ์ธ ๊ทธ๋ฆฐ์œผ๋กœ ๋ณด์—ฌ์ง€๊ณ 

}else if(element.change < 0){
changeEl = <span class="num down">${(element.change)*-1}</span>

์ˆœ์œ„ ๋ณ€๋™ ์ˆ˜์น˜๊ฐ€ 0๋ณด๋‹ค ์ž‘์œผ๋ฉด(down)
*-1 = ๊ณฑํ•˜๊ธฐ ๋งˆ์ด๋„ˆ์Šค1
์Œ์ˆ˜x์Œ์ˆ˜=์–‘์ˆ˜๊ฐ€ ๋˜์–ด ์ˆซ์ž๋Š” ๊ทธ๋Œ€๋กœ ํ‘œ๊ธฐ๋˜๋ฉฐ ์ปฌ๋Ÿฌ๋Š” down ํด๋ž˜์Šค ์†์„ฑ์ธ ๋ ˆ๋“œ๋กœ ๋ณด์—ฌ์ง„๋‹ค.

}else{
changeEl = <span class="num">-</span>
}

์ˆœ์œ„ ๋ณ€๋™์ด ์—†์œผ๋ฉด - ๋กœ ํ‘œ์‹œ

rankData.json

JSON์— ๊ด€ํ•œ ์ •๋ฆฌ๋Š” ์—ฌ๊ธฐ ๐Ÿ‘‰ https://velog.io/@imyoox/JSON

{
    "items":[
        {
            "thumb":"https://---.jpg",
            "title":"๋” ๊ธ€๋กœ๋ฆฌ ํŒŒํŠธ 2",
            "change":0,
            "platform":1
        },
        {
            "thumb":"https://---.jpg",
            "title":"๋” ๊ธ€๋กœ๋ฆฌ",
            "change":1,
            "platform":1
        },
        {
            "thumb":"https://---.jpg",
            "title":"์ผํƒ€์Šค์บ”๋“ค",
            "change":-2,
            "platform":1
        },
        ...(์ƒ๋žต)
	]
}
html+=`<li class="rank-item">
<a href="" class="item-wrapper">
<img src="${element.thumb}" alt class="poster">
<div class="text-box">
<img src="./assets/img/ic-rank-${rank}.svg" alt="${rank}์œ„" class="ic-ranknum">
<span class="title">${element.title}</span>
</div>
<div class="updown-box">
${changeEl}
</div>
</a>
</li>`;

๐Ÿ‘‰ html ์ฝ”๋“œ ์‚ฌ์ด, ๋ณ€์ˆ˜์— ํ•ด๋‹นํ•˜๋Š” ๋ถ€๋ถ„์— thumb title change platform ๋“ฑ ํ•„์š”ํ•œ ๊ฐ’์„

${elemnt.000}

ํ˜•์‹์œผ๋กœ ๊ธฐ์žฌํ•˜๋ฉด ๋ฐ์ดํ„ฐ๊ฐ€ ์‚ฝ์ž…๋œ๋‹ค.


3. Tooltip

๐Ÿ‘‰ ํˆดํŒ์ด๋ž€?

๋ณดํ†ต ํ•ญ๋ชฉ์„ ํด๋ฆญํ•˜์ง€ ์•Š๊ณ ๋„ ํ•ญ๋ชฉ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ํ‘œ์‹œํ•˜๋Š” ๊ทธ๋ž˜ํ”ฝ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค (GUI) ์š”์†Œ์ด๋‹ค. ๋ถ€์—ฐ์„ค๋ช…์„ ๋„์™€ ์œ ์ €๊ฐ€ ์ดํ•ดํ•˜๊ธฐ ์‰ฌ์šด ํŽ˜์ด์ง€๋กœ ๋งŒ๋“ค์–ด์ค€๋‹ค.

<div class="tooltip">
    <span class="text">๐Ÿ‘ฉ๐Ÿ‘จ์„ฑ๋ณ„๊ณผ ์—ฐ๋ น ์ถ”์ฒœ์ด ๊ฐ€๋Šฅํ•ด์š”!</span>
    <i class="ic-close"><span class="blind">๋‹ซ๊ธฐ</span></i>
</div>
.sc-recomm .tooltip{
    position: absolute;
    top: 40px; left: 16px;
    height: 40px;
    display: flex;
    padding: 0 16px;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    background: #4263eb;
    border-radius: 30px;
}
.sc-recomm .tooltip::before{
    content: '';
    position: absolute;
    top: -24px; left: 10px;
    border: 15px solid transparent;
    border-bottom-color: #4263eb;
}
  • ํ…์ŠคํŠธ์™€ ๋‹ซ๊ธฐ ๋ฒ„ํŠผ์ด ์žˆ๋Š” ํˆดํŒ ์˜์—ญ ๊ตฌ์„ฑ
  • ๊ฐ€์ƒ ์š”์†Œ ์„ ํƒ์ž ::before๋กœ ์•ž ์˜์—ญ์— ์‚ผ๊ฐํ˜• ๋ชจ์–‘์„ ๋งŒ๋“ค์–ด ๋งํ’์„ ์ฒ˜๋Ÿผ ๋ณด์ด๋„๋ก
$('.sc-recomm .tooltip .ic-close').click(function(){
	$('.sc-recomm .tooltip').addClass('on')
});
  • X ๋‹ซ๊ธฐ ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ์‚ฌ๋ผ์ง€๋„๋ก ์Šคํฌ๋ฆฝํŠธ ์ž‘์„ฑ
profile
Web Publisher

0๊ฐœ์˜ ๋Œ“๊ธ€