[UI/UX] react+tailwind

React 프로젝트에 TailwindCSS와 Figma에서 생성된 코드를 적용하고 자산을 올바르게 조직하는 방법을 설명해드리겠습니다. 😊

1단계: React 프로젝트에 TailwindCSS 설치

먼저, React 프로젝트에 TailwindCSS를 설정해야 합니다.

1. TailwindCSS 초기화:
   아직 React 프로젝트를 생성하지 않았다면, 먼저 프로젝트를 생성합니다:

   npx create-react-app my-project
   cd my-project

   그런 다음, TailwindCSS를 설치합니다:

   npm install -D tailwindcss
   npx tailwindcss init

2. TailwindCSS 구성:
   tailwind.config.js 파일에서 모든 템플릿 파일의 경로를 추가합니다:

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

3. CSS에 Tailwind 지시어 추가:
   src/index.css 파일에서 Tailwind 지시어를 포함시킵니다:

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

2단계: Figma 디자인을 위한 컴포넌트 생성

Figma에서 제공된 JSX + Tailwind 코드를 React 컴포넌트 파일에 넣어야 합니다.

1. 새 컴포넌트 생성:
   src/components 디렉토리에 새로운 파일을 생성합니다 (디렉토리가 없다면 먼저 생성합니다):

   mkdir src/components
   touch src/components/MarketPage.js

   그런 다음, JSX + TailwindCSS 코드를 이 파일에 붙여넣습니다:

   import React from 'react';
   
   const MarketPage = () => {
     return (
       // 여기에서 JSX 코드를 붙여넣습니다
       <div className="flex flex-col justify-start items-start w-[1280px] bg-white">
         {/* 나머지 JSX 코드 */}
       </div>
     );
   };
   
   export default MarketPage;

2. 컴포넌트를 앱에서 사용:
   src/App.js 파일에서 이 컴포넌트를 불러와서 사용합니다:

   import React from 'react';
   import MarketPage from './components/MarketPage';
   
   function App() {
     return (
       <div className="App">
         <MarketPage />
       </div>
     );
   }
   
   export default App;

3단계: 자산 파일 처리

Figma에서 추출한 자산(이미지)을 처리하는 방법은 다음과 같습니다:

1. 자산 다운로드 및 조직:
   Figma 디자인에서 이미지를 다운로드하고 프로젝트에 저장합니다:

   • src 디렉토리에 assets 폴더를 생성합니다:

     mkdir src/assets

   • 다운로드한 이미지를 이 assets 폴더에 저장합니다.

2. JSX에서 이미지 참조:
   JSX 코드에서 이미지 경로가 올바른 위치를 가리키도록 합니다. 예를 들어:

   <div className="flex-grow-0 flex-shrink-0 w-10 h-10 relative overflow-hidden rounded-[20px] bg-[url('/src/assets/depth-4-frame-1.png')] bg-cover bg-no-repeat bg-center" />

   JSX 코드 내 bg-[url('...')] 부분을 src/assets 디렉토리의 이미지로 변경합니다.

3. 경로 업데이트:
   JSX 코드에서 모든 이미지 경로가 src/assets 디렉토리의 파일 이름 및 위치와 일치하는지 확인합니다.

4단계: 프로젝트 실행

마지막으로, React 프로젝트를 실행하여 결과를 확인합니다:

npm start

이제 TailwindCSS를 적용한 상태로 Figma에서 디자인한 레이아웃과 이미지가 React 앱에서 표시될 것입니다!