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

[스킨 패치 파일 다운로드 ↓](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') {
```

이와 같이 수정함


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://store-help.nhn-commerce.com/app/design/1515.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
