회원 주소록 페이지를 만들고 싶어요 채택완료

<?php
include_once('../common.php');

// 회원만 접근 가능하도록 제한
if (!$is_member) {
  alert('회원만 이용 가능합니다.', G5_BBS_URL.'/login.php?url='.urlencode(G5_URL.'/memberlist.php'));
}

// 페이지 제목 설정
$g5['title'] = '회원 주소록';
include_once(G5_PATH.'/head.php');

// 페이지네이션 설정
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$rows = 10; // 한 페이지에 표시할 회원 수
$from_record = ($page - 1) * $rows;

// 검색 조건
$sfl = isset($_GET['sfl']) ? trim($_GET['sfl']) : '';
$stx = isset($_GET['stx']) ? trim($_GET['stx']) : '';

// 검색 쿼리 구성
$sql_search = "";
if ($stx) {
  $sql_search = " and ({$sfl} like '%{$stx}%') ";
}

// 총 회원 수 계산
$sql = " select count(*) as cnt from {$g5['member_table']} 
         where mb_leave_date = '' and mb_level > 1 {$sql_search} ";
$row = sql_fetch($sql);
$total_count = $row['cnt'];

// 회원 목록 쿼리
$sql = " select * from {$g5['member_table']}
         where mb_leave_date = '' and mb_level > 1 {$sql_search}
         order by mb_datetime desc
         limit {$from_record}, {$rows} ";
$result = sql_query($sql);

// 페이징 처리
$total_page = ceil($total_count / $rows);
?>

<div class="member-list-container">
  <h2 class="member-list-title">회원 주소록</h2>
  
  <!-- 검색 폼 -->
  <div class="member-search-wrap">
    <form name="fsearch" method="get" class="member-search">
      <select name="sfl" id="sfl">
        <option value="mb_nick" <?php echo ($sfl=='mb_nick')?'selected':''; ?>>닉네임</option>
        <option value="mb_name" <?php echo ($sfl=='mb_name')?'selected':''; ?>>이름</option>
      </select>
      <input type="text" name="stx" value="<?php echo $stx; ?>" class="search-input" placeholder="검색어 입력">
      <button type="submit" class="search-button">검색</button>
    </form>
  </div>
  
  <!-- 회원 목록 -->
  <div class="member-list">
    <table class="member-table">
      <thead>
        <tr>
          <th>프로필</th>
          <th>닉네임</th>
          <th>가입일</th>
          <th>상세정보</th>
        </tr>
      </thead>
      <tbody>
      <?php for ($i=0; $row=sql_fetch_array($result); $i++) { ?>
        <tr>
          <td class="profile-img"><?php echo get_member_profile_img($row['mb_id']); ?></td>
          <td class="td-name"><?php echo $row['mb_nick']; ?></td>
          <td class="td-date"><?php echo substr($row['mb_datetime'], 0, 10); ?></td>
          <td class="td-view">
            <button type="button" class="member-view-btn" 
                    onclick="viewMemberInfo('<?php echo $row['mb_id']; ?>')">상세보기</button>
          </td>
        </tr>
      <?php } ?>
      <?php if ($i == 0) { ?>
        <tr><td colspan="4" class="empty_table">등록된 회원이 없습니다.</td></tr>
      <?php } ?>
      </tbody>
    </table>
  </div>
  
  <!-- 페이지네이션 -->
  <div class="pagination">
    <?php echo get_paging(G5_IS_MOBILE ? $config['cf_mobile_pages'] : $config['cf_write_pages'], $page, $total_page, '?'.$qstr.'&amp;page='); ?>
  </div>
</div>

<!-- 회원 상세정보 모달 -->
<div id="memberInfoModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <div id="memberInfoContent"></div>
  </div>
</div>

<script>
$(document).ready(function() {
  // 모달 관련 변수
  var $modal = $("#memberInfoModal");
  var $modalContent = $("#memberInfoContent");
  
  // 모달 닫기 버튼 클릭 이벤트
  $(".close").click(function() {
    $modal.fadeOut(200);
  });
  
  // 모달 외부 클릭시 닫기 이벤트
  $(window).click(function(event) {
    if ($(event.target).is($modal)) {
      $modal.fadeOut(200);
    }
  });
});

// 회원 정보 보기 함수 (전역 함수로 유지)
function viewMemberInfo(mb_id) {
  // AJAX로 회원 정보 가져오기
  $.ajax({
    url: 'ajax.member_info.php',
    type: 'POST',
    data: { mb_id: mb_id },
    dataType: 'json',
    success: function(data) {
      if (data.error) {
        alert(data.error);
        return;
      }
      
      // 회원 정보 표시
      var html = '<div class="member-detail">' +
                 '<div class="member-profile">' + data.mb_profile_img + '</div>' +
                 '<h3>' + data.mb_nick + ' (' + data.mb_name + ')</h3>' +
                 '<table class="member-info-table">' +
                 '<tr><th>이메일</th><td>' + (data.mb_email || '미입력') + '</td></tr>' +
                 '<tr><th>휴대폰</th><td>' + (data.mb_hp || '미입력') + '</td></tr>' +
                 '<tr><th>가입일</th><td>' + data.mb_datetime + '</td></tr>' +
                 '</table>' +
                 '</div>';
      
      $("#memberInfoContent").html(html);
      $("#memberInfoModal").fadeIn(200);
    },
    error: function(xhr, status, error) {
      alert("오류가 발생했습니다: " + error);
    }
  });
}
</script>

<style>
/* 회원 목록 스타일 */
.member-list-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.member-list-title {
  text-align: center;
  margin-bottom: 30px;
}

.member-search-wrap {
  margin-bottom: 20px;
  text-align: right;
}

.member-search select,
.member-search input[type="text"],
.member-search button {
  padding: 8px;
  border: 1px solid #ddd;
}

.member-table {
  width: 100%;
  border-collapse: collapse;
}

.member-table th,
.member-table td {
  padding: 12px;
  text-align: center;
  border: 1px solid #e1e1e1;
}

.member-table th {
  background-color: #f8f8f8;
  font-weight: bold;
}

.profile-img img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.member-view-btn {
  padding: 5px 10px;
  background-color: #4a89dc;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.member-view-btn:hover {
  background-color: #3a70b8;
}

/* 모달 스타일 */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  border-radius: 5px;
  position: relative;
}

.close {
  position: absolute;
  right: 15px;
  top: 10px;
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover {
  color: black;
}

.member-detail {
  text-align: center;
}

.member-profile {
  margin-bottom: 15px;
}

.member-profile img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

.member-info-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.member-info-table th,
.member-info-table td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.member-info-table th {
  width: 30%;
  background-color: #f8f8f8;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>

<?php
include_once(G5_PATH.'/tail.php');
?>

<?php
include_once('../common.php');

// 회원만 이용 가능
if (!$is_member) {
  die(json_encode(array('error' => '회원만 이용 가능합니다.')));
}

// 파라미터 검증
$mb_id = isset($_POST['mb_id']) ? clean_xss_tags(trim($_POST['mb_id'])) : '';
if (!$mb_id) {
  die(json_encode(array('error' => '회원 정보가 존재하지 않습니다.')));
}

// 회원 정보 조회
$sql = " select mb_id, mb_name, mb_nick, mb_email, mb_homepage, mb_tel, mb_hp, 
                mb_point, mb_datetime, mb_level
         from {$g5['member_table']}
         where mb_id = '{$mb_id}' ";
$mb = sql_fetch($sql);

if (!$mb['mb_id']) {
  die(json_encode(array('error' => '존재하지 않는 회원입니다.')));
}

// 프로필 이미지
$mb_profile_img = get_member_profile_img($mb_id);

// 실제 사용시 개인정보 보호 설정 적용 필요
$data = array(
  'mb_id' => $mb['mb_id'],
  'mb_name' => $mb['mb_name'],
  'mb_nick' => $mb['mb_nick'],
  'mb_email' => $mb['mb_email'],
  'mb_hp' => $mb['mb_hp'],
  'mb_tel' => $mb['mb_tel'],
  'mb_level' => $mb['mb_level'],
  'mb_datetime' => substr($mb['mb_datetime'], 0, 10),
  'mb_profile_img' => $mb_profile_img
);

echo json_encode($data);
?>