style: 카드 모바일 css 완성

src/hooks/useOnClickOutside.js

@@ -3,7 +3,6 @@ import { useEffect } from 'react'
 export default function useOnClickOutside(ref, handler) {
   useEffect(() => {
     const listener = (e) => {
-      console.log(ref)
       /* 클릭 시 모달 창 안이면 */
       if (!ref.current || ref.current.contains(e.target)) return
       // 모달 바깥을 클릭했으므로 handler 함수 호출

src/pages/Card.jsx

@@ -62,12 +62,13 @@ const Card = ({ userCards, setUserCards }) => {
     '#D9D9D9',
   ]
 
+  const isMobile = window.innerWidth <= 768 // 화면 크기를 기준으로 모바일 여부를 확인합니다.
   const modalBackgroundStyle = {
-    width: '100%',
-    height: '100%',
+    width: isMobile ? '80%' : '700px', // 모바일 화면일 때는 80%로, PC 화면일 때는 500px로 설정합니다.
+    height: 'auto',
     maxWidth: '500px',
     minHeight: '500px',
-    overflow: 'visible' /* 스크롤이 필요할 때만 표시 */,
+    overflow: 'visible', // 스크롤이 필요할 때만 표시
     margin: '0',
     position: 'absolute',
     top: '0',

src/style/Card.css

@@ -237,3 +237,186 @@ select::-ms-expand {
   margin-left: 10px; /* Adding some space between the buttons */
   cursor: pointer;
 }
+
+/* card.css */
+
+/* Existing styles for larger screens */
+
+@media (max-width: 768px) {
+  /* Styles for screens with a maximum width of 768px (e.g., mobile devices) */
+
+  .CardDetailDiv {
+    /* Modify styles for the main card container */
+    width: 80%;
+    max-width: 500px; /* Adjust to take up the full width of the screen */
+    min-height: 500px; /* Take up the full viewport height */
+    height: auto;
+    overflow-y: auto;
+  }
+
+  .UpperBox {
+    /* Modify styles for the upper box */
+    flex-direction: column; /* Stack elements vertically */
+    align-items: center; /* Center align items */
+    margin-bottom: 15%; /* Adjust spacing as needed */
+  }
+
+  .InnerBox {
+    /* Modify styles for the inner box */
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 8%; /* Adjust spacing as needed */
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap; /* Added to allow child elements to wrap to the next line */
+  }
+
+  .ImgBox {
+    /* Modify styles for the image box */
+    width: 130px; /* Adjust image size as needed */
+    height: 130px; /* Adjust image size as needed */
+    margin: 0 auto; /* Center the image */
+    margin-left: -35%;
+    margin-top: -30%;
+  }
+
+  img {
+    /* Modify styles for the image */
+    width: 100%;
+    height: 100%;
+    object-fit: contain; /* Adjust object-fit property as needed */
+  }
+
+  .CompanySelect,
+  .CardNameInput {
+    margin-right: 5%;
+    width: 100%;
+  }
+
+  .CompanySelectDiv {
+    /* Modify styles for select and input elements */
+    font-size: 14px; /* Adjust font size as needed */
+    text-align: center; /* Center text */
+    justify-self: flex-end;
+    width: 100%;
+  }
+
+  .CardNameInput {
+    margin-top: 5%;
+  }
+
+  .CardNameInput input,
+  .CardNameInput input:disabled {
+    font-weight: bold;
+    font-size: 18px;
+    text-align: right;
+    width: 100%;
+    box-sizing: border-box; /* border와 padding을 요소의 전체 너비 및 높이에 포함시킴 */
+    padding: 10px; /* input에 padding 추가 */
+    border: none; /* 테두리 제거 */
+    border-radius: 5px;
+    outline: none; /* 입력 요소 활성화 시 나타나는 외곽선 제거 */
+    background-color: #ffffff; /* 백그라운드 색상 지정 */
+    opacity: 1; /* 완전히 불투명하게 설정 */
+    color: black;
+  }
+
+  /* 추가적으로 필요한 스타일 */
+  .CardNameInput input:disabled {
+    cursor: default; /* 마우스 포인터를 기본 아이콘으로 변경 */
+  }
+
+  .CardSummary {
+    /* Modify styles for the card summary */
+    margin-top: 10%; /* Adjust spacing as needed */
+    margin-bottom: 5%; /* Adjust spacing as needed */
+    margin-left: 5%;
+    margin-right: 5%;
+    white-space: pre-line; /* 텍스트가 넘칠 때 줄 바꿈 처리 */
+    font-size: 14px;
+    text-align: left;
+  }
+
+  .PdfInput {
+    width: 90%;
+    margin-top: 5%;
+    margin-bottom: 0%;
+  }
+
+  .PdfInput textarea {
+    /* Modify styles for the PDF input textarea */
+    font-size: 14px; /* Adjust font size as needed */
+    margin-top: 10%; /* Adjust spacing as needed */
+    margin-bottom: 5%; /* Adjust spacing as needed */
+  }
+
+  .Palette {
+    /* Modify styles for the color palette */
+    margin-top: 5%; /* Adjust spacing as needed */
+    margin-bottom: 5%; /* Adjust spacing as needed */
+  }
+
+  .PaletteSpan {
+    /* Modify styles for the palette span */
+    margin-top: 5px; /* Adjust spacing as needed */
+    margin-bottom: 5px; /* Adjust spacing as needed */
+  }
+
+  .ColorPalette {
+    /* Modify styles for the color palette */
+    margin-bottom: 5%;
+    grid-template-columns: repeat(2, 1fr); /* Adjust column count as needed */
+    grid-gap: 5px; /* Adjust grid gap as needed */
+  }
+
+  .Buttons {
+    /* Modify styles for the buttons */
+    padding: 0; /* Remove padding */
+    margin-bottom: 10%; /* Adjust spacing as needed */
+  }
+
+  .PdfSummary {
+    font-size: 15px;
+    font-weight: bold;
+    width: 50%;
+    height: 50%;
+    min-width: 110px;
+    min-height: 50px;
+    background-color: white;
+    color: #5289ff;
+    border: none;
+    border-radius: 10px;
+    margin-right: 10px; /* Adding some space between the buttons */
+    cursor: pointer;
+  }
+
+  .PdfDetail {
+    font-size: 15px;
+    font-weight: bold;
+    width: 50%;
+    height: 50%;
+    min-width: 110px;
+    min-height: 50px;
+    background-color: white;
+    color: #5289ff;
+    border: none;
+    border-radius: 10px;
+    margin-right: 10px; /* Adding some space between the buttons */
+    cursor: pointer;
+  }
+
+  .LinkToCardEdit {
+    font-size: 15px;
+    font-weight: bold;
+    width: 50%;
+    height: 50%;
+    background-color: white;
+    color: #5289ff;
+    border: none;
+    border-radius: 10px;
+    margin-left: 10px; /* Adding some space between the buttons */
+    cursor: pointer;
+  }
+}

src/style/Modal.css

@@ -17,8 +17,10 @@
   overflow: auto;
   z-index: 100;
 }
+
 .modal__inner {
 }
+
 .modal {
   top: 5%;
   margin-bottom: 5%;
@@ -46,12 +48,41 @@
 }
 
 @media (max-width: 768px) {
+  /* Styles for screens with a maximum width of 768px (e.g., mobile devices) */
+
+  .modalDiv {
+    /* Modify styles for the modal container */
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(153, 153, 153, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    overflow: auto;
+    z-index: 100;
+  }
+
+  .modal__inner {
+  }
+
   .modal {
-    overflow: auto; /* 유지 */
-    border-radius: 20px;
-    width: 100%;
+    /* Modify styles for the modal */
+    top: 5%;
+    margin-bottom: 5%;
+    left: 17%;
     height: auto;
-    top: 3%;
-    bottom: 10%;
+    width: 80%;
+    max-width: 700px; /* Adjust to take up the full width of the screen */
+    min-height: 500px; /* Take up the full viewport height */
+    border-radius: 0; /* Remove border-radius for full-width modals */
+    position: relative;
+    z-index: 100;
+    overflow: visible;
   }
-}
+}

src/style/ModalHousing.css

@@ -16,17 +16,6 @@
   z-index: 100;
 }
 
-.modalHousing {
-  top: 3%;
-  width: 100%;
-  max-width: 500px;
-  min-height: 700px;
-  border-radius: 20px;
-  position: relative;
-  z-index: 100;
-  overflow: visible;
-}
-
 .modalHousing {
   background-color: white;
   top: 3%;
@@ -40,10 +29,18 @@
 }
 
 @media (max-width: 768px) {
-  .modal {
-    overflow: visible; /* 유지 */
-    width: 100%;
-    height: 100%;
-    top: 10%;
+  /* Styles for screens with a maximum width of 768px (e.g., mobile devices) */
+  .modalHousing {
+    /* Modify styles for modal content */
+    background-color: white;
+    top: 5%;
+    width: 80%;
+    height: auto;
+    max-width: 700px; /* Adjust to take up the full width of the screen */
+    min-height: 400px; /* Take up the full viewport height */
+    border-radius: 20px;
+    position: relative;
+    z-index: 100;
+    overflow: auto;
   }
 }