Kosh

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',
 	},
 };

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

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' }}

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;

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;