🔀 Add Responsive Page Design

#285 페이지 디자인 반응형 추가 및 코드 삭제
Gongjakso · Oct 2, 2024 · a89c807 · a89c807
2 parents ed1116a + fc3a688
commit a89c807
Show file tree

Hide file tree

Showing 17 changed files with 107 additions and 68 deletions.
diff --git a/gongjakso/src/components/Auth/KakaoRedirectPage.jsx b/gongjakso/src/components/Auth/KakaoRedirectPage.jsx
@@ -8,7 +8,6 @@ const KakaoRedirectPage = () => {
     useEffect(() => {
         getToken(code, REDIRECT_URI)
             .then(result => {
-                console.log(result);
                 localStorage.setItem('accessToken', result?.accessToken);
                 window.location.replace('/');
             })

diff --git a/gongjakso/src/components/Footer/Footer.Styled.jsx b/gongjakso/src/components/Footer/Footer.Styled.jsx
@@ -4,7 +4,7 @@ export const Footer = styled.div`
     display: flex;
     margin: auto;
     width: 100%;
-    max-width: 1200px;
+    max-width: 75rem;
     height: 92px;
     align-items: center;
     justify-content: center;
@@ -19,7 +19,7 @@ export const Footer = styled.div`
 export const FooterContainer = styled.ul`
     display: flex;
     width: 100%;
-    max-width: 1100px;
+    max-width: 68.75rem;
     justify-content: space-between;
     position: static;
 `;

diff --git a/gongjakso/src/components/Header/Header.Styled.jsx b/gongjakso/src/components/Header/Header.Styled.jsx
@@ -6,7 +6,7 @@ export const Header = styled.div`
     width: 100%;
     justify-content: center;
     padding: 15px;
-    padding-left: 80px;
+    align-items: center;
     position: absolute;
     top: 0;
 `;

diff --git a/gongjakso/src/components/common/Calendar/SelectOne.jsx b/gongjakso/src/components/common/Calendar/SelectOne.jsx
@@ -33,7 +33,6 @@ const SelectOne = ({ value, onApply, placeholder, width }) => {
     };
 
     const handleApply = () => {
-        console.log('Selected Date:', selectedDate);
         if (selectedDate) {
             onApply(selectedDate); // 부모 컴포넌트로 선택된 날짜 전달
         }

diff --git a/gongjakso/src/features/modal/ClickRecruitApplicant.jsx b/gongjakso/src/features/modal/ClickRecruitApplicant.jsx
@@ -23,7 +23,6 @@ const ClickmyApply = props => {
     // 특정 지원자 지원서 열람하기
     useEffect(() => {
         getMyApplication(props.applyId).then(res => {
-            console.log('지원서 데이터:', res?.data); // API 응답 확인
             setmyApp(res?.data);
         });
     }, [props.applyId]);

diff --git a/gongjakso/src/features/modal/ClickmyApply.jsx b/gongjakso/src/features/modal/ClickmyApply.jsx
@@ -25,7 +25,6 @@ const ClickmyApply = props => {
     // 특정 지원자 지원서 열람하기
     useEffect(() => {
         getMyApplication(props.applyId).then(res => {
-            // console.log(res?.data);
             setmyApp(res?.data);
         });
 
@@ -35,8 +34,6 @@ const ClickmyApply = props => {
         });
     }, [props.applyId]);
 
-    // console.log(portfolioData);
-
     return (
         <div>
             <S.Background>

diff --git a/gongjakso/src/features/modal/DeleteModal.jsx b/gongjakso/src/features/modal/DeleteModal.jsx
@@ -4,7 +4,6 @@ import Close from '../../assets/images/Close.svg';
 
 const DeleteModal = ({ showModal, closeModal, confirmDelete, title, type }) => {
     if (!showModal) return null;
-    console.log('Type received in modal:', type);
 
     const getDeleteMessage = () => {
         switch (type) {

diff --git a/gongjakso/src/pages/DetailPage/DetailPageProject.jsx b/gongjakso/src/pages/DetailPage/DetailPageProject.jsx
@@ -12,12 +12,7 @@ import arrow from '../../assets/images/Arrow.svg';
 import googleform from '../../assets/images/GoogleFormLink.svg';
 import ApplyModal from '../../features/modal/ApplyModal';
 import Completed from '../../features/modal/Completed';
-import {
-    getPostDetail,
-    getScrap,
-    postScrap,
-    getCheckStatus,
-} from '../../service/post_service';
+import { getPostDetail, getScrap, postScrap } from '../../service/post_service';
 import ClickmyApply from '../../features/modal/ClickmyApply';
 import { getMyApplication } from '../../service/apply_service';
 import ApplyCancel from '../../features/modal/ApplyCancel';
@@ -73,9 +68,6 @@ const DetailPageProject = () => {
             setapplyTitle(res?.data.title);
         });
 
-        getCheckStatus(id).then(res => {
-            setcheckStatus(res?.data.role);
-        });
         getScrap(id).then(res => {
             setscrapStatus(res?.data.scrapStatus);
         });

diff --git a/gongjakso/src/pages/HomePage/HomePage.Styled.jsx b/gongjakso/src/pages/HomePage/HomePage.Styled.jsx
@@ -93,8 +93,10 @@ export const PageImg = styled.div`
     height: 59.7rem;
     position: absolute;
     margin-top: 5rem;
-    transform: scale(0.9);
     background-repeat: no-repeat;
+    @media (max-width: 1270px) {
+        transform: scale(0.85);
+    }
 `;
 
 export const ContestImg = styled.div`
@@ -105,6 +107,10 @@ export const ContestImg = styled.div`
     margin-top: 1rem;
     right: 0;
     background-repeat: no-repeat;
+    @media (max-width: 1270px) {
+        transform: scale(0.85);
+        margin-top: 0;
+    }
 `;
 
 export const Section = styled.div`
@@ -121,11 +127,16 @@ export const Section = styled.div`
 export const Section1 = styled.div`
     display: flex;
     justify-content: space-between;
-    width: 77rem;
+    width: 100%;
+    max-width: 77rem;
     height: 45rem;
     padding: 4rem 0;
     flex-direction: row;
     position: relative;
+
+    @media (max-width: 1270px) {
+        max-width: 64rem;
+    }
 `;
 
 export const Bubble = styled.div`
@@ -140,6 +151,9 @@ export const Bubble = styled.div`
     background-repeat: no-repeat;
     background: url(${leftBubble});
     font-weight: 600;
+    @media (max-width: 1270px) {
+        transform: scale(0.8);
+    }
 `;
 
 export const Text = styled.div`
@@ -153,6 +167,11 @@ export const Text = styled.div`
     width: 18rem;
     position: absolute;
     font-size: ${({ theme }) => theme.fontSize.lg};
+    @media (max-width: 1270px) {
+        left: 12rem;
+        top: 8rem;
+        font-size: ${({ theme }) => theme.fontSize.md};
+    }
 `;
 
 export const TextContainer = styled.div`
@@ -172,31 +191,54 @@ export const TeamImg = styled.div`
     width: 18rem;
     background-size: cover;
     height: 16rem;
+    @media (max-width: 1270px) {
+        left: 16rem;
+        top: 12rem;
+        transform: scale(0.9);
+    }
 `;
 
 export const RightBubble = styled(Bubble)`
     background: url(${rightBubble});
     right: 0;
     background-repeat: no-repeat;
+    @media (max-width: 1270px) {
+        transform: scale(0.8);
+        margin-top: 1rem;
+    }
 `;
 
 export const RightBubble1 = styled(RightBubble)`
     position: absolute;
     left: 7.5rem;
     top: 6.5rem;
+    @media (max-width: 1270px) {
+        transform: scale(0.8);
+        left: 1.5rem;
+        top: 5.5rem;
+        margin-top: 0;
+    }
 `;
 
 export const Section2 = styled(Section1)`
-    width: 80rem;
+    max-width: 80rem;
+    width: 100%;
     height: 45rem;
     position: relative;
+    @media (max-width: 1270px) {
+        max-width: 64rem;
+    }
 `;
 
 export const Section3 = styled(Section1)`
-    width: 80rem;
+    max-width: 80rem;
+    width: 100%;
     height: 40rem;
     margin-bottom: 30rem;
     position: relative;
+    @media (max-width: 1270px) {
+        max-width: 64rem;
+    }
 `;
 
 export const ContestDetail = styled(ContestImg)`
@@ -205,6 +247,9 @@ export const ContestDetail = styled(ContestImg)`
     left: 0;
     height: 30rem;
     background-repeat: no-repeat;
+    @media (max-width: 1270px) {
+        transform: scale(0.85);
+    }
 `;
 
 export const TextContainer1 = styled(TextContainer)`
@@ -219,6 +264,9 @@ export const Bubble1 = styled(Bubble)`
     position: absolute;
     right: 8.5rem;
     top: 6.5rem;
+    @media (max-width: 1270px) {
+        right: 0.8rem;
+    }
 `;
 
 export const Bubble2 = styled(Bubble)`
@@ -233,21 +281,35 @@ export const Text1 = styled(Text)`
     top: 20rem;
     left: -110px;
     width: 30rem;
+    @media (max-width: 1270px) {
+        left: 40px;
+        top: 18rem;
+    }
 `;
 
 export const Text2 = styled(Text)`
     text-align: right;
     top: 29.5rem;
     left: 8.5rem;
     width: 32rem;
+    @media (max-width: 1270px) {
+        left: 2rem;
+        top: 24rem;
+    }
 `;
+
 export const TeamImg2 = styled(TeamImg)`
     background: url(${teambuilding2});
     width: 19rem;
     height: 17rem;
     background-size: cover;
     left: 17.5rem;
     top: 14.5rem;
+    @media (max-width: 1270px) {
+        left: 19.5rem;
+        top: 15rem;
+        transform: scale(0.7);
+    }
 `;
 
 export const PortfolioImg = styled(TeamImg)`
@@ -257,6 +319,11 @@ export const PortfolioImg = styled(TeamImg)`
     background-size: cover;
     left: 26rem;
     top: 13rem;
+    @media (max-width: 1270px) {
+        left: 17rem;
+        transform: scale(0.8);
+        top: 10rem;
+    }
 `;
 
 export const PortfolioDetail = styled(ContestImg)`
@@ -266,4 +333,8 @@ export const PortfolioDetail = styled(ContestImg)`
     top: 9.5rem;
     width: 37.7rem;
     height: 28rem;
+    @media (max-width: 1270px) {
+        top: 7.2rem;
+        transform: scale(0.8);
+    }
 `;
diff --git a/gongjakso/src/pages/Portfolio/Portfolio.Styled.jsx b/gongjakso/src/pages/Portfolio/Portfolio.Styled.jsx
@@ -19,7 +19,6 @@ export const TopBox = styled.div`
 export const BoxDetail = styled.div`
     display: flex;
     gap: 0.5rem;
-    width: 70rem;
     margin-bottom: 1rem;
 `;
 export const PortfolioInfo = styled.div`
@@ -42,12 +41,17 @@ export const Description = styled.span`
 `;
 
 export const GlobalBox = styled.div`
-    width: 64rem;
-    margin: 5rem auto 0 auto; // 가운데 정렬
+    width: 100%;
+    max-width: 1000px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: auto; // 가운데 정렬
 `;
 
 export const SubTitle = styled.p`
     width: 100%;
+    max-width: 1000px;
     font-size: ${({ theme }) => theme.fontSize.lg};
     font-weight: 700;
     margin-bottom: 25px;
@@ -60,12 +64,15 @@ export const SubTitle = styled.p`
 
 export const UploadInfo = styled.p`
     width: 100%;
+    max-width: 1000px;
     font-size: ${({ theme }) => theme.fontSize.m};
     font-weight: 500;
     color: #565656;
     margin: 0.625rem 0;
     line-height: 1.343rem;
     margin-bottom: 1.5rem;
+    display: flex;
+    align-items: center;
 `;
 
 export const LinkIcon = styled.div`

diff --git a/gongjakso/src/pages/Portfolio/UsePortfolio.jsx b/gongjakso/src/pages/Portfolio/UsePortfolio.jsx
@@ -42,8 +42,8 @@ const UsePortfolio = () => {
                 }
                 if (notionData && notionData.notionUri) {
                     setSnsLink(notionData.notionUri || '');
-                } else {
-                    console.log('No Notion URI found');
+                    // } else {
+                    //     console.log('No Notion URI found');
                 }
             } catch (error) {
                 console.error(
@@ -135,14 +135,16 @@ const UsePortfolio = () => {
                 </S.PortfolioInfo>
             </S.TopBox>
             <S.GlobalBox>
-                <S.SubTitle>
-                    포트폴리오 파일 {isEdit ? '수정' : '업로드'}하기
-                </S.SubTitle>
-                <S.UploadInfo>
-                    PDF 형식으로 업로드 해주세요.
-                    <br />
-                    최대 10MB 까지 업로드할 수 있어요.
-                </S.UploadInfo>
+                <S.TitleSection style={{ flexDirection: 'column' }}>
+                    <S.SubTitle>
+                        포트폴리오 파일 {isEdit ? '수정' : '업로드'}하기
+                    </S.SubTitle>
+                    <S.UploadInfo>
+                        PDF 형식으로 업로드 해주세요.
+                        <br />
+                        최대 10MB 까지 업로드할 수 있어요.
+                    </S.UploadInfo>
+                </S.TitleSection>
 
                 <S.FileUploadBox>
                     <S.pdfImg />
@@ -180,13 +182,13 @@ const UsePortfolio = () => {
                 )}
 
                 {error && <S.ErrorMessage>{error}</S.ErrorMessage>}
-                <S.TitleSection>
+                <S.TitleSection style={{ flexDirection: 'column' }}>
                     <S.SubTitle>노션 포트폴리오 링크 입력하기</S.SubTitle>
+                    <S.UploadInfo>
+                        노션 공유에서 ‘웹에 게시’ 여부를 확인해주세요! 게시가
+                        허용되지 않았을 경우 링크 확인이 불가능해요.
+                    </S.UploadInfo>
                 </S.TitleSection>
-                <S.UploadInfo>
-                    노션 공유에서 ‘웹에 게시’ 여부를 확인해주세요! 게시가
-                    허용되지 않았을 경우 링크 확인이 불가능해요.
-                </S.UploadInfo>
 
                 {/* 단일 노션 링크 입력 필드 */}
                 <S.BoxDetail>