상세화면 만들기 + css

ChickenList.js에서 상세보기 버튼을 추가해서 각 치킨마다 상세보기 페이지로 이동하도록 하기

 

java Controller에서 다음 구문을 추가

@GetMapping("/{id}")
public Chicken getChickenById(@PathVariable("id") Integer id) {
    return chickenService.findById(id);
}

 

그리고 useNavigate 함수를 사용

const navigate = useNavigate();

//중략

<li className="chicken-item" key={chicken.id}>
    <div className="chicken-name">{chicken.chickenName}</div>
    <div className="chicken-description">{chicken.description}</div>
    <div className="chicken-price">₩{chicken.price}원</div>
    <button className="detail-button"
        onClick={
            () => navigate(`/chicken-detail/${chicken.id}`)
        } 
        >상세보기</button>
    {/* 
    <Link to={`/chicken-detail/${chicken.id}`}>
        <button className="detail-button" >상세보기</button>
    </Link>
    */}
    <button onClick={() => deleteMenu(chicken.id)}>메뉴삭제</button>
</li>

 

** navigate와 Link의 차이는 태그냐 기능이냐의 차이일 뿐임.

 

그리고 상세보기(ChickenDetail)

import axios from "axios";
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import '../css/ChickenDetail.css';

const ChickenDetail = () => {
	//외부의 변수를 사용할 때는 중괄호
    const {id} = useParams();
    console.log(id);
    
    const [chicken, setChicken] = useState(null);
    
    useEffect(() => {
        axios.get(`http://localhost:9090/api/chicken/${id}`)
        .then(res => {
            setChicken(res.data);
            console.log(res.data);
        })
    },[id])

    if(!chicken) {
        return(
            <div>로딩중...</div>
        )
    }
    return(
        <div className="chicken-detail-container">
            <h1>{chicken.chickenName}</h1>
            <p>{chicken.description}</p>
            <p>{chicken.price}원</p>
        </div>
    )
}
export default ChickenDetail;

 

오늘은 css가 주류

 

.chicken-detail-container{
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    text-align: center;
    transition: transform 0.3s ease;
}
.chicken-detail-container:hover{
    transform: translateZ(80px) rotateX(180deg) rotateY(180deg);
    /*transform: translateY(-10px) translateX(-80px);*/
}   
.chicken-detail-container h1{
    font-size: 2em;
    color: #333;
    margin-bottom: 20px;
}
.chicken-detail-container p {
    font-size: 1.2em;
    color: #555;
    line-height: 1.5; /* 줄별 세로 간격 조정 */
    margin: 10px 0;
}

 

transform : 여러 기능을 작성할 땐 띄어쓰기로 작성
 -   translateX : x축으로 움직임. 음수는 왼쪽 양수는 오른쪽
 -   translateY : y축으로 움직임. 음수는 위쪽 양수는 아래쪽
 -   translateZ : 3D형태의 움직임. 주로 rotateX,Y와 같이 사용
 -   rotateX : x축을 기준으로 회전
 -   rotateY : y축을 기준으로 회전
 -   deg : degree(각도). 0: 회전 x, 90: 직각회전, 180: 뒤집힌상태, 360: 원래 위치로 돌아온 상태

 

 

마우스 올리기 전

 

마우스 올린 후

 

translateZ 와 rotateX,Y의 합작품