<?php
if(!$member['mb_id']) alert('로그인후 이용해주세요', G5_BBS_URL.'/login.php'); // 로그인안하면 로그인페이지로
include_once(G5_LIB_PATH.'/latest.lib.php');

// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$member_skin_url.'/style.css">', 0);

// 현재 URL의 mb_id 파라미터 값을 가져옵니다.
$current_mb_id = isset($_GET['mb_id']) ? $_GET['mb_id'] : '';

// 회원의 mb_id 값
$member_mb_id = $member['mb_id'];

// mb_id가 일치하지 않는 경우
if ($current_mb_id !== $member_mb_id) {
    // 메시지를 출력합니다.
    echo "<script>alert('타인의 개인 프로필 탭은 확인할 수 없습니다.');</script>";
    
    // 도메인으로 리다이렉트합니다.
    echo "<script>window.location.href = <?php echo G5_URL ?>;</script>";
    }
?>
<style>
body {
background-color:#fff !important
}
.top_menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 15px;
  z-index: 999; /* 다른 요소들 위에 올려놓기 위해 */
}

.top_menu #home {
  position: absolute;
  left: 20px;
  font-size: 20px;
  color: #4a4a4a;
}

.top_menu .logo {
  text-align:center
}

.top_menu .logo img {
  width: auto;
  height: 30px;
}

.top_menu .member {
  position: absolute;
  right: 20px;
  top:10px
}

.top_menu .member img {
  width: 40px;
  height: 40px;
  border-radius:50%
}

.modal-content {
  max-height: 80vh; /* 모달의 최대 높이를 80%로 설정 */
  overflow: hidden; /* 기본적으로 overflow 숨김 */
  position: relative; /* 자식 요소들에 대한 기준 설정 */
}

.profile-menu-container {
  position: fixed; /* 고정 위치 설정 */
  top: 60px; /* 상단에서의 거리 (모달 헤더 높이에 따라 조정) */
  left: 0;
  right: 0;
  bottom: 0; /* 하단까지 확장 */
  max-height: calc(100vh); /* 모달 내용의 최대 높이를 조정 */
  overflow-y: auto; /* 세로 스크롤 가능 */
  padding: 20px; /* 여백 추가 */
  background-color: white; /* 배경색 설정 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 그림자 추가 */
}

.profile-menu-category {
  margin-bottom: 30px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding:20px;
  border-radius:10px;
  scroll-snap-align: start;
}

.profile-menu-category h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333; /* 인스타그램 스타일 추가 */
}

.profile-menu-item a {
  display: block;
  background-color: #fff;
  color: #333;
  padding: 12px;
  border-radius: 10px; /* 인스타그램 스타일 추가 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.3s ease; /* 인스타그램 스타일 추가 */
}

.profile-menu-item a:hover {
  background-color: #f2f2f2;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* 인스타그램 스타일 추가 */
}

.profile-menu-item a span {
  display: inline-block;
  vertical-align: middle;
}

.profile-menu-item a .twitter-btn {
  margin-right: 10px;
}

  .profile-menu-category h3 {
    font-size: 16px;
  }
.profile_hd {
background-color:#fff
}
</style>

<div class="profile_hd"><!--1-->

<div class="hd_menu"><!--2-->

    <div class="logo"><!--로고-->
        <a href="<?php echo G5_URL ?>">
            <img src="<?php echo G5_THEME_IMG_URL ?>/logo.png" alt="<?php echo $config['cf_title']; ?>">
        </a>
    </div>
    	<!-- page title{ -->
	<div class="title">
		<span style="font-weight:520;font-size:20px;color:#2a2a2a;">내 프로필</span>
	</div>
    <div class="menu-items"> <!-- 1:1 채팅과 개인 메뉴를 가로로 배치 -->
        <span class="send_memo"><!--1:1채팅-->
            <a href="<?php echo G5_BBS_URL ?>/memo.php">
                <i class="fa fa-send-o" style="font-size:25px;color:#2a2a2a;margin-right:5px"></i>
            </a>
        </span>
<span class="personal-menu"><!-- 개인 메뉴{ -->
    <i class="fa fa-lock" style="font-size:25px;color:#2a2a2a"></i>
</span>

<div id="personal-modal" class="modal" style="display: none;background-color:#fff;top:-15px">
    <div class="modal-content">
<span class="close-button" id="personal-home"><i class="fa fa-arrow-left" style="color:#3a3a3a;font-size:20px"></i></span>
</div>
<div class="profile-menu-container">
  <div class="profile-menu-category">
    <h3>활동 내역</h3>
    <div class="profile-menu-item">
      <a href="<?php echo G5_BBS_URL ?>/scrap.php" class="twitter-btn">
        <i class="fa fa-bookmark-o"></i>
        <span>저장 게시물</span>
      </a>
      <a href="<?php echo G5_BBS_URL ?>/memo_history.php" class="twitter-btn">
        <i class="fa fa-comments-o"></i>
        <span>대화 내역</span>
      </a>
      <a href="<?php echo G5_BBS_URL ?>/follow.php?mb_id=<?php echo $member['mb_id'];?>" class="twitter-btn">
        <i class="fa fa-heart-o"></i>
        <span>팔로우&팔로잉</span>
      </a>
      <a href="<?php echo G5_BBS_URL ?>/memo_form.php?me_recv_mb_id=alarm" class="twitter-btn">
        <i class="fa fa-at"></i>
        <span>언급 내역</span>
      </a>
      <a href="<?php echo G5_BBS_URL ?>/memo_form.php?me_recv_mb_id=<?php echo $member['mb_id'];?>" class="twitter-btn">
        <i class="fa fa-sticky-note-o"></i>
        <span>메모</span>
      </a>
    </div>
  </div>
  <div class="profile-menu-category">
    <h3>계정 및 개인정보</h3>
    <div class="profile-menu-item">
      <a href="<?php echo G5_BBS_URL ?>/content.php?co_id=provision" class="twitter-btn">
        <i class="fa fa-file-text-o"></i>
        <span>서비스이용약관</span>
      </a>
      <a href="<?php echo G5_BBS_URL ?>/content.php?co_id=provision" class="twitter-btn">
        <i class="fa fa-lock"></i>
        <span>개인정보처리방침</span>
      </a>
      <a href="<?php echo G5_BBS_URL ?>/profile_security.php?url=<?php echo G5_BBS_URL ?>/profile_form.php" class="twitter-btn">
        <i class="fa fa-key"></i>
        <span>비밀번호 수정</span>
      </a>
      <a href="<?php echo G5_BBS_URL ?>/profile_security.php?url=<?php echo G5_BBS_URL ?>/profile_form.php" class="twitter-btn">
        <i class="fa fa-user"></i>
        <span>프로필 수정</span>
      </a>
      <a href="<?php echo G5_BBS_URL ?>/logout.php" class="twitter-btn">
        <i class="fa fa-sign-out"></i>
        <span>로그아웃</span>
      </a>
    </div>
  </div>

<!-- 프로필 생성일{ -->
<div style="margin-left:10px;font-size:13px;color:#3c3c3c;font-weight:510;margin-top:15px;margin-bottom:20px">
프로필 생성일: <?php
// 원래의 datetime 값
$datetime = $mb['mb_datetime'];
// datetime 값을 DateTime 객체로 변환
$date = new DateTime($datetime);
// 년, 월, 일을 각각 추출
$year = $date->format('Y');
$month = $date->format('m');
$day = $date->format('d');
echo $year . '년 ' . $month . '월 ' . $day . '일';
?>
</div>
<!-- }프로필 생성일 -->

<!-- 24.12.04 | https://dsclub.kr/code/1059 | 회원탈퇴기능 추가{ -->
<!-- 회원탈퇴 버튼{ -->
<a href="<?php echo G5_BBS_URL ?>/member_leave.php" id="member-leave-link" style="margin-left:10px;color:#3a3a3a">
    <i class="fa fa-sign-out"></i>
    <span>회원탈퇴</span>
</a>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var link = document.getElementById('member-leave-link');
        var clickedOnce = false;

        link.addEventListener('click', function(event) {
            if (!clickedOnce) {
                event.preventDefault(); // 링크 이동 방지
                alert('한 번 더 누르면 탈퇴처리됩니다.');
                link.querySelector('span').textContent = '한 번 더 누르면 탈퇴처리됩니다.';
                clickedOnce = true;
                setTimeout(function() {
                    clickedOnce = false; // 일정 시간 후 초기화
                    link.querySelector('span').textContent = '회원탈퇴';
                }, 3000); // 5초 후 초기화
            }
        });
    });
</script>
<!-- }회원탈퇴 버튼 -->

</div>
</div>
</div>

    </div>

</div><!--2-->
<script>
// 모달 요소 선택
const personalModal = document.getElementById("personal-modal");

// 개인 메뉴 버튼 선택
const personalMenuButton = document.querySelector(".personal-menu");

// 닫기 버튼 선택
const personalCloseButton = document.getElementById("personal-home");

// 개인 메뉴 버튼 클릭 시 모달 표시
personalMenuButton.addEventListener("click", () => {
  personalModal.style.display = "block";
});

// 닫기 버튼 클릭 시 모달 숨김
personalCloseButton.addEventListener("click", () => {
  personalModal.style.display = "none";
});
</script>
<style>
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px); /* 위에서 아래로 부드럽게 나타나도록 */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease; /* 0.5초 동안 부드럽게 나타나게 함 */
}
</style>

<div class="profile"><!--3-->

    <div class="profile_info"><!-- 프로필 정보 감싸기 -->
<div class="profile_img" id="profileImage">
    <?php echo get_member_profile_img($member['mb_id']); ?><!--프로필이미지-->
</div>
        <div class="profile_text"><!-- 텍스트 부분 -->
            <span class="nick">
                <?php echo $member['mb_nick'];?><!--닉네임-->

            </span>
            <span class="id">
    <a href="#" onclick="copyMemberId('@<?php echo $member['mb_id'];?>')">@<?php echo $member['mb_id'];?></a><!--아이디-->
</span>
        </div>
    </div>
<!-- 팔로우 시스템 메뉴{ -->
<a href="follow.php?mb_id=<?php echo $mb_id ?>" class="follow-link">
    <div class="follower-group">
        <span class="followers">0</span><!-- 총 팔로워 수 -->
        <span style="font-size:15px; color:#4c4c4c">팔로워</span>
    </div>
    <div class="following-group">
        <span class="following">0</span><!-- 총 팔로잉 수 -->
        <span style="font-size:15px; color:#4c4c4c">팔로잉</span>
    </div>
</a>
<style>
.follow-link {
    display: flex; /* 가로 정렬을 위해 flexbox 사용 */
    margin-top: 10px;
    margin-bottom: -5px;
}

.follower-group,
.following-group {
    display: flex;
    flex-direction: column; /* 세로 정렬을 위해 column 방향으로 설정 */
    align-items: center; /* 가운데 정렬 */
    margin: 0 10px; /* 그룹 간의 간격 조정 */
}

.followers,
.following {
    font-size: 20px; /* 원하는 폰트 크기로 설정 */
    font-weight:500
}
</style>
<!-- }팔로우 시스템 메뉴 -->
<!-- 프로필 팝업 모달 -->
<div class="pop" id="popModal" style="display: none;">
    <div class="pop-modal-content">
        <span class="pop-close-btn">&times;</span>
        <div class="pqr">
            <center>
                <?php echo get_member_profile_img($member['mb_id']); ?><!--프로필이미지-->
                <div style="padding-top:15px;width:100%;"></div>
                <a href="#" onclick="copyMemberId('@<?php echo $member['mb_id'];?>')">
                    <span style="font-size:20px;font-weight:520;text-align:center;color:#3a3a3a !important">@<?php echo $member['mb_id'];?></span>
                </a>
            </center>
        </div>
        <div class="psns_share">
            <?php include_once(G5_PLUGIN_PATH.'/profile_share/pshare.php'); ?>
        </div>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const profileImage = document.getElementById('profileImage');
    const popModal = document.getElementById('popModal');
    const closeBtn = document.querySelector('.pop-close-btn');

    let touchTimer;

    // 꾹 누르기 시작
    profileImage.addEventListener('touchstart', function(event) {
        event.preventDefault(); // 기본 동작 방지 (다운로드 메뉴)
        touchTimer = setTimeout(function() {
            popModal.style.display = 'block'; // 모달 열기
            popModal.classList.add('fade-in'); // 애니메이션 추가
        }, 700); // 700ms 이상 누르면 모달 열기
    });

    // 꾹 누르기 종료
    profileImage.addEventListener('touchend', function(event) {
        clearTimeout(touchTimer); // 타이머 초기화
    });

    // 모달 닫기 버튼 클릭 시 모달 닫기
    closeBtn.addEventListener('click', function() {
        popModal.style.display = 'none';
    });

    // 모달 외부 클릭 시 모달 닫기
    window.addEventListener('click', function(event) {
        // 모달 외부 클릭 시 닫기
        if (event.target === popModal) {
            popModal.style.display = 'none';
        }
    });
});
</script>
<style>
.pop {
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: none
}

.pop-modal-content {
    margin: 15% auto;
    padding: 20px;
    width: 80%; /* 모달 너비 */
    max-width:320px
}

.pop-close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.pop-close-btn:hover,
.pop-close-btn:focus {
    color: #2a2a2a;
    text-decoration: none;
    cursor: pointer;
}

.pop-modal-content .pqr {
  margin-bottom: 10px;
  padding:20px;
  border-radius:10px;
}

.pop-modal-content .pqr img {
  border-radius:50%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width:220px;
  height:220px;
  max-width:220px;
  max-height:220px;
}

.pop-modal-content .psns_share {
  border-radius:10px;
  margin-top:15px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  padding:25px 45px
}
</style>

    <div class="profile_menu"><!--6-->
        <span class="profile_edit">
            <a href="<?php echo G5_BBS_URL ?>/profile_security.php?url=<?php echo G5_BBS_URL ?>/profile_form.php">
                프로필 수정
            </a>
        </span>
        <!-- 프로필 공유{ -->
       <span class="profile_share">
  공유하기
</span>

<div class="share-modal hidden">
  <div class="share-modal-content">
    <span class="close_button">&times;</span>
    <!-- 프로필 qr코드로 공유{ -->
    <div class="qr">
    <center>
    <?php
// 현재 페이지의 주소를 가져옵니다.
$current_url = 'http';
if (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on') {
    $current_url .= "s";
}
$current_url .= "://";
$current_url .= $_SERVER['HTTP_HOST'] . "/bbs/profile.php?mb_id=" . $mb_id;
// QR 코드를 출력합니다.
echo "<img src='https://api.qrserver.com/v1/create-qr-code/?data=" . urlencode($current_url) . "&size=200x200' alt='QR Code'>";
?>
<!-- 프로필 아이디 복사{ -->
<div style="padding-top:15px;width:100%;"></div>
<a href="#" onclick="copyMemberId('@<?php echo $member['mb_id'];?>')">
<span style="font-size:20px;font-weight:520;text-align:center;">@<?php echo $member['mb_id'];?></span>
</a>
</center>
</div>
<!-- 프로필 sns 공유(카카오 공유 구현 어렵;;){ -->
<div class="sns_share">
<?php include_once(G5_PLUGIN_PATH.'/profile_share/share.php'); ?>
</div>
</div>
</div>
<style>
.share-modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.share-modal-content {
  background-color: #f9f9f9;
  padding: 20px;
  border: 1px solid #f2f2f2;
  width: 60%;
  min-width: 300px;
  max-width: 400px;
  height: 50%;
  min-height: 420px;
  max-height: 450px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 14px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  overflow: auto;
}

.hidden {
  display: none;
}

.close_button {
  color: #2a2a2a;
  font-size: 28px;
  font-weight: bold;
  margin-left:auto
}

.close_button:hover,
.close_button:focus {
  color: #1a1a1a;
  text-decoration: none;
  cursor: pointer;
}

.share-modal-content .qr {
  margin-bottom: 10px;
  padding:20px;
  border-radius:10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.share-modal-content .sns_share {
  border-radius:10px;
  margin-top:15px;
}

</style>
<script>
const shareButton = document.querySelector('.profile_share');
const shareModal = document.querySelector('.share-modal');
const closeButton = document.querySelector('.close_button');

shareButton.addEventListener('click', () => {
  shareModal.classList.remove('hidden');
  document.body.style.overflow = 'hidden'; // 모달 외부 스크롤 막기
});

closeButton.addEventListener('click', () => {
  shareModal.classList.add('hidden');
  document.body.style.overflow = 'auto'; // 모달 외부 스크롤 허용
});

window.addEventListener('click', (event) => {
  if (event.target == shareModal) {
    shareModal.classList.add('hidden');
    document.body.style.overflow = 'auto'; // 모달 외부 스크롤 허용
  }
});

const copyLinkButton = document.getElementById('copyLink');
const lineShareButton = document.querySelector('a[href="<?= $ls ?>"]');
const facebookShareButton = document.querySelector('a[href="<?= $fs ?>"]');
const twitterShareButton = document.querySelector('a[href="<?= $ts ?>"]');

</script>
    </div><!--6-->

	    <div class="member_memo"><!--5-->
	    <span style="font-weight:520;font-size:17px;color:#3a3a3a">자기소개</span>
        <p style="margin-top:10px;"><?php echo $mb_profile ?></p><!--상태메시지-->
    </div><!--5-->

</div><!--3-->

</div><!--1-->

<div class="profile_bd" style="padding-bottom:50px;"><!--1-->

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

$mb_id = isset($_GET['mb_id']) ? substr(preg_replace('#[^a-z0-9_]#i', '', $_GET['mb_id']), 0, 20) : '';

if (!$mb_id) {
    alert('회원 아이디가 없습니다.');
}

$gr_id = isset($_GET['gr_id']) ? substr(preg_replace('#[^a-z0-9_]#i', '', $_GET['gr_id']), 0, 10) : '';

$total_list = array();

// 모든 게시판 테이블 가져오기
$sql = " select bo_table from {$g5['board_table']} ";
if ($gr_id) {
    $sql .= " where gr_id = '$gr_id' ";
}
$board_result = sql_query($sql);

while ($board_row = sql_fetch_array($board_result)) {
    $write_table = $g5['write_prefix'] . $board_row['bo_table'];
    
    // 원글 조회
    $sql = " select * from {$write_table} 
             where mb_id = '{$mb_id}' 
             and wr_is_comment = 0 ";
    $result = sql_query($sql);

    while ($row = sql_fetch_array($result)) {
        $total_list[] = array(
            'type' => 'origin',
            'bo_table' => $board_row['bo_table'],
            'wr_id' => $row['wr_id'],
            'wr_parent' => $row['wr_id'],
            'mb_id' => $row['mb_id'],
            'wr_name' => $row['wr_name'],
            'wr_email' => $row['wr_email'],
            'wr_homepage' => $row['wr_homepage'],
            'wr_subject' => $row['wr_subject'],
            'wr_content' => $row['wr_content'],
            'wr_datetime' => $row['wr_datetime']
        );
    }

    // 댓글 조회
    $sql = " select * from {$write_table} 
             where mb_id = '{$mb_id}' 
             and wr_is_comment = 1 ";
    $result = sql_query($sql);

    while ($row = sql_fetch_array($result)) {
        // 원글 정보 가져오기
        $parent = sql_fetch(" select * from {$write_table} where wr_id = '{$row['wr_parent']}' ");
        
        $total_list[] = array(
            'type' => 'comment',
            'bo_table' => $board_row['bo_table'],
            'wr_id' => $row['wr_id'],
            'wr_parent' => $row['wr_parent'],
            'parent_subject' => $parent['wr_subject'],
            'mb_id' => $row['mb_id'],
            'wr_name' => $row['wr_name'],
            'wr_email' => $row['wr_email'],
            'wr_homepage' => $row['wr_homepage'],
            'wr_subject' => $row['wr_subject'],
            'wr_content' => $row['wr_content'],
            'wr_datetime' => $row['wr_datetime']
        );
    }
}

// 최종 리스트 정렬 (최신순)
usort($total_list, function($a, $b) {
    return strtotime($b['wr_datetime']) - strtotime($a['wr_datetime']);
});

// 페이징 처리
$rows = G5_IS_MOBILE ? $config['cf_mobile_page_rows'] : $config['cf_new_rows'];
$total_count = count($total_list);
$total_page = ceil($total_count / $rows);
if ($page < 1) $page = 1;
$from_record = ($page - 1) * $rows;

$list = array_slice($total_list, $from_record, $rows);

// 리스트 가공
foreach ($list as $key => $val) {
    $name = get_sideview($val['mb_id'], 
                         get_text(cut_str($val['wr_name'], $config['cf_cut_name'])), 
                         $val['wr_email'], 
                         $val['wr_homepage']);

    $datetime = substr($val['wr_datetime'], 0, 10);
    $datetime2 = $val['wr_datetime'];
    
    if ($datetime == G5_TIME_YMD) {
        $datetime2 = substr($datetime2, 11, 5);
    } else {
        $datetime2 = substr($datetime2, 5, 5);
    }

    $list[$key]['name'] = $name;
    $list[$key]['datetime'] = $datetime;
    $list[$key]['datetime2'] = $datetime2;
    
    // 원글인 경우
    if ($val['type'] == 'origin') {
        $list[$key]['comment'] = '';
        $list[$key]['href'] = get_pretty_url($val['bo_table'], $val['wr_id']);
        $list[$key]['wr_subject'] = $val['wr_subject'];
        $list[$key]['css_class'] = 'post-origin';
    } 
    // 댓글인 경우
    else {
        $list[$key]['comment'] = '[댓글] ';
        $list[$key]['href'] = get_pretty_url($val['bo_table'], $val['wr_parent'], '#c_'.$val['wr_id']);
        $list[$key]['wr_subject'] = '['.$val['parent_subject'].'] '.$val['wr_content'];
        $list[$key]['css_class'] = 'post-comment';
    }
}

$write_pages = get_paging(
    G5_IS_MOBILE ? $config['cf_mobile_pages'] : $config['cf_write_pages'], 
    $page, 
    $total_page, 
    "?gr_id=$gr_id&amp;mb_id=$mb_id&amp;page="
);

include_once($new_skin_path.'/profile_new.skin.php');
?>

</div><!--1-->

<!-- 개인 프로필 전용 게시판 글 작성하기{ -->
<a href='write.php?bo_table=<?php echo $member['mb_id'];?>')">
<div class="profile_board_write" id="profileBoard">
    <img src="<?php echo G5_THEME_URL ?>/mobile/skin/member/basic/img/big_arrow.png" width="10" height="30">
</div>
</a>

<style>
.profile_board_write {
    position: fixed;
    top: 15%; 
    right: 0;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.55); 
    backdrop-filter: blur(10px); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border-radius: 16px 0 0 16px;
    height: 20vmin; 
    max-height: 100px;
    min-height: 80px;
    width: calc(20vmin / 4); 
    max-width: calc(120px / 4.2); 
    min-width: calc(80px / 4.2); 
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    touch-action: none; 
    z-index: 7; 
    cursor: grab; 
    transition: 
        top 0.4s cubic-bezier(0.32, 0.64, 0.45, 1),
        transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
        box-shadow 0.3s ease;
    will-change: top, transform, box-shadow;
}

.profile_board_write:active {
    cursor: grabbing;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    transform: translateY(-50%) scale(1.03);
}

@keyframes softBounce {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.02); }
}

.profile_board_write.snap-elastic {
    animation: softBounce 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.profile_board_write.momentum-hint {
    transition: top 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
</style>

<script>
document.addEventListener("DOMContentLoaded", () => {
    const profileBoard = document.getElementById("profileBoard");
    const STORAGE_KEY = "profileBoardPosition";
    const TOP_MARGIN = 120; // 상단에서 100픽셀 떨어진 지점까지 제한
    let isDragging = false;
    let startY = 0;
    let initialY = 0;
    let velocityY = 0;
    let lastMoveTime = 0;

    function applyMomentum() {
        if (Math.abs(velocityY) > 0.05) {  // 더 작은 임계값
            const newTop = profileBoard.offsetTop + velocityY;
            const maxTop = window.innerHeight - profileBoard.offsetHeight;
            const minTop = TOP_MARGIN;
            
            const clampedY = Math.max(minTop, Math.min(newTop, maxTop));
            
            profileBoard.classList.add('momentum-hint');
            profileBoard.style.top = `${clampedY}px`;
            
            // 더 급격한 감속
            velocityY *= 0.7;  // 0.85에서 0.7로 변경
            
            if (Math.abs(velocityY) > 0.05) {
                requestAnimationFrame(applyMomentum);
            } else {
                profileBoard.classList.remove('momentum-hint');
            }
        }
    }

    function restorePosition() {
        const savedPosition = localStorage.getItem(STORAGE_KEY);
        if (savedPosition) {
            try {
                const position = JSON.parse(savedPosition);
                const maxTop = window.innerHeight - profileBoard.offsetHeight;
                const minTop = TOP_MARGIN;
                
                profileBoard.style.transition = 'none';
                
                const clampedY = Math.max(minTop, Math.min(position.top, maxTop));
                profileBoard.style.top = `${clampedY}px`;
                
                requestAnimationFrame(() => {
                    profileBoard.style.transition = 'top 0.3s cubic-bezier(0.32, 0.64, 0.45, 1), transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.2s ease';
                });
            } catch (error) {
                console.error("Invalid position data in local storage.");
            }
        }
    }

    restorePosition();

    profileBoard.addEventListener("touchstart", (e) => {
        isDragging = true;
        startY = e.touches[0].clientY - profileBoard.offsetTop;
        initialY = profileBoard.offsetTop;
        
        velocityY = 0;
        lastMoveTime = Date.now();
        
        profileBoard.style.transition = 'none';
    });

    profileBoard.addEventListener("touchmove", (e) => {
        if (!isDragging) return;

        const touchY = e.touches[0].clientY;
        const newY = touchY - startY;
        const maxTop = window.innerHeight - profileBoard.offsetHeight;
        const minTop = TOP_MARGIN;

        const clampedY = Math.max(minTop, Math.min(newY, maxTop));
        profileBoard.style.top = `${clampedY}px`;

        const currentTime = Date.now();
        const timeDelta = currentTime - lastMoveTime;
        
        // 더 정확한 속도 계산
        velocityY = (clampedY - initialY) / Math.max(timeDelta, 1);
        
        lastMoveTime = currentTime;
        initialY = clampedY;
    });

    profileBoard.addEventListener("touchend", () => {
        if (!isDragging) return;
        isDragging = false;

        const currentTop = profileBoard.offsetTop;
        const movementThreshold = 10;  // 더 작은 임계값

        profileBoard.style.transition = 'top 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.2s ease';

        if (Math.abs(currentTop - initialY) < movementThreshold) {
            profileBoard.classList.add('snap-elastic');
            setTimeout(() => {
                profileBoard.classList.remove('snap-elastic');
            }, 300);  // 더 짧은 시간
        }

        applyMomentum();
        localStorage.setItem(STORAGE_KEY, JSON.stringify({ top: currentTop }));
    });

    window.addEventListener("resize", restorePosition);
});
</script>

<!-- 프로필 아이디 복사{ -->
<script>
function copyMemberId(memberId) {
    // 멤버 아이디를 클립보드에 복사
    navigator.clipboard.writeText(memberId);

    // 사용자에게 복사 완료 알림 표시
    alert('프로필 ID가 복사되었습니다.');
}
</script>
<!--프로필 공유{ -->
<script>
function copyProfileLink() {
    // PHP에서 전달받은 $mb_id 값을 사용하여 프로필 링크 생성
    var profileLink = '<?php echo G5_BBS_URL ?>/profile.php?mb_id=<?php echo $mb_id ?>';

    // 링크를 클립보드에 복사
    navigator.clipboard.writeText(profileLink);

    // 사용자에게 복사 완료 알림 표시
    alert('프로필 링크가 복사되었습니다.');
}
</script>
<!-- 팔로워/팔로잉 수{ -->
<script>
let followingPage = 1; // 현재 페이지 설정
let followerPage = 1; // 현재 페이지 설정
let mb_id = '<?php echo $mb_id ?>'; // mb_id를 직접 입력하거나 다른 방법으로 설정하세요

// 팔로잉 목록 로드
function loadFollowing() {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '<?php echo G5_URL ?>/bbs/ajax_following.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = function() {
        if (xhr.status === 200) {
            const response = JSON.parse(xhr.responseText);
            displayFollowingCount(response);
        } else {
            console.error("팔로잉 로드 실패: " + xhr.status);
        }
    };
    xhr.send('page=' + followingPage + '&mb_id=' + mb_id);
}

function displayFollowingCount(data) {
    const followingSpan = document.querySelector('.following');
    followingSpan.innerHTML = ''; // 이전 내용 초기화

    // 총 팔로잉 수 출력
    const totalCount = document.createElement('p');
    totalCount.innerText = `${data.total_following}`;
    followingSpan.appendChild(totalCount);
}

// 팔로워 목록 로드
function loadFollowers() {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '<?php echo G5_URL ?>/bbs/ajax_followers.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = function() {
        if (xhr.status === 200) {
            const response = JSON.parse(xhr.responseText);
            displayFollowerCount(response);
        } else {
            console.error("팔로워 로드 실패: " + xhr.status);
        }
    };
    xhr.send('page=' + followerPage + '&mb_id=' + mb_id);
}

function displayFollowerCount(data) {
    const followerSpan = document.querySelector('.followers');
    followerSpan.innerHTML = ''; // 이전 내용 초기화

    // 총 팔로워 수 출력
    let totalCount = data.total_followers;


    const countElement = document.createElement('p');
    countElement.innerText = `${totalCount}`;
    followerSpan.appendChild(countElement);
}

// 페이지 로드 시 팔로잉 및 팔로워 목록 불러오기
window.onload = function() {
    loadFollowing();
    loadFollowers();

    // 6초마다 데이터를 새로 고침
    setInterval(function() {
        loadFollowing();
        loadFollowers();
    }, 6000); // 6000 밀리초 = 6초
};
</script>
<!-- }팔로잉/팔로워 수 끝 -->

<style>
.logo img {
height:35px;weight:auto;
}
.hd_menu {
    display: flex;
    justify-content: space-between; /* 양 끝에 고정 */
    align-items: center; /* 세로 중앙 정렬 */
    height: 50px; /* 높이 설정 */
    position: fixed; /* 고정 위치 */
    top: 0; /* 상단 고정 */
    left: 0; /* 왼쪽 고정 */
    right: 0; /* 오른쪽 고정 */
    background-color: #ffffff; /* 배경색 */
    border-bottom: 1px solid #e1e8ed; /* 하단 경계선 */
    z-index: 1000; /* 다른 요소 위에 표시 */
    padding: 15px 10px
}

.logo {
    margin-left: 10px; /* 왼쪽 여백 */
}

.menu-items {
    display: flex; /* 가로 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    margin-right: 10px; /* 오른쪽 여백 */
}

.send_memo,
.personal-menu {
    margin-left: 15px; /* 아이콘 간의 여백 */
}
.profile {
    background-color: #ffffff; /* 배경색 */
    border-radius: 5px; /* 모서리 둥글게 */
    padding: 15px; /* 내부 여백 */
    padding-top: 60px; /* 위쪽 여백 */
}

.profile_info {
    display: flex; /* 가로 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    margin-bottom: 10px; /* 아래쪽 여백 */
}

.profile .profile_img {
    margin-right:30px; /* 이미지와 텍스트 간격 */
}

.profile .profile_img img {
    width: 60px; /* 이미지 너비 */
    min-width: 60px;
    max-width: 60px;
    height: 60px; /* 비율 유지 */
    min-height: 60px;
    max-height: 60px;
    border-radius: 50%; /* 원형 */
}

.profile_text {
    display: flex;
    flex-direction: column; /* 세로 정렬 */
}

.nick {
    font-weight: 540; /* 닉네임 두껍게 */
    color: #14171a !important; /* 텍스트 색상 */
    font-size: 1.4em; /* 폰트 크기 */
}

.id,
.id a {
    color: #555 !important; /* 아이디 색상 */
    font-size: 1.2em; /* 폰트 크기 */
    margin-left:0
}

.member_memo {
    color: #3a3a3a; /* 상태 메시지 색상 */
    margin: 10px; /* 위 아래 여백 */
    font-size: 15px;
    padding-bottom:15px;
    border-bottom:1px solid #e1e1e1
}

.profile_menu {
    display: flex; /* 가로 정렬 */
    margin:20px 0px; /* 위쪽 여백 */
    justify-content: center;
}

.profile_edit {
display: flex; /* Flexbox 활성화 */
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
	color:#2a2a2a;
	padding: 10px;
	border-radius:10px;
	font-weight:500;
	border:none;
	font-size:15px;
	background-color:#f2f2f2;
	margin-right:5px;
	white-space: nowrap;
	width:70%
}

.profile_share {
    display: flex; /* Flexbox 활성화 */
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    color: #f2f2f2; /* 링크 색상 */
    background-color: #508ff7; /* 배경색 */
    cursor: default; /* 커서 포인터를 기본으로 변경 */
    font-weight: 560; /* 굵은 글씨 */
    padding: 10px; /* 내부 여백 */
    border-radius: 10px; /* 둥근 모서리 */
    border: none; /* 테두리 없음 */
    font-size: 15px; /* 폰트 크기 */
    margin-left: 5px; /* 왼쪽 여백 */
    white-space: nowrap; /* 줄 바꿈 방지 */
    width: 70%; /* 너비 설정 */
}

.profile_edit:hover,
.profile_share:hover {
    text-decoration: none; /* 호버 시 밑줄 */
}
</style>

<style>
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
</style>


<!-- 프로필 페이지에서 메인 페이지로 이동{ -->
<script async>
let isLoading = false;
let loadContentPromise;
let newContentElement;
let oldContentElement;
let startX; // 터치 시작 X 좌표

function loadContent() {
    const referrer = document.referrer; // 이전 페이지 URL
    const url = referrer || window.location.origin; // 이전 페이지가 없으면 현재 도메인으로 설정

    loadContentPromise = fetch(url)
        .then(response => response.text())
        .then(data => {
            // 기존 콘텐츠 숨김 처리
            if (oldContentElement) {
                oldContentElement.classList.add('hidden'); // 이전 콘텐츠 숨김
            }

            // 새로운 콘텐츠 생성
            newContentElement = document.createElement('div');
            newContentElement.className = 'slide-in';
            newContentElement.innerHTML = data;
            document.body.appendChild(newContentElement);
            requestAnimationFrame(() => {
                newContentElement.style.transform = 'translateX(100%)'; // 슬라이드 애니메이션 시작
            });

            // 새로운 콘텐츠를 스크롤 대상 설정
            document.body.style.overflow = 'hidden'; // 배경 스크롤 방지
            newContentElement.style.overflow = 'auto'; // 새로운 콘텐츠 스크롤 가능
            newContentElement.style.height = '100%'; // 전체 높이 설정

            // 이전 콘텐츠 참조 저장
            oldContentElement = newContentElement;

            // 0.3초 후 해당 URL로 이동
            setTimeout(() => {
                window.location.href = url;
            }, 450); // 450ms 후 이동
        })
        .catch(error => {
            console.error('Error loading content:', error);
            isLoading = false; // 오류 발생 시 로딩 상태 초기화
            loadContentPromise = null; // 로드 취소
        });
}

// 터치 이벤트 리스너
document.addEventListener('touchstart', (event) => {
    if (!isLoading) {
        startX = event.touches[0].clientX; // 터치 시작 위치 저장
    }
});

document.addEventListener('touchend', (event) => {
    if (!isLoading) {
        const endX = event.changedTouches[0].clientX; // 터치 끝 위치
        const distance = endX - startX; // 스와이프 거리 계산

        // 스와이프 거리가 특정 임계값을 초과하면 콘텐츠 로드
        if (distance > 120) { // 오른쪽으로 스와이프
            isLoading = true;
            loadContent();
        }
    }
});
</script>


<!-- 보안을 위한 개발자 도구 제한{ -->
<?php
// 개발자 도구 사용 감지
if (isset($_SERVER['HTTP_USER_AGENT']) && stripos($_SERVER['HTTP_USER_AGENT'], 'Chrome') !== false && stripos($_SERVER['HTTP_USER_AGENT'], 'Edg') === false && stripos($_SERVER['HTTP_USER_AGENT'], 'Firefox') === false && stripos($_SERVER['HTTP_USER_AGENT'], 'Safari') === false) {
    // 개발자 도구 사용 시 오류 메시지 출력
    http_response_code(403);
    echo "개발자 도구 사용이 금지되어 있습니다.";
    exit;
}
?>
<script>
// F12 키 막기
document.addEventListener('keydown', function(event) {
  if (event.keyCode == 123) {
    event.preventDefault();
    return false;
  }
});

// 개발자 도구 열기 막기
document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
});

// 개발자 도구 콘솔 막기
if (window.console) {
  console.log = function() {};
  console.error = function() {};
  console.warn = function() {};
  console.info = function() {};
  console.debug = function() {};
}
</script>
<?php
// 브라우저에서 JavaScript 사용 여부 확인
if (!isset($_SERVER['HTTP_USER_AGENT']) || !preg_match('/(?i)msie|trident|firefox|safari|opera|chrome/', $_SERVER['HTTP_USER_AGENT'])) {
    // JavaScript를 사용하지 않는 경우 리다이렉트
    header('Location: ' . G5_URL);
    exit;
}
?>

