Merge branch 'main' into SCRUM-81-박찬영

Author: Parkchanyoung0710

src/components/common/Input/Input/Input.jsx

@@ -16,11 +16,7 @@ export const Bone = styled.div`
   width: 100%;
   max-width: 720px;
 
-  @media (max-width: 768px) {
-    padding: 0;
-  }
-
-  @media (max-width: 360px) {
+  @media (max-width: 767px) {
     padding: 0;
   }
 `;
@@ -32,6 +28,9 @@ const Picker = styled.div`
 const ButtonWrapper = styled.div`
   display: flex;
   justify-content: center;
+  @media (max-width: 767px) {
+    margin-top: auto;
+  }
 `
 
 // To 전체적인 컴포넌

src/components/common/Input/Picker/ColorPicker.jsx

@@ -8,8 +8,10 @@ const Bone = styled.div`
   gap: 12px;
   flex-wrap: wrap;
   margin: 45px 0;
-  @media (max-width: 768px) {
-    justify-content: flex-start;
+  @media (max-width: 767px) {
+    display: grid;
+    grid-template: 1fr 1fr / 1fr 1fr;
+    width: fit-content;
   }
 `;
 
@@ -24,7 +26,7 @@ const Color = styled.div`
   justify-content: center;
   position: relative;
   background-color: ${(props) => props.color};
-  @media (max-width: 768px) {
+  @media (max-width: 767px) {
     width: 154px;
     height: 154px;
   }

src/components/common/Input/Picker/ImgPicker.jsx

@@ -9,8 +9,10 @@ const Bone = styled.div`
   gap: 12px;
   flex-wrap: wrap;
   margin: 45px 0;
-  @media (max-width: 768px) {
-    justify-content: flex-start;
+  @media (max-width: 767px) {
+    display: grid;
+    grid-template: 1fr 1fr / 1fr 1fr;
+    width: fit-content;
   }
 `;
 

src/components/common/Input/ProfileInput/ProfileInputChoiceImage.jsx

@@ -10,7 +10,7 @@ const Bone = styled.div`
   margin: 3.125rem auto 3.125rem auto;
   width: 44.813rem;
   height: auto;
-  @media (max-width: 768px) {
+  @media (max-width: 1199px) {
     width: auto;
   }
 `;
@@ -34,10 +34,10 @@ const ProfileImg = styled.img`
   height: 5rem;
   margin-right: 2rem;
   border-radius: 50%;
-  @media (max-width: 768px) {
+  @media (max-width: 1199px) {
     margin-right: 1.76rem;
   }
-  @media (max-width: 360px) {
+  @media (max-width: 767px) {
     margin-right: 1.5rem;
   }
 `;
@@ -53,7 +53,7 @@ const ProfileImgChoice = styled.div`
   width: 37.813rem;
   height: 3.5rem;
   margin: 0.75rem 0 0 0;
-  @media (max-width: 768px) {
+  @media (max-width: 1199px) {
     display: flex;
     align-items: center;
     margin: 0.75rem 0 0 0;
@@ -63,6 +63,10 @@ const ProfileImgChoice = styled.div`
     width: auto;
     height: auto;
   }
+  @media (max-width: 767px) {
+    display: grid;
+    grid-template: 1fr 1fr / 1fr 1fr 1fr 1fr 1fr;
+  }
 `;
 
 const Image = styled.div.withConfig({
@@ -83,7 +87,7 @@ const Image = styled.div.withConfig({
     props.selected
       ? "0 0 5px rgba(0, 162, 254, 0.5)"
       : "none"}; /* 선택 시 box-shadow 추가 */
-  @media (max-width: 360px) {
+  @media (max-width: 767px) {
     width: 40px;
     height: 40px;
   }

src/components/domain/rollingpaper/Card/CardWrite.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import IconButton from "../../../common/Button/IconButton";
 import { textStyle } from "../../../../styles/textStyle";
@@ -85,6 +85,16 @@ const CardContainer = styled.div`
     transform: scale(0.97); 
     box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1); 
   }
+   @media (max-width: 767px) {
+    &:hover {
+      transform: none;
+      box-shadow: none;
+    }
+    &:active {
+      transform: none;
+      box-shadow: none;
+    }
+  }  
 `;
 
 const Header = styled.div`
@@ -146,9 +156,22 @@ const ProfileWrap = styled.div`
 
 const CardWrite = ({ message, onDelete }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 767); 
+  
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  
   const handleCardClick = () => {
+  if (!isMobile) { // 모바일이 아닐 때만 모달 실행
     setIsModalOpen(true);
-  };
+  }
+};
 
   const handleCloseModal = () => {
     setIsModalOpen(false);