[MBTI-Test PJ_Day 1] Tailwind 공통 컴포넌트 스타일링

 

2025.02.20 (목) Works

 

---

초기 설정을 위해 파일 구조 및 컴포넌트를 나누었다.

이번 개인 과제는 요구 조건이 아주 상세하게 나와있어서 꼼꼼히 살펴보고 적용해야 한다.

폴더 구조도 안내 사항과 같이 적용해보았다.

 

src/
├── components/
├── pages/
├── api/
├── data/
├── utils/
├── App.jsx
├── main.jsx
└── index.css

1. components: 재사용 가능한 UI 컴포넌트
2. pages: 각 페이지 컴포넌트 (Home, Login, Signup, Profile, TestPage, TestResultPage 등)
3. api: 서버와 통신하는 로직 (auth.js, testResults.js 등)
4. data: 정적 데이터 (questions.js - MBTI 질문 데이터)
5. utils: 공통으로 사용하는 유틸리티 로직 (mbtiCalculator.js 등)

 

 

요구 사항 중 'AuthForm' 공통 컴포넌트를 사용하여 폼 스타일 적용해야 한다.

 

 

 

두 입력 폼에서 공통 컴포넌트를 사용해야 한다.

처음에는 입력 폼 전체를 공통으로 두었다.

하지만 추가된 인풋과 변경된 부분들을 어떻게 수정해야 좋을 지 헷갈렸다.

 

내가 구현한 방법은 아래와 같다.

 

Tailwind 공통 컴포넌트 스타일링

 

📍공통 컴포넌트 생성(AuthForm.jsx)

 

📍완전히 같은 부분만 공통으로 두기(아이디와 비밀번호 인풋창)

• AuthForm 컴포넌트는 입력 필드만 관리하고, 버튼은 개별 페이지에서 추가하는 것이 더 유연하고 확장성이 좋다.
• 이렇게 하면 AuthForm을 재사용하면서 페이지마다 다른 버튼을 적용할 수 있다.

📍공통 컴포넌트의 인자는 children, className

// AuthForm.jsx

const AuthForm = ({ children, className }) => {
...

 

📍공통 컴포넌트 : 추가 되는 부분에 ${children} / 공통 스타일 뒤에 백틱을 사용하여 ${className} 추가 입력

// AuthForm.jsx

 <form className={`p-5 mx-auto w-[350px] bg-gray-200 rounded-lg ${className}`}>
   {children}
 </form>

 

📍적용 페이지 : 공통 컴포넌트 열고 닫는 태그 사이에 추가 부분 입력 / 추가로 변경할 내용만 작성

// Login.jsx

<AuthForm mode="login" onSubmit={handleLogin} className="h-[250px]">
          <button
            type="submit"
            className="p-3 m-3 w-[270px] text-white bg-violet-400 rounded-md hover:bg-violet-300"
          >
            로그인
          </button>
</AuthForm>