선생님 도움요청 부탁드려요
515
오아시스
작성한 질문수 12
0
사진에 보시다시피 투명해지지않고 잔상이 남아있습니다, 다음 currentscene으로 넘어가면 없어지구요
콘솔창에는 저런 에러가 발생합니다
답변 9
0
변수명을 잘못 기입하신 부분이 있습니다.
partScrollEnd를 partScrollStart로 바꿔주시고,
currentScene은 currentYOffset으로 바꿔주세요~
해당 구간을 벗어났을 때 시작값과 종료값으로 강제 세팅해주는 부분인데
그 부분의 변수명이 잘못 기입되서 발생한 현상이었네요^^
0
@charset 'utf-8';
html {
font-family: 'Noto Sans KR', sans-serif;
font-size: 14px;
}
body{
/* overflow: hidden; */
color: rgb(29,29,31);
letter-spacing: -0.05em;
background: white;
overflow-x: hidden;
}
p{
line-height: 1.6;
}
a{
color: rgb(29,29,31);
text-decoration: none;
}
/* Nav Start */
.global-nav{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 44px;
padding: 0 1em;
}
.local-nav{
position: absolute;
top: 45px;
left: 0;
width: 100%;
height: 52px;
border-bottom: 1px solid #ddd;
padding: 0 1em;
}
.global-nav-links,
.local-nav-links{
display: flex;
align-items: center;
max-width: 1000px;
height: 100%;
margin: 0 auto;
}
.global-nav-links{
justify-content: space-between;
}
.local-nav-links .product-name{
margin-right: auto;
font-size: 1.2rem;
font-weight: bold;
}
.local-nav-links a{
font-size: 0.8rem;
}
.local-nav-links a:not(.product-name){
margin-left: 2em;
}
/* Section-Start */
.scroll-section{
padding-top: 50vh;
border: 1px solid red;
}
#scroll-section-0 h1{
font-size: 4rem;
text-align: center;
}
.main-message{
display: flex;
align-items: center;
justify-content: center;
top: 35vh;
margin: 5px 0;
height: 3em;
font-size: 2.5rem;
opacity: 0;
}
.main-message p{
font-weight: bold;
text-align: center;
line-height: 1.2;
}
.main-message small{
display: block;
margin-bottom: 0.5em;
font-size: 1.2rem;
}
#scroll-section-2 .main-message{
font-size: 3.5rem;
}
.description{
max-width: 1000px;
margin: 0 auto;
padding: 0 1rem;
font-size: 1.2rem;
color: #888;
}
.description strong{
float: left;
margin-right: 0.2em;
font-size: 3rem;
color: rgb(29,29,31);
}
.desc-message{
width: 50%;
font-weight: bold;
}
.pin{
width: 1px;
height: 100px;
background: rgb(29,29,31);
}
#scroll-section-2 .b{
top: 10%;
left: 40%;
}
#scroll-section-2 .c{
top: 15%;
left: 45%;
}
.mid-message{
max-width: 1000px;
margin: 0 auto;
padding: 0 1rem;
font-size: 2rem;
color: #888;
}
.mid-message strong{
color: rgb(29,29,31);
}
.canvas-caption{
max-width: 1000px;
margin: 0 auto;
padding: 0 1rem;
font-size: 1.2rem;
color: #888;
}
.footer{
display: flex;
align-items: center;
justify-content: center;
height: 7rem;
}
.sticky-elem{
display: none;
position: fixed;
left: 0;
width: 100%;
}
#show-scene-0 #scroll-section-0 .sticky-elem,
#show-scene-1 #scroll-section-1 .sticky-elem,
#show-scene-2 #scroll-section-2 .sticky-elem,
#show-scene-3 #scroll-section-3 .sticky-elem{
display: block;
}
@media (min-width: 1024px){
#scroll-section-0 h1{
font-size: 9vw;
}
.main-message{
font-size: 4vw;
}
.description {
font-size: 2rem;
}
.description strong{
font-size: 6rem;
}
#scroll-section-2 .main-message{
font-size: 6vw;
}
.main-message small {
font-size: 1.5vw;
}
.desc-message{
width: 20%;
}
#scroll-section-2 .b{
top: 20%;
left: 53%;
}
#scroll-section-2 .c{
left: 55%;
}
.mid-message{
font-size: 4vw;
}
.canvas-caption{
font-size: 2rem;
}
}
0
( () => {
let yOffset = 0; // window.pageYOffset 대신 사용 할 변수
let prevScrollHeight = 0; //현재 스크롤 위치(yOffset)보다 이전에 위치한 스크롤 섹션들의 스크롤 높이 값의 합
let currentScene = 0; // 현재 활성화 된 (눈 앞에 보고 있는) 씬(scroll-section)
let enterNewScene = false; //새로운 씬이 시작된 순간 true
const sceneInfo = [
{
// 0
type: 'sticky',
heightNum: 5, // 브라우저 높이의 5배로 scrollHeight 세팅
scrollHeight: 0,
objs: {
container: document.querySelector('#scroll-section-0'),
messageA: document.querySelector('#scroll-section-0 .main-message.a'),
messageB: document.querySelector('#scroll-section-0 .main-message.b'),
messageC: document.querySelector('#scroll-section-0 .main-message.c'),
messageD: document.querySelector('#scroll-section-0 .main-message.d')
},
values: {
messageA_opacity_in: [0, 1, { start: 0.1, end: 0.2 }],
messageB_opacity_in: [0, 1, { start: 0.3, end: 0.4 }],
messageC_opacity_in: [0, 1, { start: 0.5, end: 0.6 }],
messageD_opacity_in: [0, 1, { start: 0.7, end: 0.8 }],
messageA_translateY_in: [20, 0, { start: 0.1, end: 0.2 }],
messageB_translateY_in: [20, 0, { start: 0.3, end: 0.4 }],
messageC_translateY_in: [20, 0, { start: 0.5, end: 0.6 }],
messageD_translateY_in: [20, 0, { start: 0.7, end: 0.8 }],
messageA_opacity_out: [1, 0, { start: 0.25, end: 0.3 }],
messageB_opacity_out: [1, 0, { start: 0.45, end: 0.5 }],
messageC_opacity_out: [1, 0, { start: 0.65, end: 0.7 }],
messageD_opacity_out: [1, 0, { start: 0.85, end: 0.9 }],
messageA_translateY_out: [0, -20, { start: 0.25, end: 0.3 }],
messageB_translateY_out: [0, -20, { start: 0.45, end: 0.5 }],
messageC_translateY_out: [0, -20, { start: 0.65, end: 0.7 }],
messageD_translateY_out: [0, -20, { start: 0.85, end: 0.9 }]
}
},
{
// 1
type: 'normal',
// heightNum: 5, // type normal에서는 필요 없음
scrollHeight: 0,
objs: {
container: document.querySelector('#scroll-section-1')
}
},
{
// 2
type: 'sticky',
heightNum: 5,
scrollHeight: 0,
objs: {
container: document.querySelector('#scroll-section-2'),
messageA: document.querySelector('#scroll-section-2 .a'),
messageB: document.querySelector('#scroll-section-2 .b'),
messageC: document.querySelector('#scroll-section-2 .c'),
pinB: document.querySelector('#scroll-section-2 .b .pin'),
pinC: document.querySelector('#scroll-section-2 .c .pin')
},
values: {
messageA_translateY_in: [20, 0, { start: 0.15, end: 0.2 }],
messageB_translateY_in: [30, 0, { start: 0.6, end: 0.65 }],
messageC_translateY_in: [30, 0, { start: 0.87, end: 0.92 }],
messageA_opacity_in: [0, 1, { start: 0.25, end: 0.3 }],
messageB_opacity_in: [0, 1, { start: 0.6, end: 0.65 }],
messageC_opacity_in: [0, 1, { start: 0.87, end: 0.92 }],
messageA_translateY_out: [0, -20, { start: 0.4, end: 0.45 }],
messageB_translateY_out: [0, -20, { start: 0.68, end: 0.73 }],
messageC_translateY_out: [0, -20, { start: 0.95, end: 1 }],
messageA_opacity_out: [1, 0, { start: 0.4, end: 0.45 }],
messageB_opacity_out: [1, 0, { start: 0.68, end: 0.73 }],
messageC_opacity_out: [1, 0, { start: 0.95, end: 1 }],
pinB_scaleY: [0.5, 1, { start: 0.6, end: 0.65 }],
pinC_scaleY: [0.5, 1, { start: 0.87, end: 0.92 }]
}
},
{
// 3
type: 'sticky',
heightNum: 5,
scrollHeight: 0,
objs: {
container: document.querySelector('#scroll-section-3'),
canvasCaption: document.querySelector('.canvas-caption')
},
values: {
}
}
];
function setLayout(){
//각 스크롤 섹션의 높이 세팅
for (let i = 0; i < sceneInfo.length; i++) {
if (sceneInfo[i].type === 'sticky'){
sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight;
} else if (sceneInfo[i].type === 'normal'){
sceneInfo[i].scrollHeight = sceneInfo[i].objs.container.offsetHeight;
}
sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`;
}
yOffset = window.pageYOffset;
let totalScrollHeight = 0;
for (let i = 0; i < sceneInfo.length; i++) {
totalScrollHeight += sceneInfo[i].scrollHeight;
if (totalScrollHeight >= yOffset) {
currentScene = i;
break;
}
}
document.body.setAttribute('id', `show-scene-${currentScene}`);
}
function calcValues(values, currentYOffset){
let rv;
//현재 씬( 스크롤 섹션 ) 에서 스크롤 된 범위를 비율로 구하기
const scrollHeight = sceneInfo[currentScene].scrollHeight;
const scrollRatio = currentYOffset / scrollHeight;
if (values.length === 3) {
// start ~ end 사이에 애니메이션 실행
const partScrollStart = values[2].start * scrollHeight;
const partScrollEnd = values[2].end * scrollHeight;
const partScrollHeight = partScrollEnd - partScrollStart;
if (currentYOffset >= partScrollStart && currentYOffset <= partScrollEnd){
rv = (currentYOffset - partScrollStart) / partScrollHeight * (values[1] - values[0]) + values[0];
} else if (currentYOffset < partScrollEnd){
rv = values[0];
} else if (currentScene > partScrollEnd) {
rv = values[1];
}
} else {
rv = scrollRatio * (values[1] - values[0]) + values[0];
}
return rv;
}
function playAnimation() {
const objs = sceneInfo[currentScene].objs;
const values = sceneInfo[currentScene].values;
const currentYOffset = yOffset - prevScrollHeight;
const scrollHeight = sceneInfo[currentScene].scrollHeight;
const scrollRatio = currentYOffset / scrollHeight;
switch (currentScene) {
case 0:
// console.log('0 play');
if (scrollRatio <= 0.22) {
// in
objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset);
objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_in, currentYOffset)}%, 0)`;
} else {
// out
objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset);
objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_out, currentYOffset)}%, 0)`;
}
if (scrollRatio <= 0.42) {
// in
objs.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset);
objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_in, currentYOffset)}%, 0)`;
} else {
// out
objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset);
objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_out, currentYOffset)}%, 0)`;
}
if (scrollRatio <= 0.62) {
// in
objs.messageC.style.opacity = calcValues(values.messageC_opacity_in, currentYOffset);
objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_in, currentYOffset)}%, 0)`;
} else {
// out
objs.messageC.style.opacity = calcValues(values.messageC_opacity_out, currentYOffset);
objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_out, currentYOffset)}%, 0)`;
}
if (scrollRatio <= 0.82) {
// in
objs.messageD.style.opacity = calcValues(values.messageD_opacity_in, currentYOffset);
objs.messageD.style.transform = `translate3d(0, ${calcValues(values.messageD_translateY_in, currentYOffset)}%, 0)`;
} else {
// out
objs.messageD.style.opacity = calcValues(values.messageD_opacity_out, currentYOffset);
objs.messageD.style.transform = `translate3d(0, ${calcValues(values.messageD_translateY_out, currentYOffset)}%, 0)`;
}
break;
case 2:
// console.log('2 play');
if (scrollRatio <= 0.32) {
// in
objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset);
objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_in, currentYOffset)}%, 0)`;
} else {
// out
objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset);
objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_out, currentYOffset)}%, 0)`;
}
if (scrollRatio <= 0.67) {
// in
objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_in, currentYOffset)}%, 0)`;
objs.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset);
objs.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleY, currentYOffset)})`;
} else {
// out
objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_out, currentYOffset)}%, 0)`;
objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset);
objs.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleY, currentYOffset)})`;
}
if (scrollRatio <= 0.93) {
// in
objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_in, currentYOffset)}%, 0)`;
objs.messageC.style.opacity = calcValues(values.messageC_opacity_in, currentYOffset);
objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`;
} else {
// out
objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_out, currentYOffset)}%, 0)`;
objs.messageC.style.opacity = calcValues(values.messageC_opacity_out, currentYOffset);
objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`;
}
break;
case 3:
// console.log('3 play');
break;
}
}
// 스크롤 되면 실행되는 함수 (몇번째 섹션이 스크롤 중인지 판별하는 역할)
function scrollLoop() {
enterNewScene = false;
prevScrollHeight = 0;
for (let i = 0; i < currentScene; i++) {
prevScrollHeight += sceneInfo[i].scrollHeight;
}
if (yOffset > prevScrollHeight+sceneInfo[currentScene].scrollHeight){
enterNewScene = true;
currentScene++;
document.body.setAttribute('id', `show-scene-${currentScene}`);
}
if (yOffset < prevScrollHeight) {
enterNewScene = true;
if(currentScene === 0) return //브라우저 바운스 효과로 인해 마이너스가 되는 것을 방지(모바일)
currentScene--;
document.body.setAttribute('id', `show-scene-${currentScene}`);
}
if(enterNewScene === true) return;
playAnimation();
}
window.addEventListener('load', setLayout);
window.addEventListener('resize', setLayout);
window.addEventListener('scroll', () => {
yOffset = window.pageYOffset;
scrollLoop();
});
}) ();
0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Web</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/default.css">
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<div class="container">
<nav class="global-nav">
<div class="global-nav-links">
<a href="#" class="global-nav-item">Rooms</a>
<a href="#" class="global-nav-item">Ideas</a>
<a href="#" class="global-nav-item">Stores</a>
<a href="#" class="global-nav-item">Contact</a>
</div>
</nav>
<nav class="local-nav">
<div class="local-nav-links">
<a href="#" class="product-name">AirMug Pro</a>
<a href="#" class="local-nav-item">개요</a>
<a href="#" class="local-nav-item">제품사양</a>
<a href="#" class="local-nav-item">구매하기</a>
</div>
</nav>
<!-- Nav-End -->
<!-- Section -->
<section class="scroll-section" id="scroll-section-0">
<h1>AirMug Pro</h1>
<div class="sticky-elem main-message a">
<p>온전히 빠져들게 하는<br>최고급 세라믹</p>
</div>
<div class="sticky-elem main-message b">
<p>주변 맛을 느끼게 해주는<br>주변 맛 허용 모드</p>
</div>
<div class="sticky-elem main-message c">
<p>온종일 편안한<br>맞춤형 손잡이</p>
</div>
<div class="sticky-elem main-message d">
<p>새롭게 입가를<br>찾아온 매혹</p>
</div>
</section>
<section class="scroll-section" id="scroll-section-1">
<p class="description">
<strong>보통 스크롤 영역</strong>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium neque, sit possimus delectus quasi, corrupti voluptates eos ipsum quas ut commodi fugiat aut veritatis reprehenderit aperiam totam fuga, tempora asperiores in voluptas rem ex sint! Quas totam quidem, veritatis atque voluptates corporis. Tempore neque suscipit quam molestiae aperiam est aliquam impedit atque quos quis earum, repellendus velit laudantium iusto eius veritatis voluptatem ipsum officia asperiores voluptate magnam saepe iste. Ab omnis iure laboriosam quia veritatis! Eveniet recusandae quas ex ullam aliquam reiciendis magni sed asperiores odio dolorem fugiat adipisci eum omnis repellendus error quibusdam at eligendi voluptas expedita, provident accusamus facere cum. Nam fugit dolor quasi numquam sapiente explicabo at ullam accusamus distinctio omnis totam dolores, dignissimos dolorem. Pariatur harum culpa, voluptatibus veritatis qui tempore ipsa aspernatur quae, dicta aperiam consectetur eius? Ab et recusandae cum officia, necessitatibus doloribus animi culpa nam pariatur alias ex voluptate est sint dicta sed distinctio nisi dolor quod voluptatibus eveniet eligendi soluta laboriosam eum. Saepe eaque, illo sapiente nesciunt mollitia, nihil voluptatum id tempora iusto maxime debitis vel quaerat minima quis cumque quod impedit laudantium tempore repudiandae quasi exercitationem rerum fugiat optio possimus? Corrupti, unde natus. Pariatur nobis magni quae molestiae quam veritatis quibusdam.
</p>
</section>
<section class="scroll-section" id="scroll-section-2">
<div class="sticky-elem main-message a">
<p>
<small>편안한 촉감</small>
입과 하나 되다
</p>
</div>
<div class="sticky-elem desc-message b">
<p>
편안한 목넘김을 완성하는 디테일한 여러 구성 요소들, 우리는 이를 하나하나 새롭게 살피고 재구성하는 과정을 거쳐 새로운 수준의 머그, AirMug Pro를 만들었습니다. 입에 뭔가
댔다는 감각은 어느새 사라지고 오롯이 당신과 음료만 남게 되죠.
</p>
<div class="pin"></div>
</div>
<div class="sticky-elem desc-message c">
<p>
디자인 앤 퀄리티 오브 스웨덴,<br>메이드 인 차이나
</p>
<div class="pin"></div>
</div>
</section>
<section class="scroll-section" id="scroll-section-3">
<p class="mid-message">
<strong>Retina 머그</strong><br>
아이디어를 광활하게 펼칠<br>
부드럽고 광활한 음료 공간
</p>
<p class="canvas-caption">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus eius aperiam odit quam sequi omnis atque hic adipisci autem distinctio, totam vel est debitis corporis temporibus dolore officia magni deserunt ut? Quae itaque eaque temporibus, reprehenderit error aliquam obcaecati unde cupiditate blanditiis cum quo neque inventore natus laudantium magni? Labore eligendi obcaecati numquam impedit necessitatibus ullam, accusamus non est quod nostrum doloribus ad, assumenda quidem consectetur harum quisquam et eius enim blanditiis architecto. Ab accusantium qui obcaecati facilis quasi, ducimus eveniet autem cumque voluptatibus culpa maiores et delectus excepturi amet placeat nulla natus dolores quaerat repellendus! Non harum eum, ullam consequatur saepe sit est ut ea alias necessitatibus ipsum facere inventore fuga, exercitationem neque expedita iusto similique? Corporis voluptas corrupti expedita consequatur quos? Vero voluptatem culpa quia repellendus, odit reiciendis, fugiat, eius aliquam voluptate saepe perferendis ea! Error, id ullam. Aut velit totam error mollitia in doloremque, voluptate quia consequuntur repudiandae non pariatur veniam! Tempore, cum? Saepe iure rerum delectus optio quisquam laboriosam aliquid cupiditate, ut adipisci perferendis excepturi, quidem vero impedit velit ipsam temporibus officia esse molestiae repellendus consequuntur tempora, distinctio reiciendis hic! A odio nesciunt vel doloremque quod, explicabo sed error consequatur modi? Molestias eligendi soluta at iusto!
</p>
</section>
<!-- ! Section-End -->
<!-- Footer -->
<footer class="footer">
2020, AirMug
</footer>
<!-- ! Footer-End -->
</div>
<script src="main.js"></script>
</body>
</html>
0
음 다시해보니,, 스크롤을 빨리내리면 잔상이 남아있구요 천천히 내리면 잔상이 안남습니다
정상적인 동작인지요? 그리고 첫번째 섹션에서 메세지들이 다음 섹션에서 3분의1정도 ? 까지는 잔상이 남아있다가 사라집니다
이미지 배경 문의
0
67
1
[크로스브라우징] safari에서 동영상 영역 미노출
0
107
1
항상 궁금했는데 크림슨 컬러 선택하셨을때 활용했던 사이트 좀 알려주세요~
0
109
2
vue강의는안하시나요?!
0
101
1
스크롤 속도에 따른 messageA_opacity_out
0
115
1
drawImage(objs.videoImages[sequence], 0, 0); error
0
89
1
선생님 캔버스 width 크기는 이미지 크기에맞게 해줘야하나요?
0
127
0
선생님 안녕하세요. 혹시 메인개발(?)분야가 뭔지 궁금합니다.
0
206
1
React에서 load 상태를 어떻게 감지할 수 있을까요?
0
680
1
[섹션7-3: 버그수정 2] tempYOffset 오류
0
195
1
스크롤할 때 캔버스로 하신 이유가 있으신가요? 그냥 성능 떄문에 캔버스로 하신건가요?
0
313
2
게속 오류떠서 글 작성해봐요....
0
506
2
Vanilla JavaScript로 SPA 만드는 자료 혹은 선택 기준을 추천해주실 수 있으신가요?
1
488
1
특정 타이밍 스크롤 애니메이션 적용하기 섹션 수강중입니다.
0
455
2
[#svg, #이미지프레임과 텍스트 싱크] 스크롤 값에 움직이는 svg path, 이미지프레임과 텍스트 싱크 맞추는 것, 2가지 질문이 있습니다.
0
451
2
페이지가 처음 로딩 되었을 때 애니메이션 처리가 되지 않는 느낌입니다
0
432
1
섹션2 번째, opacity=0 되지 않고 잔상이 남습니다.
0
533
1
원래 쿼리셀렉터에서는 띄워쓰기 하면안되나요?
0
593
2
라이브러리 질문
1
412
2
translateY대신 애플에서 사용한 것 처럼 matrix로 scale의 크기를 주려고 하는데
0
409
1
[스크롤 높이 세팅] scrollHeight값이 3990아닌 4645로만 나오는데 뭐가 문제일까요? ㅠㅠ
0
598
2
scrollLoop 함수 질문
0
476
2
도메인 웹호스팅시 이미지가 안 뜨는데 누가 좀 알려주세요ㅠㅜ
0
1235
2
load 이벤트시 첫 비디오 이미지가 뜨네요.
0
506
2