RARRIT

기억을 너무 믿지 말자

:ledger: [4차] Next.js 리그오브레전드 정보 프로젝트

mobile-page

:rocket: 베포 링크

:one: 프로젝트 설명

NextJS와 TypeScript을 사용하고 Riot API를 활용하여 리그오브레전드의 다양한 데이터를 조회하고 이를 기반으로 생성한 프로젝트 입니다.

:two: STACK

Next JS TypeScript React Query TailwindCSS JavaScript GitHub

:three: 프로젝트 구조

  • 4차에선 전체 페이지 반응형 작업을 진행했습니다.
전체 프로젝트 구조 📦app
┣ 📂_components
┃ ┣ 📂champions
┃ ┃ ┣ 📜ChampionCard.tsx
┃ ┃ ┗ 📜ChampionList.tsx
┃ ┗ 📂items
┃ ┃ ┣ 📜itemCard.tsx
┃ ┃ ┣ 📜itemDesc.tsx
┃ ┃ ┗ 📜itemList.tsx
┣ 📂api
┃ ┣ 📂rotation
┃ ┃ ┗ 📜route.ts
┃ ┗ 📜apiKey.ts
┣ 📂champions
┃ ┣ 📂[id]
┃ ┃ ┗ 📜page.tsx
┃ ┣ 📜layout.tsx
┃ ┣ 📜loading.tsx
┃ ┗ 📜page.tsx
┣ 📂fonts
┃ ┣ 📜GeistMonoVF.woff
┃ ┗ 📜GeistVF.woff
┣ 📂items
┃ ┣ 📜loading.tsx
┃ ┗ 📜page.tsx
┣ 📂rotation
┃ ┣ 📜loading.tsx
┃ ┗ 📜page.tsx
┣ 📂types
┃ ┣ 📜Champion.ts
┃ ┣ 📜ChampionRotation.ts
┃ ┗ 📜Item.ts
┣ 📂utils
┃ ┣ 📜riotApi.ts
┃ ┗ 📜serverApi.ts
┣ 📜favicon.ico
┣ 📜global-error.tsx
┣ 📜globals.css
┣ 📜layout.tsx
┣ 📜loading.tsx
┗ 📜page.tsx

:four: 작업 목록

:pushpin: 4-1) 반응형 작업 세팅

  1. 반응형 작업을 처음으로 해보면서 min-width로 세팅되어 있던걸 max로 변경하고, 브레이크 포인트를 지정해주었음
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        lol01: "url('/assets/images/bg-lol-01.jpg')",
        lol02: "url('/assets/images/bg-lol-02.jpg')",
        lol03: "url('/assets/images/bg-lol-03.jpg')",
        lol04: "url('/assets/images/bg-lol-04.jpg')",        
        icon01: "url('/assets/images/icon-logo.png')",
        loading: "url('/assets/images/loading.gif')",
      },
      boxShadow: {
        'custom': '0.5px 0.5px 10px rgba(0, 0, 0, 0.8)',
        'custom-white': '0.5px 0.5px 10px rgba(255, 255, 255, 0.8)'        
      },      
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
      screens: {
        'max-n': {'max': '1460px'}, 
        'max-t': {'max': '1260px'}, 
        'max-m': {'max': '600px'},  
        'max-sm': {'max': '400px'},  
      },
    },
  },
  plugins: [],
};
export default config;

:pushpin: 4-2) 전체 반응형 작업

초기 tailwind.config.ts 에서 screen 값을 세팅해주고 메인, 모든 리스트 페이지에 반응형 작업을 해주었다.

:fire: 회고

이전에 StyledComponent를 사용했을 때 tailwind보다 더 편리하다고 생각했는데, 테일윈드가 손에 익기 시작하면서 테일윈드도 많이 알수록 편리하다고 생각이 들고있다.

:pushpin: Keep - 현재 만족하고 있는 부분

비교적 레이아웃이 쉬운 편이라 반응형 작업이 어렵진 않았지만, 이후에 작업할 때 조금 더 빠르게 작업가능할 것 같다.

:pushpin: Problem - 불편하게 느끼는 부분

아직 테일윈드에 대해서 모르는것이 많은 것 같고 속도는 아직 느리다.

:pushpin: Try - problem에 대한 해결책, 당장 실행 가능한 것

앞으로 계속 사용해보면서 나만의 스타일을 찾으면 속도도 빨라질 것 같다.

참고