From d4beb644a53343cd6ef79a3b69db19c4e809b8d3 Mon Sep 17 00:00:00 2001 From: Hanseul Lee Date: Tue, 12 Nov 2024 15:37:21 +0900 Subject: [PATCH] :sparkles: Refactor to new design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #313 공고 상세페이지 타이틀 디자인 및 index.html 수정 --- gongjakso/public/index.html | 150 ++++++++++++------ .../src/features/modal/ApplyModal.styled.jsx | 4 +- .../pages/DetailPage/DetailPageContest.jsx | 10 +- .../src/pages/DetailPage/DetailPageStyled.jsx | 38 ++--- 4 files changed, 125 insertions(+), 77 deletions(-) diff --git a/gongjakso/public/index.html b/gongjakso/public/index.html index 5cfe57f..6433975 100644 --- a/gongjakso/public/index.html +++ b/gongjakso/public/index.html @@ -1,54 +1,110 @@ - + + + + - - - + + + + + + + - + + 공모전 팀빌딩 서비스 | 공작소 gongjakso + - gtag('config', 'G-757LG6FY1Q'); - + + + + + + - + + + + + + + - -
+ + - - - - - - - - \ No newline at end of file + +
+ + + + + + + + diff --git a/gongjakso/src/features/modal/ApplyModal.styled.jsx b/gongjakso/src/features/modal/ApplyModal.styled.jsx index 9b8e074..ac6a67c 100644 --- a/gongjakso/src/features/modal/ApplyModal.styled.jsx +++ b/gongjakso/src/features/modal/ApplyModal.styled.jsx @@ -53,7 +53,7 @@ export const MainTitle = styled.div` // 텍스트 전체 틀 export const DetailBox = styled.div` - padding: 15px; + padding: 1.8rem; position: relative; `; @@ -133,7 +133,7 @@ export const InputArea = styled.textarea` resize: vertical; overflow: hidden; color: black; - font-size: ${({ theme }) => theme.fontSize.md}; + font-size: ${({ theme }) => theme.fontSize.m}; font-family: 'PreRegular'; line-height: 1.5; &:focus { diff --git a/gongjakso/src/pages/DetailPage/DetailPageContest.jsx b/gongjakso/src/pages/DetailPage/DetailPageContest.jsx index 69b1f41..da7c4dd 100644 --- a/gongjakso/src/pages/DetailPage/DetailPageContest.jsx +++ b/gongjakso/src/pages/DetailPage/DetailPageContest.jsx @@ -283,7 +283,7 @@ const DetailPageContest = () => { ) : null} - + { {checkStatus === 'APPLIER' ? (
- title-logo

{postData?.title}

- title-logo {applyType === '합류 완료' ? ( @@ -331,9 +329,7 @@ const DetailPageContest = () => {
) : ( - title-logo

{postData?.title}

- title-logo )} @@ -708,7 +704,7 @@ const DetailPageContest = () => { maxLength={'1000'} rows={1} placeholder={ - '* 해당 공모전 팀에 합류하고 싶은 이유를 작성해주세요!(최대 1000자)' + '* 해당 공모전 팀에 합류하고 싶은 이유를 작성해주세요! (최대 1000자)' } > @@ -720,7 +716,7 @@ const DetailPageContest = () => { 제출하기 diff --git a/gongjakso/src/pages/DetailPage/DetailPageStyled.jsx b/gongjakso/src/pages/DetailPage/DetailPageStyled.jsx index a27187e..8437c85 100644 --- a/gongjakso/src/pages/DetailPage/DetailPageStyled.jsx +++ b/gongjakso/src/pages/DetailPage/DetailPageStyled.jsx @@ -29,11 +29,10 @@ export const Background = styled.div` export const BgButton = styled.div` display: flex; justify-content: flex-end; - margin-top: 0.7143rem; - margin-bottom: 3.5714rem; + margin-bottom: 5.8rem; margin-right: 1.4286rem; img { - width: 1.9286rem; + width: 1.8rem; cursor: pointer; } `; @@ -64,33 +63,31 @@ export const Title = styled.div` display: flex; align-items: center; font-family: 'TheJamsilRegular'; + font-weight: 600; + letter-spacing: 0.05rem; font-size: ${({ theme }) => theme.fontSize.xl}; - img { - width: 3.214rem; - } - p { - margin: 0 1.071rem; + margin-left: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: ${({ checkStatus }) => - checkStatus === 'APPLIER' ? '37.857rem' : '57.143rem'}; + checkStatus === 'APPLIER' ? '45rem' : '67rem'}; } - margin-left: 5.714rem; - margin-bottom: 2.5rem; + margin-left: 4.5rem; + margin-bottom: 3.2rem; `; // 타이틀 옆 합류 대기 박스 export const Status = styled.div` padding: 0.7143rem; text-align: center; - width: 9.286rem; + width: 8rem; background: ${props => props.$bg}; border-radius: 1.429rem; - font-size: ${({ theme }) => theme.fontSize.md}; + font-size: ${({ theme }) => theme.fontSize.base}; color: white; font-family: 'PreBold'; `; @@ -99,9 +96,9 @@ export const ApplyBtn = styled.button` position: relative; padding-right: 0.7143rem; background: none; - width: 9.429rem; + width: 8rem; border: 0.143rem solid #c8c8c8; - font-size: ${({ theme }) => theme.fontSize.md}; + font-size: ${({ theme }) => theme.fontSize.base}; margin-left: 1.429rem; border-radius: 0.7143rem; font-family: 'PreBold'; @@ -109,14 +106,14 @@ export const ApplyBtn = styled.button` position: absolute; top: 0.7143rem; right: 0.3571rem; - width: 1.2143rem; + width: 1rem; } `; // 팀장 표시 부분 export const TitleBottom = styled.div` font-size: ${({ theme }) => theme.fontSize.mdd}; - margin-left: 3.214rem; + margin-left: 2.3rem; `; export const BlueBox = styled.div` @@ -124,7 +121,7 @@ export const BlueBox = styled.div` border-radius: 2.857rem; margin-top: 1.071rem; margin-bottom: 3.929rem; - padding: 3.929rem; + padding: 3rem; `; // 박스 안 텍스트 박스 전체 틀 @@ -209,7 +206,6 @@ export const ScrapButton = styled.button` border-radius: 1.071rem; margin: 1.071rem; margin-bottom: 10rem; - padding: 1.286rem; font-size: ${({ theme }) => theme.fontSize.md}; font-weight: bold; @@ -253,10 +249,10 @@ export const ApplicationBtn = styled.button` justify-content: center; width: ${props => props.$w}; height: 3.571rem; - border-radius: 1.143rem; + border-radius: 1rem; margin-top: 15rem; margin-bottom: 10rem; - padding: 2.143rem; + padding: 2rem; font-size: ${({ theme }) => theme.fontSize.md}; background: ${({ theme }) => theme.box1}; font-family: 'PreBold';