회원정보 보기

회원정보 보기 페이지 만들기에 관해 설명합니다.

Data ID

MY_PAGE

Request

Name Value
fail_redirect_url 로그인이 되지 않은 상태로 접근 시 이동할 URL
my_notice_limit 나의 알림가져올 개수
page 나의 알림 페이지 번호
block_number 나의 알림 페이지 표시 개수
my_post_list_flg 내가 작성한 게시글 목록 가저오기 여부 : Y 또는 설정안함
my_post_list_limit 내가 작성한 게시글 목록을 가져올 개수
my_notice_flg 나의 알림 가져오기 여부 : Y 또는 설정안함
post_responder_flg 나의 글에 반응한 사람 목록 가져오기 여부 : Y 또는 설정안함
post_responder_limit 나의 알림가져올 개수

Response

JSON : output.member[0], PHP : $output['member'][0]

Name Value
avatar_url 아바타 URL
nickname 닉네임
name 이름
level 회원 Level
member_post_count 회원이 작성한 게시물 수
member_comment_count 회원이 응답한 코멘트 수
member_like_count 회원이 보낸 좋아요 수

HTML

닉네임

(이름)
Level : 10
Post : 120
Comment : 200
Like : 350
  • 알림에 등록된 메시지 제목이 표시됩니다. 2024-12-24 01:38:04

    댓글이 작성되었을 경우 댓글 내용의 일부가 표시됩니다.
    내용은 댓글 또는 좋아요 등의 사용자 홛동에 따라 다르게 표시되거나 표시되지 않습니다.
  • 알림에 등록된 메시지 제목이 표시됩니다. 2024-12-24 01:38:04

    댓글이 작성되었을 경우 댓글 내용의 일부가 표시됩니다.
    내용은 댓글 또는 좋아요 등의 사용자 홛동에 따라 다르게 표시되거나 표시되지 않습니다.
  • 알림에 등록된 메시지 제목이 표시됩니다. 2024-12-24 01:38:04

    댓글이 작성되었을 경우 댓글 내용의 일부가 표시됩니다.
    내용은 댓글 또는 좋아요 등의 사용자 홛동에 따라 다르게 표시되거나 표시되지 않습니다.

VueJS

<div class="container">
	<div class="row">
		<div class="col-12 mb-5">
			<div class="px-lg-4 mb-5">
				<!-- USER PROFILE START -->
				<div class="mb-3 row rounded-3 py-3">
					<div class="col-12 col-md-12 col-lg-auto mb-3 mb-sm-0 d-flex justify-content-center align-items-center">
						<div class="mx-4" style="width:6rem;">
							<img colon:src="output.user.avatar_url" class="img-fluid">
						</div>
					</div><!-- media-img -->
					<div class="w-100 my-2 ps-3 py-3 me-4 rounded-3 col-12 col-md-12 col-lg media-body d-flex flex-column align-items-start justify-content-center">
						<div class="w-100 text-center text-lg-start d-flex align-items-center justify-content-start">
							<h4>
								\{\{output.user.nickname}}
							</h4>
							<small class="d-block my-2 ms-2">(\{\{output.user.name}})</small>
						</div>
						<div class="w-100 mt-2 row row-cols-sm-auto justify-content-center justify-content-lg-start">
							<div class="col-6 col-sm-3">
								<span class="w-100 mt-2 badge text-white rounded-pill bg-secondary">Level : \{\{output.member[0].level.toLocaleString()}}</span>
							</div>
							<div class="col-6 col-sm-3">
								<span class="w-100 mt-2 badge text-white rounded-pill bg-secondary">Post : \{\{output.member_post_count ? output.member_post_count.toLocaleString() : 0}}</span>
							</div>
							<div class="col-6 col-sm-3">
								<span class="ms-3 mt-2 badge text-white rounded-pill bg-secondary">Comment : \{\{output.member_comment_count ? output.member_comment_count.toLocaleString() : 0}}</span>
							</div>
							<div class="col-6 col-sm-3">
								<span class="ms-3 mt-2 badge text-white rounded-pill bg-secondary">Like : \{\{output.member_like_count ? output.member_like_count.toLocaleString() : 0}}</span>
							</div>
						</div>
					</div>
				</div>
				<!-- USER PROFILE START -->
				<!-- MY NOTICE LIST START -->
				<div v-if="output.notice_list?output.notice_list.length:false">
					<ul class="list-group list-group-flush my-5">
						<li class="list-group-item py-3 bg-transparent" v-for="result in output.notice_list">
							<p class="d-sm-flex flex-wrap align-items-center mb-2">
								<a href="" class="avatar avatar-sm me-2 d-none d-sm-inline"><img colon:src="result.avatar_url" alt=""></a>
								<span class="fs-sm" v-html="result.notice_message"></span>
								<span class="my-2 text-secondary text-nowrap fs-xs ms-auto d-flex align-items-center justify-content-end">
                                            <i class="far fa-clock me-1"></i><small>\{\{result.create_date}}</small>
                                    </span>
							</p>
							<div class="card border-0" v-if="result.notice_content">
								<div class="card-body small" v-html="result.notice_content"></div>
							</div>
						</li>
					</ul>
					<!-- PAGINATION START -->
					<div class="mt-2">
						<nav>
							<ul class="pagination justify-content-center mb-0">
								<li class="page-item"><a class="page-link border-0 bg-transparent" v-bindcolon:href="output.pagination.paging.first.link" v-bindcolon:data-page="output.pagination.paging.first.number"><i class="fas fa-angle-double-left"></i></a></li>
								<li class="page-item"><a class="page-link border-0 bg-transparent" v-bindcolon:href="output.pagination.paging.prev.link" v-bindcolon:data-page="output.pagination.paging.prev.number"><i class="fas fa-angle-left"></i></a></li>
								<li class="page-item h-page-numbers" v-if="output.pagination.paging.page" v-for="page in output.pagination.paging.page"><a class="border-0 bg-transparent" colon:class="\{'page-link'colon:true, 'active'colon: output.pagination.page == page.number }" v-bindcolon:href="page.link" v-bindcolon:data-page="page.number">\{\{page.number}}</a></li>
								<li class="page-item" v-else><a class="border-0 page-link bg-transparent">1</a></li>
								<li class="page-item"><a class="page-link border-0 bg-transparent" v-bindcolon:href="output.pagination.paging.next.link" v-bindcolon:data-page="output.pagination.paging.next.number"><i class="fas fa-angle-right"></i></a></li>
								<li class="page-item"><a class="page-link border-0 bg-transparent" v-bindcolon:href="output.pagination.paging.end.link" v-bindcolon:data-page="output.pagination.paging.end.number"><i class="fas fa-angle-double-right"></i></a></li>
							</ul>
						</nav>
					</div>
					<!-- PAGINATION END -->
				</div>
				<div v-else class="my-4 px-3 py-4 text-center rounded-3 d-flex align-items-center justify-content-center"><i class="far fa-bell me-2"></i> <small>활동 내역이 없습니다.</small></div>
				<!-- MY NOTICE LIST END -->
			</div>
		</div>
	</div>
</div>

PHP

<div class="container">
	<div class="row">
		<div class="col-12 col-lg-9 border-md-end-none border-end mb-5">
			<div class="px-lg-4 mb-5">
				<!-- USER PROFILE START -->
				<div class="mb-3 row rounded-3 py-3">
					<div class="col-12 col-md-12 col-lg-auto mb-3 mb-sm-0 d-flex justify-content-center align-items-center">
						<div class="mx-4" style="width:6rem;">
							<img src="<?=$output['member'][0]['avatar_url'];?>" class="img-fluid">
						</div>
					</div><!-- media-img -->
					<div class="w-100 my-2 ps-3 py-3 me-4 rounded-3 col-12 col-md-12 col-lg media-body d-flex flex-column align-items-start justify-content-center">
						<div class="w-100 text-center text-lg-start d-flex align-items-center justify-content-start">
							<h4>
								<?=$output['member'][0]['nickname'];?>
							</h4>
							<small class="d-block my-2 ms-2">(<?=$output['member'][0]['name'];?>)</small>
						</div>
						<div class="w-100 mt-2 row row-cols-sm-auto justify-content-center justify-content-lg-start">
							<div class="col-6 col-sm-3">
								<span class="w-100 mt-2 badge text-white rounded-pill bg-secondary">Level : <?=number_format($output['member'][0]['level']);?></span>
							</div>
							<div class="col-6 col-sm-3">
								<span class="w-100 mt-2 badge text-white rounded-pill bg-secondary">Post : <?=number_format($output['member'][0]['member_post_count']);?></span>
							</div>
							<div class="col-6 col-sm-3">
								<span class="ms-3 mt-2 badge text-white rounded-pill bg-secondary">Comment : <?=number_format($output['member'][0]['member_comment_count']);?></span>
							</div>
							<div class="col-6 col-sm-3">
								<span class="ms-3 mt-2 badge text-white rounded-pill bg-secondary">Like : <?=number_format($output['member'][0]['member_like_count']);?></span>
							</div>
						</div>
					</div>
				</div>
				<!-- USER PROFILE START -->
				<!-- MY NOTICE LIST START -->
				<? if(is_array($output['notice_list']) && count($output['notice_list'])>0){ ?>
				<div>
					<ul class="list-group list-group-flush my-5">
						<? foreach($output['notice_list'] as $intKey=>$arrResult){ ?>
						<li class="list-group-item py-3 bg-transparent">
							<p class="d-sm-flex flex-wrap align-items-center mb-2">
								<a href="" class="avatar avatar-sm me-2 d-none d-sm-inline"><img src="<?=$arrResult['avatar_url'];?>" alt=""></a>
								<span class="fs-sm"><?=$arrResult['notice_message'];?></span>
								<span class="my-2 text-secondary text-nowrap fs-xs ms-auto d-flex align-items-center justify-content-end">
                                    <i class="far fa-clock me-1"></i><small><?=$arrResult['create_date'];?></small>
                                </span>
							</p>
							<? if($arrResult['notice_content']){ ?>
							<div class="card border-0">
								<div class="card-body small"><?=$arrResult['notice_content'];?></div>
							</div>
							<? } ?>
						</li>
						<? } ?>
					</ul>
					<!-- PAGINATION START -->
					<div class="mt-2">
						<div class="my-4">
							<nav>
								<ul class="pagination justify-content-center mb-0">
									<li class="page-item"><a class="page-link border-0 bg-transparent" href="<?=$output['pagination']['paging']['first']['link'];?>" data-page="<?=$output['pagination']['paging']['first']['number'];?>"><small>FIRST</small></a></li>
									<li class="page-item"><a class="page-link border-0 bg-transparent" href="<?=$output['pagination']['paging']['prev']['link'];?>" data-page="<?=$output['pagination']['paging']['prev']['number'];?>"><small>PREV</small></a></li>
									<? foreach($output['pagination']['paging']['page']?:[1] as $intKey=>$arrResult){ ?>
										<li class="page-item"><a class="border-0 page-link <? if($output['pagination']['page'] == $arrResult['number'] || !$arrResult['number']){ ?>active<? }else{ ?>bg-transparent<? } ?>" href="<?=$arrResult['link'];?>" data-page="<?=$arrResult['number'];?>"><?=number_format($arrResult['number']?$arrResult['number']:1);?></a></li>
									<? } ?>
									<li class="page-item"><a class="page-link border-0 bg-transparent" href="<?=$output['pagination']['paging']['next']['link'];?>" data-page="<?=$output['pagination']['paging']['next']['number'];?>"><small>NEXT</small></i></a></li>
									<li class="page-item"><a class="page-link border-0 bg-transparent" href="<?=$output['pagination']['paging']['end']['link'];?>" data-page="<?=$output['pagination']['paging']['end']['number'];?>"><small>LAST</small></a></li>
								</ul>
							</nav>
						</div>
					</div>
					<!-- PAGINATION END -->
				</div>
				<? }else{ ?>
				<div class="my-4 px-3 py-4 text-center rounded-3 d-flex align-items-center justify-content-center"><i class="far fa-bell me-2"></i> <small>활동 내역이 없습니다.</small></div>
				<? } ?>
				<!-- MY NOTICE LIST END -->
			</div>
		</div>
	</div>
</div>