2차 수정 요청건 수행

src/components/common/PopupModal.tsx

@@ -37,8 +37,16 @@ const PopupModal: React.FC<PopupModalProps> = ({
 
   return (
     <div
-      className="fixed bottom-6 z-50 bg-white shadow-2xl rounded-lg p-4 text-center w-[400px] md:w-[480px]"
-      style={{ right: `${offsetRightPx}px` }}
+        //원래코드
+      // className="fixed bottom-6 z-50 bg-white shadow-2xl rounded-lg p-4 text-center w-[400px] md:w-[480px]"
+      // style={{ right: `${offsetRightPx}px` }}
+        className={`
+        fixed bottom-6 z-50 bg-white shadow-2xl rounded-lg p-4 text-center 
+        w-[90%] max-w-[400px] sm:w-[400px] md:w-[480px] 
+        left-1/2 -translate-x-1/2 
+        sm:left-auto sm:translate-x-0
+      `}
+        style={{ right: `${offsetRightPx}px` }}
     >
       {/* 닫기 버튼 */}
       <button

src/pages/maintenance/Performance.tsx

@@ -36,15 +36,15 @@ const Performance = () => {
                 정보통신기술자 특급 5명 외 45명 보유.
             </div>
 
-            <div className="grid grid-cols-2 sm:grid-cols-4 gap-6 text-center">
-            <div className="bg-white rounded-lg shadow-md p-4 border border-gray-200 hover:border-blue-500 transition-all duration-300">
+            {/*<div className="grid grid-cols-2 sm:grid-cols-4 gap-6 text-center">*/}
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-6 text-center items-start">
+
+                <div className="bg-white rounded-lg shadow-md p-4 border border-gray-200 hover:border-blue-500 transition-all duration-300">
               <div className="bg-blue-50 rounded-t-lg p-3 mb-3">
                 <p className="font-bold text-blue-900">ISO 45001</p>
               </div>
-              <div className="space-y-2">
+              <div className="space-y-1">
                 <p className="text-sm text-gray-600">안전보건경영시스템</p>
-                <div className="w-full h-px bg-gray-200 my-2"></div>
-                <p className="text-blue-600 font-medium">신용등급 BBB0</p>
               </div>
             </div>
 
@@ -55,8 +55,8 @@ const Performance = () => {
               </div>
               <div className="space-y-2">
                 <p className="text-sm text-gray-600">품질경영시스템</p>
-                <div className="w-full h-px bg-gray-200 my-2"></div>
-                <p className="text-blue-600 font-medium">현금흐름 A</p>
+                {/*<div className="w-full h-px bg-gray-200 my-2"></div>*/}
+                {/*<p className="text-blue-600 font-medium">현금흐름 A</p>*/}
               </div>
             </div>
 
@@ -67,8 +67,8 @@ const Performance = () => {
               </div>
               <div className="space-y-2">
                 <p className="text-sm text-gray-600">환경경영시스템</p>
-                <div className="w-full h-px bg-gray-200 my-2"></div>
-                <p className="text-blue-600 font-medium">ESG</p>
+                {/*<div className="w-full h-px bg-gray-200 my-2"></div>*/}
+                {/*<p className="text-blue-600 font-medium">ESG</p>*/}
               </div>
             </div>
 
@@ -78,11 +78,59 @@ const Performance = () => {
                 <p className="font-bold text-blue-900">나이스디앤비</p>
               </div>
               <div className="space-y-2">
-                <p className="text-sm text-gray-600">건설안전관리보고서</p>
-                <div className="w-full h-px bg-gray-200 my-2"></div>
-                <p className="text-blue-600 font-medium">정보통신기술자 특급 5명 외 45명 보유</p>
+                <p className="text-sm text-gray-600">BBBO</p>
+                {/*<div className="w-full h-px bg-gray-200 my-2"></div>*/}
+                {/*<p className="text-blue-600 font-medium">정보통신기술자 특급 5명 외 45명 보유</p>*/}
               </div>
             </div>
+
+            <div
+                className="bg-white rounded-lg shadow-md p-4 border border-gray-200 hover:border-blue-500 transition-all duration-300">
+                <div className="bg-blue-50 rounded-t-lg p-3 mb-3">
+                    <p className="font-bold text-blue-900">NICE디앤비</p>
+                </div>
+                <div className="space-y-2">
+                    <p className="text-sm text-gray-600">건설안전관리보고서 SA1 등급</p>
+                    {/*<div className="w-full h-px bg-gray-200 my-2"></div>*/}
+                    {/*<p className="text-blue-600 font-medium">ESG</p>*/}
+                </div>
+            </div>
+
+            <div
+                className="bg-white rounded-lg shadow-md p-4 border border-gray-200 hover:border-blue-500 transition-all duration-300">
+                <div className="bg-blue-50 rounded-t-lg p-3 mb-3">
+                    <p className="font-bold text-blue-900">이크레더블</p>
+                </div>
+                <div className="space-y-2">
+                    <p className="text-sm text-gray-600">ESG 평가 2등급</p>
+                    {/*<div className="w-full h-px bg-gray-200 my-2"></div>*/}
+                    {/*<p className="text-blue-600 font-medium">ESG</p>*/}
+                </div>
+            </div>
+
+            <div
+                className="bg-white rounded-lg shadow-md p-4 border border-gray-200 hover:border-blue-500 transition-all duration-300">
+                <div className="bg-blue-50 rounded-t-lg p-3 mb-3">
+                    <p className="font-bold text-blue-900">정보통신기술자</p>
+                </div>
+                <div className="space-y-2">
+                    <p className="text-sm text-gray-600">특급5명 외 45명 보유</p>
+                    {/*<div className="w-full h-px bg-gray-200 my-2"></div>*/}
+                    {/*<p className="text-blue-600 font-medium">ESG</p>*/}
+                </div>
+            </div>
+
+            <div
+                className="bg-white rounded-lg shadow-md p-4 border border-gray-200 hover:border-blue-500 transition-all duration-300">
+                <div className="bg-blue-50 rounded-t-lg p-3 mb-3">
+                    <p className="font-bold text-blue-900">현금흐름</p>
+                </div>
+                <div className="space-y-2">
+                    <p className="text-sm text-gray-600">A</p>
+                    {/*<div className="w-full h-px bg-gray-200 my-2"></div>*/}
+                    {/*<p className="text-blue-600 font-medium">ESG</p>*/}
+                </div>
+            </div>
           </div>
         </section>
 
@@ -208,6 +256,76 @@ const Performance = () => {
           </section>
 
 
+          {/* 주요내용 */}
+          <section className="mb-12">
+              <h2 className="text-2xl font-bold text-blue-800 mb-4">
+                  유지보수·관리 및 성능점검 주요내용
+              </h2>
+              <div className=" rounded-lg overflow-hidden">
+                  <table className="min-w-full text-xs sm:text-sm table-fixed bg-white border border-gray-200 rounded-lg shadow-sm">
+                      <thead>
+                      <tr className="bg-blue-50 text-center">
+                          <th className="border-b border-r border-gray-200 px-4 py-3 font-semibold text-gray-700 w-1/5">
+                              구분
+                          </th>
+                          <th className="border-b border-r border-gray-200 px-4 py-3 font-semibold text-gray-700 w-2/5">
+                              유지보수·관리
+                          </th>
+                          <th className="border-b border-gray-200 px-4 py-3 font-semibold text-gray-700 w-2/5">
+                              성능점검
+                          </th>
+                      </tr>
+                      </thead>
+                      <tbody>
+                      <tr className="bg-white  transition-colors">
+                          <td className="border-b border-r border-gray-200 px-3 py-2 text-center font-medium text-gray-800">
+                              주요내용
+                          </td>
+                          <td className="border-b border-r border-gray-200 px-3 py-2 text-gray-700">
+                              일상적 점검을 통해 설비 기능 유지 및 안전 확보
+                          </td>
+                          <td className="border-b border-gray-200 px-3 py-2 text-gray-700">
+                              설비 운용에 필요한 성능 점검
+                          </td>
+                      </tr>
+                      <tr className="bg-gray-50  transition-colors">
+                          <td className="border-b border-r border-gray-200 px-3 py-2 text-center font-medium text-gray-800">
+                              주기
+                          </td>
+                          <td className="border-b border-r border-gray-200 px-3 py-2 text-gray-700">
+                              반기별 1회 이상
+                          </td>
+                          <td className="border-b border-gray-200 px-3 py-2 text-gray-700">
+                              연 1회 이상
+                          </td>
+                      </tr>
+                      <tr className="bg-white  transition-colors">
+                          <td className="border-b border-r border-gray-200 px-3 py-2 text-center font-medium text-gray-800">
+                              주요업무
+                          </td>
+                          <td className="border-b border-r border-gray-200 px-3 py-2 text-gray-700">
+                              외관, 기능, 안전 상태 점검 및 기록
+                          </td>
+                          <td className="border-b border-gray-200 px-3 py-2 text-gray-700">
+                              점검결과 기록 후 5년간 보존 및 지자체 제출
+                          </td>
+                      </tr>
+                      <tr className="bg-gray-50 transition-colors">
+                          <td className="border-b border-r border-gray-200 px-3 py-2 text-center font-medium text-gray-800">
+                              업무위탁
+                          </td>
+                          <td className="border-b border-r border-gray-200 px-3 py-2 text-gray-700">
+                              공사업자
+                          </td>
+                          <td className="border-b border-gray-200 px-3 py-2 text-gray-700">
+                              공사업자 또는 용역업자
+                          </td>
+                      </tr>
+                      </tbody>
+                  </table>
+              </div>
+          </section>
+
           {/* 과태료 기준 */}
           <section className="mb-12">
               <h2 className="text-2xl font-bold text-blue-800 mb-4">
@@ -491,81 +609,6 @@ const Performance = () => {
 
 
 
-          {/* 주요내용 */}
-          <section className="mb-12">
-              {/*<div className="text-center mb-6 sm:mb-8">*/}
-              {/*    <div className="inline-block font-bold text-lg sm:text-xl lg:text-2xl text-gray-800 border-b-2 border-blue-900 pb-2">*/}
-              {/*        유지보수·관리 및 성능점검 주요내용*/}
-              {/*    </div>*/}
-              {/*</div>*/}
-              <h2 className="text-2xl font-bold text-blue-800 mb-4">
-                  유지보수·관리 및 성능점검 주요내용
-              </h2>
-              <div className=" rounded-lg overflow-hidden">
-              <table className="min-w-full text-xs sm:text-sm table-fixed bg-white border border-gray-200 rounded-lg shadow-sm">
-                  <thead>
-                  <tr className="bg-blue-50 text-center">
-                      <th className="border-b border-r border-gray-200 px-4 py-3 font-semibold text-gray-700 w-1/5">
-                          구분
-                      </th>
-                      <th className="border-b border-r border-gray-200 px-4 py-3 font-semibold text-gray-700 w-2/5">
-                          유지보수·관리
-                      </th>
-                      <th className="border-b border-gray-200 px-4 py-3 font-semibold text-gray-700 w-2/5">
-                          성능점검
-                      </th>
-                  </tr>
-                  </thead>
-                  <tbody>
-                  <tr className="bg-white  transition-colors">
-                      <td className="border-b border-r border-gray-200 px-3 py-2 text-center font-medium text-gray-800">
-                          주요내용
-                      </td>
-                      <td className="border-b border-r border-gray-200 px-3 py-2 text-gray-700">
-                          일상적 점검을 통해 설비 기능 유지 및 안전 확보
-                      </td>
-                      <td className="border-b border-gray-200 px-3 py-2 text-gray-700">
-                          설비 운용에 필요한 성능 점검
-                      </td>
-                  </tr>
-                  <tr className="bg-gray-50  transition-colors">
-                      <td className="border-b border-r border-gray-200 px-3 py-2 text-center font-medium text-gray-800">
-                          주기
-                      </td>
-                      <td className="border-b border-r border-gray-200 px-3 py-2 text-gray-700">
-                          반기별 1회 이상
-                      </td>
-                      <td className="border-b border-gray-200 px-3 py-2 text-gray-700">
-                          연 1회 이상
-                      </td>
-                  </tr>
-                  <tr className="bg-white  transition-colors">
-                      <td className="border-b border-r border-gray-200 px-3 py-2 text-center font-medium text-gray-800">
-                          주요업무
-                      </td>
-                      <td className="border-b border-r border-gray-200 px-3 py-2 text-gray-700">
-                          외관, 기능, 안전 상태 점검 및 기록
-                      </td>
-                      <td className="border-b border-gray-200 px-3 py-2 text-gray-700">
-                          점검결과 기록 후 5년간 보존 및 지자체 제출
-                      </td>
-                  </tr>
-                  <tr className="bg-gray-50 transition-colors">
-                      <td className="border-b border-r border-gray-200 px-3 py-2 text-center font-medium text-gray-800">
-                          업무위탁
-                      </td>
-                      <td className="border-b border-r border-gray-200 px-3 py-2 text-gray-700">
-                          공사업자
-                      </td>
-                      <td className="border-b border-gray-200 px-3 py-2 text-gray-700">
-                          공사업자 또는 용역업자
-                      </td>
-                  </tr>
-                  </tbody>
-              </table>
-              </div>
-          </section>
-
           {/* 연락처 */}
           <div className="mt-16 text-center text-gray-700">
               <h3 className="text-xl sm:text-2xl font-bold text-blue-900 mb-4">
@@ -583,21 +626,16 @@ const Performance = () => {
                   </p>
               </div>
               
-              {/* FIXME: 견적서 파일 수정 */}
-              {/*<div className="mt-6">*/}
-              {/*    <a*/}
-              {/*        href="/download/견적요청서.hwp"*/}
-              {/*        download*/}
-              {/*        className="inline-block px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 transition-colors"*/}
-              {/*    >*/}
-              {/*        견적서 다운로드*/}
-              {/*    </a>*/}
-              {/*</div>*/}
+              <div className="mt-6">
+                  <a
+                      href="/download/견적요청서.hwpx"
+                      download
+                      className="inline-block px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 transition-colors"
+                  >
+                      견적서 다운로드
+                  </a>
+              </div>
           </div>
-
-
-
-
       </div>
     </div>
   );