HTML
<s_rp2_container> ~ </s_rp2_container> 안에 있는 코드를 모두 아래의 코드로 교체해주세요.
HTML Code
<ul class="guest-list">
<s_rp_rep>
<li id="[##_rp_rep_id_##]" class="guest-item">
<div class="[##_rp_rep_class_##] guest-content">
<div class="guest-header">
<img class="guest-img" src="[##_rp_rep_logo_##]" />
<div>
<div class="guest-name">[##_rp_rep_name_##]</div>
<div class="guest-date">[##_rp_rep_date_##]</div>
</div>
<div class="guest-control">
<a href="#" onclick="[##_rp_rep_onclick_delete_##]" title="manage">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 12.8799V11.1199C2 10.0799 2.85 9.21994 3.9 9.21994C5.71 9.21994 6.45 7.93994 5.54 6.36994C5.02 5.46994 5.33 4.29994 6.24 3.77994L7.97 2.78994C8.76 2.31994 9.78 2.59994 10.25 3.38994L10.36 3.57994C11.26 5.14994 12.74 5.14994 13.65 3.57994L13.76 3.38994C14.23 2.59994 15.25 2.31994 16.04 2.78994L17.77 3.77994C18.68 4.29994 18.99 5.46994 18.47 6.36994C17.56 7.93994 18.3 9.21994 20.11 9.21994C21.15 9.21994 22.01 10.0699 22.01 11.1199V12.8799C22.01 13.9199 21.16 14.7799 20.11 14.7799C18.3 14.7799 17.56 16.0599 18.47 17.6299C18.99 18.5399 18.68 19.6999 17.77 20.2199L16.04 21.2099C15.25 21.6799 14.23 21.3999 13.76 20.6099L13.65 20.4199C12.75 18.8499 11.27 18.8499 10.36 20.4199L10.25 20.6099C9.78 21.3999 8.76 21.6799 7.97 21.2099L6.24 20.2199C5.33 19.6999 5.02 18.5299 5.54 17.6299C6.45 16.0599 5.71 14.7799 3.9 14.7799C2.85 14.7799 2 13.9199 2 12.8799Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
<a href="#" onclick="[##_rp_rep_onclick_reply_##]" title="reply">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.26 3.59997L5.04997 12.29C4.73997 12.62 4.43997 13.27 4.37997 13.72L4.00997 16.96C3.87997 18.13 4.71997 18.93 5.87997 18.73L9.09997 18.18C9.54997 18.1 10.18 17.77 10.49 17.43L18.7 8.73997C20.12 7.23997 20.76 5.52997 18.55 3.43997C16.35 1.36997 14.68 2.09997 13.26 3.59997Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.89 5.05005C12.32 7.81005 14.56 9.92005 17.34 10.2" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 22H21" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</div>
</div>
<div class="guest-text">[##_rp_rep_desc_##]</div>
</div>
<s_rp2_container>
<ul class="guest-re-list">
<s_rp2_rep>
<li id="[##_rp_rep_id_##]" class="guest-re-item">
<div class="[##_guest_rep_class_##] guest-re-content">
<div class="guest-re-header">
<img class="guest-re-img" src="[##_rp_rep_logo_##]" />
<div>
<div class="guest-re-name">[##_rp_rep_name_##]</div>
<div class="guest-re-date"> [##_rp_rep_date_##]</div>
</div>
<span class="guest-re-control">
<a href="#" onclick="[##_rp_rep_onclick_delete_##]" title="manage">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 12.8799V11.1199C2 10.0799 2.85 9.21994 3.9 9.21994C5.71 9.21994 6.45 7.93994 5.54 6.36994C5.02 5.46994 5.33 4.29994 6.24 3.77994L7.97 2.78994C8.76 2.31994 9.78 2.59994 10.25 3.38994L10.36 3.57994C11.26 5.14994 12.74 5.14994 13.65 3.57994L13.76 3.38994C14.23 2.59994 15.25 2.31994 16.04 2.78994L17.77 3.77994C18.68 4.29994 18.99 5.46994 18.47 6.36994C17.56 7.93994 18.3 9.21994 20.11 9.21994C21.15 9.21994 22.01 10.0699 22.01 11.1199V12.8799C22.01 13.9199 21.16 14.7799 20.11 14.7799C18.3 14.7799 17.56 16.0599 18.47 17.6299C18.99 18.5399 18.68 19.6999 17.77 20.2199L16.04 21.2099C15.25 21.6799 14.23 21.3999 13.76 20.6099L13.65 20.4199C12.75 18.8499 11.27 18.8499 10.36 20.4199L10.25 20.6099C9.78 21.3999 8.76 21.6799 7.97 21.2099L6.24 20.2199C5.33 19.6999 5.02 18.5299 5.54 17.6299C6.45 16.0599 5.71 14.7799 3.9 14.7799C2.85 14.7799 2 13.9199 2 12.8799Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</span>
</div>
<div class="guest-re-text">[##_rp_rep_desc_##]</div>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ul>
CSS
/* **** Guestbook **** */ 안에 있는 코드를 모두 아래의 코드로 교체해주세요.
CSS Code
.guestbook {
display: flex;
flex-direction: column;
gap: 84px;
}
.guest-list {
display: flex;
flex-direction: column;
gap: 64px;
}
.guest-content {
padding: 24px;
border-radius: var(--round);
background-color: var(--color-wrap-sub);
}
.guest-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
position: relative;
}
.guest-img {
width: 40px;
height: 40px;
display: block;
flex: 0 0 auto;
object-fit: cover;
border-radius: var(--round);
}
.guest-name, .guest-re-name {
margin-bottom: 2px;
font-weight: 700;
line-height: var(--line-h-m);
}
.guest-date, .guest-re-date {
font-size: var(--font-size-s);
}
.guest-control-btn {
display: none;
margin-left: auto;
}
.guest-control {
display: flex;
align-items: center;
position: absolute;
right: 0;
transition: all var(--duration);
z-index: 9;
}
.guest-control svg {
width: var(--svg-s);
height: var(--svg-s);
transition: all var(--duration);
}
.guest-control a:hover svg, .guest-control a:active svg {
color: var(--color-primary);
}
.guest-control.control--active {
top: 36px;
opacity: 1;
visibility: visible;
}
.guest-re-control {
margin-left: auto;
}
.guest-control-btn svg, .guest-re-control svg {
color: var(--color-font-sub);
transform: rotate(0);
transition: all var(--duration);
}
.guest-control-btn:hover svg, .guest-control-btn:active svg, .guest-re-control:hover svg, .guest-re-control:active svg {
color: var(--color-primary);
transform: rotate(90deg);
}
.guest-control > a {
width: 28px;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
}
.guest-text, .guest-re-text {
line-height: var(--line-h-l);
}
.guest-re-list {
border-bottom: var(--border-solid);
}
.guest-re-item {
padding: 16px 12px;
border-bottom: var(--border-solid);
border-bottom-style: dashed;
}
.guest-re-list .guest-re-item:last-child {
border-bottom: none;
}
.guest-re-header {
display: flex;
align-items: center;
gap: 8px;
}
.guest-re-img {
width: 28px;
height: 28px;
display: block;
flex: 0 0 auto;
object-fit: cover;
border-radius: 50%;
}
.guest-re-content {
display: flex;
flex-direction: column;
gap: 12px;
padding: 12px;
}
.guest-re-text {
padding: 4px 0;
margin-left: calc(28px + 8px);
position: relative;
}
.guest-re-text:hover::before {
background-color: var(--color-primary);
}
.guest-re-text::before {
content: '';
width: 2px;
height: 100%;
position: absolute;
top: 0;
left: calc((28px / 2 + 8px) * -1);
border-top-left-radius: var(--round-xl);
border-top-right-radius: var(--round-xl);
border-bottom-left-radius: var(--round-xl);
border-bottom-right-radius: var(--round-xl);
background-color: var(--color-border);
transform: translateX(-50%);
transition: all var(--duration);
}