TailwindCSS 모바일 테마 + Tailwind 관리자 모드

Tailwind CSS를 기반으로 현대적이고 모바일중심 디자인으로 개선한 그누보드5테마입니다. 그리고 관리자 모드도 TailwindCSS를 적용하였습니다.

? 주요 특징

• Tailwind CSS 4.0 기반의 현대적 디자인
• 모바일 중심 레이아웃
• 깔끔하고 미니멀한 UI/UX
• 접근성 고려한 디자인
• 빠른 로딩 속도
• 커스터마이징 용이

? 파일 구조

tailwind-theme/
├── adm/
│   ├── config.php 
│   └── ....   
├── adm/css/
│   ├── admin.css         # 커스터마이징 추가 CSS
│   └── tailwind.css        # 빌드된 Tailwind CSS
├── adm/sms_admin/
│   └── ....    
│
├── theme/tailwindm-theme/css/
│   ├── mobile.css         # 커스터마이징 추가 CSS
│   └── tailwind.css        # 빌드된 Tailwind CSS
├── theme/tailwindm-theme/mobile/
│   ├── index.php
│   └── ...
├── theme/tailwindm-theme/mobile/skin/                   # 스킨 파일들
│   ├── board/basic/        # 게시판 스킨
│   ├── latest/basic/       # 최신글 스킨
│   ├── outlogin/basic/     # 외부 로그인 스킨
│   ├── poll/basic/         # 설문조사 스킨
│   ├── visit/basic/        # 방문자 통계 스킨
│   └── popular/basic/      # 인기검색어 스킨
│   └── ....                # ...
├── theme/tailwindm-theme/
└── head.sub.php            # 공통 헤더 (Tailwind CSS 포함)

? 설치 방법

1. 관리자 설정
   • 관리자 페이지 접속
   • 환경설정 > 테마설정
   • 테마를 "tailwind-themem"로 선택
2. 캐시 클리어
   • 브라우저 캐시 삭제
   • GNUboard5 캐시 삭제 (필요시)

? 주요 변경사항

1. CSS 정리

• 기존 CSS 파일들을 최소화하여 Tailwind CSS와의 충돌 방지
• 필수적인 스타일만 유지
• 모든 스타일링을 Tailwind CSS 클래스로 대체
• 별도 모바일 CSS 파일 제거 (Tailwind CSS가 통합 반응형 처리)

2. 레이아웃 개선

• Flexbox와 Grid를 활용한 현대적 레이아웃
• 반응형 사이드바 구현
• 모바일 우선 디자인

3. 컴포넌트 현대화

• 카드 기반 디자인
• 그림자와 둥근 모서리 적용
• 호버 효과와 트랜지션 추가

? 사용된 Tailwind CSS 클래스

? 모바일 중심 디자인

브레이크포인트

• 모바일: < 768px
• 태블릿: 768px - 1024px
• 데스크톱: > 1024px

주요 반응형 기능

• 모바일: 세로 레이아웃, 햄버거 메뉴
• 태블릿: 2-3열 그리드 레이아웃
• 데스크톱: 사이드바 포함 전체 레이아웃

반응형 클래스 사용법

<div class="text-sm md:text-base lg:text-lg">반응형 텍스트</div>
<div class="hidden md:block">태블릿 이상에서만 표시</div>
<div class="lg:hidden">모바일/태블릿에서만 표시</div>
            

? 커스터마이징

색상 변경

/* tailwind.config.js에서 테마 색상 수정 */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6',
        secondary: '#6B7280',
      }
    }
  }
}
            

레이아웃 수정

• head.php: 헤더 및 네비게이션
• tail.php: 푸터 및 사이드바
• index.php: 메인 콘텐츠 레이아웃

스킨 수정

• skin/latest/basic/: 최신글 스킨
• skin/outlogin/basic/: 로그인 스킨
• skin/poll/basic/: 설문조사 스킨

? 문제 해결

화면이 깨지는 경우

1. CSS 충돌 확인
   • 기존 CSS 파일이 Tailwind CSS와 충돌하지 않는지 확인
   • css/default.css 확인
2. Tailwind CSS 로딩 확인
   • head.sub.php에서 Tailwind CSS가 제대로 로딩되는지 확인
   • 브라우저 개발자 도구에서 네트워크 탭 확인
3. 캐시 클리어
   • 브라우저 캐시 완전 삭제
   • Ctrl+F5로 강제 새로고침

반응형 문제가 있는 경우

• Tailwind CSS 반응형 클래스가 올바르게 적용되었는지 확인
• 브라우저 개발자 도구에서 반응형 모드로 테스트

브라우저 지원

• Chrome: 90+
• Firefox: 88+
• Safari: 14+
• Edge: 90+
• 모바일 브라우저: iOS Safari 14+, Chrome Mobile 90+

관리자 테스트

• 관리자 아이디: admin
• 관리자 암호: admin
• 수정/삭제 기능은 테스트에서 제한됩니다.

? 라이선스

이 테마는 1Domain 1Copy의 라이선스를 따릅니다.

? 지원

문제가 발생하거나 개선사항이 있으시면 https://365ok.co.kr 1:1문의를 이용해 주세요.

참고: 이 테마는 GNUboard5의 기본 기능을 모두 유지하면서 디자인만 개선한 것입니다. 모든 기존 기능이 정상적으로 작동하며, Tailwind CSS의 통합 모바일중심 시스템으로 모든 디바이스에서 최적화된 경험을 제공합니다.