diff --git a/src/constants/color.js b/src/constants/color.js deleted file mode 100644 index ef70787d..00000000 --- a/src/constants/color.js +++ /dev/null @@ -1,20 +0,0 @@ -export const Color = { - main01: '#3AAF85', - - main02: '#9DD8C3', - main03: '#E6F5EC', - black: '#000000', - gray01: '#333333', - gray02: '#555555', - gray03: '#888888', - gray04: '#BBBBBB', - gray05: '#DDDDDD', - gray06: '#F1F1F1', - white: '#FFFFFF', - subRd: '#EF6A6A', - subOg: '#F2994A', - subYe: '#F2C94C', - subGn: '#6FCF97', - subBu: '#56CCF2', - subPu: '#BB6BD9', -}; diff --git a/src/constants/theme.js b/src/constants/theme.js index f23dbcf8..6315265d 100644 --- a/src/constants/theme.js +++ b/src/constants/theme.js @@ -4,6 +4,22 @@ export const theme = { md: '768px', }, colors: { - primary: '#3AAF85', + main01: '#3AAF85', + main02: '#88D1B6', + main03: '#E1F4ED', + black: '#000000', + gray01: '#333333', + gray02: '#707070', + gray03: '#BDBDBD', + gray04: '#E0E0E0', + gray05: '#E1E1E1', + gray06: '#F5F5F5', + white: '#FFFFFF', + subRd: '#FA7C79', + subOg: '#F99538', + subYe: '#FCC400', + subGn: '#6FCF97', + subBu: '#56CCF2', + subPu: '#BB6BD9', }, }; diff --git a/src/index.js b/src/index.js index ef82ff24..5c3d1733 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import AppWrapper from './AppWrapper'; +import AppWrapper from '@/AppWrapper'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); diff --git a/src/pages/CommingSoon.jsx b/src/pages/CommingSoon.jsx index eb8e5870..7f307558 100644 --- a/src/pages/CommingSoon.jsx +++ b/src/pages/CommingSoon.jsx @@ -1,8 +1,8 @@ import styled from 'styled-components'; import React from 'react'; -import logo from '../assets/logo.png'; -import instagramLogo from '../assets/instagramLogo.png'; -import paperplaneicon from '../assets/paperplaneicon.png'; +import logo from '@assets/logo.png'; +import instagramLogo from '@assets/instagramLogo.png'; +import paperplaneicon from '@assets/paperplaneicon.png'; const Box = styled.div` width: 100%; @@ -24,7 +24,7 @@ const Content = styled.div` `; const Title = styled.div` - color: ${(props) => props.color || 'var(--black, #000)'}; + color: ${(props) => props.theme.colors.black}; font-family: Pretendard; font-size: ${(props) => props.fontSize || '28px'}; /* props로 폰트 사이즈 처리, 기본값 28px */ font-style: normal; @@ -50,12 +50,8 @@ export default function CommingSoon({ titleColor, titleFontSize }) { 로고 - - 서비스 준비중입니다 - - - The service is coming soon - + 서비스 준비중입니다 + The service is coming soon props.theme.colors.gray05}; @media (max-width: ${(props) => props.theme.breakpoints.md}) { width: 100%; @@ -71,7 +69,7 @@ const TopBox2 = styled.div` flex-shrink: 0; border-radius: 10px; /*border: 1px solid var(--gray-03, #d9d9d9); 수정*/ - background: var(--white, #fff); + background: ${(props) => props.theme.colors.white}; @media (max-width: ${(props) => props.theme.breakpoints.md}) { /*width: 368px;*/ //TopBox1과 맞춰주기 width: 100%; @@ -110,7 +108,7 @@ const Bottom = styled.div` `; const BottomText = styled.div` - color: var(--black, #000); + color: ${(props) => props.theme.colors.black}; font-family: Pretendard; font-size: 20px; font-style: normal; diff --git a/src/pages/PrivacyAgreed.jsx b/src/pages/PrivacyAgreed.jsx index ee00326e..79adb128 100644 --- a/src/pages/PrivacyAgreed.jsx +++ b/src/pages/PrivacyAgreed.jsx @@ -1,87 +1,85 @@ import React, { useEffect } from 'react'; import styled from 'styled-components'; -import AgreementImage from "../components/User/Agree.svg"; +import AgreementImage from '../components/User/Agree.svg'; const PrivacyContainer = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - min-height: 100vh; - padding: 20px; - background-color: #f9f9f9; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100vh; + padding: 20px; + background-color: ${(props) => props.theme.colors.gray06}; - .content { - border-radius: 10px; - padding: 30px; - width: 600px; - text-align: center; - } + .content { + border-radius: 10px; + padding: 30px; + width: 600px; + text-align: center; + } - h2 { - color: #000; - text-align: center; - font-family: Pretendard; - font-size: 24px; - font-weight: 600; - margin-top: -300px; - } + h2 { + color: ${(props) => props.theme.colors.black}; + text-align: center; + font-family: Pretendard; + font-size: 24px; + font-weight: 600; + margin-top: -300px; + } - p { - color: #707070; - font-family: Pretendard; - font-size: 15px; - text-align: center; - font-weight: 400; - line-height: 1.5; - } + p { + color: ${(props) => props.theme.colors.gray03}; + font-family: Pretendard; + font-size: 15px; + text-align: center; + font-weight: 400; + line-height: 1.5; + } - .image-container { - text-align: center; - margin-top: 30px; - } + .image-container { + text-align: center; + margin-top: 30px; + } - img { - max-width: 130%; - height: auto; - } + img { + max-width: 130%; + height: auto; + } `; const PrivacyAgreed = () => { + useEffect(() => { + const preventScroll = (e) => { + e.preventDefault(); + }; + const $body = document.querySelector('body'); + $body.style.overflow = 'hidden'; // 스크롤바 숨기기 + $body.addEventListener('wheel', preventScroll, { passive: false }); + $body.addEventListener('touchmove', preventScroll, { passive: false }); - useEffect(() => { - const preventScroll = (e) => { - e.preventDefault(); - }; + return () => { + $body.removeEventListener('wheel', preventScroll); + $body.removeEventListener('touchmove', preventScroll); + $body.style.overflow = ''; + }; + }, []); - const $body = document.querySelector('body'); - $body.style.overflow = 'hidden'; // 스크롤바 숨기기 - $body.addEventListener('wheel', preventScroll, { passive: false }); - $body.addEventListener('touchmove', preventScroll, { passive: false }); + return ( + +
+

개인정보처리방침

+

+ 끼적 서비스 이용을 위해 아래와 같이 개인정보를 수집 및 이용합니다.
+ 동의를 거부할 권리가 있으며, 동의 거부 시 끼적 회원서비스 이용이 불가합니다. +

- return () => { - $body.removeEventListener('wheel', preventScroll); - $body.removeEventListener('touchmove', preventScroll); - $body.style.overflow = ''; - }; - }, []); - - return ( - -
-

개인정보처리방침

-

- 끼적 서비스 이용을 위해 아래와 같이 개인정보를 수집 및 이용합니다.
- 동의를 거부할 권리가 있으며, 동의 거부 시 끼적 회원서비스 이용이 불가합니다. -

- -
- Agreement -
-
- - ); +
+ Agreement +
+
+ + ); }; export default PrivacyAgreed; diff --git a/src/pages/SignupInterest.jsx b/src/pages/SignupInterest.jsx index 76d9fa02..06152258 100644 --- a/src/pages/SignupInterest.jsx +++ b/src/pages/SignupInterest.jsx @@ -10,25 +10,24 @@ import useAuthStore from '../stores/useAuthStore'; import { theme } from '../constants/theme'; const ContentArea = styled.div` - margin: 0 auto; - padding: 20px; - background-color: white; - width: 400px; - display: flex; - justify-content: center; - align-items: center; - position: relative; - flex-direction: column; - overflow-y: auto; - - svg { - display: none; - } - @media (max-width: ${theme.breakpoints.md}) { - width: 342px; - padding: 10px; - } + margin: 0 auto; + padding: 20px; + background-color: white; + width: 400px; + display: flex; + justify-content: center; + align-items: center; + position: relative; + flex-direction: column; + overflow-y: auto; + svg { + display: none; + } + @media (max-width: ${theme.breakpoints.md}) { + width: 342px; + padding: 10px; + } `; const InterestArea = styled.div` @@ -39,12 +38,10 @@ const InterestArea = styled.div` box-sizing: border-box; gap: 10px; justify-content: center; - - `; const CloseButton = styled.button` - color: #707070; + color: ${(props) => props.theme.colors.gray03}; text-align: center; font-family: Pretendard; font-size: 16px; @@ -62,17 +59,17 @@ const CloseButton = styled.button` const Title = styled.h2` margin-bottom: 10px; - color: var(--black, #000); - text-align: center; - font-family: Pretendard; - font-size: 24px; - font-style: normal; - font-weight: 700; - line-height: normal; + color: ${(props) => props.theme.colors.black}; + text-align: center; + font-family: Pretendard; + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: normal; `; const Label = styled.label` - color: #707070; + color: ${(props) => props.theme.colors.gray03}; text-align: center; font-family: Pretendard; font-size: 16px; @@ -87,7 +84,7 @@ const SaveButton = styled.button` width: 100%; height: 52px; flex-shrink: 0; - background-color: #3aaf85; + background-color: ${(props) => props.theme.colors.main01}; color: white; padding: 10px 20px; border: none; @@ -105,19 +102,18 @@ const SaveButton = styled.button` margin-top: 30px; &:hover { - background-color: #35a576; + background-color: ${(props) => props.theme.colors.main01}; + } + @media (max-width: ${theme.breakpoints.md}) { + width: 342px; } - @media (max-width: ${theme.breakpoints.md}) { - width: 342px; - - } `; const Logo = styled.img` - width: 80px; - height: auto; - margin-bottom: 40px; - cursor: pointer; + width: 80px; + height: auto; + margin-bottom: 40px; + cursor: pointer; `; const SignupInterest = ({ onSave = () => {} }) => { @@ -125,20 +121,20 @@ const SignupInterest = ({ onSave = () => {} }) => { const navigate = useNavigate(); const [showModal, setShowModal] = useState(false); const { isProfileComplete } = useAuthStore(); - + useEffect(() => { // 프로필 완료된 경우 홈으로 리다이렉트 if (isProfileComplete) { - navigate('/home'); + navigate('/home'); } - }, [isProfileComplete, navigate]); + }, [isProfileComplete, navigate]); useEffect(() => { - const unwantedSvg = document.querySelector("body > svg"); + const unwantedSvg = document.querySelector('body > svg'); if (unwantedSvg) { - unwantedSvg.parentNode.removeChild(unwantedSvg); + unwantedSvg.parentNode.removeChild(unwantedSvg); } - }, []); + }, []); const handleInterestSelect = (interest) => { setSelectedInterest((prevSelectedInterests) => @@ -171,7 +167,7 @@ const SignupInterest = ({ onSave = () => {} }) => { navigate('/home'); } catch (error) { console.error('Error occurred while saving interests:', error.message); - console.error('Stack Trace:', error.stack); + console.error('Stack Trace:', error.stack); } }; @@ -196,8 +192,8 @@ const SignupInterest = ({ onSave = () => {} }) => { }; const handleLogoClick = () => { - navigate('/'); - }; + navigate('/'); + }; return ( diff --git a/src/pages/SignupSuccess.jsx b/src/pages/SignupSuccess.jsx index 195c0e42..be0b71a1 100644 --- a/src/pages/SignupSuccess.jsx +++ b/src/pages/SignupSuccess.jsx @@ -21,7 +21,7 @@ const SignupSuccessScreen = styled.div` p { margin-bottom: 10px; - color: var(--main-01, #3aaf85); + color: ${(props) => props.theme.colors.main01}; text-align: center; font-family: Regular; font-size: 27px; @@ -29,9 +29,9 @@ const SignupSuccessScreen = styled.div` font-weight: 700; line-height: normal; - @media (max-width: ${theme.breakpoints.md}) { - font-size: 18px; - } + @media (max-width: ${theme.breakpoints.md}) { + font-size: 18px; + } } .button { @@ -42,7 +42,7 @@ const SignupSuccessScreen = styled.div` margin: 10px 0; border: none; border-radius: 10px; - background-color: #3aaf85; + background-color: ${(props) => props.theme.colors.main01}; color: white; font-family: 'Light'; font-size: 19px; @@ -51,14 +51,14 @@ const SignupSuccessScreen = styled.div` margin-top: 15px; @media (max-width: ${theme.breakpoints.md}) { - width: 220px; - height: 52px; - font-size: 18px; - } + width: 220px; + height: 52px; + font-size: 18px; + } } .Interests-text1 { - color: #707070; + color: ${(props) => props.theme.colors.gray03}; text-align: center; font-family: Light; font-size: 19px; @@ -67,47 +67,47 @@ const SignupSuccessScreen = styled.div` margin-top: 60px; @media (max-width: ${theme.breakpoints.md}) { - font-size: 14px; - } + font-size: 14px; + } } .Interests-text2 { margin-top: -5px; - color: #707070; + color: ${(props) => props.theme.colors.gray03}; text-align: center; font-family: Light; font-size: 19px; font-weight: 400; line-height: normal; @media (max-width: ${theme.breakpoints.md}) { - font-size: 14px; - } + font-size: 14px; + } } `; const Logo = styled.img` - width: 80px; - height: auto; - margin-top: -150px; - margin-bottom: 100px; - cursor: pointer; + width: 80px; + height: auto; + margin-top: -150px; + margin-bottom: 100px; + cursor: pointer; `; const HomeLink = styled.div` - color: var(--gray-02, #707070); - text-align: center; - font-family: Regular; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: normal; - text-decoration-line: underline; - text-decoration-style: solid; - text-decoration-skip-ink: auto; - text-decoration-thickness: auto; - text-underline-offset: auto; - text-underline-position: from-font; - cursor: pointer; - margin-top: 40px; + color: ${(props) => props.theme.colors.gray02}; + text-align: center; + font-family: Regular; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; + text-decoration-line: underline; + text-decoration-style: solid; + text-decoration-skip-ink: auto; + text-decoration-thickness: auto; + text-underline-offset: auto; + text-underline-position: from-font; + cursor: pointer; + margin-top: 40px; `; const SignupSuccess = () => { @@ -120,10 +120,9 @@ const SignupSuccess = () => { useEffect(() => { // 프로필 완료된 경우 홈으로 리다이렉트 if (isProfileComplete) { - navigate('/home'); + navigate('/home'); } - }, [isProfileComplete, navigate]); - + }, [isProfileComplete, navigate]); useEffect(() => { const preventScroll = (e) => { @@ -146,7 +145,7 @@ const SignupSuccess = () => { $body.removeEventListener('touchmove', preventScroll); $body.style.overflow = ''; }; - }, [hasCalled]); + }, [hasCalled]); const handleButtonClick = () => { // "관심분야 등록" 버튼 클릭 GA 이벤트 추가 @@ -160,10 +159,10 @@ const SignupSuccess = () => { }; const handleLogoClick = () => { - navigate('/'); - }; + navigate('/'); + }; - const handleHomeClick = () => { + const handleHomeClick = () => { // "홈으로" 버튼 클릭 GA 이벤트 추가 trackEvent('btn_click', { category: 'signup', diff --git a/src/pages/SocialLogin.jsx b/src/pages/SocialLogin.jsx index 2161d8b7..8857c3aa 100644 --- a/src/pages/SocialLogin.jsx +++ b/src/pages/SocialLogin.jsx @@ -16,124 +16,124 @@ import { trackEvent } from '../utils/ga4'; import { theme } from '../constants/theme'; const PageContainer = styled.div` - display: flex; - flex-direction: column; - min-height: 100vh; - justify-content: flex-end; + display: flex; + flex-direction: column; + min-height: 100vh; + justify-content: flex-end; `; const SvgContainer = styled.div` - position: relative; - width: 100%; - height: 100vh; - display: flex; - justify-content: center; - align-items: flex-end; - overflow: hidden; + position: relative; + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: flex-end; + overflow: hidden; `; const StyledSVG = styled.svg` - width: 100%; - height: 100%; - display: block; - - @media (max-width: ${theme.breakpoints.md}) { - image:not([href*="${postSvg}"]) { - display: none; - } - } + width: 100%; + height: 100%; + display: block; + + @media (max-width: ${theme.breakpoints.md}) { + image:not([href*='${postSvg}']) { + display: none; + } + } `; const CustomFooter = styled.div` - width: 100%; - height: ${({ footerHeight }) => footerHeight}px; - display: flex; - justify-content: center; - align-items: center; - font-size: 16px; - color: #333; + width: 100%; + height: ${({ footerHeight }) => footerHeight}px; + display: flex; + justify-content: center; + align-items: center; + font-size: 16px; + color: #333; `; const FooterStyle = styled.div` - width: 100%; - height: 170px; - display: flex; - justify-content: space-between; - align-items: flex-start; - padding: 30px 50px; - box-sizing: border-box; - font-family: Pretendard; - color: #707070; - - .left { - display: flex; - flex-direction: column; - align-items: flex-start; - - .links { - font-size: 12px; - margin-bottom: 25px; - cursor: pointer; - - span { - margin-right: 10px; - &:hover { - text-decoration: underline; - } - } - } - - .logo { - margin-bottom: 15px; - - img { - width: 80px; - height: auto; - } - } - - .copyright { - font-size: 11px; - color: #424242; - } - } - - .right { - text-align: right; - - .contact-title { - font-size: 12px; - margin-bottom: 15px; - color: #424242; - } - - .icons { - display: flex; - justify-content: flex-end; - margin-bottom: 15px; - - img { - width: 18px; - height: 18px; - margin-left: 12px; - cursor: pointer; - } - } - - .contact-info { - font-size: 12px; - - .email { - margin-bottom: 10px; - cursor: pointer; - color: #707070; - } - - div { - margin-bottom: 5px; - } - } - } + width: 100%; + height: 170px; + display: flex; + justify-content: space-between; + align-items: flex-start; + padding: 30px 50px; + box-sizing: border-box; + font-family: Pretendard; + color: #707070; + + .left { + display: flex; + flex-direction: column; + align-items: flex-start; + + .links { + font-size: 12px; + margin-bottom: 25px; + cursor: pointer; + + span { + margin-right: 10px; + &:hover { + text-decoration: underline; + } + } + } + + .logo { + margin-bottom: 15px; + + img { + width: 80px; + height: auto; + } + } + + .copyright { + font-size: 11px; + color: #424242; + } + } + + .right { + text-align: right; + + .contact-title { + font-size: 12px; + margin-bottom: 15px; + color: #424242; + } + + .icons { + display: flex; + justify-content: flex-end; + margin-bottom: 15px; + + img { + width: 18px; + height: 18px; + margin-left: 12px; + cursor: pointer; + } + } + + .contact-info { + font-size: 12px; + + .email { + margin-bottom: 10px; + cursor: pointer; + color: #707070; + } + + div { + margin-bottom: 5px; + } + } + } `; const SocialButton = styled.button` @@ -143,7 +143,7 @@ const SocialButton = styled.button` z-index: 1000; border-radius: 4px; margin: 8px 0; - font-family: Regular; + font-family: Regular; font-size: 18px; font-weight: 700; display: flex; @@ -151,16 +151,16 @@ const SocialButton = styled.button` justify-content: center; position: relative; - @media (max-width: ${theme.breakpoints.md}) { - width: 320px; - color: rgba(0, 0, 0, 0.85); -text-align: center; -font-family: Pretendard; -font-size: 14px; -font-style: normal; -font-weight: 500; -line-height: normal; - } + @media (max-width: ${theme.breakpoints.md}) { + width: 320px; + color: rgba(0, 0, 0, 0.85); + text-align: center; + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: normal; + } &.kakao { background-color: #ffe812; color: #000; @@ -196,124 +196,121 @@ line-height: normal; } `; const ButtonContainer = styled.div` - position: absolute; - top: 40%; - left: 50%; - transform: translate(-50%, -50%); - display: flex; - flex-direction: column; - align-items: center; - gap: 12px; - z-index: 10; + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + z-index: 10; `; const TopButton = styled.button` - display: flex; - justify-content: center; - align-items: center; - padding: 4px 16px; - border-radius: 10px; - border: 1px solid var(--main-02, #88d1b6); - background: #fff; - color: var(--main-02, #88d1b6); - font-family: Regular; - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: normal; - cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + padding: 4px 16px; + border-radius: 10px; + border: 1px solid var(--main-02, #88d1b6); + background: #fff; + color: var(--main-02, #88d1b6); + font-family: Regular; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; + cursor: pointer; `; const TopButtonWrapper = styled.div` - position: absolute; - top: 20px; - right: 20px; - display: flex; - gap: 12px; - z-index: 10; + position: absolute; + top: 20px; + right: 20px; + display: flex; + gap: 12px; + z-index: 10; `; const TextContainer = styled.div` - position: absolute; - top: calc(40% - 160px); - left: 50%; - transform: translate(-50%, -50%); - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - z-index: 10; - @media (max-width: ${theme.breakpoints.md}) { - margin-bottom: 10px; - } - - @media (max-width: ${theme.breakpoints.sm}) { - margin-bottom: 1px; - } -`; + position: absolute; + top: calc(40% - 160px); + left: 50%; + transform: translate(-50%, -50%); + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + z-index: 10; + @media (max-width: ${theme.breakpoints.md}) { + margin-bottom: 10px; + } + @media (max-width: ${theme.breakpoints.sm}) { + margin-bottom: 1px; + } +`; const Title = styled.div` - color: var(--main-01, #3aaf85); - font-size: 19px; - font-style: normal; - font-weight: 800; - font-family: Light; - white-space: nowrap; - line-height: normal; - margin-bottom: 20px; - font-family: Regular; - - - @media (max-width: ${theme.breakpoints.md}) { - font-size: 18px; - margin-bottom: 10px; /* 태블릿에서 간격 줄이기 */ - margin-top: 20px; - } - - @media (max-width: ${theme.breakpoints.sm}) { - font-size: 16px; - margin-bottom: 8px; /* 모바일에서 더 줄이기 */ - } + color: var(--main-01, #3aaf85); + font-size: 19px; + font-style: normal; + font-weight: 800; + font-family: Light; + white-space: nowrap; + line-height: normal; + margin-bottom: 20px; + font-family: Regular; + + @media (max-width: ${theme.breakpoints.md}) { + font-size: 18px; + margin-bottom: 10px; /* 태블릿에서 간격 줄이기 */ + margin-top: 20px; + } + + @media (max-width: ${theme.breakpoints.sm}) { + font-size: 16px; + margin-bottom: 8px; /* 모바일에서 더 줄이기 */ + } `; const Logo = styled.img` - width: 164px; - height: 80px; - margin-bottom: 0px; - - @media (max-width: ${theme.breakpoints.md}) { - width: 145px; - height: 75px; - - } - - @media (max-width: ${theme.breakpoints.sm}) { - width: 134px; - height: 70px; - } + width: 164px; + height: 80px; + margin-bottom: 0px; + + @media (max-width: ${theme.breakpoints.md}) { + width: 145px; + height: 75px; + } + + @media (max-width: ${theme.breakpoints.sm}) { + width: 134px; + height: 70px; + } `; const Description = styled.p` - color: #424242; - font-family: Light; - font-size: 21px; - font-weight: 800; - margin-bottom: 30px; - font-family: Regular; - @media (max-width: ${theme.breakpoints.md}) { - font-size: 16px; - margin-bottom: -15px; /* 태블릿에서 간격 줄이기 */ - } - - @media (max-width: ${theme.breakpoints.sm}) { - font-size: 14px; - margin-bottom:-20px; /* 모바일에서 더 줄이기 */ - } - - .highlight { - color: var(--main-01, #3aaf85); - } + color: #424242; + font-family: Light; + font-size: 21px; + font-weight: 800; + margin-bottom: 30px; + font-family: Regular; + @media (max-width: ${theme.breakpoints.md}) { + font-size: 16px; + margin-bottom: -15px; /* 태블릿에서 간격 줄이기 */ + } + + @media (max-width: ${theme.breakpoints.sm}) { + font-size: 14px; + margin-bottom: -20px; /* 모바일에서 더 줄이기 */ + } + + .highlight { + color: var(--main-01, #3aaf85); + } `; const KakaoIcon = () => ( @@ -334,137 +331,128 @@ const SocialLogin = () => { const navigate = useNavigate(); const [isModal1Open, setModal1Open] = useState(false); const [isModal2Open, setModal2Open] = useState(false); - const [footerHeight, setFooterHeight] = useState(0); - - useEffect(() => { - const handleResize = () => { - const svgElement = document.getElementById('main-svg'); - const svgHeight = svgElement ? svgElement.clientHeight : 0; - const windowHeight = window.innerHeight; - - // 푸터 높이 = 남는 공백 (최소값 0 보장) - const newFooterHeight = Math.max(0, windowHeight - svgHeight); - setFooterHeight(newFooterHeight); - }; - - window.addEventListener('resize', handleResize); - handleResize(); // 초기 로드 시 실행 - - return () => window.removeEventListener('resize', handleResize); - }, []); - - const goInsta = () => { - window.open('https://www.instagram.com/kki.juk/?utm_source=ig_web_button_share_sheet', '_blank'); - }; - - const goEmail = () => { - window.open('mailto:kkijuk30@gmail.com', '_blank'); - }; - - const handleKakaoLogin = () => { - const kakaoLoginUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${process.env.REACT_APP_KAKAO_CLIENT_ID}&response_type=code&redirect_uri=${process.env.REACT_APP_KAKAO_REDIRECT_URI}`; - trackEvent('btn_click', { - category: 'login', - detail: 'kakao', - action_type: 'click', - label: '카카오 로그인', - }); - window.location.href = kakaoLoginUrl; -}; -const handleNaverLogin = () => { - const clientId = process.env.REACT_APP_NAVER_CLIENT_ID; - const redirectUri = process.env.REACT_APP_NAVER_REDIRECT_URI; - const state = process.env.REACT_APP_NAVER_STATE; - const naverLoginUrl = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${clientId}&state=${state}&redirect_uri=${redirectUri}`; - trackEvent('btn_click', { - category: 'login', - detail: 'naver', - action_type: 'click', - label: '네이버 로그인', - }); - window.location.href = naverLoginUrl; -}; - - return ( - - - - - - - - - - - - - - - window.open('https://www.instagram.com/kki.juk/', '_blank')}> - Instagram - - window.open('mailto:kkijuk30@gmail.com', '_blank')}> - 문의 - - - - - 쉽고 빠르게 쌓아가는 나만의 커리어 아카이브 - - - 당신의 끼를 적어두세요 - - - - - - 카카오 로그인 - - - - 네이버 로그인 - - - - - - -
-
- setModal1Open(true)}>서비스 이용약관 - navigate('/agree')}>개인정보 처리방침 -
-
- 끼적 로고 -
-
COPYRIGHT © 끼적. All rights reserved.
-
- -
-
contact us
-
- Instagram - Paperplane -
-
-
- kkijuk30@gmail.com -
-
서울특별시 광진구 면목로15길 16
-
사업자등록번호 798-06-02922
-
-
- - - - - - ); + const [footerHeight, setFooterHeight] = useState(0); + + useEffect(() => { + const handleResize = () => { + const svgElement = document.getElementById('main-svg'); + const svgHeight = svgElement ? svgElement.clientHeight : 0; + const windowHeight = window.innerHeight; + + // 푸터 높이 = 남는 공백 (최소값 0 보장) + const newFooterHeight = Math.max(0, windowHeight - svgHeight); + setFooterHeight(newFooterHeight); + }; + + window.addEventListener('resize', handleResize); + handleResize(); // 초기 로드 시 실행 + + return () => window.removeEventListener('resize', handleResize); + }, []); + + const goInsta = () => { + window.open('https://www.instagram.com/kki.juk/?utm_source=ig_web_button_share_sheet', '_blank'); + }; + + const goEmail = () => { + window.open('mailto:kkijuk30@gmail.com', '_blank'); + }; + + const handleKakaoLogin = () => { + const kakaoLoginUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${process.env.REACT_APP_KAKAO_CLIENT_ID}&response_type=code&redirect_uri=${process.env.REACT_APP_KAKAO_REDIRECT_URI}`; + trackEvent('btn_click', { + category: 'login', + detail: 'kakao', + action_type: 'click', + label: '카카오 로그인', + }); + window.location.href = kakaoLoginUrl; + }; + const handleNaverLogin = () => { + const clientId = process.env.REACT_APP_NAVER_CLIENT_ID; + const redirectUri = process.env.REACT_APP_NAVER_REDIRECT_URI; + const state = process.env.REACT_APP_NAVER_STATE; + const naverLoginUrl = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${clientId}&state=${state}&redirect_uri=${redirectUri}`; + trackEvent('btn_click', { + category: 'login', + detail: 'naver', + action_type: 'click', + label: '네이버 로그인', + }); + window.location.href = naverLoginUrl; + }; + + return ( + + + + + + + + + + + + + + window.open('https://www.instagram.com/kki.juk/', '_blank')}>Instagram + window.open('mailto:kkijuk30@gmail.com', '_blank')}>문의 + + + + 쉽고 빠르게 쌓아가는 나만의 커리어 아카이브 + + + 당신의 끼를 적어두세요 + + + + + + 카카오 로그인 + + + + 네이버 로그인 + + + + + +
+
+ setModal1Open(true)}>서비스 이용약관 + navigate('/agree')}>개인정보 처리방침 +
+
+ 끼적 로고 +
+
COPYRIGHT © 끼적. All rights reserved.
+
+ +
+
contact us
+
+ Instagram + Paperplane +
+
+
+ kkijuk30@gmail.com +
+
서울특별시 광진구 면목로15길 16
+
사업자등록번호 798-06-02922
+
+
+ + + + ); }; -export default SocialLogin; \ No newline at end of file +export default SocialLogin;