diff --git a/SCM/backend/src/main/java/error/pirate/backend/common/Pagination.java b/SCM/backend/src/main/java/error/pirate/backend/common/Pagination.java
index d5631297..3b2aa197 100644
--- a/SCM/backend/src/main/java/error/pirate/backend/common/Pagination.java
+++ b/SCM/backend/src/main/java/error/pirate/backend/common/Pagination.java
@@ -1,5 +1,6 @@
 package error.pirate.backend.common;
 
+import io.micrometer.common.util.StringUtils;
 import lombok.Data;
 import lombok.RequiredArgsConstructor;
 
@@ -25,6 +26,13 @@ public class Pagination {
 
     private int totalPageNo;
 
+    public String getSearchEndDate() {
+        if(StringUtils.isNotEmpty(searchEndDate)) {
+            return searchEndDate + " 23:59:59";
+        }
+        return null;
+    }
+
     public int getOffset() {
         return (pageNo - 1) * limit;
     }
diff --git a/SCM/backend/src/main/java/error/pirate/backend/purchase/query/dto/PurchaseItemResponse.java b/SCM/backend/src/main/java/error/pirate/backend/purchase/query/dto/PurchaseItemResponse.java
index 3fe53b5c..3e0a6ae5 100644
--- a/SCM/backend/src/main/java/error/pirate/backend/purchase/query/dto/PurchaseItemResponse.java
+++ b/SCM/backend/src/main/java/error/pirate/backend/purchase/query/dto/PurchaseItemResponse.java
@@ -12,6 +12,8 @@ public class PurchaseItemResponse {
 
     private Long itemSeq; // 품목 번호
 
+    private String warehouseName;  // 입고창고명
+
     private String itemName;  // 품목 이름
 
     private String itemImageUrl;  // 품목 사진 url
diff --git a/SCM/backend/src/main/java/error/pirate/backend/purchase/query/dto/PurchaseRequest.java b/SCM/backend/src/main/java/error/pirate/backend/purchase/query/dto/PurchaseRequest.java
index 54f2760e..06b3af4c 100644
--- a/SCM/backend/src/main/java/error/pirate/backend/purchase/query/dto/PurchaseRequest.java
+++ b/SCM/backend/src/main/java/error/pirate/backend/purchase/query/dto/PurchaseRequest.java
@@ -5,7 +5,7 @@
 
 public class PurchaseRequest extends Pagination {
 
-    private String clientName;  // 거래처명
+    private String clientName;
 
     private PurchaseStatus purchaseStatus;
 
diff --git a/SCM/backend/src/main/java/error/pirate/backend/purchase/query/dto/PurchaseResponse.java b/SCM/backend/src/main/java/error/pirate/backend/purchase/query/dto/PurchaseResponse.java
index b4b2c5bc..0412e5a1 100644
--- a/SCM/backend/src/main/java/error/pirate/backend/purchase/query/dto/PurchaseResponse.java
+++ b/SCM/backend/src/main/java/error/pirate/backend/purchase/query/dto/PurchaseResponse.java
@@ -18,12 +18,13 @@ public class PurchaseResponse {
 
     private String clientName; // 거래처 이름
 
-    private String warehouseName;  // 입고창고명
-
     private String purchaseName; // 구매처명
 
     private PurchaseStatus purchaseStatus; // 상태
 
+    @Setter
+    private String purchaseStatusValue;
+
     private LocalDateTime purchaseContractDate; // 계약일
 
     private LocalDateTime purchaseRegDate;
diff --git a/SCM/backend/src/main/java/error/pirate/backend/purchase/query/service/PurchaseService.java b/SCM/backend/src/main/java/error/pirate/backend/purchase/query/service/PurchaseService.java
index a0780913..ae7abd66 100644
--- a/SCM/backend/src/main/java/error/pirate/backend/purchase/query/service/PurchaseService.java
+++ b/SCM/backend/src/main/java/error/pirate/backend/purchase/query/service/PurchaseService.java
@@ -33,6 +33,8 @@ public PurchaseResponsePagination readPurchaseList(PurchaseRequest request) {
 
         int totalCount = purchaseMapper.readPurchaseListCount(request);
 
+        purchaseResponseList.forEach(order -> order.setPurchaseStatusValue(order.getPurchaseStatus().getValue()));
+        
         Pagination pagination = new Pagination();
         pagination.responsePaging(request.getPageNo(), totalCount);
 
@@ -48,7 +50,7 @@ public byte[] purchaseExcelDown(PurchaseRequest request) {
         request.setOffset(null);
         List<PurchaseResponse> purchaseResponseList = purchaseMapper.readPurchaseList(request);
 
-        String[] headers = {"구매서명", "구매서 품목", "거래처명", "입고 창고명", "계약일", "상태"};
+        String[] headers = {"구매서명", "구매서 품목", "거래처명", "계약일", "상태"};
         String[][] excel = new String[purchaseResponseList.size()][headers.length];
 
         for(int i=0 ; i<purchaseResponseList.size() ; i++) {
@@ -61,11 +63,10 @@ public byte[] purchaseExcelDown(PurchaseRequest request) {
                     .map(PurchaseItemResponse::getItemName)
                     .collect(Collectors.joining(", "));//  품목
             excel[i][2] = dto.getClientName();
-            excel[i][3] = dto.getWarehouseName();
-            excel[i][4] = dto.getPurchaseContractDate() != null
+            excel[i][3] = dto.getPurchaseContractDate() != null
                     ? dto.getPurchaseContractDate().format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"))
                     : null;
-            excel[i][5] = String.valueOf(dto.getPurchaseStatus());
+            excel[i][4] = String.valueOf(dto.getPurchaseStatus());
         }
 
         return excelDownBody.excelDownBody(excel, headers, "구매서");
diff --git a/SCM/backend/src/main/java/error/pirate/backend/purchaseOrder/query/dto/PurchaseOrderResponse.java b/SCM/backend/src/main/java/error/pirate/backend/purchaseOrder/query/dto/PurchaseOrderResponse.java
index 6f7ade48..0c05204f 100644
--- a/SCM/backend/src/main/java/error/pirate/backend/purchaseOrder/query/dto/PurchaseOrderResponse.java
+++ b/SCM/backend/src/main/java/error/pirate/backend/purchaseOrder/query/dto/PurchaseOrderResponse.java
@@ -20,6 +20,9 @@ public class PurchaseOrderResponse {
 
     private PurchaseOrderStatus purchaseOrderStatus; // 발주서 상태
 
+    @Setter
+    private String purchaseOrderStatusValue;
+
     private LocalDateTime purchaseOrderDueDate; // 발주서 계약 납기일
 
     private LocalDateTime purchaseOrderTargetDueDate; // 발주서 목표 납기일
diff --git a/SCM/backend/src/main/java/error/pirate/backend/purchaseOrder/query/service/PurchaseOrderService.java b/SCM/backend/src/main/java/error/pirate/backend/purchaseOrder/query/service/PurchaseOrderService.java
index f2c4cf65..9ea74b83 100644
--- a/SCM/backend/src/main/java/error/pirate/backend/purchaseOrder/query/service/PurchaseOrderService.java
+++ b/SCM/backend/src/main/java/error/pirate/backend/purchaseOrder/query/service/PurchaseOrderService.java
@@ -33,6 +33,8 @@ public PurchaseOrderResponsePagination readPurchaseOrderList(PurchaseOrderReques
 
         int totalCount = purchaseOrderMapper.readPurchaseOrderListCount(purchaseOrderRequest);
 
+        purchaseOrderResponseList.forEach(order -> order.setPurchaseOrderStatusValue(order.getPurchaseOrderStatus().getValue()));
+
         Pagination pagination = new Pagination();
         pagination.responsePaging(purchaseOrderRequest.getPageNo(), totalCount);
 
diff --git a/SCM/backend/src/main/resources/mappers/purchase/PurchaseMapper.xml b/SCM/backend/src/main/resources/mappers/purchase/PurchaseMapper.xml
index bda2d6dd..c30f45ab 100644
--- a/SCM/backend/src/main/resources/mappers/purchase/PurchaseMapper.xml
+++ b/SCM/backend/src/main/resources/mappers/purchase/PurchaseMapper.xml
@@ -13,28 +13,27 @@
             tp.purchase_extended_price,
             tp.purchase_note,
             tu.user_name,
-            tc.client_name,
-            tw.warehouse_name
+            tc.client_name
         FROM tb_purchase tp
         JOIN tb_user tu USING (user_seq)
-        JOIN tb_warehouse tw USING (warehouse_seq)
-        JOIN tb_client tc ON (tu.user_seq = tc.user_seq)
+        JOIN tb_purchase_order tpo USING (purchase_order_seq)
+        JOIN tb_client tc ON (tpo.client_seq = tc.client_seq)
         <trim prefix="WHERE" prefixOverrides="AND">
             <if test="searchStartDate != null and searchStartDate != ''">
                 <![CDATA[
-                AND #{searchStartDate} <= tpo.purchase_order_target_due_date
+                AND #{searchStartDate} <= tp.purchase_contract_date
                 ]]>
             </if>
             <if test="searchEndDate != null and searchEndDate != ''">
                 <![CDATA[
-                AND #{searchEndDate} >= tpo.purchase_order_target_due_date
+                AND #{searchEndDate} >= tp.purchase_contract_date
                 ]]>
             </if>
-            <if test="clientName != null">
-                AND tc.client_name LIKE CONCAT('%', #{clientName}, '%')
+            <if test="searchName != null">
+                AND tc.client_name LIKE CONCAT('%', #{searchName}, '%')
             </if>
-            <if test="purchaseStatus != null">
-                AND tp.purchase_status = #{purchaseStatus}
+            <if test="searchStatus != null">
+                AND tp.purchase_status = #{searchStatus}
             </if>
         </trim>
         ORDER BY tp.purchase_seq
@@ -52,9 +51,11 @@
             tpi.purchase_item_status,
             tpi.purchase_item_note,
             ti.item_name,
-            ti.item_image_url
+            ti.item_image_url,
+            tw.warehouse_name
         FROM tb_purchase_item tpi
         JOIN tb_item ti USING (item_seq)
+        JOIN tb_warehouse tw ON (ti.warehouse_seq = tw.warehouse_seq)
         WHERE tpi.purchase_seq = #{purchaseSeq}
         ORDER BY tpi.purchase_item_seq
     </select>
@@ -64,24 +65,24 @@
             COUNT(*)
         FROM tb_purchase tp
         JOIN tb_user tu USING (user_seq)
-        JOIN tb_warehouse tw USING (warehouse_seq)
-        JOIN tb_client tc ON (tu.user_seq = tc.user_seq)
+        JOIN tb_purchase_order tpo USING (purchase_order_seq)
+        JOIN tb_client tc ON (tpo.client_seq = tc.client_seq)
         <trim prefix="WHERE" prefixOverrides="AND">
             <if test="searchStartDate != null and searchStartDate != ''">
                 <![CDATA[
-                AND #{searchStartDate} <= tpo.purchase_order_target_due_date
+                AND #{searchStartDate} <= tp.purchase_contract_date
                 ]]>
             </if>
             <if test="searchEndDate != null and searchEndDate != ''">
                 <![CDATA[
-                AND #{searchEndDate} >= tpo.purchase_order_target_due_date
+                AND #{searchEndDate} >= tp.purchase_contract_date
                 ]]>
             </if>
-            <if test="clientName != null">
-                AND tc.client_name LIKE CONCAT('%', #{clientName}, '%')
+            <if test="searchName != null">
+                AND tc.client_name LIKE CONCAT('%', #{searchName}, '%')
             </if>
-            <if test="purchaseStatus != null">
-                AND tp.purchase_status = #{purchaseStatus}
+            <if test="searchStatus != null">
+                AND tp.purchase_status = #{searchStatus}
             </if>
         </trim>
     </select>
diff --git a/SCM/frontend/src/components/common/Header.vue b/SCM/frontend/src/components/common/Header.vue
index 63140455..6c8a9848 100644
--- a/SCM/frontend/src/components/common/Header.vue
+++ b/SCM/frontend/src/components/common/Header.vue
@@ -36,7 +36,7 @@ import statisticsIcon from '@/assets/statisticsIcon.svg'
         <b-nav-item-dropdown>
           <template #button-content><orderIcon class="icon" />주문관리</template>
           <b-dropdown-item href="#"><RouterLink to="/purchaseOrder" active-class="active none-decoration" replace>발주서 관리</RouterLink></b-dropdown-item>
-          <b-dropdown-item href="#">구매서 관리</b-dropdown-item>
+          <b-dropdown-item href="#"><RouterLink to="/purchase" active-class="active none-decoration" replace>구매서 관리</RouterLink></b-dropdown-item>
         </b-nav-item-dropdown>
         <b-nav-item-dropdown>
           <template #button-content><productionIcon class="icon" />생산관리</template>
diff --git a/SCM/frontend/src/components/purchase/PurchaseInputForm.vue b/SCM/frontend/src/components/purchase/PurchaseInputForm.vue
new file mode 100644
index 00000000..4abd5878
--- /dev/null
+++ b/SCM/frontend/src/components/purchase/PurchaseInputForm.vue
@@ -0,0 +1,216 @@
+<script setup>
+import {defineProps, ref, watch} from "vue";
+import searchIcon from '@/assets/searchIcon.svg'
+
+const props = defineProps({
+  salesOrderList: {type: Array, required: true},       // 출하지시서 목록
+  totalCount: {type: Number, required: true},       // 검색 결과 총 개수
+  pageNumber: {type: Number, required: true},       // 현재 페이지 번호
+  pageSize: {type: Number, required: true},         // 페이지 사이즈
+});
+
+const emit = defineEmits(
+    ['pageEvent', 'salesOrderEvent']);
+
+const formData = ref({
+  salesOrderSeq: 0,
+  shippingInstructionDate: '',
+  salesOrder: '',
+  client: '',
+  address: '',
+  note: '',
+});
+const pageNumber = ref(props.pageNumber);
+
+watch(pageNumber, () => {
+  emit('pageEvent', pageNumber);
+})
+
+const addClient = (index) => {
+  formData.value.salesOrderSeq = props.salesOrderList[index].salesOrderSeq;
+  formData.value.salesOrder = props.salesOrderList[index].salesOrderName;
+  formData.value.client = props.salesOrderList[index].clientName;
+  emit('salesOrderEvent', formData);
+}
+
+// 부모 컴포넌트가 이 메서드를 호출해 데이터를 가져갈 수 있도록 노출
+const getData  = () => {
+  return formData;
+};
+defineExpose({ getData });
+
+// 날짜 포맷 함수
+const formatDate = (dateString) => {
+  if (!dateString) return '';
+
+  const date = new Date(dateString);
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  const day = date.getDate().toString().padStart(2, '0');
+
+  return `${year}/${month}/${day}`;
+};
+
+// 상태 포맷 함수
+const formatStatus = (status) => {
+  if (status === 'PRODUCTION_COMPLETE') {
+    return '생산완료';
+  }
+  return status; // 상태가 다른 경우 그대로 반환
+};
+</script>
+
+<template>
+  <div class="col-6 d-flex flex-column">
+    <b-form-group label-cols="4" label-cols-lg="2" label="출하예정일자" label-for="quote-date">
+      <!--   b-form-input 에서  datetime-local 을 사용할 수 없음  -->
+      <input
+          class="form-control form-control-sm w-75"
+          type="datetime-local"
+          id="quote-date"
+          v-model="formData.shippingInstructionDate"
+          placeholder="출하지시일자를 입력해 주세요.">
+    </b-form-group>
+
+    <b-form-group label-cols="4" label-cols-lg="2" label-size="default" label="주문서" label-for="client">
+      <b-input-group class="w-75" size="sm">
+        <b-form-input
+            type="text"
+            id="client"
+            v-model="formData.salesOrder"
+            placeholder="주문서를 선택해 주세요."
+            readonly="">
+        </b-form-input>
+        <b-input-group-text>
+          <searchIcon class="icon" data-bs-toggle="modal" data-bs-target="#ClientModal"/>
+        </b-input-group-text>
+      </b-input-group>
+    </b-form-group>
+
+    <b-form-group label-cols="4" label-cols-lg="2" label-size="default" label="거래처" label-for="manager">
+      <b-form-input
+          class="w-75"
+          size="sm"
+          type="text"
+          id="manager"
+          v-model="formData.client"
+          placeholder="거래처"
+          readonly="">
+      </b-form-input>
+    </b-form-group>
+
+    <b-form-group label-cols="4" label-cols-lg="2" label-size="default" label="출하 주소" label-for="note">
+      <b-form-input
+          class="w-75"
+          type="text"
+          size="sm"
+          id="note"
+          v-model="formData.address"
+          placeholder="출하 주소를 입력해 주세요.">
+      </b-form-input>
+    </b-form-group>
+
+    <b-form-group label-cols="4" label-cols-lg="2" label-size="default" label="출하지시 비고" label-for="note">
+      <b-form-input
+          type="text"
+          size="sm"
+          id="note"
+          v-model="formData.note"
+          placeholder="내용을 입력해 주세요.">
+      </b-form-input>
+    </b-form-group>
+  </div>
+
+  <!-- client Modal bootstrap -->
+  <div class="modal fade" id="ClientModal" tabindex="-1" aria-labelledby="ClientModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-xl">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h1 class="modal-title fs-5" id="exampleModalLabel">물품 선택</h1>
+          <div class="ms-5">검색결과: {{ totalCount }}개</div>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <div style="max-height: 500px; overflow-y: scroll"
+               class="d-flex row justify-content-center align-items-center">
+            <div class="list-headline row">
+              <div class="list-head col-6">주문서</div>
+              <div class="list-head col-2">거래처</div>
+              <div class="list-head col-2">주문일</div>
+              <div class="list-head col-2">상태</div>
+            </div>
+            <template v-if="salesOrderList.length > 0">
+              <div v-for="(salesOrder, index) in salesOrderList"
+                   :key="salesOrder.salesOrderSeq"
+                   class="list-line row" data-bs-dismiss="modal" @click="addClient(index)">
+                <div class="list-body col-6 left">
+                  {{ salesOrder.salesOrderName }}
+                  <br>
+                  <div v-if="!salesOrder.itemName"><br></div>
+                  <div v-else>{{ salesOrder.itemName }}</div>
+                </div>
+                <div class="list-body col-2">{{ salesOrder.clientName }}</div>
+                <div class="list-body col-2">{{
+                    formatDate(salesOrder.salesOrderOrderDate)
+                  }}
+                </div>
+                <div class="list-body col-2">{{ formatStatus(salesOrder.salesOrderStatus) }}</div>
+              </div>
+            </template>
+            <template v-else>
+              <b-card-text class="no-list-text">해당 검색조건에 부합한 출하지시서가 존재하지 않습니다.</b-card-text>
+            </template>
+          </div>
+        </div>
+        <div class="modal-footer pagination">
+          <b-pagination
+              v-model="pageNumber"
+              :totalRows="props.totalCount"
+              :perPage="props.pageSize">
+          </b-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+div {
+  font-size: small;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+}
+
+.list-headline {
+  width: 90%;
+  border-bottom: 1px solid black;
+  margin-bottom: 10px;
+  padding: 20px 40px 20px 20px;
+}
+
+.list-head {
+  text-align: center;
+}
+
+.list-line {
+  width: 90%;
+  border: 1px solid Silver;
+  border-radius: 8px;
+  margin-left: 1px;
+  margin-top: 20px;
+  padding: 20px 40px 20px 20px;
+}
+
+.list-body {
+  text-align: center;
+  margin: auto 0;
+}
+
+.pagination {
+  justify-content: center; /* 가로 중앙 정렬 */
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/SCM/frontend/src/components/purchase/PurchaseInputItems.vue b/SCM/frontend/src/components/purchase/PurchaseInputItems.vue
new file mode 100644
index 00000000..86a50ec3
--- /dev/null
+++ b/SCM/frontend/src/components/purchase/PurchaseInputItems.vue
@@ -0,0 +1,89 @@
+<script setup>
+import {onMounted, ref, watch} from 'vue';
+import axios from "axios";
+import searchIcon from "@/assets/searchIcon.svg";
+import dayjs from "dayjs";
+
+const totalCount = ref(0);
+const pageNumber = ref(1);
+const purchaseOrderList = ref([]);
+const searchStartDate = ref(null);
+const searchEndDate = ref(null);
+const searchName = ref(null);
+const searchStatus = ref(null);
+
+const fetchPurchaseOrderList = async () => {
+  try {
+    const response = await axios.get(`http://localhost:8090/api/v1/purchaseOrder`, {
+      params: {
+        searchStartDate: searchStartDate.value,
+        searchEndDate: searchEndDate.value,
+        searchName: searchName.value,
+        searchStatus: searchStatus.value.size === 0 ? null : Array.from(searchStatus.value),
+        page: pageNumber.value - 1, // Spring Pageable에서 0부터 시작
+        size: pageSize.value
+      }, paramsSerializer: (params) => {
+        // null이나 undefined 값을 필터링
+        const filteredParams = Object.fromEntries(
+            Object.entries(params).filter(([_, value]) => value !== null && value !== undefined)
+        );
+        return new URLSearchParams(filteredParams).toString();
+      }
+    });
+
+    purchaseOrderList.value = response.data.purchaseOrderResponseList.content;
+    totalCount.value = response.data.totalCount;
+
+  } catch (error) {
+    console.error("발주서 불러오기 실패 :", error);
+  }
+};
+
+</script>
+
+<template>
+  <template v-if="props.selectedSalesOrder">
+    <div class="col-md-10 d-flex flex-column">
+      <h5 class="px-4">물품 등록</h5>
+      <div style="max-height: 250px; overflow-y: auto;">
+        <div style="max-height: 200px;" v-for="(item, index) in itemList" :key="item.salesOrderItemSeq"
+             class="mx-5 my-3 d-flex flex-row border border-secondary rounded">
+          <b-img class="p-2 col-md-4" src="https://picsum.photos/200/200" fluid alt="Responsive image"></b-img>
+          <div class="p-2 col-md-8">
+            <div class="mb-4 d-flex justify-content-between">
+              <span class="fw-bold">{{ item.itemName }}</span>
+            </div>
+            <div class="d-flex">
+              <ul class="col-md-4">
+                <li class="mb-3">
+                  · 품목 : {{ formatDivision(item.itemDivision) }}
+                </li>
+                <li class="mb-3 d-flex flex-row">
+                  · 수량 :
+                  <b-form-input class="ms-2 me-2 w-50" type="text" v-model="itemData[index].quantity" size="sm"></b-form-input>
+                  개
+                </li>
+              </ul>
+              <ul class="col-md-8 d-flex flex-column justify-content-between">
+                <li class="d-flex flex-row">
+                  · 비고 :
+                  <b-form-input class="ms-2 w-75" type="text" v-model="itemData[index].note" size="sm"></b-form-input>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mx-5 my-3 d-flex justify-content-end">
+        <b-button class="mx-3" pill variant="primary" @click="addShippingInstruction">확인</b-button>
+        <b-button class="mx-3" pill>목록</b-button>
+      </div>
+    </div>
+  </template>
+</template>
+
+<style scoped>
+li {
+  list-style: none;
+}
+</style>
\ No newline at end of file
diff --git a/SCM/frontend/src/components/purchase/PurchaseList.vue b/SCM/frontend/src/components/purchase/PurchaseList.vue
new file mode 100644
index 00000000..3b930caa
--- /dev/null
+++ b/SCM/frontend/src/components/purchase/PurchaseList.vue
@@ -0,0 +1,372 @@
+<script setup>
+import {onMounted, ref, watch} from 'vue';
+import axios from "axios";
+import searchIcon from "@/assets/searchIcon.svg";
+import trashIcon from "@/assets/trashIcon.svg";
+import editIcon from "@/assets/editIcon.svg";
+import printIcon from "@/assets/printIcon.svg";
+import dayjs from "dayjs";
+import router from "@/router/index.js";
+
+const totalCount = ref(0);
+const pageNumber = ref(1);
+const purchaseList = ref([]);
+const searchStartDate = ref('');
+const searchEndDate = ref('');
+const searchName = ref('');
+const searchStatus = ref([]);
+const expandedIndex = ref(null);
+
+const toggleDetails = (index) => {
+  expandedIndex.value = expandedIndex.value === index ? null : index;
+};
+
+const fetchPurchaseList = async () => {
+  try {
+    const params = {
+      searchStartDate: searchStartDate.value,
+      searchEndDate: searchEndDate.value,
+      searchName: searchName.value,
+      searchStatus: searchStatus.value.toString(),
+      pageNo: pageNumber.value,
+    };
+
+    const filteredParams = Object.fromEntries(
+        Object.entries(params).filter(([_, value]) => value !== null && value !== undefined && value !== '')
+    );
+
+    const response = await axios.get(`http://localhost:8090/api/v1/purchase`, {
+      params: filteredParams,
+      paramsSerializer: (params) => {
+        return new URLSearchParams(params).toString();
+      }
+    });
+
+    console.log(filteredParams);
+    console.log(response.data);
+    purchaseList.value = response.data.purchaseResponseList; // 구매서 목록
+    totalCount.value = response.data.pagination.totalCount;
+
+  } catch (error) {
+    console.error("구매서 불러오기 실패 :", error);
+  }
+};
+
+
+const excelDown = async () => {
+  const excelName = "구매서_" + new Date().getFullYear() + (new Date().getMonth() + 1) + new Date().getDay();
+  try {
+    const params = {
+      searchStartDate: searchStartDate.value,
+      searchEndDate: searchEndDate.value,
+      searchName: searchName.value,
+      searchStatus: searchStatus.value.toString(),
+      pageNo: pageNumber.value,
+    };
+
+    const filteredParams = Object.fromEntries(
+        Object.entries(params).filter(([_, value]) => value !== null && value !== undefined && value !== '')
+    );
+
+    const response = await axios.get(`http://localhost:8090/api/v1/purchase/excelDown`, {
+      params: filteredParams
+      , paramsSerializer: (params) => {
+        return new URLSearchParams(params).toString();
+      },
+      responseType: "blob", // 중요: blob 형식으로 설정
+    });
+
+    // Blob 객체 생성 및 다운로드 처리
+    const blob = new Blob([response.data], {
+      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = decodeURIComponent(excelName); // 파일명 디코딩
+    link.click();
+
+    // Blob URL 해제
+    URL.revokeObjectURL(link.href);
+
+  } catch (error) {
+    console.error("구매서 엑셀다운로드 실패 :", error);
+  }
+}
+
+onMounted(() => {
+  fetchPurchaseList();
+})
+
+watch(
+    [searchStartDate, searchEndDate],
+    () => {
+      search();
+    }
+);
+
+function check(status) {
+  const index = searchStatus.value.indexOf(status);
+  if (index > -1) {
+    searchStatus.value.splice(index, 1);
+  } else {
+    searchStatus.value.push(status);
+  }
+
+  search();
+}
+
+watch(pageNumber, () => {
+  fetchPurchaseList();
+})
+
+function search() {
+  pageNumber.value = 1;
+  fetchPurchaseList();
+}
+
+function register() {
+  router.push("/purchase/input");
+}
+
+const itemDelete = async (seq) => {
+  const result = confirm("정말 삭제하시겠습니까?");
+  if (result) {
+    try {
+      const response = await axios.delete(`http://localhost:8090/api/v1/purchase/${seq}`);
+      alert('구매서의 상태가 변경되었습니다.');
+
+      search(); // 삭제 후 목록 갱신
+    } catch (error) {
+      console.error("삭제 요청 실패:", error);
+      alert('삭제에 실패했습니다. 다시 시도해주세요.');
+    }
+  }
+};
+
+// 인쇄 함수
+const printItem = (index) => {
+  const printContent = document.getElementById(`print-area-${index}`).innerHTML;
+  const originalContent = document.body.innerHTML;
+
+  // 선택된 영역만 표시
+  document.body.innerHTML = printContent;
+
+  window.print();
+
+  // 원래 내용 복원
+  document.body.innerHTML = originalContent;
+
+  // Vue 리렌더링 방지
+  location.reload();
+};
+
+</script>
+
+<template>
+  <div class="row">
+    <div class="col-md-3">
+      <div class="side-box card">
+        <div class="card-body">
+          <p class="card-title">구매 계약일</p>
+          <input type="date" v-model="searchStartDate"/> ~ <input type="date" v-model="searchEndDate"/>
+        </div>
+      </div>
+      <div class="side-box card">
+        <div class="card-body">
+          <p class="card-title">거래처명</p>
+          <b-input-group class="mt-3">
+            <b-form-input v-model="searchName"></b-form-input>
+            <b-button variant="light" class="button" @click="search()">
+              <searchIcon class="icon"/>
+            </b-button>
+          </b-input-group>
+        </div>
+      </div>
+      <div class="side-box card">
+        <div class="card-body">
+          <p class="card-title">구매서 상태</p>
+          <b-form-checkbox
+              :checked="searchStatus.includes('PROGRESS')"
+              @change="check('PROGRESS')">
+            정산중
+          </b-form-checkbox>
+
+          <b-form-checkbox
+              :checked="searchStatus.includes('COMPLETE')"
+              @change="check('COMPLETE')">
+            정산완료
+          </b-form-checkbox>
+
+          <b-form-checkbox
+              :checked="searchStatus.includes('DELETE')"
+              @change="check('DELETE')">
+            삭제
+          </b-form-checkbox>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-9">
+      <div>
+        <div class="d-flex justify-content-between">
+          <div>검색결과: {{ totalCount }}개</div>
+          <div class="d-flex justify-content-end mt-3">
+            <b-button @click="excelDown()" variant="light" size="sm" class="button">엑셀 다운로드</b-button>
+            <b-button @click="register()" variant="light" size="sm" class="button ms-2">구매서 등록</b-button>
+          </div>
+        </div>
+        <div class="list-headline row">
+          <div class="list-head col-5">구매서명</div>
+          <div class="list-head col-2">거래처명</div>
+          <div class="list-head col-3">계약일</div>
+          <div class="list-head col-2">상태</div>
+        </div>
+        <template v-if="purchaseList?.length > 0">
+          <div style="max-height: 600px; overflow-y: auto;">
+            <div v-for="(purchase, index) in purchaseList" :key="purchase.purchaseSeq || index"
+                 class="list-line row" :id="'print-area-' + index" @click="toggleDetails(index)">
+              <div class="list-body col-5 left">
+                {{ purchase.purchaseName }}
+                <div v-if="purchase.purchaseItemResponseList?.length > 0">
+                  <template v-for="(purchaseItem, idx) in purchase.purchaseItemResponseList"
+                            :key="purchaseItem.purchaseItemSeq || idx">
+                    <span v-if="expandedIndex !== index">
+                      {{ purchaseItem.itemName }}
+                      <span v-if="idx < purchase.purchaseItemResponseList.length - 1">, </span>
+                    </span>
+                  </template>
+                </div>
+              </div>
+              <div class="list-body col-2">{{ purchase.clientName }}</div>
+              <div class="list-body col-3">
+                {{ purchase.purchaseContractDate ? dayjs(purchase.purchaseContractDate).format('YYYY/MM/DD HH:mm:ss') : ' - ' }}
+              </div>
+              <div class="list-body col-2">{{ purchase.purchaseStatusValue }}</div>
+
+              <!-- 확장된 상세 내용 -->
+              <div class="d-flex justify-content-center">
+                <div v-if="expandedIndex === index" class="col-md-11 mt-3">
+                  <p>총금액 : {{
+                      purchase.purchaseExtendedPrice.toLocaleString()
+                    }} 원</p>
+                  <p>담당자 : {{
+                      purchase.userName
+                    }}</p>
+                  <p>등록일 : {{
+                          purchase.purchaseRegDate ? dayjs(purchase.purchaseRegDate).format('YYYY/MM/DD HH:mm:ss') : ' - '
+                    }}</p>
+                  <p>수정일 : {{
+                      purchase.purchaseModDate ? dayjs(purchase.purchaseModDate).format('YYYY/MM/DD HH:mm:ss') : ' - '
+                    }}</p>
+                  <p>
+                    구매서 비고 :
+                    {{ purchase.purchaseNote }}
+                  </p>
+                  <div class="mb-3 d-flex flex-row">
+                    <div v-for="(purchaseItem, idx) in purchase.purchaseItemResponseList"
+                         :key="purchaseItem.purchaseItemSeq || idx"
+                         style="max-height: 250px;" class="me-5 col-md-3 d-flex flex-column border border-secondary rounded">
+                      <b-img
+                          style="max-height: 100px;"
+                          :src="purchaseItem.itemImageUrl != null ? purchaseItem.itemImageUrl : 'https://picsum.photos/200/200'"
+                          fluid
+                          alt="Responsive image">
+                      </b-img>
+                      <p class="ms-3"> 상품명: {{ purchaseItem.itemName }}</p>
+                      <p class="ms-3"> 입고 창고명: {{ purchaseItem.warehouseName }}</p>
+                      <p class="ms-3"> 수량: {{ purchaseItem.purchaseItemQuantity }}</p>
+                      <p class="ms-3"> 가격: {{ purchaseItem.purchaseItemPrice }}</p>
+                      <p class="ms-3"> 비고: {{ purchaseItem.purchaseItemNote }}</p>
+                    </div>
+                  </div>
+                  <div class="d-flex justify-content-end align-items-center">
+                    <printIcon class="me-3 icon" @click.stop="printItem(index)"/>
+                    <editIcon class="me-3 icon" @click.stop=""/>
+                    <trashIcon class="icon" @click.stop="itemDelete(purchase.purchaseSeq)"/>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="pagination">
+            <b-pagination
+                v-model="pageNumber"
+                :totalRows="totalCount"
+                :perPage="10"
+                @input="fetchPurchaseList">
+            </b-pagination>
+          </div>
+        </template>
+        <template v-else>
+          <b-card-text class="no-list-text">해당 검색조건에 부합한 구매서가 존재하지 않습니다.</b-card-text>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+div {
+  font-size: small;
+}
+
+.button {
+  background-color: #FFF8E7;
+  border: 1px solid;
+}
+
+.side-box {
+  min-height: 100px;
+  margin-top: 20px;
+}
+
+.card-title {
+  font-size: medium;
+  font-weight: bold;
+}
+
+.list-headline {
+  border-bottom: 1px solid black;
+  margin-bottom: 10px;
+  padding: 20px 40px 20px 20px;
+}
+
+.list-head {
+  text-align: center;
+}
+
+.list-line {
+  width: 99%;
+  border: 1px solid Silver;
+  border-radius: 8px;
+  margin-left: 1px;
+  margin-top: 20px;
+  padding: 10px 5px 10px 5px;
+}
+
+.list-body {
+  text-align: center;
+  margin: auto 0;
+}
+
+.pagination {
+  justify-content: center; /* 가로 중앙 정렬 */
+  margin-top: 20px;
+}
+
+.left {
+  text-align: left;
+}
+
+.no-list-text {
+  text-align: center;
+  margin-top: 10%;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+}
+
+</style>
diff --git a/SCM/frontend/src/components/purchaseOrder/PurchaseOrderList.vue b/SCM/frontend/src/components/purchaseOrder/PurchaseOrderList.vue
index 440f492f..b927a19b 100644
--- a/SCM/frontend/src/components/purchaseOrder/PurchaseOrderList.vue
+++ b/SCM/frontend/src/components/purchaseOrder/PurchaseOrderList.vue
@@ -254,7 +254,7 @@ const printItem = (index) => {
               <div class="list-body col-3">
                 {{ dayjs(purchaseOrder.purchaseOrderTargetDueDate).format('YYYY-MM-DD HH:mm:ss') }}
               </div>
-              <div class="list-body col-2">{{ purchaseOrder.purchaseOrderStatus }}</div>
+              <div class="list-body col-2">{{ purchaseOrder.purchaseOrderStatusValue }}</div>
 
               <!-- 확장된 상세 내용 -->
               <div class="d-flex justify-content-center">
diff --git a/SCM/frontend/src/router/index.js b/SCM/frontend/src/router/index.js
index 71c1c350..751d5e24 100644
--- a/SCM/frontend/src/router/index.js
+++ b/SCM/frontend/src/router/index.js
@@ -29,6 +29,14 @@ const routes = [
         path: "/purchaseOrder/input",
         component: () => import("@/views/purchaseOrder/PurchaseOrderInputView.vue")
     },
+    {
+        path: "/purchase",
+        component: () => import("@/views/purchase/PurchaseListView.vue")
+    },
+    {
+        path: "/purchase/input",
+        component: () => import("@/views/purchase/PurchaseInputView.vue")
+    },
 
     ...shippingInstructionRoutes,
     ...productionReceivingRoutes,
diff --git a/SCM/frontend/src/views/purchase/PurchaseInputView.vue b/SCM/frontend/src/views/purchase/PurchaseInputView.vue
new file mode 100644
index 00000000..761766aa
--- /dev/null
+++ b/SCM/frontend/src/views/purchase/PurchaseInputView.vue
@@ -0,0 +1,180 @@
+<script setup>
+import PurchaseInputForm from "@/components/purchaseOrder/PurchaseOrderInputForm.vue";
+import PurchaseInputItems from "@/components/purchaseOrder/PurchaseOrderInputItems.vue";
+import {onMounted, ref} from "vue";
+import axios from "axios";
+import router from "@/router/index.js";
+
+const totalCount = ref(0);
+const pageSize = ref(10);
+const pageNumber = ref(1);
+const salesOrderList = ref([]);
+const registerListener = ref(false);
+
+const itemList = ref([]);
+const selectedSalesOrder = ref(false);
+
+// 자식으로 부터 데이터 받아옴
+const childRef = ref(null);
+
+const fetchSalesOrderList = async () => {
+  try {
+    const response = await axios.post(`http://localhost:8090/api/v1/purchaseOrder`, {
+      params: {
+        startDate: null,
+        endDate: null,
+        clientName: null,
+        purchaseOrderStatus: 'APPROVAL_BEFORE',
+        page: pageNumber.value,
+        size: pageSize.value
+      }, paramsSerializer: (params) => {
+        // null이나 undefined 값을 필터링
+        const filteredParams = Object.fromEntries(
+            Object.entries(params).filter(([_, value]) => value !== null && value !== undefined)
+        );
+        return new URLSearchParams(filteredParams).toString();
+      }
+    });
+
+    console.log(response);
+    salesOrderList.value = response.data.salesOrder;
+    totalCount.value = response.data.totalCount;
+
+  } catch (error) {
+    console.error("주문서 불러오기 실패 :", error);
+  }
+};
+
+const fetchSalesOrder = async (salesOrderSeq) => {
+  try {
+    const response = await axios.get(`http://localhost:8090/api/v1/sales-order/${salesOrderSeq}`, {
+      paramsSerializer: (salesOrderSeq) => {
+        // null이나 undefined 값을 필터링
+        const filteredParams = Object.fromEntries(
+            Object.entries(salesOrderSeq).filter(([_, value]) => value !== null && value !== undefined)
+        );
+        return new URLSearchParams(filteredParams).toString();
+      }
+    });
+
+    console.log(response.data.salesOrderItem);
+    itemList.value = response.data.salesOrderItem;
+
+  } catch (error) {
+    console.error("주문서 상세 품목 불러오기 실패 :", error);
+  }
+};
+
+const createShippingInstruction = async (formData, itemData) => {
+  try {
+    const response = await axios.post('http://localhost:8090/api/v1/shipping-instruction',
+        {
+          shippingInstructionScheduledShipmentDate: formData.value.shippingInstructionDate,
+          salesOrderSeq: formData.value.salesOrderSeq,
+          shippingInstructionAddress: formData.value.address,
+          shippingInstructionNote: formData.value.note,
+          shippingInstructionItems: itemData.map(item => ({
+            itemSeq: item.Seq,
+            shippingInstructionItemQuantity: item.quantity,
+            shippingInstructionItemNote: item.note,
+          })),
+        }, {
+        });
+
+    console.log(response);
+    alert('발주서가 등록되었습니다!');
+    // 조회 페이지 이동
+    await router.push("/purchaseOrder");
+
+  } catch (error) {
+    console.error('실패', error);
+    throw error;
+  }
+};
+
+onMounted(() => {
+  fetchSalesOrderList();
+});
+
+// 페이지 이동
+const handlePage = (newPageNumber) => {
+  pageNumber.value = Number(newPageNumber.value);
+  fetchSalesOrderList();
+};
+
+// 주문서 전달
+const handleSalesOrder = (formData) => {
+  fetchSalesOrder(formData.value.salesOrderSeq);
+  selectedSalesOrder.value = true;
+}
+
+// 등록 핸들러
+const handleRegister = async (itemList) => {
+  if (childRef.value) {
+    const formData = childRef.value.getData();
+    const itemData = itemList.value;
+
+    // formData 값이 널 또는 빈 값일 경우 각각 알림창 출력
+    if (!formData.value.salesOrderSeq) {
+      alert("주문서를 선택해주세요.");
+      return;
+    }
+    if (!formData.value.shippingInstructionDate) {
+      alert("출하지시일를 입력해주세요.");
+      return;
+    }
+    if (!formData.value.address) {
+      alert("주소를 입력해주세요.");
+      return;
+    }
+
+    // itemData의 각 아이템에 대해 quantity가 0 이하이거나 원래 값보다 큰 경우 알림창 출력
+    const invalidItem = itemData.find(item => {
+      const originalQuantity = parseInt(item.originalQuantity); // 원래 아이템 수량
+      const currentQuantity = parseInt(item.quantity);    // 현재 입력된 수량
+
+      // 수량이 0 이하이거나 원래 수량보다 큰 경우
+      return !currentQuantity || currentQuantity <= 0 || currentQuantity > originalQuantity;
+    });
+
+    if (invalidItem) {
+      alert(`품목 수량을 확인해 주세요.`);
+      return;
+    }
+
+    // 체크 후 등록 실행
+    await createShippingInstruction(formData, itemData);
+
+  } else {
+    alert("자식 컴포넌트가 준비되지 않았습니다.");
+  }
+}
+</script>
+
+<template>
+  <h4 class="title">주문관리 > 구매서 등록</h4>
+  <div class="d-flex justify-content-center">
+    <PurchaseInputForm ref="childRef"
+                                  :salesOrderList="salesOrderList"
+                                  :totalCount="totalCount"
+                                  :pageNumber="pageNumber"
+                                  :pageSize="pageSize"
+                                  :registerListener="registerListener"
+                                  @pageEvent="handlePage"
+                                  @salesOrderEvent="handleSalesOrder"/>
+  </div>
+  <div class="px-4 d-flex flex-column align-items-center">
+    <hr class="col-md-10 d-flex flex-column">
+  </div>
+  <div class="d-flex justify-content-center">
+    <PurchaseInputItems :itemList="itemList"
+                                   :selectedSalesOrder="selectedSalesOrder"
+                                   @registerEvent="handleRegister"/>
+  </div>
+</template>
+
+<style scoped>
+.title {
+  padding-bottom: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/SCM/frontend/src/views/purchase/PurchaseListView.vue b/SCM/frontend/src/views/purchase/PurchaseListView.vue
new file mode 100644
index 00000000..d7290f36
--- /dev/null
+++ b/SCM/frontend/src/views/purchase/PurchaseListView.vue
@@ -0,0 +1,14 @@
+<script setup>
+import PurchaseList from '@/components/purchase/PurchaseList.vue';
+</script>
+
+<template>
+  <h4 class="title">주문관리 > 구매서 조회</h4>
+  <PurchaseList />
+</template>
+
+<style scoped>
+.title {
+  padding-bottom: 20px;
+}
+</style>