현재 웹진 템플릿 파일들에 CSS 스타일, JS 스크립트, 그리고 인라인 이벤트 핸들러(onclick 등)가 혼재되어 있어 소스코드 가독성이 떨어집니다. 이를 분리하고 구조화하는 작업을 진행하겠습니다.
User Review Required
- 스크립트 및 스타일 파일을 별도 에셋 폴더(
assets/css/,assets/js/)로 분리합니다. - HTML 소스보기 시 깔끔하게 보이도록 모든 템플릿 파일의 들여쓰기(Indentation)를 다시 포맷팅합니다.
-
onclick,style="..."등 인라인 코드를 완벽하게 제거하고 별도 파일로 위임합니다. - PHP 변수가 사용된 JS 영역은 안전하게
data-*속성이나 전역window.AppData변수로 최소화하여 분리합니다.
Proposed Changes
Assets (CSS / JS)
[NEW] assets/css/style.css
-
layout_header.php,layout_footer.php,index.php,view.php,main_slide.php등에 있는 모든<style>내용을 통합합니다. - 인라인
style="..."속성들을 클래스로 변환하여 이 파일에 추가합니다.
[NEW] assets/js/main.js
- 채팅 위젯, 슬라이더, 팝업, 햄버거 메뉴 토글, 프로필 갤러리 슬라이더 등 모든
<script>로직을 통합합니다. - 인라인 이벤트 핸들러 (
onclick="toggleMenu()",onclick="toggleMessenger()"등)를 제거하고addEventListener기반으로 변경합니다.
Template Files
[MODIFY] templates/posts/layout_header.php
-
<style>블록 삭제 후<link rel="stylesheet" href="<?= asset('/assets/css/style.css') ?>">추가. - 인라인 스타일 및 스크립트 구문 완전 제거.
- 소스 들여쓰기(Indentation) 규칙 탭/스페이스 포맷팅.
[MODIFY] templates/posts/layout_footer.php
-
<style>및 메신저/팝업<script>블록 삭제 후<script src="<?= asset('/assets/js/main.js') ?>"></script>추가. -
onclick등 인라인 이벤트 핸들러 완전 제거 (예:onclick="closePopupToday()"-> 클래스/ID 바인딩). - 소스 들여쓰기 정돈.
[MODIFY] templates/posts/index.php
- 메인 레이아웃 및 갤러리 스킨용
<style>및<script>블록 외부 파일로 분리. - 소스 들여쓰기 정돈.
[MODIFY] templates/posts/view.php
- 프로필 슬라이더 및 카카오톡/페이스북 공유 기능 등
<script>블록 외부 파일로 분리. - PHP 변수(카카오톡 API 키, 썸네일 URL 등)는 별도의
<script>데이터 변수 블록이나 HTMLdata-속성으로 안전하게 넘기기. - 인라인 스타일 완전 제거 및 들여쓰기.
[MODIFY] templates/posts/main_slide.php
- 슬라이드 관련
<style>및 동작 로직<script>분리.
Verification Plan
Manual Verification
- 웹 브라우저에서
http://localhost/xzine.kr/에 접속하여 화면 디자인이 깨지지 않고 동일하게 나오는지 확인합니다. - 페이지 소스 보기를 통해
<style>이나<script>블록이style.css와main.js파일 하나로 깔끔하게 정리되었는지 확인합니다. - 햄버거 메뉴, 메신저 토글, 슬라이드 넘기기, 공유 버튼, 팝업 닫기 등의 기능이 정상적으로 동작하는지 확인합니다.
- 소스보기 들여쓰기가 깔끔한지 확인합니다.
댓글 (0)
댓글 쓰기