> For the complete documentation index, see [llms.txt](https://devcenter-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://devcenter-help.nhn-commerce.com/guide/tuning-example/modify-user-page.md).

# 사용자 페이지 수정하기

## 📌 요구사항 및 분석

* 사용자 장바구니 페이지(`order/cart.php`)에서 필요한 데이터를 추가로 확인하고자 함.

## 📝 개선안 정리

* `cart.php` 페이지와 매핑되는 Controller 에서 Front로 전달하는 데이터를 추가
* `cart.php` 페이지에서 컨트롤러에서 전달받은 데이터를 화면에 노출

## 🛠️ 커스터마이징 진행

### 📌 Controller 수정하기

1. `관리자페이지 > 개발소스관리` 팝업창을 엽니다.<br>

   <figure><img src="/files/WSledqW1WuNcgTWuVtyg" alt=""><figcaption></figcaption></figure>
2. `쇼핑몰 소스관리 > 고도몰 원본소스 보기` 에서 `data/module/Bundle/Controller/Front/Order/CartController.php` \
   파일을 선택한 후, `'개발소스에 복사'버튼을` 클릭합니다.<br>

   <figure><img src="/files/HlrK284tFIrtxdcVz7zl" alt=""><figcaption></figcaption></figure>
3. module/Controller/Front/Order 폴더 하위에 복사된 파일(`CartController.php`)을 확인하여 필요한 기능을 추가합니다.

```php
<?php
namespace Controller\Front\Order;

class CartController extends \Bundle\Controller\Front\Order\CartController
{
    public function index()
    {
        try {
            // 부모 클래스 상속
            parent::index();

            // 데이터 추가
            $displayBox = '박스를 출력';
            $this->setData('displayBox', $displayBox);

        } catch (\Exception $e) {
            throw $e;
        }
    }
}

```

### 📌 사용자 스킨 수정하기

1. `관리자 페이지 > 디자인 > 디자인 설정 > 디자인 스킨 레이아웃 설정` 페이지로 이동합니다.

   <figure><img src="/files/2JD3M30fFPEJEz1r5Dtq" alt=""><figcaption></figcaption></figure>
2. 좌측 하단 스킨 페이지들 중, 디자인 페이지 수정이 필요한 `[스킨]/order/cart.html` 파일을 선택합니다.

   <figure><img src="/files/DhZMzLbNdrW9rwhJq1dC" alt=""><figcaption></figcaption></figure>
3. CartController.php 에서 추가한 displayBox를 추가한 다음, 화면보기 버튼을 통해 결과물을 확인한 다음 디자인 페이지 저장 버튼을 클릭해 작업물을 저장합니다.<br>

   <figure><img src="/files/TTRJ8nhuuC8KDnVkEOVi" alt=""><figcaption></figcaption></figure>

{% code title="추가된 소스코드" %}

```html
<!-- CartController.php 에서 정의한 displayBox 추가 -->
<!--{ ? isset(displayBox) === true }-->
<div style="margin-top:10px; padding:10px; text-align: center; border:3px solid #cfcfcf;">{=displayBox}</div>
<!--{ / }-->
```

{% endcode %}

## 🔖 결과 확인

<figure><img src="/files/XFCODp3Px7OXO2EDEjir" alt=""><figcaption></figcaption></figure>