Skip to content

Commit

Permalink
✨ Refactor to new design
Browse files Browse the repository at this point in the history
#313 공고 상세페이지 타이틀 디자인 및 index.html 수정
  • Loading branch information
sseuldev committed Nov 12, 2024
1 parent f693ab0 commit d4beb64
Show file tree
Hide file tree
Showing 4 changed files with 125 additions and 77 deletions.
150 changes: 103 additions & 47 deletions gongjakso/public/index.html
Original file line number Diff line number Diff line change
@@ -1,54 +1,110 @@
<!DOCTYPE html>
<!doctype html>
<html lang="ko">
<!-- Google Tag Manager -->
<script>
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-KKNX2ZKD');
</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KKNX2ZKD');</script>
<!-- End Google Tag Manager -->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<!-- Google tag (gtag.js) -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-757LG6FY1Q"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-757LG6FY1Q"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-757LG6FY1Q');
</script>
<!-- HTML Meta Tags -->
<title>공모전 팀빌딩 서비스 | 공작소 gongjakso</title>
<meta
name="description"
content="귀찮은 공모전 팀 구인 과정은 이제 그만! 내가 원하는 조건에 맞추어 공모전 팀원을 모집해보세요."
/>

gtag('config', 'G-757LG6FY1Q');
</script>
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://gongjakso.xyz" />
<meta property="og:type" content="website" />
<meta
property="og:title"
content="공모전 팀빌딩 서비스 | 공작소 gongjakso"
/>
<meta
property="og:description"
content="귀찮은 공모전 팀 구인 과정은 이제 그만! 내가 원하는 조건에 맞추어 공모전 팀원을 모집해보세요."
/>
<meta
property="og:image"
content="https://opengraph.b-cdn.net/production/images/5585fb04-c501-4717-8122-8c9d3d05f246.png?token=hOfHzJ7eKbz1nuru47epxsiWBHDGHpfIodgv5PB7b0Y&height=557&width=1200&expires=33266696940"
/>

</head>
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="gongjakso.xyz" />
<meta property="twitter:url" content="https://gongjakso.xyz" />
<meta
name="twitter:title"
content="공모전 팀빌딩 서비스 | 공작소 gongjakso"
/>
<meta
name="twitter:description"
content="귀찮은 공모전 팀 구인 과정은 이제 그만! 내가 원하는 조건에 맞추어 공모전 팀원을 모집해보세요."
/>
<meta
name="twitter:image"
content="https://opengraph.b-cdn.net/production/images/5585fb04-c501-4717-8122-8c9d3d05f246.png?token=hOfHzJ7eKbz1nuru47epxsiWBHDGHpfIodgv5PB7b0Y&height=557&width=1200&expires=33266696940"
/>

<body>
<div id="root"></div>
<!-- Meta Tags Generated via https://www.opengraph.xyz/ -->
</head>

<!-- Event snippet for 페이지 조회 conversion page -->
<script>
function gtag_report_conversion(url) {
var callback = function () {
if (typeof(url) != 'undefined') {
window.location = url;
}
};
gtag('event', 'conversion', {
'send_to': 'AW-16763777373/-HQ6CPeV4ecZEN3iy7k-',
'value': 1.0,
'currency': 'KRW',
'event_callback': callback
});
return false;
}
</script>

</body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KKNX2ZKD"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
</html>
<body>
<div id="root"></div>

<!-- Event snippet for 페이지 조회 conversion page -->
<script>
function gtag_report_conversion(url) {
var callback = function () {
if (typeof url != 'undefined') {
window.location = url;
}
};
gtag('event', 'conversion', {
send_to: 'AW-16763777373/-HQ6CPeV4ecZEN3iy7k-',
value: 1.0,
currency: 'KRW',
event_callback: callback,
});
return false;
}
</script>
</body>
<!-- Google Tag Manager (noscript) -->
<noscript
><iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-KKNX2ZKD"
height="0"
width="0"
style="display: none; visibility: hidden"
></iframe
></noscript>
<!-- End Google Tag Manager (noscript) -->
</html>
4 changes: 2 additions & 2 deletions gongjakso/src/features/modal/ApplyModal.styled.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export const MainTitle = styled.div`

// 텍스트 전체 틀
export const DetailBox = styled.div`
padding: 15px;
padding: 1.8rem;
position: relative;
`;

Expand Down Expand Up @@ -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 {
Expand Down
10 changes: 3 additions & 7 deletions gongjakso/src/pages/DetailPage/DetailPageContest.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -283,7 +283,7 @@ const DetailPageContest = () => {
) : null}

<S.Layout>
<S.Background $s="77rem" $mgt="3rem">
<S.Background $s="77rem" $mgt="1.8rem">
<S.BgButton>
<img
src={Close}
Expand All @@ -295,9 +295,7 @@ const DetailPageContest = () => {
{checkStatus === 'APPLIER' ? (
<div>
<S.Title checkStatus={checkStatus}>
<img src={Logo} alt="title-logo" />
<p>{postData?.title}</p>
<img src={Logo} alt="title-logo" />
</S.Title>
<S.BtnLayout>
{applyType === '합류 완료' ? (
Expand Down Expand Up @@ -331,9 +329,7 @@ const DetailPageContest = () => {
</div>
) : (
<S.Title checkStatus={checkStatus}>
<img src={Logo} alt="title-logo" />
<p>{postData?.title}</p>
<img src={Logo} alt="title-logo" />
</S.Title>
)}

Expand Down Expand Up @@ -708,7 +704,7 @@ const DetailPageContest = () => {
maxLength={'1000'}
rows={1}
placeholder={
'* 해당 공모전 팀에 합류하고 싶은 이유를 작성해주세요!(최대 1000자)'
'* 해당 공모전 팀에 합류하고 싶은 이유를 작성해주세요! (최대 1000자)'
}
></T.InputArea>
<T.InputNum>
Expand All @@ -720,7 +716,7 @@ const DetailPageContest = () => {

<T.ApplyBox>
<S.ApplicationBtn
$w="20rem"
$w="18rem"
onClick={WarningApply}
>
제출하기
Expand Down
38 changes: 17 additions & 21 deletions gongjakso/src/pages/DetailPage/DetailPageStyled.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
`;
Expand Down Expand Up @@ -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';
`;
Expand All @@ -99,32 +96,32 @@ 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';
img {
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`
border: 0.2rem solid #7cd0ff80;
border-radius: 2.857rem;
margin-top: 1.071rem;
margin-bottom: 3.929rem;
padding: 3.929rem;
padding: 3rem;
`;

// 박스 안 텍스트 박스 전체 틀
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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';
Expand Down

0 comments on commit d4beb64

Please sign in to comment.