design: 상품 구매 및 리뷰 작성 페이지 모바일 대응 (related to: #37)

review-mate · Oct 29, 2023 · e905c6e · e905c6e
1 parent 93340b4
commit e905c6e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/components/write/Top.tsx b/components/write/Top.tsx
@@ -6,23 +6,23 @@ type Props = {};
 
 export default function WritePageTopInfo({}: Props) {
   return (
-      <div className='flex flex-row pb-5'>
-        <Image src={hotel1} alt='상품 사진' width={250} height={180} />
-        <div className='flex flex-col justify-between ml-5 py-2'>
-          <div>
-            <p className='text-body1 font-bold mb-2.5'>
-              [한정 특가] 힐튼호텔 다낭
-            </p>
-            <p className='text-body3'>
-              힐튼호텔 다낭의 위치는 시티투어를 하기 편리한 관광명소에 있습니다.
-              드래곤 보트, 다낭교구 성당, 한강 등 인기 관광지들이 근처에있어,
-              편리하고 다양하게 알찬 여행을 즐기실 수 있습니다.
-            </p>
-          </div>
-          <p className='text-body1 font-bold'>
-            127000 <span className='font-norm'>원</span>
+    <div className='flex flex-col sm:flex-row pb-5'>
+      <Image src={hotel1} alt='상품 사진' width={250} height={180} />
+      <div className='flex flex-col justify-between sm:ml-5 py-2 mt-5 sm:mt-0'>
+        <div>
+          <p className='text-body1 font-bold mb-2.5'>
+            [한정 특가] 힐튼호텔 다낭
+          </p>
+          <p className='text-body3 mb-5 sm:mb-0'>
+            힐튼호텔 다낭의 위치는 시티투어를 하기 편리한 관광명소에 있습니다.
+            드래곤 보트, 다낭교구 성당, 한강 등 인기 관광지들이 근처에있어,
+            편리하고 다양하게 알찬 여행을 즐기실 수 있습니다.
           </p>
         </div>
+        <p className='text-body1 font-bold'>
+          127000 <span className='font-norm'>원</span>
+        </p>
       </div>
+    </div>
   );
 }
diff --git a/pages/demo/beforeReview.tsx b/pages/demo/beforeReview.tsx
@@ -85,9 +85,10 @@ export default function BeforeReview() {
           />
         </>
       )}
-      <h1 className='text-heading mt-3 mb-16 font-bold animate-appear4 opacity-0'>
+      <h1 className='text-title sm:text-heading mt-3 mb-16 font-bold animate-appear4 opacity-0'>
         구매하신 상품의 리뷰를 남겨주세요!
       </h1>
+
       <div className='animate-appear5 opacity-0'>
         <WritePageTopInfo />
         <button