[.net] React 페이지 만들기 4

컴포넌트 분리

const Item = ({item, drag, itemImgObj}) =>{
    return(
        <div className="unranked-cell">
            <img id={`item-${item.id}`} src={itemImgObj.image}
                 style={{cursor:"pointer"}} draggable="true" onDragStart={drag}/>
        </div> 
    )
}

export default Item;

import Item from './Item';

const ItemCollection = ({items,drag, imgArr})=>{
    return (
        <div className="items-not-ranked">
        {
            items.map((item)=>(item.ranking === 0)
            ?<Item item={item} drag={drag} itemImgObj={imgArr.find(o=>o.id === item.imageId)}/>
            :null)
        }
        </div>
    )

}
export default ItemCollection;

 

이벤트 리스너 생성

import React, {useState, useEffect} from "react";
import MovieImageArr from "./MovieImages";
import RankingGrid from "./RankingGrid";
import ItemCollection from "./ItemCollection";

const RankItems = ()=>{
    const [items, setItems] = useState([]);
    const dataType = 1;

    useEffect(()=>{
        fetch(`item/${dataType}`)
        .then((results)=>{
            return results.json();
        })
        .then(data=>{
            setItems(data);
        })
    },[])
    const drag = (e)=> e.dataTransfer.setData("text", e.target.id);

    const allowDrop = (e)=>e.preventDefault();
    

    const drop = (e)=> {

        e.preventDefault();
        const targetElm = e.target;
        console.log("hello");
        if (targetElm.nodeName === "IMG") {
            return false;
        }
        if (targetElm.childNodes.length === 0) {
            var data = parseInt(e.dataTransfer.getData("text").substring(5));
            const transformedCollection = items.map((item) => (item.id === parseInt(data)) ?
            { ...item, ranking: parseInt(targetElm.id.substring(5)) } : { ...item, ranking: item.ranking });
            setItems(transformedCollection);
        }

    }
    
    return (
        <main>
            <RankingGrid items={items} imgArr={MovieImageArr} drag={drag} allowDrop={allowDrop} drop={drop } />
            <ItemCollection items={items} drag={drag} imgArr={MovieImageArr}/>
        </main>
    )
}
export default RankItems;

CSS 변경

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

code {
  color: #E01A76;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}
body{
  font-family: Arial, Helvetica, sans-serif;
}
main{
  display: flex;
  align-items: center;
  flex-direction: column;
}

.items-not-ranked{
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 15px;
}
.unranked-cell{
  width: 80px;
  text-align: center;
  margin-left: 3px;
}
/*추가 부분*/
.unranked-cell img, .rank-cell img{
  width: 100%;
  height: 100%;
}
.rankings{
  width: 800px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  justify-self: center;
  margin-bottom: 15px;
}
.rank-row{
  height: 100px;
  display: flex;
  justify-content: space-evenly;
  margin-top: 3px;
  margin-bottom: 4px;
}
.top-tier{
  background-color: yellow;
}
.middle-tier{
  background-color: greenyellow;
}
.bottom-tier{
  background-color: brown;
}
.worst-tier{
  background-color: red;
}
/*추가 부분*/
.rank-cell, .row-label { 
  width: 80px;
  text-align: center; 
  display: flex;
  align-items: center;
}

결과

 

 

출처

https://github.com/GavinLonDigital/RankingApp/tree/main

GitHub - GavinLonDigital/RankingApp: This repository is part of a video course on React and .NET Web API

https://www.youtube.com/watch?v=4RKuyp_bOhY