0
웹에이전시 전문 프리랜서 개발자 프리터코더입니다.
이번 챕터에서는 웹사이트 개발 과정 중 사용자사이트 메뉴 탭 처리하기를 작업합니다.
<사용자사이트 메뉴 탭 처리하기> 글은 웹에이전시의 의뢰를 받아서 프리터코더가 웹사이트를 개발하는 과정을 가상으로 보여주는 웹에이전시의 개발자들은 어떻게 일하나 시리즈 중 하나입니다.
1
메뉴 탭은 컨텐츠는 다르지만 구성은 똑같습니다. 이럴 때는 공통 파일을 분리해서 하나만 수정하면 모두 동일하게 수정할 수 있도록 분리하는 것이 개발자의 국롤입니다.
공통 파일을 /menu/_body.php 파일로 분리합니다.
2
/menu/noodle/_body.php 는 /menu/_body.php 를 호출하는 형식으로 바뀝니다.
3
메뉴에서 서로 달라지는 것은 카테고리 뿐이고, 각 카테고리에 따라 나오는 데이터가 다를 뿐 나머지는 동일합니다. 따라서 개별 메뉴에서 카테고리 값을 정하고, 그걸 공통 파일에서 사용하는 형식으로 개발합니다.
$category_id = 'C001';$row = query_row("select * from menu_item where visible_yn = 'Y' and category_id = '$category_id' and best_menu_yn='Y'");$menu_item_list = query("select * from menu_item where visible_yn='Y' and category_id = '$category_id' order by sort_order asc");4
탭이 선택되었다는 표시도 바뀌어야겠죠. on 클래스가 추가되면 탭이 선택된 것입니다.
<ul class="subTab__items">
<li class="subTab__item <?= $category_id == "C001" ? "on" : "" ?>"><a href="/menu/noodle" class="subTab__link">쌀국수</a></li>
<li class="subTab__item <?= $category_id == "C002" ? "on" : "" ?>"><a href="/menu/food" class="subTab__link">식사</a></li>
<li class="subTab__item <?= $category_id == "C003" ? "on" : "" ?>"><a href="/menu/side" class="subTab__link">사이드</a></li>
</ul>퍼블리셔 팁
on으로 활성화된 탭을 표기하는 건 일반적인 퍼블리싱 규칙인 것 알고 있습니다만, 그래도 혹시나 싶으니 알려주시면 고맙겠습니다.
5
복붙의 시간입니다. /menu/noodle 폴더를 복사해서 /menu/food , /menu/side 폴더를 만들고 각각 카테고리를 설정합니다.
$category_id = 'C002';$category_id = 'C003';6
그런데, 식사 및 사이드 메뉴에서 탭이 클릭이 안됩니다!
원래는 쌀국수 탭처럼 클릭이 되어야 하는데요.
7
이럴때는 당황하지 말고 혹시 뭔가 태그가 깨졌나부터 확인해 봅니다.
8
이상이 없습니다. 그렇다면 메뉴 데이터를 입력해 봅니다.
9
클릭이 됩니다.
가끔 퍼블리싱이, 데이터가 없으면 정상적으로 안나오는 경우가 있습니다. 그럴때는 데이터를 넣고 테스트해 봅니다.
퍼블리셔 팁
목록을 만드실 때, 목록에 데이터가 있을 때만 상정하지 마시고, 목록에 데이터가 없을 때도 가정해서 만들어 주세요.
사용자사이트라는게, 항상 데이터가 있다고 단정할 수는 없으니까요.
