[TASK] 포트폴리오 페이지 inline style을 Tailwind CSS로 리팩토링

[scs0209]

문제 설명

포트폴리오 페이지의 로딩 오버레이들이 inline style을 사용하고 있어 프로젝트의 Tailwind CSS 컨벤션과 일관성이 없음

현재 상황

• EXIT 로딩 오버레이와 WORKS 로딩 오버레이에서 대량의 inline style 사용
• 134줄의 inline style 코드가 존재
• Tailwind CSS를 사용하는 프로젝트 전체 컨벤션과 불일치

개선 내용

• 모든 inline style을 Tailwind CSS 클래스로 변경
• 동적 값(width: ${progress}%)만 inline style로 유지
• 코드 가독성과 유지보수성 향상

주요 변경사항

• style={{ fontSize: '32px', fontWeight: 'bold' }} → className='text-3xl font-bold'
• style={{ background: 'rgba(0,0,0,0.95)' }} → className='bg-black/95'
• style={{ border: '2px solid #00ffff' }} → className='border-2 border-cyan-400'
• style={{ boxShadow: '0 0 30px rgba(0,255,255,0.5)' }} → className='shadow-[0_0_30px_rgba(0,255,255,0.5)]'

결과

• 134줄의 inline style 코드가 16줄로 감소
• 프로젝트 전체 Tailwind CSS 컨벤션 통일
• 코드 일관성 및 유지보수성 향상

관련 파일

• app/(public)/portfolio/page.tsx

커밋 참조

• refactor: inline style을 Tailwind CSS로 변경 (0a3309f)