[ 항해 99 실전프로젝트 ] 이미지 입히기 테스트 ( 2 )

오늘은 대충 배경이랑 악세사리 같이 2개의 다른 위치에 이미지를 계속해서 바꿔 입히는 코드를 먼저 짜보려한다.

 

해야할 순서

1. 아무 이미지나 카테고리별로 2개 정도를 같은 크기의 이미지로 public 폴더에 저장
2. public 폴더에서 각 이미지를 불러왔을 때, 정해진 위치에 들어가도록 코드를 짜야지.

 

아바타만들기 틀을 빠르게 짜보았다.

먼저, 이미지는 public폴더에 넣어놓고 절대경로로 불러오도록 설정하였다.

 

 

아바타만들기 초안

위의 이미지와 같은 형식으로, 각 이미지 카테고리 (ex/ 눈, 코, 입, 모자, 등등) 별로 div영역을 고정시켜 그 안에 사진을 집어넣는 방식으로 짰다. 그렇다면 사용자가 입모양을 바꾸고싶으면, 빨간색 영역의 div에 있는 이미지가 바뀌고 눈을 바꾸고 싶으면 파란색 영역이 바뀌는 로직이다.

 

그러기 위해서는, 이미지경로를 동적으로 설정할 수 있어야한다.

 

 

 

사용자가 특정 아이템들을 입혀볼 때마다, 이미지경로가 바뀌어야하기때문에 이미지경로를 동적으로 설정해주자.

필자는 styled-components를 사용한 프로젝트이기때문에, prop을 전달하는 방식을 사용했다.

 

import React from "react";
import styled from "styled-components";

const AvatarBox = () => {
  let Man = "ManFace";
  return (
    <AvatarCtn>
      <FaceCtn Man={Man}>
      </FaceCtn>
    </AvatarCtn>
  );
};

const AvatarCtn = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48.5vh;
  width: 48.5vh;
  border: 2px solid black;
`;

const FaceCtn = styled.div`
  width: 80%;
  height: 80%;
  border: 3px solid black;
  background-image: ${({ Man }) => `url(/avatar/${Man}.png)`};
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
`;

위와 같이 설정을 하면, 변수를 사용하여 동적으로 이미지경로를 바꿔줄 수 있다.