> For the complete documentation index, see [llms.txt](https://store-help.nhn-commerce.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://store-help.nhn-commerce.com/app/design/1515.md).

# 리스트 효과 관리 스킨 패치 가이드

[스킨 패치 파일 다운로드 ↓](https://kr1-api-object-storage.nhncloudservice.com/v1/AUTH_69db659103894b00aa9f8b28aa62fe8e/plus-shop-skin-patch/%E1%84%83%E1%85%B5%E1%84%8C%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%AB_%E1%84%85%E1%85%B5%E1%84%89%E1%85%B3%E1%84%90%E1%85%B3%20%E1%84%86%E1%85%A1%E1%84%8B%E1%85%AE%E1%84%89%E1%85%B3%20%E1%84%8B%E1%85%A9%E1%84%87%E1%85%A5%20%E1%84%92%E1%85%AD%E1%84%80%E1%85%AA.zip)

■ 수정위치\
1\. 관리자모드 -> 디자인 에서 수정할 스킨이 "현재 작업스킨"으로 설정\
2\. 관리자모드 -> 디자인, 트리에서 아래의 화일을 선택후 수정

■ 상품/goods -> 상품목록/list -> 갤러리형 / goods/list/list\_01.html

\- 아래의 내용을 수정함 : 8 라인

```
<li style="width:{=(100/themeInfo.lineCnt)}%">
    <div class="space">
        <div class="thumbnail">
            <a href="../goods/goods_view.php?goodsNo={..goodsNo}" <!--{ ? themeInfo.relationLinkFl == 'blank'  }--> target="_blank"<!--{ / }--> >{..goodsImage}
                <!--{ ? themeInfo.iconFl == 'y' }-->
```

위와 같은 내용에

```
<li style="width:{=(100/themeInfo.lineCnt)}%">
    <div class="space">
        <div class="thumbnail" <!--{ ? ..goodsData }-->{=..goodsData}<!--{ / }-->>
            <a href="../goods/goods_view.php?goodsNo={..goodsNo}" <!--{ ? themeInfo.relationLinkFl == 'blank'  }--> target="_blank"<!--{ / }--> >{..goodsImage}
                <!--{ ? themeInfo.iconFl == 'y' }-->
```

이와 같이 수정함

\
■ 상품/goods -> 상품목록/list -> 리스트형 / goods/list/list\_02.html

\- 아래의 내용을 수정함 : 8 라인

```
<!--{ @ .value_}-->
<li>
    <div class="thumbnail">
        <a href="../goods/goods_view.php?goodsNo={..goodsNo}">{..goodsImage}
```

위와 같은 내용에

```
<!--{ @ .value_}-->
<li>
    <div class="thumbnail" <!--{ ? ..goodsData }-->{=..goodsData}<!--{ / }-->>
        <a href="../goods/goods_view.php?goodsNo={..goodsNo}">{..goodsImage}
```

이와 같이 수정함

\
■ 상품/goods -> 상품목록/list -> 리스트그룹형 / goods/list/list\_03.html

\- 아래의 내용을 수정함 : 8 라인

```
<!--{ @ .value_}-->
<li style="width:{=(100/themeInfo.lineCnt)}%">
    <div class="thumbnail">
        <a href="../goods/goods_view.php?goodsNo={..goodsNo}">{..goodsImage}
            <!--{ ? themeInfo.iconFl == 'y' }-->
```

위와 같은 내용에

```
<!--{ @ .value_}-->
<li style="width:{=(100/themeInfo.lineCnt)}%">
    <div class="thumbnail" <!--{ ? ..goodsData }-->{=..goodsData}<!--{ / }-->>
        <a href="../goods/goods_view.php?goodsNo={..goodsNo}">{..goodsImage}
            <!--{ ? themeInfo.iconFl == 'y' }-->
```

이와 같이 수정함

\
■ 상품/goods -> 상품목록/list -> 상품이동형 / goods/list/list\_04.html

\- 아래의 내용을 수정함 : 10 라인

```
<li class="swiper-slide">
    <div class="space">
        <div class="thumbnail gd-thumbnail gd-default">
            <a href="../goods/goods_view.php?goodsNo={..goodsNo}" <!--{ ? themeInfo.relationLinkFl == 'blank'  }--> target="_blank"<!--{ / }-->>{..goodsImage}
                <!--{ ? themeInfo.iconFl == 'y' }-->
```

위와 같은 내용에

```
<li class="swiper-slide">
    <div class="space">
        <div class="thumbnail gd-thumbnail gd-default" <!--{ ? ..goodsData }-->{=..goodsData}<!--{ / }-->>
            <a href="../goods/goods_view.php?goodsNo={..goodsNo}" <!--{ ? themeInfo.relationLinkFl == 'blank'  }--> target="_blank"<!--{ / }-->>{..goodsImage}
                <!--{ ? themeInfo.iconFl == 'y' }-->
```

이와 같이 수정함

\
■ 상품/goods -> 상품목록/list -> 세로이동형 / goods/list/list\_05.html

\- 아래의 내용을 수정함 : 10 라인

```
<!--{ @ .value_}-->
<li style="width:{=(100/themeInfo.lineCnt)}%;">
    <div class="space">
        <div class="thumbnail gd-thumbnail gd-default">
            <a href="../goods/goods_view.php?goodsNo={..goodsNo}" <!--{ ? themeInfo.relationLinkFl == 'blank'  }--> target="_blank"<!--{ / }-->>{..goodsImage}
```

위와 같은 내용에

```
<!--{ @ .value_}-->
<li style="width:{=(100/themeInfo.lineCnt)}%;">
    <div class="space">
        <div class="thumbnail gd-thumbnail gd-default" <!--{ ? ..goodsData }-->{=..goodsData}<!--{ / }-->>
            <a href="../goods/goods_view.php?goodsNo={..goodsNo}" <!--{ ? themeInfo.relationLinkFl == 'blank'  }--> target="_blank"<!--{ / }-->>{..goodsImage}
```

이와 같이 수정함

\
■ 상품/goods -> 상품목록/list -> 스크롤형 / goods/list/list\_06.html

\- 아래의 내용을 수정함 : 9 라인

```
<li class="swiper-slide">
    <div class="space">
        <div class="thumbnail gd-thumbnail gd-default">
            <a href="../goods/goods_view.php?goodsNo={..goodsNo}" <!--{ ? themeInfo.relationLinkFl == 'blank'  }--> target="_blank"<!--{ / }-->>{..goodsImage}
```

위와 같은 내용에

```
<li class="swiper-slide">
    <div class="space">
        <div class="thumbnail gd-thumbnail gd-default" <!--{ ? ..goodsData }-->{=..goodsData}<!--{ / }-->>
            <a href="../goods/goods_view.php?goodsNo={..goodsNo}" <!--{ ? themeInfo.relationLinkFl == 'blank'  }--> target="_blank"<!--{ / }-->>{..goodsImage}
```

이와 같이 수정함

\
■ 상품/goods -> 상품목록/list -> 탭+상품이동형 / goods/list/list\_07.html

\- 아래의 내용을 수정함 : 17 라인

```
<li style="width:{=(100/themeInfo.lineCnt)}%;">
    <div class="space">
        <div class="thumbnail">
            <a href="../goods/goods_view.php?goodsNo={...goodsNo}" alt="{...shortDescription}">{...goodsImage}
                <!--{ ? themeInfo.iconFl == 'y' }-->
```

위와 같은 내용에

```
<li style="width:{=(100/themeInfo.lineCnt)}%;">
    <div class="space">
        <div class="thumbnail" <!--{ ? ...goodsData }-->{=...goodsData}<!--{ / }-->>
            <a href="../goods/goods_view.php?goodsNo={...goodsNo}" alt="{...shortDescription}">{...goodsImage}
                <!--{ ? themeInfo.iconFl == 'y' }-->
```

이와 같이 수정함

\
■ 상품/goods -> 상품목록/list -> 선택강조형 / goods/list/list\_08.html

\- 아래의 내용을 수정함 : 9 라인

```
<li style="width:{=(100/themeInfo.lineCnt)}%">
    <div class="space">
        <div class="thumbnail js-tooltip-view{mainData.sno}">
            <a href="../goods/goods_view.php?goodsNo={..goodsNo}" <!--{ ? themeInfo.relationLinkFl == 'blank'  }--> target="_blank"<!--{ / }-->>{..goodsImage}
```

위와 같은 내용에

```
<li style="width:{=(100/themeInfo.lineCnt)}%">
    <div class="space">
        <div class="thumbnail js-tooltip-view{mainData.sno}" <!--{ ? ..goodsData }-->{=..goodsData}<!--{ / }-->>
            <a href="../goods/goods_view.php?goodsNo={..goodsNo}" <!--{ ? themeInfo.relationLinkFl == 'blank'  }--> target="_blank"<!--{ / }-->>{..goodsImage}
```

이와 같이 수정함

\- 아래의 내용을 수정함 : 80 라인

```
<script type="text/javascript">
    $(document).ready(function () {
        $('.type-select .js-tooltip-view{mainData.sno} img').mouseover(function() {
            var opacity =  {= (themeInfo.detailSet[1] / 100)  } ;
            <!--{ ? themeInfo.detailSet[0] == 'S' }-->
            $('.type-select .js-tooltip-view{mainData.sno} img').css({ opacity: 1 });
            $(this).css({ opacity:opacity });
            <!--{ : }-->
            $('.type-select .js-tooltip-view{mainData.sno} img').css({ opacity: opacity });
            $(this).css({ opacity: 1 });
            <!--{ / }-->
        });
    });
</script>
```

위와 같은 내용에

```
<script type="text/javascript">
    $(document).ready(function () {
        $('.type-select .js-tooltip-view{mainData.sno}').on('mouseover', 'img', function() {
            var opacity =  {= (themeInfo.detailSet[1] / 100)  } ;
            <!--{ ? themeInfo.detailSet[0] == 'S' }-->
            $('.type-select .js-tooltip-view{mainData.sno} a>img').css({ opacity: 1 });
            $(this).css({ opacity:opacity });
            <!--{ : }-->
            $('.type-select .js-tooltip-view{mainData.sno} a>img').css({ opacity: opacity });
            $(this).css({ opacity: 1 });
            <!--{ / }-->
        });
    });
</script>
```

이와 같이 수정함

\
■ 상품/goods -> 상품목록/list -> 심플이미지형 / goods/list/list\_09.html

\- 아래의 내용을 수정함 : 7 라인

```
<!--{ @ .value_}-->
<li style="width:{=(100/themeInfo.lineCnt)}%">
    <div class="thumbnail">
        <a href="../goods/goods_view.php?goodsNo={..goodsNo}" <!--{ ? themeInfo.relationLinkFl == 'blank'  }--> target="_blank"<!--{ / }-->>{..goodsImage}
```

위와 같은 내용에

```
<!--{ @ .value_}-->
<li style="width:{=(100/themeInfo.lineCnt)}%">
    <div class="thumbnail" <!--{ ? ..goodsData }-->{=..goodsData}<!--{ / }-->>
        <a href="../goods/goods_view.php?goodsNo={..goodsNo}" <!--{ ? themeInfo.relationLinkFl == 'blank'  }--> target="_blank"<!--{ / }-->>{..goodsImage}
```

이와 같이 수정함

\
■ 상품/goods -> 상품목록/list -> 말풍선형 / goods/list/list\_10.html

\- 아래의 내용을 수정함 : 8 라인

```
<li style="width:{=(100/themeInfo.lineCnt)}%">
    <div class="space">
        <div class="thumbnail js-tooltip-view{mainData.sno}">
            <a href="../goods/goods_view.php?goodsNo={..goodsNo}" alt="{..shortDescription}" <!--{ ? themeInfo.relationLinkFl == 'blank'  }--> target="_blank"<!--{ / }-->>{..goodsImage}
```

위와 같은 내용에

```
<li style="width:{=(100/themeInfo.lineCnt)}%">
    <div class="space">
        <div class="thumbnail js-tooltip-view{mainData.sno}" <!--{ ? ..goodsData }-->{=..goodsData}<!--{ / }-->>
            <a href="../goods/goods_view.php?goodsNo={..goodsNo}" alt="{..shortDescription}" <!--{ ? themeInfo.relationLinkFl == 'blank'  }--> target="_blank"<!--{ / }-->>{..goodsImage}
```

이와 같이 수정함

\- 아래의 내용을 수정함 : 79 라인

```
<script type="text/javascript">
    $(document).ready(function() {
        $('.type-tooltip .js-tooltip-view{mainData.sno} a').mouseleave(function() {
            $('div.tooltip-box').remove();
        });
        $('.type-tooltip .js-tooltip-view{mainData.sno} a').mousemove(function() {
            var tooltipX = event.pageX - 8;
            var tooltipY = event.pageY + 25;
            $('div.tooltip-box').css({top: tooltipY, left: tooltipX});
        });
        $('.type-tooltip .js-tooltip-view{mainData.sno} a').mouseenter(function() {
            var shortDescription = $(this).attr('alt');
            if(shortDescription)
            {
```

위와 같은 내용에

```
<script type="text/javascript">
    $(document).ready(function() {
        $('.type-tooltip .js-tooltip-view{mainData.sno}').on('mouseleave', 'a', function() {
            $('div.tooltip-box').remove();
        });
        $('.type-tooltip .js-tooltip-view{mainData.sno}').on('mousemove', 'a', function() {
            var tooltipX = event.pageX - 8;
            var tooltipY = event.pageY + 25;
            $('div.tooltip-box').css({top: tooltipY, left: tooltipX});
        });
        $('.type-tooltip .js-tooltip-view{mainData.sno}').on('mouseenter', 'a', function() {
            var shortDescription = $(this).attr('alt');
            if(shortDescription)
            {
```

이와 같이 수정함

\
■ 상품/goods -> 상품목록/list -> 장바구니형 / goods/list/list\_11.html

\- 아래의 내용을 수정함 : 8 라인

```
<li style="width:{=(100/themeInfo.lineCnt)}%">
    <div class="space">
        <div class="thumbnail">
            <a href="../goods/goods_view.php?goodsNo={..goodsNo}" <!--{ ? themeInfo.relationLinkFl == 'blank'  }--> target="_blank"<!--{ / }-->>{..goodsImage}
```

위와 같은 내용에

```
<li style="width:{=(100/themeInfo.lineCnt)}%">
    <div class="space">
        <div class="thumbnail" <!--{ ? ..goodsData }-->{=..goodsData}<!--{ / }-->>
            <a href="../goods/goods_view.php?goodsNo={..goodsNo}" <!--{ ? themeInfo.relationLinkFl == 'blank'  }--> target="_blank"<!--{ / }-->>{..goodsImage}
```

이와 같이 수정함

\- 아래의 내용을 수정함 : 114 라인

```
//찜하기
$('.btn-add-wish{mainData.sno}').on('click', function(e){
    <!--{ ? gd_is_login() === false }-->
```

위와 같은 내용에

```
//찜하기
$('.thumbnail').on('click', '.btn-add-wish{mainData.sno}', function(e){
    <!--{ ? gd_is_login() === false }-->
```

이와 같이 수정함

\
\- 아래의 내용을 수정함 : 131 라인

```
//찜하기
$('.btn-add-cart{mainData.sno}').on('click', function(){
    if($(this).data('mode') == 'cartIn') {
```

위와 같은 내용에

```
//찜하기
$('.thumbnail').on('click', '.btn-add-cart{mainData.sno}', function(){
    if($(this).data('mode') == 'cartIn') {
```

이와 같이 수정함
