[KW-611] fix: QR Description 화면 수정

src/components/building/BuildingDescription.tsx

@@ -1,5 +1,6 @@
 import './css/BuildingDescription.css';
 import buildingboxBackground from '../../assets/images/building-description-background.png';
+import zoneboxBackground from '../../assets/images/zone-description-background.png';
 import ReusableButton from '../buttons/ReusableButton';
 
 interface Props {
@@ -8,24 +9,38 @@ interface Props {
 
 const BuildingDescription: React.FC<Props> = ({ onSwitch }) => {
   return (
-    <div
-      className="building-description"
-      style={{ backgroundImage: `url(${buildingboxBackground})` }}
-    >
-      <div className="building-description-text-group">
+    <div className="building-description">
+      <div
+        className="building-description-preview"
+        style={{ backgroundImage: `url(${zoneboxBackground})` }}
+      >
+        <h2>구역용</h2>
+        <p>
+          건물 내 개별 구역의 출입문을 스캔하여 <br />
+          해당 구역의 출입 권한을 관리합니다.
+        </p>
+        <p className="warning">※ 서비스를 이용하려면 로그인 후 시작해 주세요.</p>
+        <ReusableButton onClick={onSwitch}>
+          건물 모드로 이동
+        </ReusableButton>
+      </div>
+
+      <div
+        className="building-description-text-group"
+        style={{ backgroundImage: `url(${buildingboxBackground})` }}
+      >
         <h1>건물용</h1>
         <p>
           건물 출입구를 스캔하여 <br />
           출입 권한을 효율적으로 관리합니다.
         </p>
         <p className="warning">※ 서비스를 이용하려면 로그인 후 시작해 주세요.</p>
+        <ReusableButton onClick={onSwitch}>
+          구역 모드로 이동
+        </ReusableButton>
       </div>
-
-      <ReusableButton onClick={onSwitch} className="building-description-button">
-        구역 모드로 이동
-      </ReusableButton>
     </div>
   );
 };
 
-export default BuildingDescription;
+export default BuildingDescription;

src/components/building/css/BuildingDescription.css

@@ -1,46 +1,71 @@
 .building-description {
   width: 800px;
   height: 450px;
-  padding: 32px;
-  background-color: #004225;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: stretch;
+  background-color: transparent;
   color: white;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  position: relative;
+  z-index: 1;
+}
 
+.building-description-preview {
+  width: 50%;
+  padding: 32px;
+  background-color: #004225;
+  background-image: url('../../assets/images/zone-description-background.png');
+  background-size: 370px auto;
+  background-repeat: no-repeat;
+  background-position: right bottom;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-end;
-  gap: 16px;
-
   text-align: right;
+  gap: 16px;
+}
 
+.building-description-text-group {
+  width: 50%;
+  padding: 32px;
+  background-color: #004225;
+  background-image: url('../../assets/images/building-description-background.png');
   background-size: 370px auto;
   background-repeat: no-repeat;
   background-position: right bottom;
-  background-position-x: calc(100% + 15px);
-  background-position-y: calc(100% + 10px);
-
-  position: relative;
-  z-index: 1;
-
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  text-align: left;
+  gap: 16px;
 }
 
-.building-description h1 {
+.building-description-preview h2,
+.building-description-text-group h1 {
   font-size: 2.7rem;
   margin: 0;
+  color: white;
 }
 
-.building-description p {
+.building-description-preview p,
+.building-description-text-group p {
   margin: 0;
   line-height: 1.5;
+  font-size: 1rem;
+  color: white;
 }
 
-.building-description .warning {
+.building-description-preview .warning,
+.building-description-text-group .warning {
   font-size: 0.9rem;
   color: #ff5151;
 }
 
-.building-description button {
+.building-description-preview button,
+.building-description-text-group button {
   width: 200px;
   margin-top: 16px;
   padding: 12px 16px;
@@ -53,16 +78,7 @@
   transition: background-color 0.2s ease;
 }
 
-.building-description button:hover {
+.building-description-preview button:hover,
+.building-description-text-group button:hover {
   background-color: #28412b;
-}
-
-.building-description-text-group {
-  padding-left: 55%;
-  padding-top: 0%;
-  text-align: left;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
+}

src/components/zone/ZoneDescription.tsx

@@ -1,5 +1,6 @@
 import './css/ZoneDescription.css';
 import zoneboxBackground from '../../assets/images/zone-description-background.png';
+import buildingboxBackground from '../../assets/images/building-description-background.png';
 import ReusableButton from '../buttons/ReusableButton';
 
 interface Props {
@@ -8,24 +9,34 @@ interface Props {
 
 const ZoneDescription: React.FC<Props> = ({ onSwitch }) => {
   return (
-    <div
-      className="zone-description"
-      style={{ backgroundImage: `url(${zoneboxBackground})` }}
-    >
-      <div className="zone-description-text-group">
+    <div className="zone-description">
+      <div
+        className="zone-description-text-group"
+        style={{ backgroundImage: `url(${zoneboxBackground})` }}
+      >
         <h1>구역용</h1>
         <p>
           건물 내 개별 구역의 출입문을 스캔하여 <br />
           해당 구역의 출입 권한을 관리합니다.
         </p>
         <p className="warning">※ 서비스를 이용하려면 로그인 후 시작해 주세요.</p>
+        <ReusableButton onClick={onSwitch}>건물 모드로 이동</ReusableButton>
       </div>
 
-      <ReusableButton onClick={onSwitch} className="zone-description-button">
-        건물 모드로 이동
-      </ReusableButton>
+      <div
+        className="zone-description-preview"
+        style={{ backgroundImage: `url(${buildingboxBackground})` }}
+      >
+        <h2>건물용</h2>
+        <p>
+          건물 출입구를 스캔하여 <br />
+          출입 권한을 효율적으로 관리합니다.
+        </p>
+        <p className="warning">※ 서비스를 이용하려면 로그인 후 시작해 주세요.</p>
+        <ReusableButton onClick={onSwitch}>구역 모드로 이동</ReusableButton>
+      </div>
     </div>
   );
 };
 
-export default ZoneDescription;
+export default ZoneDescription;

src/components/zone/css/ZoneDescription.css

@@ -1,45 +1,69 @@
 .zone-description {
   width: 800px;
   height: 450px;
-  padding: 32px;
-  background-color: #004225;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: stretch;
+  background-color: transparent;
   color: white;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  position: relative;
+  z-index: 1;
+}
 
+.zone-description-preview {
+  width: 50%;
+  padding: 32px;
+  background-color: #004225;
+  background-size: 370px auto;
+  background-repeat: no-repeat;
+  background-position: right bottom;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: flex-start; 
-  gap: 16px;
-
+  align-items: flex-start;
   text-align: left;
+  gap: 16px;
+}
 
+.zone-description-text-group {
+  width: 50%;
+  padding: 32px;
+  background-color: #004225;
   background-size: 370px auto;
   background-repeat: no-repeat;
-  background-position: left bottom;
-  background-position-x: calc(0% - 15px);
-  background-position-y: calc(100% + 10px); 
-
-  position: relative;
-  z-index: 1;
+  background-position: right bottom;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
+  text-align: right;
+  gap: 16px;
 }
 
-.zone-description h1 {
+.zone-description-preview h2,
+.zone-description-text-group h1 {
   font-size: 2.7rem;
   margin: 0;
+  color: white;
 }
 
-.zone-description p {
+.zone-description-preview p,
+.zone-description-text-group p {
   margin: 0;
   line-height: 1.5;
+  font-size: 1rem;
+  color: white;
 }
 
-.zone-description .warning {
+.zone-description-preview .warning,
+.zone-description-text-group .warning {
   font-size: 0.9rem;
   color: #ff5151;
 }
 
-.zone-description button {
+.zone-description-preview button,
+.zone-description-text-group button {
   width: 200px;
   margin-top: 16px;
   padding: 12px 16px;
@@ -52,16 +76,7 @@
   transition: background-color 0.2s ease;
 }
 
-.zone-description button:hover {
+.zone-description-preview button:hover,
+.zone-description-text-group button:hover {
   background-color: #28412b;
-}
-
-.zone-description-text-group {
-  padding-right: 55%;
-  padding-top: 0%;
-  text-align: right;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
 }