diff --git a/src/2week/app.js b/src/2week/app.js
index f20346a..a410af0 100644
--- a/src/2week/app.js
+++ b/src/2week/app.js
@@ -1,68 +1,151 @@
-var shopping_cart = [];
-var shopping_cart_total = 0;
+import ShoppingCart from './cart.js';
 
-document.querySelectorAll('button').forEach(button =>
-  button.addEventListener('click', ({ target }) => {
-    const name = target.parentNode.querySelector('.menu-name').textContent;
-    const category = target.parentNode.querySelector('.category').textContent;
-    const price = target.parentNode.querySelector('.price').textContent;
+const {
+  cartGetter: getCart,
+  cartTotalGetter: getCartTotal,
+  cartSetter: setCart,
+} = ShoppingCart();
+
+const cartLayer = document.getElementById('cart-layer');
+const cartIcon = document.querySelector('.carts>.icons');
+const productList = document.querySelector('.items');
+
+cartIcon.addEventListener('click', () => {
+  show_dom(cartLayer);
+  set_cart_list_dom();
+});
 
-    add_item_to_cart({ name, category, price });
-  }),
+cartLayer.addEventListener('click', (e) => {
+  if (e.target !== cartLayer) return;
+  hide_dom(cartLayer);
+});
+
+productList.querySelectorAll('.add-to-cart').forEach((button) =>
+  button.addEventListener('click', ({ target }) => {
+    setCart('add', makeCartItem(target.parentNode));
+    update_shipping_icons_dom(getCartTotal());
+    set_total_price_dom(getCartTotal());
+  })
 );
 
-function add_item_to_cart(item) {
-  shopping_cart.push(item);
-  console.log(shopping_cart);
-  calc_cart_total();
+// action - dom : get_dom_value 호출
+function makeCartItem(targetProduct = document) {
+  const PRODUCT_KEYS = [
+    {
+      type: 'string',
+      className: 'category',
+    },
+    {
+      type: 'number',
+      className: 'price',
+    },
+    {
+      type: 'string',
+      className: 'menu-name',
+    },
+  ];
+
+  const cartItem = {};
+  PRODUCT_KEYS.forEach((key) => {
+    cartItem[key.className] = get_dom_value(
+      key.className,
+      key.type,
+      targetProduct
+    );
+  });
+  return cartItem;
+}
+
+// action - dom : get_buy_buttons_dom 호출
+function update_shipping_icons_dom(total) {
+  const buy_buttons = get_buy_buttons_dom();
+  buy_buttons.forEach((btn) => {
+    const btn_item_price = get_dom_value('price', 'number', btn.parentNode);
+    if (is_free_shipping(btn_item_price, total)) btn.show_free_shipping_icon();
+    else btn.hide_free_shipping_icon();
+  });
 }
 
-function calc_cart_total() {
-  shopping_cart_total = 0;
-  for (var i = 0; i < shopping_cart.length; i++) {
-    var item = shopping_cart[i];
-    shopping_cart_total += item.price;
+// action - dom [dynamicSelector]
+function get_dom_value(className, valueType, target = document) {
+  const el = target.querySelector(`.${className}`);
+  if (!el) return null;
+
+  if (valueType === 'string') {
+    return el.textContent;
+  } else {
+    return formatToNumber(el.textContent);
   }
-  set_cart_total_dom();
-  update_shipping_icons();
-  update_tax_dom();
 }
 
-function set_cart_total_dom() {
-  document.querySelector('.total-price').textContent = shopping_cart_total;
+// action - dom 'cart-list'
+function set_cart_list_dom() {
+  const cartList = document.getElementById('cart-list');
+  cartList.innerHTML = getCart()
+    .map(
+      (item) => `
+        <div class='cart-item'>
+        <span class='category'>${item.category}</span>
+          <h3 class='name'>${item['menu-name']}</h3>
+          <p class='price'>${formatNumberToCurrency(item.price)}</p>
+        </div>
+        `
+    )
+    .join('');
 }
 
-function update_shipping_icons() {
-  var buy_buttons = get_buy_buttons_dom();
-  for (var i = 0; i < buy_buttons.length; i++) {
-    var item = buy_buttons[i];
-    console.log(item);
-    if (item.price + shopping_cart_total >= 20) item.show_free_shopping_icon();
-    else item.hide_free_shopping_icon();
-  }
+// action - dom 'total-price'
+function set_total_price_dom(total) {
+  document.querySelector('.total-price').textContent = formatNumberToCurrency(
+    total + calc_tax(total)
+  );
 }
 
+// action - dom 'add-to-cart'
 function get_buy_buttons_dom() {
-  var buttons = [];
-
-  for (var i = 0; i < shopping_cart.length; i++) {
-    var item = shopping_cart[i];
-    item.show_free_shopping_icon = function () {
-      console.log('DOM 의 아이콘을 보여줍니다');
+  const add_to_cart_btns = Array.from(
+    document.querySelectorAll('.add-to-cart')
+  );
+  return add_to_cart_btns.map((btn) => {
+    btn.show_free_shipping_icon = function () {
+      this.parentNode
+        .querySelector('.free-shipping-icon')
+        .classList.remove('hidden');
     };
-    item.hide_free_shopping_icon = function () {
-      console.log('DOM 의 아이콘을 숨깁니다');
+    btn.hide_free_shipping_icon = function () {
+      this.parentNode
+        .querySelector('.free-shipping-icon')
+        .classList.add('hidden');
     };
-    buttons.push(item);
-  }
+    return btn;
+  });
+}
+
+// 비즈니스 - 세금
+function calc_tax(total) {
+  return total * 0.1;
+}
+// 비즈니스 - 배송
+function is_free_shipping(itemPrice, cartTotal) {
+  return itemPrice + cartTotal >= 20000;
+}
+
+// utils ? - DOM
+function show_dom(el) {
+  el.style.display = 'block';
+}
 
-  return buttons;
+// utils ? - DOM
+function hide_dom(el) {
+  el.style.display = 'none';
 }
 
-function update_tax_dom() {
-  set_tax_dom(shopping_cart_total * 0.1);
+// utils - format
+function formatToNumber(text) {
+  return parseFloat(text.replace(/[^\d]/g, ''));
 }
 
-function set_tax_dom(value) {
-  document.querySelector('.total-price').textContent = value;
+// utils - format
+function formatNumberToCurrency(priceNum) {
+  return priceNum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '원';
 }
diff --git a/src/2week/assets/css/app.css b/src/2week/assets/css/app.css
index f95b45b..8361762 100644
--- a/src/2week/assets/css/app.css
+++ b/src/2week/assets/css/app.css
@@ -4,8 +4,8 @@
 }
 
 body {
-  background-color: #F2EEE9;
-  font: normal 13px/1.5 Georgia, Serif;
+  background-color: #f2eee9;
+  font: normal 13px/1.5 'sans-serif';
   color: #333;
 }
 
@@ -67,7 +67,7 @@ button {
   border: none;
   border-radius: 8px;
   padding: 4px 14px;
-  background-color: #00A29E;
+  background-color: #00a29e;
   color: #ffffff;
   text-transform: uppercase;
   float: right;
@@ -82,7 +82,7 @@ button {
 }
 
 button:hover {
-  background-color: #00C6C2;
+  background-color: #00c6c2;
 }
 
 button:active {
@@ -93,22 +93,97 @@ span {
   float: right;
 }
 
+.hidden {
+  display: none;
+}
+
 .shopping-cart {
   display: inline-block;
-  background: url('http://cdn1.iconfinder.com/data/icons/jigsoar-icons/24/_cart.png') no-repeat 0 0;
+  background: url('http://cdn1.iconfinder.com/data/icons/jigsoar-icons/24/_cart.png')
+    no-repeat 0 0;
   width: 24px;
   height: 24px;
   margin: 0 10px 0 0;
 }
 
+.free-shipping-icon {
+  color: #fff;
+  font-size: 13px;
+  background: #212529;
+  padding: 2px 6px;
+  border-radius: 8px;
+  margin-top: 10px;
+  float: left;
+}
+
 .category {
   border-radius: 8px;
   background-color: #fff;
-  border: 1px solid #00A29E;
-  color: #00A29E;
+  border: 1px solid #00a29e;
+  color: #00a29e;
   padding: 6px;
 }
 
-p, .price {
+p,
+.price {
   height: 20px;
-}
\ No newline at end of file
+}
+
+/* cart layer */
+#cart-layer {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #21252940;
+}
+
+#cart-layer_inner {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 40%;
+  height: 100%;
+  background-color: #fff;
+}
+
+#cart-layer_inner > h2 {
+  font-size: large;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+#cart-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 16px;
+}
+
+#cart-list .cart-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background-color: #00585760;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+#cart-list .cart-item > .name {
+  width: 100%;
+  font-size: 14px;
+  margin-bottom: 8px;
+}
+
+#cart-list .cart-item > .category {
+  width: 24px;
+  height: 24px;
+}
+
+#cart-list .cart-item > .price {
+  width: 20%;
+  font-weight: 700;
+}
diff --git a/src/2week/cart.js b/src/2week/cart.js
new file mode 100644
index 0000000..d8a615b
--- /dev/null
+++ b/src/2week/cart.js
@@ -0,0 +1,30 @@
+const ShoppingCart = () => {
+  let shopping_cart = [];
+
+  const cartGetter = () => [...shopping_cart];
+
+  const cartTotalGetter = () =>
+    shopping_cart.reduce((acc, item) => acc + item.price, 0);
+
+  const cartSetter = (action, item) => {
+    switch (action) {
+      case 'add':
+        shopping_cart = [...shopping_cart, item];
+        break;
+      case 'update':
+        break;
+      case 'delete':
+        break;
+      default:
+        throw new Error('Action must be one of "add", "update", or "delete"');
+    }
+  };
+
+  return {
+    cartGetter,
+    cartTotalGetter,
+    cartSetter,
+  };
+};
+
+export default ShoppingCart;
diff --git a/src/2week/index.html b/src/2week/index.html
index c4111e9..6476c9a 100644
--- a/src/2week/index.html
+++ b/src/2week/index.html
@@ -2,121 +2,153 @@
 <html lang="ko">
 
 <head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>FECrash 카페</title>
-  <link rel="stylesheet" href="./assets/css/reset.css">
-  <link rel="stylesheet" href="./assets/css/app.css">
+  <link rel="stylesheet" href="./assets/css/reset.css" />
+  <link rel="stylesheet" href="./assets/css/app.css" />
 </head>
 
 <body>
   <div class="wrapper">
     <h1>FECrash 카페</h1>
     <div class="carts">
-      <span class="icons"><i class="shopping-cart"></i></span>
-      <span class="total-price">0원</span>
+      <span class="icons"><i class="shopping-cart"></i>
+        <span class="total-price">0원</span>
     </div>
 
+    <div id="cart-layer">
+      <div id="cart-layer_inner">
+        <h2>장바구니</h2>
+        <div id="cart-list"></div>
+      </div>
+    </div>
     <div class="clear"></div>
+
     <div class="items">
       <div class="item">
         <img src="./assets/image/coffee/오늘의_커피.jpeg" width="200" height="200" alt="item" />
-        <h2><em class="category">C</em><span class="menu-name">오늘의 커피</span></h2>
+        <h2>
+          <em class="category">C</em><span class="menu-name">오늘의 커피</span>
+        </h2>
         <p>가격: <span class="price">1,000원</span></p>
-        <button class="add-to-cart" type="button">장바구니에 담기</button>
+        <span class="free-shipping-icon hidden">무료배송</span>
+        <button class="add-to-cart" type="button">장바구니에 담기 </button>
       </div>
       <div class="item">
         <img src="./assets/image/coffee/나이트로_바닐라_크림.jpeg" width="200" height="200" alt="item" />
-        <h2><em class="category">C</em><span class="menu-name">나이트로 바닐라 크림</span></h2>
+        <h2>
+          <em class="category">C</em><span class="menu-name">나이트로 바닐라 크림</span>
+        </h2>
 
-        <p>가격: <span class="price">3,500원</span>
-        </p>
-        <button class="add-to-cart" type="button">장바구니에 담기</button>
+        <p>가격: <span class="price">3,500원</span></p>
+        <span class="free-shipping-icon hidden">무료배송</span>
+        <button class="add-to-cart" type="button">장바구니에 담기 </button>
       </div>
       <div class="item">
         <img src="./assets/image/coffee/나이트로_콜드_브루.jpeg" width="200" height="200" alt="item" />
-        <h2><em class="category">C</em><span class="menu-name">나이트로 콜드 브루</span></h2>
+        <h2>
+          <em class="category">C</em><span class="menu-name">나이트로 콜드 브루</span>
+        </h2>
 
-        <p>가격: <span class="price">4,000원</span>
-        </p>
+        <p>가격: <span class="price">4,000원</span></p>
+        <span class="free-shipping-icon hidden">무료배송</span>
         <button class="add-to-cart" type="button">장바구니에 담기</button>
       </div>
       <div class="item">
         <img src="./assets/image/coffee/돌체_콜드_브루.jpeg" width="200" height="200" alt="item" />
-        <h2><em class="category">C</em><span class="menu-name">돌체 콜드 브루</span></h2>
+        <h2>
+          <em class="category">C</em><span class="menu-name">돌체 콜드 브루</span>
+        </h2>
 
-        <p>가격: <span class="price">3,900원</span>
-        </p>
+        <p>가격: <span class="price">3,900원</span></p>
+        <span class="free-shipping-icon hidden">무료배송</span>
         <button class="add-to-cart" type="button">장바구니에 담기</button>
       </div>
       <div class="item">
         <img src="./assets/image/coffee/자바_칩_프라푸치노.jpeg" width="200" height="200" alt="item" />
-        <h2><em class="category">C</em><span class="menu-name">자바 칩 프라푸치노</span></h2>
+        <h2>
+          <em class="category">C</em><span class="menu-name">자바 칩 프라푸치노</span>
+        </h2>
 
-        <p>가격: <span class="price">5,200원</span>
-        </p>
+        <p>가격: <span class="price">5,200원</span></p>
+        <span class="free-shipping-icon hidden">무료배송</span>
         <button class="add-to-cart" type="button">장바구니에 담기</button>
       </div>
       <div class="item">
         <img src="./assets/image/coffee/민트_콜드_브루.jpeg" width="200" height="200" alt="item" />
-        <h2><em class="category">C</em><span class="menu-name">민트 콜드 브루</span></h2>
+        <h2>
+          <em class="category">C</em><span class="menu-name">민트 콜드 브루</span>
+        </h2>
 
-        <p>가격: <span class="price">4,800원</span>
-        </p>
+        <p>가격: <span class="price">4,800원</span></p>
+        <span class="free-shipping-icon hidden">무료배송</span>
         <button class="add-to-cart" type="button">장바구니에 담기</button>
       </div>
       <div class="item">
         <img src="./assets/image/coffee/바닐라_크림_콜드_브루.jpeg" width="200" height="200" alt="item" />
-        <h2><em class="category">C</em><span class="menu-name">바닐라 크림 콜드 브루</span></h2>
+        <h2>
+          <em class="category">C</em><span class="menu-name">바닐라 크림 콜드 브루</span>
+        </h2>
 
-        <p>가격: <span class="price">4,300원</span>
-        </p>
+        <p>가격: <span class="price">4,300원</span></p>
+        <span class="free-shipping-icon hidden">무료배송</span>
         <button class="add-to-cart" type="button">장바구니에 담기</button>
       </div>
       <div class="item">
         <img src="./assets/image/coffee/아이스_토피넛_라떼.jpeg" width="200" height="200" alt="item" />
-        <h2><em class="category">C</em><span class="menu-name">아이스 토피넛 라떼</span></h2>
+        <h2>
+          <em class="category">C</em><span class="menu-name">아이스 토피넛 라떼</span>
+        </h2>
 
-        <p>가격: <span class="price">5,500원</span>
-        </p>
+        <p>가격: <span class="price">5,500원</span></p>
+        <span class="free-shipping-icon hidden">무료배송</span>
         <button class="add-to-cart" type="button">장바구니에 담기</button>
       </div>
       <div class="item">
         <img src="./assets/image/coffee/제주_비저링_콜드_브루.jpeg" width="200" height="200" alt="item" />
-        <h2><em class="category">C</em><span class="menu-name">제주 비저링 콜드 브루</span></h2>
+        <h2>
+          <em class="category">C</em><span class="menu-name">제주 비저링 콜드 브루</span>
+        </h2>
 
-        <p>가격: <span class="price">6,000원</span>
-        </p>
+        <p>가격: <span class="price">6,000원</span></p>
+        <span class="free-shipping-icon hidden">무료배송</span>
         <button class="add-to-cart" type="button">장바구니에 담기</button>
       </div>
       <div class="item">
         <img src="./assets/image/bread/라즈베리_쇼콜라.jpeg" width="200" height="200" alt="item" />
-        <h2><em class="category">B</em><span class="menu-name">라즈베리 쇼콜라</span></h2>
+        <h2>
+          <em class="category">B</em><span class="menu-name">라즈베리 쇼콜라</span>
+        </h2>
 
-        <p>가격: <span class="price">7,000원</span>
-        </p>
+        <p>가격: <span class="price">7,000원</span></p>
+        <span class="free-shipping-icon hidden">무료배송</span>
         <button class="add-to-cart" type="button">장바구니에 담기</button>
       </div>
       <div class="item">
         <img src="./assets/image/bread/클래식_스콘.jpeg" width="200" height="200" alt="item" />
-        <h2><em class="category">B</em><span class="menu-name">클래식 스콘</span></h2>
+        <h2>
+          <em class="category">B</em><span class="menu-name">클래식 스콘</span>
+        </h2>
 
-        <p>가격: <span class="price">3,300원</span>
-        </p>
+        <p>가격: <span class="price">3,300원</span></p>
+        <span class="free-shipping-icon hidden">무료배송</span>
         <button class="add-to-cart" type="button">장바구니에 담기</button>
       </div>
       <div class="item">
         <img src="./assets/image/bread/티라미수_크림_데니쉬.jpeg" width="200" height="200" alt="item" />
-        <h2><em class="category">B</em><span class="menu-name">티라미수 크림 데니쉬</span></h2>
+        <h2>
+          <em class="category">B</em><span class="menu-name">티라미수 크림 데니쉬</span>
+        </h2>
 
-        <p>가격: <span class="price">7,200원</span>
-        </p>
+        <p>가격: <span class="price">7,200원</span></p>
+        <span class="free-shipping-icon hidden">무료배송</span>
         <button class="add-to-cart" type="button">장바구니에 담기</button>
       </div>
     </div>
   </div>
-  <script src="./app.js"></script>
+  <script type="module" src="./app.js"></script>
 </body>
 
 </html>
\ No newline at end of file