첫 커밋

src/entities/transaction/ui/all-transaction-part-cancel.tsx

@@ -0,0 +1,124 @@
+import { IMAGE_ROOT } from '@/shared/constants/common';
+
+
+export const AllTransactionPartCancel = () => {
+  
+
+  return (
+    <>
+      <div className="tb_both">
+        <table className="partial-cancel-table">
+          <colgroup>
+            <col width="30%" />
+            <col width="30%" />
+            <col width="40%" />
+          </colgroup>
+          <thead>
+            <tr>
+              <th className="header-empty"></th>
+              <th className="header-balance">잔액</th>
+              <th className="header-cancel">취소금액</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td className="row-label">과세액</td>
+              <td className="row-balance">555,550,000</td>
+              <td className="row-cancel">
+                <input 
+                  className="cancel-input"
+                  type="text"
+                  value=""
+                />
+              </td>
+            </tr>
+              <tr>
+                <td className="row-label">부가세</td>
+                <td className="row-balance">50,000</td>
+                <td className="row-cancel">
+                  <input 
+                    className="cancel-input"
+                    type="text"
+                    placeholder=""
+                  />
+                </td>
+              </tr>
+              <tr>
+                <td className="row-label">면세</td>
+                <td className="row-balance">50,000</td>
+                <td className="row-cancel">
+                  <input 
+                    className="cancel-input"
+                    type="text"
+                    placeholder=""
+                  />
+                </td>
+              </tr>
+              <tr>
+                <td className="row-label">봉사료</td>
+                <td className="row-balance">50,000</td>
+                <td className="row-cancel">
+                  <input 
+                    className="cancel-input"
+                    type="text"
+                    placeholder=""
+                  />
+                </td>
+              </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div className="form-section">
+        <div className="form-group">
+          <label className="form-label">취소 비밀번호</label>
+          <div className="input-wrapper wid-100 error">
+            <input 
+              className="wid-100 align-right"
+              type="password"
+              value=""
+            />
+          </div>
+        </div>
+        <div className="error-msg">비밀번호 불일치</div>
+
+        <div className="form-group">
+          <label className="form-label">은행</label>
+          <div className="input-wrapper wid-100">
+            <select className="wid-100 align-right">
+              <option>선택</option>
+              <option>KB국민은행</option>
+              <option>22323213123</option>
+            </select>
+          </div>
+        </div>
+    
+        <div className="form-group">
+          <label className="form-label">계좌번호</label>
+          <div className="input-wrapper wid-100">
+            <input 
+              className="form-input wid-100"
+              type="text"
+              placeholder=""
+            />
+          </div>
+        </div>
+
+        <div className="form-group">
+          <label className="form-label">예금주</label>
+          <div className="input-wrapper wid-100">
+            <input
+              className="form-input  wid-100"
+              type="text"
+              placeholder=""
+            />
+          </div>
+        </div>
+
+        <div className="notice-text wid-100">
+          <p>환불은 입력한 계좌정보로 별도 확인 절차없이 지급됩니다.<br />입력 정보를 한번 더 확인해 주세요.</p>
+        </div>
+      </div>  
+    </>
+  );
+};