[OD-150] profile, profileEdit, accountEdit, accountCancel, accountSetting, verification 기존 폰트 및 색상 삭제 후 수정

src/components/BottomButton/index.tsx

@@ -8,7 +8,7 @@ const BottomButton: React.FC<BottomButtonProps> = ({ content, onClick, disabled
 		<>
 			<ButtonWrapper>
 				<Button onClick={onClick} disabled={disabled}>
-					<StyledText $textTheme={{ style: 'button1-medium', lineHeight: 2 }}>{content}</StyledText>
+					<StyledText $textTheme={{ style: 'body1-regular', lineHeight: 2 }}>{content}</StyledText>
 				</Button>
 			</ButtonWrapper>
 		</>

src/components/BottomButton/styles.tsx

@@ -8,14 +8,14 @@ export const ButtonWrapper = styled.div`
 	transform: translateX(-50%);
 	width: 100%;
 	height: 6.25rem;
-	background-color: ${({ theme }) => theme.colors.white};
+	background-color: ${({ theme }) => theme.colors.background.primary};
 	justify-content: flex-end;
 	z-index: 1;
 	border: none;
 `;
 
 export const Button = styled.button<{ disabled: boolean }>`
-	background: ${({ disabled, theme }) =>
+	background: ${({ disabled, theme }) => //theme에 없어서 그냥 뒀음
 		disabled ? 'linear-gradient(93deg, #FFC1D6 1.22%, #F8D4D4 99.73%)' : theme.colors.brand.gradient};
 	border-radius: 0.625rem;
 	font-size: 1rem;

src/pages/AccountCancel/index.tsx

@@ -1,16 +1,27 @@
 import React, { useState } from 'react';
-import { CancelContainer, SubTitle, Text, InfoBox, InfoItem, CheckboxWrapper, CheckboxInput } from './styles';
-import { StyledText } from '../../components/Text/StyledText';
-import theme from '../../styles/theme';
-import { OODDFrame } from '../../components/Frame/Frame';
+import {
+	CancelContainer,
+	SubTitle,
+	Text,
+	InfoBox,
+	InfoItem,
+	CheckboxWrapper,
+	CheckboxInput,
+	Label,
+	StyledCheckboxText,
+	StyledDiv,
+} from './styles'; // 상대 경로 index 명시
+import { StyledText } from '@components/Text/StyledText';
+import theme from '@styles/theme';
+import { OODDFrame } from '@components/Frame/Frame';
 import { useNavigate } from 'react-router-dom';
 
-import TopBar from '../../components/TopBar';
-import back from '../../assets/arrow/left.svg';
+import TopBar from '@components/TopBar/index';
+import back from '@assets/arrow/left.svg';
 
-import BottomButton from '../../components/BottomButton';
-import { patchUserWithdrawApi } from '../../apis/user';
-import Modal from '../../components/Modal';
+import BottomButton from '@components/BottomButton/index';
+import { patchUserWithdrawApi } from '@apis/user';
+import Modal from '@components/Modal/index';
 
 const AccountCancel: React.FC = () => {
 	const [isChecked, setIsChecked] = useState(false);
@@ -74,45 +85,39 @@ const AccountCancel: React.FC = () => {
 				<TopBar text="회원 탈퇴" LeftButtonSrc={back} onClickLeftButton={() => navigate(-1)} />
 
 				<SubTitle>
-					<StyledText as="div" $textTheme={{ style: 'headline2-medium', lineHeight: 2 }} color={theme.colors.black}>
+					<StyledText as="div" $textTheme={{ style: 'headline2-medium' }} color={theme.colors.primary}>
 						OOTD 탈퇴 전 확인하세요!
 					</StyledText>
 				</SubTitle>
 				<Text as="div">
-					<StyledText as="div" $textTheme={{ style: 'caption1-regular', lineHeight: 1 }} color={theme.colors.black}>
+					<StyledText as="div" $textTheme={{ style: 'caption1-regular' }} color={theme.colors.primary}>
 						{`탈퇴하시면 이용 중인 서비스가 폐쇄되며,\n모든 데이터는 복구할 수 없습니다.`}
 					</StyledText>
 				</Text>
 				<InfoBox>
 					<InfoItem as="div">
 						<StyledText
 							as="div"
-							$textTheme={{ style: 'body1-medium', lineHeight: 2 }}
-							color={theme.colors.black}
-							style={{ whiteSpace: 'nowrap' }} // 줄 바꿈 방지
+							$textTheme={{ style: 'body1-medium'}}
+							color={theme.colors.primary}
+							style={{ whiteSpace: 'nowrap' }} 
 						>
 							지금까지 OODD를 이용해주셔서 감사합니다!
 						</StyledText>
 					</InfoItem>
 				</InfoBox>
 				<CheckboxWrapper as="div">
-					<label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
+					<Label>
 						<CheckboxInput type="checkbox" checked={isChecked} onChange={handleCheckboxChange} />
-						<StyledText as="span" $textTheme={{ style: 'body4-light', lineHeight: 1 }} color={theme.colors.gray3}>
+						<StyledCheckboxText as="span" $textTheme={{ style: 'body2-regular' }}>
 							안내사항을 모두 확인하였으며, 이에 동의합니다.
-						</StyledText>
-					</label>
+						</StyledCheckboxText>
+					</Label>
 				</CheckboxWrapper>
 			</CancelContainer>
-			<div
-				style={{
-					backgroundColor: isChecked ? '#000000' : '#d3d3d3',
-					color: isChecked ? '#ffffff' : '#808080',
-					cursor: isChecked ? 'pointer' : 'not-allowed',
-				}}
-			>
+			<StyledDiv isChecked={isChecked}>
 				<BottomButton content="탈퇴하기" onClick={handleDeleteAccount} disabled={!isChecked} />
-			</div>
+			</StyledDiv>
 			{isModalVisible && (
 				<Modal
 					content={modalContent || ''} // null일 경우 빈 문자열로 처리

src/pages/AccountCancel/styles.tsx

@@ -1,52 +1,49 @@
 import styled from 'styled-components';
-
-interface ButtonProps {
-	isChecked: boolean;
-}
+import { StyledText } from '@components/Text/StyledText';
 
 export const CancelContainer = styled.div`
 	margin: 0 auto;
 	width: 100%;
-	flex-grow: 1; /* flexbox에서 공간을 채우도록 설정 */
+	flex-grow: 1; 
 	display: flex;
 	flex-direction: column;
 `;
 
 export const SubTitle = styled.h3`
-	font-size: 1rem; /* 16px */
+	font-size: 1rem;  
 	font-weight: bold;
-	margin-bottom: 0.625rem; /* 10px */
+	margin-bottom: 0.625rem;
 	text-align: center;
 	text-align: left;
 	margin-top: 10px;
-	padding: 1.25rem; /* 20px */
+	padding: 1.25rem; 
 `;
 
 export const Text = styled.p`
-	font-size: 0.875rem; /* 14px */
-	margin-bottom: 5px; /* 20px */
+	font-size: 0.875rem; 
+	margin-bottom: 5px; 
 	text-align: left;
 	margin-top: 10px;
-	padding: 0rem 1.25rem; /* 20px */
+	padding: 0rem 1.25rem; 
 `;
 
 export const InfoBox = styled.div`
-	background: #f5f5f5;
-	padding: 70px; /* 20px */
+	background: ${({ theme }) => theme.colors.background.secondary};
+	padding: 70px;
 	margin-top: 10px;
 	border-radius: 10px;
-	margin: 10px 20px 1.25rem 20px; /* 10px 위 여백, 20px 좌우 여백, 20px 아래 여백 */
+	margin: 10px 20px 1.25rem 20px; 
 `;
 
 export const InfoItem = styled.p`
-	font-size: 0.875rem; /* 14px */
-	margin-bottom: 0.625rem; /* 10px */
+	font-size: 0.875rem; 
+	margin-bottom: 0.625rem; 
 	padding: 2px 10px;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	text-align: center;
-	height: 100%; /* 부모 컨테이너의 높이에 맞추기 */
+	height: 100%; 
 `;
 
 export const CheckboxWrapper = styled.div`
@@ -56,46 +53,49 @@ export const CheckboxWrapper = styled.div`
 	padding: 0rem 15px;
 
 	input[type='checkbox'] {
-		margin-right: 0.625rem; /* 10px */
+		margin-right: 0.625rem; 
 	}
 `;
 
 export const CheckboxInput = styled.input`
 	margin-right: 0.625rem;
 	cursor: pointer;
-	appearance: none; /* 기본 스타일 제거 */
+	appearance: none; 
 	width: 1.25rem;
 	height: 1.25rem;
-	border: 0.125rem solid #e0e0e0;
+	border: 0.125rem solid ${({ theme }) => theme.colors.gray[200]};
 	border-radius: 0.25rem;
 	position: relative;
 	&:checked {
-		background-color: #ffbbda;
-		border-color: #ff2389;
-	}
+		background-color: ${({ theme }) => theme.colors.background.primaryLight};
+		border-color: ${({ theme }) => theme.colors.brand.primary}; 
+}
+
 	&:checked::after {
 		content: '✓';
-		color: white;
+		color: ${({ theme }) => theme.colors.contrast};
 		font-size: 0.875rem;
 		position: absolute;
 		top: 50%;
 		left: 50%;
-		transform: translate(-50%, -50%); /* 정확히 중앙으로 배치 */
+		transform: translate(-50%, -50%); 
 	}
 `;
 
-export const StyledButton = styled.button<ButtonProps>`
-	margin-top: 18.75rem; /* 300px */
-	background: ${(props) => (props.isChecked ? 'black' : '#ccc')};
-	border-radius: 0.5rem; /* 8px */
-	border: none;
-	padding: 1.5625rem; /* 25px */
-	text-align: center;
-	font-size: 1rem; /* 16px */
-	color: white;
-	cursor: ${(props) => (props.isChecked ? 'pointer' : 'not-allowed')};
+export const Label = styled.label`
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+`;
 
-	&:disabled {
-		background: #00000080;
-	}
+export const StyledCheckboxText = styled(StyledText)`
+	color: ${({ theme }) => theme.colors.text.caption};
 `;
+
+export const StyledDiv = styled.div<{ isChecked: boolean }>`
+	background-color: ${({ isChecked, theme }) =>
+		isChecked ? theme.colors.primary : theme.colors.gray[300]};
+	color: ${({ isChecked, theme }) =>
+		isChecked ? theme.colors.contrast : theme.colors.caption};
+	cursor: ${({ isChecked }) => (isChecked ? 'pointer' : 'not-allowed')};
+`;

src/pages/AccountEdit/index.tsx

@@ -12,19 +12,18 @@ import {
 	MemberInfoRow,
 	Label,
 	Info,
-} from './styles';
-import { OODDFrame } from '../../components/Frame/Frame';
-
-import BottomButton from '../../components/BottomButton'; // BottomButton 컴포넌트 임포트
+} from './styles'; 
+import { OODDFrame } from '@components/Frame/Frame';
+import BottomButton from '@components/BottomButton/index';
 
 import { useNavigate } from 'react-router-dom';
-import { StyledText } from '../../components/Text/StyledText';
-import theme from '../../styles/theme';
+import { StyledText } from '@components/Text/StyledText';
+import theme from '@styles/theme';
 
-import naver from '../../assets/default/snsIcon/naver.svg';
-import kakao from '../../assets/default/snsIcon/kakao.svg';
-import TopBar from '../../components/TopBar';
-import back from '../../assets/arrow/left.svg';
+import naver from '@assets/default/snsIcon/naver.svg';
+import kakao from '@assets/default/snsIcon/kakao.svg';
+import TopBar from '@components/TopBar/index';
+import back from '@assets/arrow/left.svg';
 
 const AccountEdit: React.FC = () => {
 	const navigate = useNavigate(); // useNavigate 훅 사용
@@ -41,18 +40,18 @@ const AccountEdit: React.FC = () => {
 
 				<Section>
 					<SectionTitle>
-						<StyledText $textTheme={{ style: 'body1-medium', lineHeight: 0 }} color={theme.colors.black}>
+						<StyledText $textTheme={{ style: 'body1-medium' }} color={theme.colors.primary}>
 							로그인 정보
 						</StyledText>
 					</SectionTitle>
 					<SNSInfo>
 						<SnsConnection>
-							<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray3}>
+							<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
 								SNS 연결
 							</StyledText>
 						</SnsConnection>
 						<Text>
-							<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray3}>
+							<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
 								연결된 SNS계정으로 로그인되었습니다.
 							</StyledText>
 						</Text>
@@ -64,22 +63,22 @@ const AccountEdit: React.FC = () => {
 				</Section>
 				<Section>
 					<SectionTitle>
-						<StyledText $textTheme={{ style: 'body1-medium', lineHeight: 0 }} color={theme.colors.black}>
+						<StyledText $textTheme={{ style: 'body1-medium' }} color={theme.colors.primary}>
 							회원 정보
 						</StyledText>
 					</SectionTitle>
 					<MemberInfo>
 						<MemberInfoRow>
 							<Label>
-								<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray3}>
+								<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
 									이름
 								</StyledText>
 							</Label>
 							<Info>-</Info>
 						</MemberInfoRow>
 						<MemberInfoRow>
 							<Label>
-								<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray3}>
+								<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
 									연락처
 								</StyledText>
 							</Label>