개인 프로젝트 4

 

스타일링 방법을 고민하다 인라인 스타일링으로 간단히 구현해 놓은 부분이 있고 그 부분에 className만 적용해서 바꿀 수 있는 tailwindcss를 사용해 보기로 했습니다.

 

 

설치 및 세팅

 

https://tailwindcss.com/docs/installation

Installation - Tailwind CSS

 

공식 사이트가 있어 설치하기 쉬었고 빠르게 적용해 볼 수 있었습니다.

 

npm install -D tailwindcss
npx tailwindcss init

 

tailwindcss를 설치하고  'tailwind.config.js'를 생성합니다.

 

 

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

'tailwind.config.js' 탬플릿 파일에 경로를 추가합니다.

타입스크립트를 사용하고 있어 다음과 같이 설정했습니다.

 

 

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

 

최상단 CSS 파일에 위의 내용을 추가합니다.

기본적으로 리액트로 만들었으므로 index.css에 넣었습니다.

 

 

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

 

다음과 같이 터미널에 입력하여 css 전처리기도 추가했습니다.

 

 

장점 및 적용

 

장점

 

기본적인 CSS는 따로 파일을 만들어 연결점을 만드는 방식이 많습니다.

그렇게 되면 이름이 중복될 수 있고 같은 내용이 겹쳐 스타일이 오버랩되는 실수도 많습니다.

 

하지만 tailwindcss를 사용하면 그저 html 태그에 className으로 약속된 내용만 적어주면 그대로 적용되기 때문에 그런 실수를 방지하기 좋습니다.

 

 

적용

 

 

위 두 제목과 버튼 나열은 기본적으로 다음과 같이 해 가운데 정렬을 할 수 있습니다.

 

display: flex;
justify-content: center;

 

이를 tailwindcss를 사용한다면

 

<div className="flex flex-nowrap justify-center my-12 text-5xl">HEARTHSTONE ARENA CARD LIST</div>
<div className="flex flex-nowrap justify-center" >

 

이렇게 className에 띄어쓰기로 구분하여 flex와 justify-center를 적어주면 됩니다.

 

flex-nowrap은 글씨와 버튼이 윈도우 크기에 반응하여 한 줄로 초과하여 흘러내리지 않도록 적용하는 flex-wrap: nowrap입니다.

이렇게 약속된 약어로 기존의 스타일링을 이용할 수 있습니다.

 

공식 사이트에서도 제공이 되지만 예전에 스터디원 분이 알려준 사이트를 참고하니 편했습니다. (๑^ں^๑)

 

 

카드 목록은 다음과 같이 flex-wrap: wrap 즉, className에 flex-wrap을 추가해 크기에 맞게 한 행당 일정 수가 적용되게 했습니다.

 

 

모달 이미지 구현

 

import { useState } from "react";

import { CardStructure } from "../card.model";

// 카드 데이터 구조 정의
interface CardProps {
  card: CardStructure;
  color: string
};

const Card: React.FC<CardProps> = (props) => {

  const [onImage, setOnImage] = useState(false);

  return (
    <>
      <div
        className="flex justify-center w-60 m-2 border rounded-2xl z-10"
        key={props.card.id}
        onClick={() => setOnImage(!onImage)}
      >
        {props.card.name}
      </div>
      {onImage && (
        <div
          className="fixed z-50 w-full h-full top-0 left-0"
          onClick={() => setOnImage(!onImage)}
        >
          <img
            className="fixed inset-0 m-auto"
            src={props.card.image}
            alt={props.card.id.toString()}
          />
        </div>
      )}
    </>
  );
};

export default Card;

 

모달 이미지는 위와 같이 상태를 하나 만들어 온오프 형식으로 구현했습니다.

전체적으로 이미지를 감싸는 큰 틀을 만들어 이미지 모달이 활성화되어 있을 땐 화면에 어떤 부분을 눌러도 이미지가 다시 내려가게 구현했습니다.

 

큰 틀에 position: fixed 대신 position: absolute를 넣으면 이미지 모달이 켜진 시점에 형태가 결정되어 스크롤하고 다른 카드 이름을 클릭하면 이미지가 내려가지 않고 다른 카드 이미지가 활성화돼서 바꿨습니다.

 

 

짜잔...

 

위의 구현은 반응형이라기 보단 어떤 화면에서도 가운데 배치하게 이미지를 적용했습니다.

반응형을 조금 더 손봐야 할 것 같습니다...

 

카드 이미지와 게임 데이터를 이용하다 보니 CSS에 더 손을 많이 봐야 할 것 같습니다.

단순히 색만 입혀봤는데 너무 처참해서 바로 뺐습니다...