From d6610d2d456a309a387e9fefa7a1aeb2a5e5344e Mon Sep 17 00:00:00 2001
From: kosssshhhh <kosukwhon@gmail.com>
Date: Thu, 8 May 2025 09:23:02 +0900
Subject: [PATCH 1/7] =?UTF-8?q?=F0=9F=8E=A8=20Style:=20LoadingSpinner=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=9D=98=20CSS=20=EC=86=8D?=
 =?UTF-8?q?=EC=84=B1=20=EC=A0=95=EB=A6=AC=20=EB=B0=8F=20=EC=9D=BC=EA=B4=80?=
 =?UTF-8?q?=EC=84=B1=20=EC=9E=88=EB=8A=94=20=ED=8F=AC=EB=A7=B7=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/shared/LoadingSpinner.jsx | 65 ++++++++++++------------
 1 file changed, 32 insertions(+), 33 deletions(-)

diff --git a/src/components/shared/LoadingSpinner.jsx b/src/components/shared/LoadingSpinner.jsx
index e52d0095..3cef9ee2 100644
--- a/src/components/shared/LoadingSpinner.jsx
+++ b/src/components/shared/LoadingSpinner.jsx
@@ -8,49 +8,48 @@ const spin = keyframes`
 `;
 
 const SpinnerContainer = styled.div`
-  width: 300px;
-  height: 200px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  border-radius: 12px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  margin: 16px;
+	width: 300px;
+	height: 200px;
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+	border-radius: 12px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	margin: 16px;
 
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
 `;
 
 const Spinner = styled.div`
-  width: 30px;
-  height: 30px;
-  margin-bottom: 8px;
-  border: 4px solid #ccc; /* 회색 테두리 */
-  border-top-color: #3AAF85; /* 파란색 강조 */
-  border-radius: 50%;
-  animation: ${spin} 1s linear infinite;
-  display:flex;
-  justify-content:center;
-  align-items:center;
-  
+	width: 30px;
+	height: 30px;
+	margin-bottom: 8px;
+	border: 4px solid #ccc;
+	border-top-color: #3aaf85;
+	border-radius: 50%;
+	animation: ${spin} 1s linear infinite;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 `;
 
 const Message = styled.p`
-  font-size: 16px;
-  color: #555;
-  font-family:'Regular';
+	font-size: 16px;
+	color: #555;
+	font-family: 'Regular';
 `;
 
 function LoadingSpinner({ message }) {
-  return (
-    <SpinnerContainer>
-      <Spinner />
-      {message && <Message>{message}</Message>}
-    </SpinnerContainer>
-  );
+	return (
+		<SpinnerContainer>
+			<Spinner />
+			{message && <Message>{message}</Message>}
+		</SpinnerContainer>
+	);
 }
 
 export default LoadingSpinner;

From e28b2c673f7a3719099768b8113c536f4dac347f Mon Sep 17 00:00:00 2001
From: kosssshhhh <kosukwhon@gmail.com>
Date: Thu, 8 May 2025 09:23:18 +0900
Subject: [PATCH 2/7] =?UTF-8?q?=E2=9C=A8=20Feat:=20LoadingSpinner=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=ED=95=98=EC=97=AC=20=EB=A1=9C=EB=94=A9=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=20=ED=91=9C=EC=8B=9C=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/AppRoutes.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/routes/AppRoutes.js b/src/routes/AppRoutes.js
index 3a5ec6c9..b71d6ddf 100644
--- a/src/routes/AppRoutes.js
+++ b/src/routes/AppRoutes.js
@@ -6,6 +6,7 @@ import Header from '@components/Header';
 import Footer from '@components/Footer';
 import PageFooter from '@components/PageFooter';
 import useGA4 from '@hooks/useGA4';
+import LoadingSpinner from '@components/shared/LoadingSpinner';
 
 import { setupApiInterceptors } from '@/Axios';
 import { getAllRoutes } from './index';
@@ -15,11 +16,6 @@ import { shouldShowPageFooter, shouldHideHeader, shouldHideHeaderFooter } from '
 const isMaintenanceMode = process.env.REACT_APP_MAINTENANCE_MODE === 'true';
 const maintenancePath = '/serviceMaintenence';
 
-// Loading fallback component
-const LoadingFallback = () => (
-	<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>로딩 중...</div>
-);
-
 const MainContent = styled.div`
 	flex: 1;
 	display: flex;
@@ -78,7 +74,7 @@ const AppRoutes = () => {
 		<>
 			{!hideHeader && !hideHeaderFooter && <Header />}
 			<MainContent $hasHeader={!hideHeader && !hideHeaderFooter}>
-				<Suspense fallback={<LoadingFallback />}>{routes}</Suspense>
+				<Suspense fallback={<LoadingSpinner message="조금만 기다려주세요..!" />}>{routes}</Suspense>
 			</MainContent>
 			{showPageFooter ? <PageFooter /> : !hideHeaderFooter && <Footer />}
 		</>

From e4bc0ce22a8c99fd19cb98fa6161a8517eb077da Mon Sep 17 00:00:00 2001
From: kosssshhhh <kosukwhon@gmail.com>
Date: Thu, 8 May 2025 09:29:15 +0900
Subject: [PATCH 3/7] =?UTF-8?q?=F0=9F=94=A7=20Refactor:=20import=20?=
 =?UTF-8?q?=EA=B2=BD=EB=A1=9C=EB=A5=BC=20=EC=A0=88=EB=8C=80=20=EA=B2=BD?=
 =?UTF-8?q?=EB=A1=9C=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=EC=A3=BC?=
 =?UTF-8?q?=EC=84=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Mycareer/Mycareer.jsx | 30 ++++++++++++++----------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/pages/Mycareer/Mycareer.jsx b/src/pages/Mycareer/Mycareer.jsx
index f36d5603..3b7be6f8 100644
--- a/src/pages/Mycareer/Mycareer.jsx
+++ b/src/pages/Mycareer/Mycareer.jsx
@@ -1,24 +1,22 @@
 import React, { useState, useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { trackEvent } from '../../utils/ga4';
-import useAuthRedirect from '../../stores/useAuthRedirect';
-
-import { mycareerMock } from './mock';
-
-import Title from '../../components/Apply/Title';
-import CareerView from '../../components/Mycareer/CareerView';
-import CareerViewYear from '../../components/Mycareer/CareerViewYear';
-import CareerViewCategory from '../../components/Mycareer/CareerViewCategory';
-import AddCareerModal from '../../components/Modal/AddCareerModal/AddCareerModal';
-import SearchBar from '../../components/Mycareer/shareSearchBar';
-import CareerTimeline from '../../components/Mycareer/CareerTimeline';
-import AddActivityButton from '../../components/Mycareer/AddActivityButton';
-import { useFetchMycareerActivity } from '../../hooks/Mycareer/useFetchMycareerActivity';
-import LoadingSpinner from '../../components/shared/LoadingSpinner';
+import { trackEvent } from '@utils/ga4';
+import useAuthRedirect from '@stores/useAuthRedirect';
+
+import Title from '@components/Apply/Title';
+import CareerView from '@components/Mycareer/CareerView';
+import CareerViewYear from '@components/Mycareer/CareerViewYear';
+import CareerViewCategory from '@components/Mycareer/CareerViewCategory';
+import AddCareerModal from '@components/Modal/AddCareerModal/AddCareerModal';
+import SearchBar from '@components/Mycareer/shareSearchBar';
+import CareerTimeline from '@components/Mycareer/CareerTimeline';
+import AddActivityButton from '@components/Mycareer/AddActivityButton';
+import { useFetchMycareerActivity } from '@hooks/Mycareer/useFetchMycareerActivity';
+import LoadingSpinner from '@components/shared/LoadingSpinner';
 import { Container, BackgroundSection, SearchBox } from './Mycareer.styles';
 
-// 메모이제이션된 컴포넌트 생성
+// 메모이제이션 컴포넌트 생성
 const MemoizedCareerViewYear = React.memo(CareerViewYear);
 const MemoizedCareerViewCategory = React.memo(CareerViewCategory);
 const MemoizedCareerView = React.memo(CareerView);

From d9cca241d2a0d598c8f0c530f2000a24b67bc5bf Mon Sep 17 00:00:00 2001
From: kosssshhhh <kosukwhon@gmail.com>
Date: Mon, 2 Jun 2025 13:26:08 +0900
Subject: [PATCH 4/7] =?UTF-8?q?=E2=9C=A8=20Fest:=20=EC=83=89=EC=83=81=20?=
 =?UTF-8?q?=EC=83=81=EC=88=98=EB=A5=BC=20theme.js=EB=A1=9C=20=ED=86=B5?=
 =?UTF-8?q?=ED=95=A9=ED=95=98=EA=B3=A0=20color.js=20=ED=8C=8C=EC=9D=BC=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/color.js | 20 --------------------
 src/constants/theme.js | 18 +++++++++++++++++-
 2 files changed, 17 insertions(+), 21 deletions(-)
 delete mode 100644 src/constants/color.js

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..b28c8120 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: '#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',
 	},
 };

From 46a9f62d2a06b7b55e5f1bd3ce571925bde5b7e3 Mon Sep 17 00:00:00 2001
From: kosssshhhh <kosukwhon@gmail.com>
Date: Mon, 2 Jun 2025 13:26:30 +0900
Subject: [PATCH 5/7] =?UTF-8?q?=F0=9F=94=A7=20Refactor:=20AppWrapper?=
 =?UTF-8?q?=EC=9D=98=20import=20=EA=B2=BD=EB=A1=9C=EB=A5=BC=20=EC=A0=88?=
 =?UTF-8?q?=EB=8C=80=20=EA=B2=BD=EB=A1=9C=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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(<AppWrapper />);

From 358ee14af6b97fd8f82564412b08868626a4f9a0 Mon Sep 17 00:00:00 2001
From: kosssshhhh <kosukwhon@gmail.com>
Date: Mon, 2 Jun 2025 13:26:38 +0900
Subject: [PATCH 6/7] =?UTF-8?q?=F0=9F=94=A7=20Refactor:=20import=20?=
 =?UTF-8?q?=EA=B2=BD=EB=A1=9C=EB=A5=BC=20=EC=A0=88=EB=8C=80=20=EA=B2=BD?=
 =?UTF-8?q?=EB=A1=9C=EB=A1=9C=20=EB=B3=80=EA=B2=BD=ED=95=98=EA=B3=A0=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=9D=BC=EA=B4=80=EC=84=B1=20?=
 =?UTF-8?q?=EC=9C=A0=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/CommingSoon.jsx    |  16 +-
 src/pages/Home.jsx           |  22 +-
 src/pages/PrivacyAgreed.jsx  | 134 ++++---
 src/pages/SignupInterest.jsx |  92 +++--
 src/pages/SignupSuccess.jsx  |  83 +++--
 src/pages/SocialLogin.jsx    | 686 +++++++++++++++++------------------
 6 files changed, 504 insertions(+), 529 deletions(-)

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 }) {
 		<Box>
 			<Content>
 				<img style={{ width: '280px', height: '120px' }} src={logo} alt="로고" />
-				<Title color="#3AAF85" fontSize="32px">
-					서비스 준비중입니다
-				</Title>
-				<Title color="#3AAF85" fontSize="25px">
-					The service is coming soon
-				</Title>
+				<Title fontSize="32px">서비스 준비중입니다</Title>
+				<Title fontSize="25px">The service is coming soon</Title>
 				<LogoBox>
 					<img
 						style={{ width: '30px', height: '30px', cursor: 'pointer' }}
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 3bf555b9..705625a6 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,17 +1,15 @@
 import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
-import ProfileBox from '../components/Home/Profile';
-
-import BannerComponent from '../components/Home/Banner';
-import Noti from '../components/Home/Noti';
-import CLNoti from '../components/Home/CLNoti';
+import ProfileBox from '@components/Home/Profile';
 
-import { useNavigate } from 'react-router-dom';
+import BannerComponent from '@components/Home/Banner';
+import Noti from '@components/Home/Noti';
+import CLNoti from '@components/Home/CLNoti';
 
-import CareerTimeline from '../components/Mycareer/CareerTimeline';
-import OnboardingModal from '../components/Modal/OnboardingModal';
-import { theme } from '../constants/theme';
+import CareerTimeline from '@components/Mycareer/CareerTimeline';
+import OnboardingModal from '@components/Modal/OnboardingModal';
 
 const Container = styled.div`
 	display: flex;
@@ -57,7 +55,7 @@ const TopBox1 = styled.div`
 	justify-content: center;
 	align-items: center;
 	border-radius: 10px;
-	border: 1px solid var(--gray-03, #d9d9d9);
+	border: 1px solid ${(props) => 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 (
+		<PrivacyContainer>
+			<div className="content">
+				<h2>개인정보처리방침</h2>
+				<p>
+					끼적 서비스 이용을 위해 아래와 같이 개인정보를 수집 및 이용합니다. <br />
+					동의를 거부할 권리가 있으며, 동의 거부 시 끼적 회원서비스 이용이 불가합니다.
+				</p>
 
-    return () => {
-      $body.removeEventListener('wheel', preventScroll);
-      $body.removeEventListener('touchmove', preventScroll);
-      $body.style.overflow = '';
-    };
-  }, []); 
-
-  return (
-    <PrivacyContainer>
-      <div className="content">
-        <h2>개인정보처리방침</h2>
-        <p>
-  끼적 서비스 이용을 위해 아래와 같이 개인정보를 수집 및 이용합니다. <br />
-  동의를 거부할 권리가 있으며, 동의 거부 시 끼적 회원서비스 이용이 불가합니다.
-</p>
-
-        <div className="image-container">
-          <img src={AgreementImage} alt="Agreement" />
-        </div>
-      </div>
-    </PrivacyContainer>
-  );
+				<div className="image-container">
+					<img src={AgreementImage} alt="Agreement" />
+				</div>
+			</div>
+		</PrivacyContainer>
+	);
 };
 
 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 (
 		<ContentArea>
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 (
-    <PageContainer>
-		
-      <SvgContainer>
-        <StyledSVG
-          id="main-svg"
-          viewBox="0 0 1920 1080"
-          preserveAspectRatio="xMidYMid slice"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <image href={leftStarSvg} x="310" y="250" width="140" />
-          <image href={rightStarSvg} x="1400" y="130" width="180" />
-          <image href={bottomSvg} x="1" y="536" width="1920" />
-          <image href={postSvg} x="18%" y="531" width="1200" />
-          <image href={leftSvg} x="315" y="772" width="350" />
-          <image href={rightSvg} x="1200" y="670" width="350" />
-        </StyledSVG>
-      </SvgContainer>
-
-	  <TopButtonWrapper>
-        <TopButton onClick={() => window.open('https://www.instagram.com/kki.juk/', '_blank')}>
-          Instagram
-        </TopButton>
-        <TopButton onClick={() => window.open('mailto:kkijuk30@gmail.com', '_blank')}>
-          문의
-        </TopButton>
-      </TopButtonWrapper>
-
-	  <TextContainer>
-        <Title>쉽고 빠르게 쌓아가는 나만의 커리어 아카이브</Title>
-        <Logo src={logo} alt="Logo" />
-        <Description>
-          당신의 <span className="highlight">끼</span>를 <span className="highlight">적</span>어두세요
-        </Description>
-		</TextContainer>
-        <ButtonContainer>
-		<SocialButton className="kakao" onClick={handleKakaoLogin}>
-						<KakaoIcon />
-						카카오 로그인
-					</SocialButton>
-					<SocialButton className="naver" onClick={handleNaverLogin}>
-						<NaverIcon />
-						네이버 로그인
-					</SocialButton>
-        </ButtonContainer>
-
-
-      <CustomFooter footerHeight={footerHeight}>
-        <FooterStyle>
-          <div className="left">
-            <div className="links">
-              <span onClick={() => setModal1Open(true)}>서비스 이용약관</span>
-              <span onClick={() => navigate('/agree')}>개인정보 처리방침</span>
-            </div>
-            <div className="logo">
-              <img src={logo} alt="끼적 로고" />
-            </div>
-            <div className="copyright">COPYRIGHT © 끼적. All rights reserved.</div>
-          </div>
-
-          <div className="right">
-            <div className="contact-title">contact us</div>
-            <div className="icons">
-              <img src={instagramLogo} alt="Instagram" onClick={goInsta} />
-              <img src={paperplaneicon} alt="Paperplane" onClick={goEmail} />
-            </div>
-            <div className="contact-info">
-              <div className="email" onClick={goEmail}>
-                kkijuk30@gmail.com
-              </div>
-              <div>서울특별시 광진구 면목로15길 16</div>
-              <div>사업자등록번호 798-06-02922</div>
-            </div>
-          </div>
-        </FooterStyle>
-      </CustomFooter>
-
-      
-    </PageContainer>
-  );
+	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 (
+		<PageContainer>
+			<SvgContainer>
+				<StyledSVG
+					id="main-svg"
+					viewBox="0 0 1920 1080"
+					preserveAspectRatio="xMidYMid slice"
+					xmlns="http://www.w3.org/2000/svg">
+					<image href={leftStarSvg} x="310" y="250" width="140" />
+					<image href={rightStarSvg} x="1400" y="130" width="180" />
+					<image href={bottomSvg} x="1" y="536" width="1920" />
+					<image href={postSvg} x="18%" y="531" width="1200" />
+					<image href={leftSvg} x="315" y="772" width="350" />
+					<image href={rightSvg} x="1200" y="670" width="350" />
+				</StyledSVG>
+			</SvgContainer>
+
+			<TopButtonWrapper>
+				<TopButton onClick={() => window.open('https://www.instagram.com/kki.juk/', '_blank')}>Instagram</TopButton>
+				<TopButton onClick={() => window.open('mailto:kkijuk30@gmail.com', '_blank')}>문의</TopButton>
+			</TopButtonWrapper>
+
+			<TextContainer>
+				<Title>쉽고 빠르게 쌓아가는 나만의 커리어 아카이브</Title>
+				<Logo src={logo} alt="Logo" />
+				<Description>
+					당신의 <span className="highlight">끼</span>를 <span className="highlight">적</span>어두세요
+				</Description>
+			</TextContainer>
+			<ButtonContainer>
+				<SocialButton className="kakao" onClick={handleKakaoLogin}>
+					<KakaoIcon />
+					카카오 로그인
+				</SocialButton>
+				<SocialButton className="naver" onClick={handleNaverLogin}>
+					<NaverIcon />
+					네이버 로그인
+				</SocialButton>
+			</ButtonContainer>
+
+			<CustomFooter footerHeight={footerHeight}>
+				<FooterStyle>
+					<div className="left">
+						<div className="links">
+							<span onClick={() => setModal1Open(true)}>서비스 이용약관</span>
+							<span onClick={() => navigate('/agree')}>개인정보 처리방침</span>
+						</div>
+						<div className="logo">
+							<img src={logo} alt="끼적 로고" />
+						</div>
+						<div className="copyright">COPYRIGHT © 끼적. All rights reserved.</div>
+					</div>
+
+					<div className="right">
+						<div className="contact-title">contact us</div>
+						<div className="icons">
+							<img src={instagramLogo} alt="Instagram" onClick={goInsta} />
+							<img src={paperplaneicon} alt="Paperplane" onClick={goEmail} />
+						</div>
+						<div className="contact-info">
+							<div className="email" onClick={goEmail}>
+								kkijuk30@gmail.com
+							</div>
+							<div>서울특별시 광진구 면목로15길 16</div>
+							<div>사업자등록번호 798-06-02922</div>
+						</div>
+					</div>
+				</FooterStyle>
+			</CustomFooter>
+		</PageContainer>
+	);
 };
 
-export default SocialLogin;
\ No newline at end of file
+export default SocialLogin;

From df03a3428163aab79ec6e4403285e6289c097bbe Mon Sep 17 00:00:00 2001
From: kosssshhhh <kosukwhon@gmail.com>
Date: Mon, 2 Jun 2025 13:55:53 +0900
Subject: [PATCH 7/7] =?UTF-8?q?=F0=9F=8E=A8=20Style:=20theme.js=EC=9D=98?=
 =?UTF-8?q?=20=EC=83=89=EC=83=81=20=EC=83=81=EC=88=98=20=EC=97=85=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=8A=B8=20=EB=B0=8F=20=EC=9D=BC=EA=B4=80=EC=84=B1=20?=
 =?UTF-8?q?=EC=9E=88=EB=8A=94=20=EC=83=89=EC=83=81=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/theme.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/constants/theme.js b/src/constants/theme.js
index b28c8120..6315265d 100644
--- a/src/constants/theme.js
+++ b/src/constants/theme.js
@@ -5,19 +5,19 @@ export const theme = {
 	},
 	colors: {
 		main01: '#3AAF85',
-		main02: '#9DD8C3',
-		main03: '#E6F5EC',
+		main02: '#88D1B6',
+		main03: '#E1F4ED',
 		black: '#000000',
 		gray01: '#333333',
-		gray02: '#555555',
-		gray03: '#888888',
-		gray04: '#BBBBBB',
-		gray05: '#DDDDDD',
-		gray06: '#F1F1F1',
+		gray02: '#707070',
+		gray03: '#BDBDBD',
+		gray04: '#E0E0E0',
+		gray05: '#E1E1E1',
+		gray06: '#F5F5F5',
 		white: '#FFFFFF',
-		subRd: '#EF6A6A',
-		subOg: '#F2994A',
-		subYe: '#F2C94C',
+		subRd: '#FA7C79',
+		subOg: '#F99538',
+		subYe: '#FCC400',
 		subGn: '#6FCF97',
 		subBu: '#56CCF2',
 		subPu: '#BB6BD9',