Feat/responsive #57 (#63)

* Fix: 페이지 짤림 문제 해결 #57 윈도우 창 크기를 조절할 때 flex를 이용해 align-items: center로 인해 페이지 왼쪽이 짤리는 문제 -> safe center 이용해 해결 * Design: 래플 업로드 페이지 태블릿뷰 #57 래플 업로드 페이지 태블릿뷰 완성 * Design: 공개 정보 설정 페이지 태블릿뷰 #57 공개 정보 설정 페이지 반응형 태블릿뷰 완성 * Design: 후기 페이지 반응형 #57 후기 남기기 페이지 반응형 태블릿뷰 완성 * Design: 배송지 설정 페이지 반응형 #57 배송지 설정 페이지 반응형 태블릿뷰 완성 * Chore: 태블릿뷰 간격 조정 #57 반응형(태블릿뷰) column-gap 조정 * Design: 배송지 설정 페이지 글자 깨짐 수정 #57
JMarketYard · Feb 12, 2025 · 04b4871 · 04b4871
1 parent 92f4d14
commit 04b4871
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 21 deletions.
diff --git a/src/assets/imgCheckbox.svg b/src/assets/imgCheckbox.svg
diff --git a/src/components/BigTitle.tsx b/src/components/BigTitle.tsx
@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import styled from "styled-components";
+import media from "../styles/media";
 
 const BigTitle = ({children}:{children:ReactNode}) => {
     return (
@@ -27,6 +28,11 @@ const BigTitleBox = styled.div`
     padding-bottom: 24px;
     box-sizing: border-box;
     position: relative;
+    
+    ${media.medium`
+        width: 675px;
+        margin: 0 14px;
+    `}
 `
 
 const TitleIcon = styled.span`

diff --git a/src/layout/RootLayout.tsx b/src/layout/RootLayout.tsx
@@ -20,6 +20,6 @@ const Wrapper = styled.div`
   // min-width: 1440px;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: safe center;
   // justify-content: center;
 `;
diff --git a/src/pages/address/addressSetPage.tsx b/src/pages/address/addressSetPage.tsx
@@ -4,6 +4,7 @@ import Address from "./components/Address";
 import { useState } from "react";
 import { useModalContext } from "../../components/Modal/context/ModalContext";
 import AddAddress from "./components/modal/AddAddress";
+import media from "../../styles/media";
 
 const AddressSetPage = () => {
   const [isSelect, setIsSelect] = useState(false);
@@ -79,6 +80,10 @@ const AddressList = styled.ul`
   display: flex;
   flex-direction: column;
   row-gap: 30px;
+
+  ${media.medium`
+    padding-inline-start: 13px;
+  `}
 `
 
 const Button = styled.button`

diff --git a/src/pages/address/components/Address.tsx b/src/pages/address/components/Address.tsx
@@ -2,6 +2,7 @@
 import { useState } from "react";
 import styled from "styled-components";
 import { ReactComponent as checkbox } from "../../../assets/imgCheckbox.svg";
+import media from "../../../styles/media";
 
 const Address = ({isSelect}:{isSelect:boolean}) => {
   // 임의의 default state: 후에 데이터 연결하면 삭제할 state
@@ -12,8 +13,6 @@ const Address = ({isSelect}:{isSelect:boolean}) => {
     <List>
       {isSelect ?
       <Checkbox
-      width={27.2}
-      height={27.1}
       onClick={()=>setIsClicked(!isClicked)}
       fill={isClicked ? "#C908FF" : "none"}
       />
@@ -38,15 +37,28 @@ export default Address;
 const List = styled.li`
   display: flex;
   align-items: center;
-  column-gap: 66px;
-  width: 1000px;
+  // justify-content: space-between;
+  column-gap: 74px;
+  width: 925px;
   box-sizing: border-box;
+  ${media.medium`
+    width: 631px;
+    column-gap: 49px;
+    // justify-content: space-between;
+  `}
 `
 
 const Checkbox = styled(checkbox)`
+  width: 27.2px;
+  height: 27.1px;
   &:hover {
     cursor: pointer;
   };
+
+  ${media.medium`
+    width: 21px;
+    height: 21px;
+  `}
 `
 
 const ListIcon = styled.span`
@@ -69,7 +81,7 @@ const TitleSpan = styled.div`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  width: 100px;
+  // width: 100px;
 `
 
 const AddressSpan = styled.span`
@@ -83,6 +95,9 @@ const AddressSpan = styled.span`
   overflow: hidden;
   text-overflow: ellipsis;
   width: 460px;
+  ${media.medium`
+    width: 229px;
+  `}
 `
 
 const SetBtn = styled.button<{$default:boolean}>`
@@ -100,7 +115,7 @@ const SetBtn = styled.button<{$default:boolean}>`
   font-style: normal;
   font-weight: 500;
   line-height: 36.832px; /* 230.199% */
-  margin-right: 14px;
+  // margin-right: 14px;
   box-sizing: border-box;
   &:hover {
     cursor: pointer;

diff --git a/src/pages/homepage/homePage.tsx b/src/pages/homepage/homePage.tsx
@@ -41,7 +41,7 @@ const HomePage: React.FC = () => {
       //   console.error('데이터 가져오기 실패', error);
       // }
 
-      const { data } = await axiosInstance.get('/api/member/home', {
+      const { data } = await axiosInstance.get('/api/permit/home', {
         withCredentials: true,
       });
 

diff --git a/src/pages/raffleUpload/RaffleUploadPage.tsx b/src/pages/raffleUpload/RaffleUploadPage.tsx
@@ -8,6 +8,7 @@ import UploadModal from "./components/UploadModal";
 import TicketModal from "./components/TicketModal";
 import DatePicker from 'react-datepicker'
 import 'react-datepicker/dist/react-datepicker.css';
+import media from "../../styles/media";
 
 const RaffleUploadPage = () => {
     const itemStates = [
@@ -159,9 +160,7 @@ const RaffleUploadPage = () => {
                 </ItemInfoContainer>
             </div>
             <div>
-                <BigTitle>
-                    거래 설정
-                </BigTitle>
+                <BigTitle>거래 설정</BigTitle>
                 <SetConditionContainer>
                     <SetConditionBox>
                         <TitleSpan2>응모 티켓 개수</TitleSpan2>
@@ -240,17 +239,21 @@ export default RaffleUploadPage;
 
 
 const UploadForm = styled.form`
-    width: 1080px;
+    max-width: 1080px;
     min-height: 1498px;
     display: flex;
-    align-items: center;
+    align-items: safe center;
     flex-direction: column;
     padding-top: 63px;
 `
 
 const ItemInfoContainer = styled.div`
     display: flex;
     column-gap: 73px;
+    ${media.medium`
+        flex-direction: column;
+        align-items: center;
+    `}
 `
 
 const ImgContainer = styled.div`
@@ -301,6 +304,9 @@ const ItemInfoRightContainer = styled.div`
     flex-direction: column;
     row-gap: 23px;
     padding-top: 77px;
+    ${media.medium`
+        padding-top: 50px;
+    `}
 `
 
 const TitleSpan = styled.div`
@@ -322,6 +328,10 @@ const TitleSpan2 = styled.div`
     font-style: normal;
     font-weight: 500;
     line-height: 36.832px; /* 184.159% */
+
+    ${media.medium`
+        min-width: 190px;
+    `}
 `
 
 const StyleP = styled.p`
@@ -359,6 +369,10 @@ const ItemCategorySelect = styled.select`
     &::-ms-expand {
         display: none;
     };
+
+    ${media.medium`
+        width: 530px;
+    `}
 `
 
 const ConditionBtn = styled.button<{$clicked:string}>`
@@ -401,10 +415,18 @@ const Textarea = styled.textarea`
     padding: 10px;
     box-sizing: border-box;
     border-radius: 7px;
+
+    ${media.medium`
+        width: 530px;
+    `}
 `
 
 const TextareaDiv = styled.div`
     display: flex;
+
+    ${media.medium`
+        margin-bottom: 57px;
+    `}
 `
 
 const SetConditionContainer = styled.div`
@@ -417,7 +439,12 @@ const SetConditionContainer = styled.div`
 
 const SetConditionBox = styled.div`
     width: 857px;
+    // width: 100%;
     display: flex;
+    ${media.medium`
+        width: 100%;
+        padding-left: 13px;
+    `}
 `
 
 const InputContainer = styled.div<{width?:number}>`
@@ -430,6 +457,11 @@ const InputContainer = styled.div<{width?:number}>`
     // display: inline-block;
     display: inline-flex;
     align-items: center;
+
+    ${media.medium`
+        width: ${ (props: { width?:number }) => (
+        props.width ? '530px' : `464px`)};
+    `}
 `
 const InputBox = styled.input`
     flex: 1;
@@ -452,6 +484,10 @@ const DatePickerBox = styled.div`
         box-sizing: border-box;
         padding: 0 10px;
         display: flex;
+
+        ${media.medium`
+            width: 464px;
+        `}
     };
 
     input {
@@ -483,6 +519,7 @@ const SubmitBtn = styled.input`
     line-height: 18px;
     letter-spacing: -0.165px;
     margin-top: 154px;
+    margin-bottom: 100px;
     &:hover {
         cursor: pointer;
     }

diff --git a/src/pages/setOpenInfo/setOpenInfoPage.tsx b/src/pages/setOpenInfo/setOpenInfoPage.tsx
@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import BigTitle from "../../components/BigTitle";
 import { useState } from "react";
+import media from "../../styles/media";
 
 const SetOpenInfoPage = () => {
   const [toggle, setToggle] = useState(false);
@@ -45,6 +46,10 @@ const Box = styled.div`
   align-items: center;
   justify-content: space-between;
   width: 847px;
+
+  ${media.medium`
+    width: 628px;
+  `}
 `
 
 const RoundDiv = styled.div`

diff --git a/src/pages/writeReview/writeReview.tsx b/src/pages/writeReview/writeReview.tsx
@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import BigTitle from "../../components/BigTitle";
 import StarRating from "../../components/StarRating";
+import media from "../../styles/media";
 
 const WriteReview = () => {
   return (
@@ -56,6 +57,10 @@ const Textarea = styled.textarea`
   font-weight: 400;
   line-height: normal;
   resize: none;
+  
+  ${media.medium`
+    width: 658px;
+  `}
 `
 
 const Button = styled.button`