이것저것 공부한다:: CSS React 클론 코딩 간단 정리용

2024.08.10

스터디 시간에 본 코드를 받았다.

1) 기본적인 디자인을 수정하여 위와 같이 정리

2) hover시에 줄거리(overView)가 뜨도록 정리

3) 다섯개 즈음에서 잘라 여러 층을 이루도록 구현…

을 인라인 스타일로 구현해야 했다. CSS의 다양한 스타일을 다뤄본 적이 없던 것은 아니지만, CSS를 react로, 인라인으로 다뤄본 것은 처음이라(평소에는 외부/내부 스타일 시트를 이용하였다.) 조금 애를 먹었다.

제일 먼저 애를 먹은 부분은 display 속성에 대해서이다. 맨 처음 제시된 코드가 display: flex로 제시되어있기에, 이에 맞추어 진행하고자 하였으나 display:flex인 상태에서 코드를 깨끗하게 짜려면 어떻게 해야 할지 감이 잡히지 않았다.

그래서 결국 display: grid를 이용하였다. style에 display:grid를 주고, column으로 정리되게 하되 gridTemplateColumns 속성을 repeat(4, minmax(210px, 210px))로 주어 다음과 같이 나오도록 만들었다::

가로 길이를 늘이든 줄이든 padding 10px을 유지한 채 나온다. (이건 사진 이미지를 200으로 주어서 가능했던 것 같다.)

후에 hover을 주었다. 나는 내부/외부 스타일시트를 사용할 때처럼 태그::hover을 사용하려 했으나 이것이 리액트에서는 허용되지 않음을 깨달았다. 몇 시간동안 이런저런 게시글을 찾아보며 useState를 이용해, const [hover, setHover]을 각 movie에 부여하여 hover 기능을 구현하는 데에 성공했다.

최종 코드는 다음과 같다::

복사됨

import {useState} from 'react'
import './App.css';


function App() {
  const [movies, setMovies] = useState(movieList);
  return (
    <>
      <div style={{display: "grid", backgroundColor: "#22254B", weight: "100vw", height: "100vh", position: "relative", backgroundSize: "auto", margin: "0", textAlign: "center", justifyContent: "center", overflowX: "hidden",
       gridTemplateColumns: "repeat(4, minmax(210px, 210px))", alignItems: "start"
      }}>
        {movies.map((movie) => (
            <MoviePoster key={movie.id} movie={movie}/>
        ))} 
      </div>

    </>
  )
}

const MoviePoster = ({movie}) => {
  const [hover, setHover] = useState(false);

  return (
      <div
      onMouseOver={() => setHover(true)}
      onMouseOut={() => setHover(false)} 
      style={{width: "200px", height: "450px", backgroundColor: "#373B69", margin: "10px", position: "relative", boxSizing: "border-box"}}>
        <img style={{width: "200px"}} src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`} alt={movie.title}/>
        <p style={{color: "white", fontSize: "small", position: "relative", align: "center"}}><span style={{textAlign: "left"}}>{movie.title}</span> <span style={{textAlign: "right"}}>{movie.vote_average}</span></p>
        <p id="help" 
        style={{backgroundColor: "#000000AA", position: "absolute", right: "0", top: "-16px", bottom: "0", color: "#ffffff", width: "200px", height: "450px", boxSizing: "border-box", padding: "10px", visibility: hover ? "visible" : "hidden"}}>{movie.overview}</p>
      </div>
  )
}

const movieList = [
  {
    "adult": false,
    "backdrop_path": "/8pjWz2lt29KyVGoq1mXYu6Br7dE.jpg",
    "genre_ids": [
      28,
      878,
      27
    ],
    "id": 615656,
    "original_language": "en",
    "original_title": "Meg 2: The Trench",
    "overview": "전 세계에서 가장 깊은 마리아나 해구, 역사상 가장 거대하고 무자비한 포식자가 도사리는 그곳에서 강철 다이버 ‘조나스’(제이슨 스타뎀)가 더 맹렬하게 돌아온 ‘메가로돈’과 짜릿한 대결을 펼치는 액션 어드벤처",
    "popularity": 2429.447,
    "poster_path": "/cbAHK6Vrt0GClMRUxH8TsgC2JqL.jpg",
    "release_date": "2023-08-15",
    "title": "메가로돈 2",
    "video": false,
    "vote_average": 7,
    "vote_count": 1790
  },
  {
    "adult": false,
    "backdrop_path": "/w2nFc2Rsm93PDkvjY4LTn17ePO0.jpg",
    "genre_ids": [
      16,
      35,
      28
    ],
    "id": 614930,
    "original_language": "en",
    "original_title": "Teenage Mutant Ninja Turtles: Mutant Mayhem",
    "overview": "뉴욕의 하수구로 스며든 미스터리한 녹색 액체, ‘우즈’로 인해 아기 거북이 네 마리와 청년 쥐 스플린터는 사람과 비슷한 모습의 돌연변이가 된다. 15년 후, 10대 청소년이 된 레오나르도, 미켈란젤로, 라파엘, 도나텔로는 하수구에 숨어 사는 생활에서 벗어나 인간 세상에서 평범한 삶을 살고 싶어하고 우연히 만난 학생 기자 에이프릴과 함께 도시를 위협하는 '슈퍼플라이'와 그 일당을 물리치면 뉴욕의 히어로가 되어 당당히 세상에 나갈 수 있을 거라는 꿈을 꾸는데… 인간들을 모두 돌연변이로 만들겠다는 ‘슈퍼플라이’의 음모로 위험에 빠진 뉴욕! 틴에이저 히어로로 다시 태어난 ‘닌자터틀’ 형제들의 스트릿 액션 어드벤처가 펼쳐진다!",
    "popularity": 800.947,
    "poster_path": "/6xORIhe6cP3iM5RYTHs7MTOH1qa.jpg",
    "release_date": "2023-09-14",
    "title": "닌자터틀: 뮤턴트 대소동",
    "video": false,
    "vote_average": 7.3,
    "vote_count": 512
  },
  {
    "adult": false,
    "backdrop_path": "/fm6KqXpk3M2HVveHwCrBSSBaO0V.jpg",
    "genre_ids": [
      18,
      36
    ],
    "id": 872585,
    "original_language": "en",
    "original_title": "Oppenheimer",
    "overview": "세상을 구하기 위해 세상을 파괴할 지도 모르는 선택을 해야 하는 천재 과학자의 핵개발 프로젝트.",
    "popularity": 530.049,
    "poster_path": "/4ZLnVUfiCe3wX8Ut9eyujndpyvA.jpg",
    "release_date": "2023-08-15",
    "title": "오펜하이머",
    "video": false,
    "vote_average": 8.3,
    "vote_count": 3566
  },
  {
    "adult": false,
    "backdrop_path": "/2zzaJ9jzyK1Am8XoS0dFjmP8V0L.jpg",
    "genre_ids": [
      28,
      53,
      27
    ],
    "id": 1135229,
    "original_language": "en",
    "original_title": "I Am Rage",
    "overview": "에린은 새로운 남자친구의 고향인 어느 한적한 시골마을을 방문한다. 그곳에서 비슷하게 여행을 온 커플들을 만나게 되고 그들은 실종이 되어도 누구도 찾지 않은 외로운 사람들이라는 공통점이 있다는 것을 알게 된다. 그들은 인간의 피를 거래하고 마시며 초자연적인 힘을 얻는 사이비 살인마 집단에 납치된 것. 하지만 에린은 위기에 몰리거나 분노하게 되면 극한의 잔인함과 폭력성이 초인적으로 발현되는 특이한 혈통을 가진 체질이다. 에린의 분노가 폭발하고 그녀를 사냥한 악인들에 대한 더욱 잔혹한 사냥이 시작된다.",
    "popularity": 425.756,
    "poster_path": "/z1nFd03qoiCrHlGSxBlumkF9uZh.jpg",
    "release_date": "2023-09-14",
    "title": "론 서바이버 : 아이 엠 리벤지",
    "video": false,
    "vote_average": 6.5,
    "vote_count": 11
  },
  {
    "adult": false,
    "backdrop_path": "/8pjWz2lt29KyVGoq1mXYu6Br7dE.jpg",
    "genre_ids": [
      28,
      878,
      27
    ],
    "id": 615656,
    "original_language": "en",
    "original_title": "Meg 2: The Trench",
    "overview": "전 세계에서 가장 깊은 마리아나 해구, 역사상 가장 거대하고 무자비한 포식자가 도사리는 그곳에서 강철 다이버 ‘조나스’(제이슨 스타뎀)가 더 맹렬하게 돌아온 ‘메가로돈’과 짜릿한 대결을 펼치는 액션 어드벤처",
    "popularity": 2429.447,
    "poster_path": "/cbAHK6Vrt0GClMRUxH8TsgC2JqL.jpg",
    "release_date": "2023-08-15",
    "title": "메가로돈 2",
    "video": false,
    "vote_average": 7,
    "vote_count": 1790
  },
  {
    "adult": false,
    "backdrop_path": "/w2nFc2Rsm93PDkvjY4LTn17ePO0.jpg",
    "genre_ids": [
      16,
      35,
      28
    ],
    "id": 614930,
    "original_language": "en",
    "original_title": "Teenage Mutant Ninja Turtles: Mutant Mayhem",
    "overview": "뉴욕의 하수구로 스며든 미스터리한 녹색 액체, ‘우즈’로 인해 아기 거북이 네 마리와 청년 쥐 스플린터는 사람과 비슷한 모습의 돌연변이가 된다. 15년 후, 10대 청소년이 된 레오나르도, 미켈란젤로, 라파엘, 도나텔로는 하수구에 숨어 사는 생활에서 벗어나 인간 세상에서 평범한 삶을 살고 싶어하고 우연히 만난 학생 기자 에이프릴과 함께 도시를 위협하는 '슈퍼플라이'와 그 일당을 물리치면 뉴욕의 히어로가 되어 당당히 세상에 나갈 수 있을 거라는 꿈을 꾸는데… 인간들을 모두 돌연변이로 만들겠다는 ‘슈퍼플라이’의 음모로 위험에 빠진 뉴욕! 틴에이저 히어로로 다시 태어난 ‘닌자터틀’ 형제들의 스트릿 액션 어드벤처가 펼쳐진다!",
    "popularity": 800.947,
    "poster_path": "/6xORIhe6cP3iM5RYTHs7MTOH1qa.jpg",
    "release_date": "2023-09-14",
    "title": "닌자터틀: 뮤턴트 대소동",
    "video": false,
    "vote_average": 7.3,
    "vote_count": 512
  },
  {
    "adult": false,
    "backdrop_path": "/fm6KqXpk3M2HVveHwCrBSSBaO0V.jpg",
    "genre_ids": [
      18,
      36
    ],
    "id": 872585,
    "original_language": "en",
    "original_title": "Oppenheimer",
    "overview": "세상을 구하기 위해 세상을 파괴할 지도 모르는 선택을 해야 하는 천재 과학자의 핵개발 프로젝트.",
    "popularity": 530.049,
    "poster_path": "/4ZLnVUfiCe3wX8Ut9eyujndpyvA.jpg",
    "release_date": "2023-08-15",
    "title": "오펜하이머",
    "video": false,
    "vote_average": 8.3,
    "vote_count": 3566
  },
  {
    "adult": false,
    "backdrop_path": "/2zzaJ9jzyK1Am8XoS0dFjmP8V0L.jpg",
    "genre_ids": [
      28,
      53,
      27
    ],
    "id": 1135229,
    "original_language": "en",
    "original_title": "I Am Rage",
    "overview": "에린은 새로운 남자친구의 고향인 어느 한적한 시골마을을 방문한다. 그곳에서 비슷하게 여행을 온 커플들을 만나게 되고 그들은 실종이 되어도 누구도 찾지 않은 외로운 사람들이라는 공통점이 있다는 것을 알게 된다. 그들은 인간의 피를 거래하고 마시며 초자연적인 힘을 얻는 사이비 살인마 집단에 납치된 것. 하지만 에린은 위기에 몰리거나 분노하게 되면 극한의 잔인함과 폭력성이 초인적으로 발현되는 특이한 혈통을 가진 체질이다. 에린의 분노가 폭발하고 그녀를 사냥한 악인들에 대한 더욱 잔혹한 사냥이 시작된다.",
    "popularity": 425.756,
    "poster_path": "/z1nFd03qoiCrHlGSxBlumkF9uZh.jpg",
    "release_date": "2023-09-14",
    "title": "론 서바이버 : 아이 엠 리벤지",
    "video": false,
    "vote_average": 6.5,
    "vote_count": 11
  },
]


export default App;

카테고리: #기타

컬렉션

이것저것아무거나공부한다

총 15개의 포스트

이것저것 공부한다:: 프로그래머스 코딩 문제 40(다음주 20 추가 풀이)

이것저것 공부한다:: 프로그래머스 문제 풀이 50

광고 테스트를 진행하고 있어요

이것저것 공부한다:: CSS React 클론 코딩 간단 정리용

카뮤 토우에 관하여

이것저것 모음집. +3월 26일 마지막 편집

그 생명에 대해서

쟈밀 바이퍼 드림 / 주의문 필독

[사키네코] 우리를 둘러싼 선에 색을 입혀줘

고백로그 / 2022. 06. 30

난제

쓰레기 닌자 카카시

잘못된, 혹은 잘못되지 않은 만남

벨라-크로우 유니버스 조각글 - 1

편지 2D HL 드림 (2,045 자)

은혼 소요

[???]NOW LOADING……

Track 02&03. ???

[나밤그] 14화