Skip to content

Commit

Permalink
🔀 Refactor DetailAndApplyPageStyleUnit
Browse files Browse the repository at this point in the history
#313 공고상세페이지 및 지원서 작성 스타일 단위 rem 통일 및 수정된 스타일 반영 완료
  • Loading branch information
sseuldev authored Nov 12, 2024
2 parents 75cdf1f + d4beb64 commit 4ab338f
Show file tree
Hide file tree
Showing 4 changed files with 175 additions and 123 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
23 changes: 12 additions & 11 deletions gongjakso/src/pages/DetailPage/DetailPageContest.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -209,8 +209,13 @@ const DetailPageContest = () => {
// 지원 이유 작성란 기능 설정
const textarea = useRef();
const handleResizeHeight = () => {
const baseFontSize = parseFloat(
getComputedStyle(document.documentElement).fontSize,
);
const pxToRem = px => px / baseFontSize;

textarea.current.style.height = 'auto';
textarea.current.style.height = textarea.current.scrollHeight + 'px';
textarea.current.style.height = `${pxToRem(textarea.current.scrollHeight)}rem`;
};
const onInputHandler = e => {
if (e.target.value.length > 1000) {
Expand Down Expand Up @@ -278,7 +283,7 @@ const DetailPageContest = () => {
) : null}

<S.Layout>
<S.Background $s="1150px" $mgt="50px">
<S.Background $s="77rem" $mgt="1.8rem">
<S.BgButton>
<img
src={Close}
Expand All @@ -290,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 @@ -326,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 All @@ -343,7 +344,7 @@ const DetailPageContest = () => {
</S.TitleBox>
</S.Background>

<S.Background $s="1100px">
<S.Background $s="75.5rem">
<S.BlueBox $bg={({ theme }) => theme.Light1}>
<S.TextBox>
<S.TextTitle>진행 기간</S.TextTitle>
Expand Down Expand Up @@ -397,7 +398,7 @@ const DetailPageContest = () => {
</S.TextBox>
<S.TextBox>
<S.TextTitle>공모전 홈페이지</S.TextTitle>
<S.OpenKakao $w="185px">
<S.OpenKakao $w="13rem">
<img
src={postLink}
alt="homepage-link"
Expand All @@ -410,7 +411,7 @@ const DetailPageContest = () => {
<S.TextBox>
{/* kakao : True, google : False */}
<S.TextTitle>기타 문의</S.TextTitle>
<S.OpenKakao $w="140px">
<S.OpenKakao $w="10rem">
{postData?.channel_method ? (
<img
src={OpenKakao}
Expand Down Expand Up @@ -703,7 +704,7 @@ const DetailPageContest = () => {
maxLength={'1000'}
rows={1}
placeholder={
'* 해당 공모전 팀에 합류하고 싶은 이유를 작성해주세요!(최대 1000자)'
'* 해당 공모전 팀에 합류하고 싶은 이유를 작성해주세요! (최대 1000자)'
}
></T.InputArea>
<T.InputNum>
Expand All @@ -715,7 +716,7 @@ const DetailPageContest = () => {

<T.ApplyBox>
<S.ApplicationBtn
$w="280px"
$w="18rem"
onClick={WarningApply}
>
제출하기
Expand Down
Loading

0 comments on commit 4ab338f

Please sign in to comment.