feat: 마이페이지 320 responsive design 적용 (#288)

* feat: 구매한 작품, 작품 관리 페이지 320 design

* feat: 구매한 작품 320 화면 개선

* feat: 공연 신청 정보 페이지 320 적용

* feat: 공연권 환불 페이지 320 적용

* feat: MainNav, Footer 320 디자인 설정

* feat: 신청된 공연 페이지 320 디자인 적용

* feat: MainVer2 480 이하에서 보여지도록 수정

Author: game240

src/components/inputField/performanceInfo/PerformInputField.jsx

@@ -14,6 +14,7 @@ const PerformInputField = ({
   readOnly,
 }) => {
   const { width } = useWindowDimensions();
+  const { isSmallMobile } = useWindowDimensions().widthConditions;
 
   return (
     <AuthInputField
@@ -28,8 +29,11 @@ const PerformInputField = ({
       rightElement={rightElement}
       readOnly={readOnly}
       errorMessageCustomFlag="true"
+      fontMode={!isSmallMobile ? "default" : "xs"}
       style={
-        !(width < 768) ? { width: "39.3125rem", height: "42px" } : { width: "100%", height: "42px" }
+        !(width < 768)
+          ? { width: "39.3125rem", height: "42px" }
+          : { width: "100%", height: "42px" }
       }
     />
   );

src/components/myPage/NullScriptContent.css

@@ -0,0 +1,9 @@
+@use "./../../styles/_responsive.scss" as r;
+
+div#null-script-content {
+  gap: 1.44rem;
+
+  @include r.media-small-mobile {
+    gap: 20px;
+  }
+}

src/components/myPage/NullScriptContent.scss

@@ -2,7 +2,9 @@ import { useNavigate } from "react-router-dom";
 
 import OnOffBtn from "../button/OnOffBtn";
 
-import "./NullScriptContent.css";
+import useWindowDimensions from "../../hooks/useWindowDimensions";
+
+import "./NullScriptContent.scss";
 import "../../styles/text.css";
 import "../../styles/utilities.css";
 
@@ -14,18 +16,20 @@ interface NullScriptContentProps {
 
 const NullScriptContent = ({ currentPage = 0 }: NullScriptContentProps) => {
   const navigate = useNavigate();
+  const { isSmallMobile } = useWindowDimensions().widthConditions;
+
   const getContent = (page: 0 | 1 | 2) => {
     switch (page) {
       case 0:
         return {
           message: "아직 구매한 작품이 없어요.",
-          buttonText: "작품 둘러보러 가기",
+          buttonText: "작품 둘러보기",
           navigatePath: "/list",
         };
       case 1:
         return {
           message: "아직 등록한 작품이 없어요.",
-          buttonText: "작품 등록하러 가기",
+          buttonText: "작품 등록하기",
           navigatePath: "/post",
         };
       case 2:
@@ -52,7 +56,9 @@ const NullScriptContent = ({ currentPage = 0 }: NullScriptContentProps) => {
       }`}
       id="null-script-content"
     >
-      <p className="p-large-bold">{message}</p>
+      <p className={!isSmallMobile ? "p-large-bold" : "p-small-bold"}>
+        {message}
+      </p>
       <OnOffBtn
         text={buttonText}
         onClick={() => navigate(navigatePath)}

src/components/myPage/NullScriptContent.tsx

@@ -14,7 +14,7 @@ import "./../../styles/utilities.css";
  * @param {string} props.orderStatus - WAIT: 입금 확인 중, PASS: 결제 완료, REJECT: 결제 취소
  * @returns
  */
-const PurchasedPerformBtn = ({ id, possibleCount = 0, orderStatus = "WAIT" }) => {
+const PurchasedPerformBtn = ({ id, possibleCount = 0, orderStatus = "WAIT", style }) => {
   const navigate = useNavigate();
   return (
     <div className="purchased-script-btn">
@@ -23,6 +23,7 @@ const PurchasedPerformBtn = ({ id, possibleCount = 0, orderStatus = "WAIT" }) =>
         onClick={() => {
           navigate(`/mypage/purchased/performance-info/${id}`);
         }}
+        style={style}
       >
         {orderStatus === "PASS" ? "공연 신청 정보" : "입금 확인 중"}
       </Button>

src/components/myPage/PurchasedPerformBtn.jsx

@@ -1,14 +1,22 @@
 import { useNavigate } from "react-router-dom";
+import useWindowDimensions from "@/hooks/useWindowDimensions";
 
 const PurchasedPerformPossibleInfo = ({ script }) => {
   const navigate = useNavigate();
+  const { isSmallMobile } = useWindowDimensions().widthConditions;
   return (
     <div className="f-dir-column j-content-end">
-      <p className={`p-medium-regular ${script.orderStatus === "PASS" ? "" : "c-grey4"}`}>
+      <p
+        className={`${!isSmallMobile ? "p-medium-regular" : "p-xs-regular"} ${
+          script.orderStatus === "PASS" ? "" : "c-grey4"
+        }`}
+      >
         공연 가능 횟수 : {script.possibleCount} 번
       </p>
       <p
-        className={`p-12-400 t-underline ${
+        className={`${
+          !isSmallMobile ? "p-12-400" : "text-[8px] font-[400] leading-[14px]"
+        } t-underline ${
           script.possibleCount !== 0 && script.orderStatus === "PASS"
             ? "c-pointer"
             : "c-grey4 c-default"

src/components/myPage/PurchasedPerformPossibleInfo.jsx

@@ -20,7 +20,7 @@ import "./../../styles/utilities.css";
  * @param {string} props.orderStatus - WAIT: 입금 확인 중, PASS: 결제 완료, REJECT: 결제 취소
  * @returns
  */
-const PurchasedScriptBtn = ({ id, title, productId, buyPerformance, orderStatus = "WAIT" }) => {
+const PurchasedScriptBtn = ({ id, title, productId, buyPerformance, orderStatus = "WAIT", style }) => {
   const navigate = useNavigate();
 
   const onClickPurchasePerform = async () => {
@@ -63,12 +63,12 @@ const PurchasedScriptBtn = ({ id, title, productId, buyPerformance, orderStatus
   return (
     <div className="j-content-end purchased-script-btn">
       {buyPerformance !== 0 ? (
-        <Button color="white" onClick={onClickPurchasePerform}>
+        <Button color="white" onClick={onClickPurchasePerform} style={style}>
           공연권 구매
         </Button>
       ) : null}
 
-      <Button disabled={orderStatus !== "PASS"} onClick={onClickDownloadScript}>
+      <Button disabled={orderStatus !== "PASS"} onClick={onClickDownloadScript} style={style}>
         {orderStatus === "PASS" ? "대본 받기" : "입금 확인 중"}
       </Button>
     </div>

src/components/myPage/PurchasedScriptBtn.jsx

@@ -14,6 +14,7 @@ import circleInfoBtn from "../../assets/image/button/circleInfoBtn.svg";
 import "./ScriptContent.scss";
 import "./../../styles/utilities.css";
 import { useNavigate } from "react-router-dom";
+import clsx from "clsx";
 
 /**
  * 구매한 작품 페이지, 작품 관리 페이지의 상품 란,
@@ -43,13 +44,20 @@ const ScriptContent = ({
   const formattedDate = `${year}. ${month}. ${day}.`;
 
   const { widthConditions } = useWindowDimensions();
+  const { isMobile, isSmallMobile } = useWindowDimensions().widthConditions;
 
   const navigate = useNavigate();
 
-
   return (
     <div key={index} className="script-content ">
-      <p className="date p-large-bold c-grey-8f8f8f">{formattedDate}</p>
+      <p
+        className={clsx(
+          "date c-grey-8f8f8f",
+          !isSmallMobile ? "p-large-bold" : "p-small-bold"
+        )}
+      >
+        {formattedDate}
+      </p>
       <hr className="border-[#caabff]"></hr>
       {items.map((script, idx) => (
         <div key={script.id}>
@@ -71,7 +79,10 @@ const ScriptContent = ({
                 id="title"
               >
                 <div className="relative">
-                  <p className="p-large-bold" id="title">
+                  <p
+                    className={!isSmallMobile ? "p-large-bold" : "p-small-bold"}
+                    id="title"
+                  >
                     {script.title || "제목 없음"}
                   </p>
                   {isRoute && (
@@ -104,7 +115,10 @@ const ScriptContent = ({
               </div>
 
               <hr className="border border-solid border-[#9E9E9E]"></hr>
-              <p className="p-large-medium" id="author">
+              <p
+                className={!isSmallMobile ? "p-large-medium" : "p-12-bold"}
+                id="author"
+              >
                 {currentPage === "1"
                   ? ""
                   : !script.delete
@@ -126,8 +140,12 @@ const ScriptContent = ({
                       type="perform"
                       value={script.performancePrice || 0}
                     />
-                    <div style={{ height: "32px" }}></div>
-                    {widthConditions.isMobile && (
+                    <div
+                      style={
+                        !isSmallMobile ? { height: "32px" } : { height: "16px" }
+                      }
+                    ></div>
+                    {(isMobile || isSmallMobile) && (
                       <PurchasedPerformPossibleInfo script={script} />
                     )}
                   </>
@@ -141,10 +159,12 @@ const ScriptContent = ({
                 />
               )}
               {/* (모바일 화면) 작품 관리 페이지 상단 버튼: 심사 끝났을 경우 표시 */}
-              {widthConditions.isMobile &&
+              {(isMobile || isSmallMobile) &&
               currentPage === "1" &&
               script.checked === "PASS" ? (
-                <ScriptManageTopBtn className="mobile" script={script} />
+                <div className="relative">
+                  <ScriptManageTopBtn className="mobile" script={script} />
+                </div>
               ) : null}
             </div>
             <div className=" __script-content-btn">
@@ -160,10 +180,13 @@ const ScriptContent = ({
                     productId={script.productId}
                     buyPerformance={script.buyPerformance}
                     orderStatus={script.orderStatus}
+                    style={
+                      isSmallMobile ? { width: "129px", height: "40px" } : {}
+                    }
                   />
                 ) : (
                   <section className="j-content-between">
-                    {!widthConditions.isMobile ? (
+                    {!(isMobile || isSmallMobile) ? (
                       <PurchasedPerformPossibleInfo script={script} />
                     ) : (
                       <div></div>

src/components/myPage/ScriptContent.jsx

@@ -15,15 +15,18 @@
   grid-template-columns: 197px 1fr;
   column-gap: 23px;
 
+  margin-top: 2vh;
+  padding-bottom: 20px;
+
+  box-sizing: border-box;
+  border-bottom: 1px solid #caabff;
+
   @include r.media-mobile {
     row-gap: 20px;
   }
-  & {
-    margin-top: 2vh;
-    padding-bottom: 20px;
-
-    box-sizing: border-box;
-    border-bottom: 1px solid #caabff;
+  @include r.media-small-mobile {
+    grid-template-columns: 120px 1fr;
+    column-gap: 15px;
   }
 }
 

src/components/myPage/ScriptContent.scss

@@ -1,16 +1,19 @@
 import { useNavigate } from "react-router-dom";
+import clsx from "clsx";
 
 import Button from "../button/RoundBtn_149_48";
 
 import "./ScriptManageBtn.scss";
+import useWindowDimensions from "@/hooks/useWindowDimensions";
 
 const ReviewCompleted = {
   REVIEW_COMPLETED: "PASS",
   UNDER_REVIEWING: "WAIT",
 };
 
-const ScriptManageBtn = ({ reviewCompleted, id, performSale }) => {
+const ScriptManageBtn = ({ reviewCompleted, id, performSale, style }) => {
   const navigate = useNavigate();
+  const { isSmallMobile } = useWindowDimensions().widthConditions;
 
   return (
     <div className="script-manage-btn">
@@ -20,13 +23,19 @@ const ScriptManageBtn = ({ reviewCompleted, id, performSale }) => {
             <div className="script-manage-flex">
               <div> </div>
 
-              <div className="d-flex" style={{ gap: "19px" }}>
+              <div
+                className={clsx(
+                  "flex",
+                  !isSmallMobile ? "gap-[19px]" : "gap-[10px]"
+                )}
+              >
                 {performSale ? (
                   <Button
                     color="white"
                     onClick={() => {
                       navigate(`/mypage/scriptmanage/askedperform/${id}`);
                     }}
+                    style={style}
                   >
                     신청된 공연
                   </Button>
@@ -38,6 +47,7 @@ const ScriptManageBtn = ({ reviewCompleted, id, performSale }) => {
                   onClick={() => {
                     navigate(`/mypage/scriptmanage/detail/${id}`);
                   }}
+                  style={style}
                 >
                   작품 관리
                 </Button>
@@ -47,7 +57,9 @@ const ScriptManageBtn = ({ reviewCompleted, id, performSale }) => {
           [ReviewCompleted.UNDER_REVIEWING]: (
             <div className="script-manage-flex">
               <div> </div>
-              <Button disabled={true}>심사 중</Button>
+              <Button disabled={true} style={style}>
+                심사 중
+              </Button>
             </div>
           ),
         }[reviewCompleted]