[OD-147] profile, profileEdit, accountCancel, accountSetting getCurrentUserId로 수정

src/apis/chatting/dto.ts

@@ -11,6 +11,7 @@ export interface OtherUserDto {
 	id: number;
 	nickname: string;
 	profilePictureUrl: string;
+	bio: string; //추가
 }
 
 export interface LatestMessageDto {

src/pages/AccountCancel/index.tsx

@@ -1,16 +1,17 @@
 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 { 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';
+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';
+import { patchUserWithdrawApi } from '@apis/user';
+import Modal from '@components/Modal';
+import { getCurrentUserId } from '@utils/getCurrentUserId';
 
 const AccountCancel: React.FC = () => {
 	const [isChecked, setIsChecked] = useState(false);
@@ -35,17 +36,17 @@ const AccountCancel: React.FC = () => {
 				return;
 			}
 
-			const storedUserId = Number(localStorage.getItem('my_id'));
+			const currentUserId = getCurrentUserId();
 			const token = localStorage.getItem('new_jwt_token');
 
-			if (!storedUserId || !token) {
+			if (!currentUserId || !token) {
 				setModalContent('사용자 정보를 찾을 수 없습니다.');
 				setIsModalVisible(true);
 				return;
 			}
 
 			// API 요청
-			const response = await patchUserWithdrawApi(storedUserId);
+			const response = await patchUserWithdrawApi(currentUserId);
 
 			if (response.isSuccess) {
 				setModalContent('계정이 성공적으로 삭제되었습니다.');
@@ -98,16 +99,16 @@ const AccountCancel: React.FC = () => {
 				<CheckboxWrapper as="div">
 					<label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
 						<CheckboxInput type="checkbox" checked={isChecked} onChange={handleCheckboxChange} />
-						<StyledText as="span" $textTheme={{ style: 'body4-light', lineHeight: 1 }} color={theme.colors.gray3}>
+						<StyledText as="span" $textTheme={{ style: 'body4-light', lineHeight: 1 }} color={theme.colors.gray[600]}>
 							안내사항을 모두 확인하였으며, 이에 동의합니다.
 						</StyledText>
 					</label>
 				</CheckboxWrapper>
 			</CancelContainer>
 			<div
 				style={{
-					backgroundColor: isChecked ? '#000000' : '#d3d3d3',
-					color: isChecked ? '#ffffff' : '#808080',
+					backgroundColor: isChecked ? theme.colors.black : theme.colors.gray[300],
+					color: isChecked ? theme.colors.white : theme.colors.gray[500],
 					cursor: isChecked ? 'pointer' : 'not-allowed',
 				}}
 			>

src/pages/AccountCancel/styles.tsx

@@ -7,46 +7,46 @@ interface ButtonProps {
 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.gray[100]};
+	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 +56,48 @@ 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.brand.primaryLight};
+	border-color: ${({ theme }) => theme.colors.brand.primary}; 
+}
+
 	&:checked::after {
 		content: '✓';
-		color: white;
+		color: ${({ theme }) => theme.colors.white};
 		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 */
+	margin-top: 18.75rem; 
+	background: ${({ theme, isChecked }) =>
+	isChecked ? theme.colors.black : theme.colors.gray[300]};
+	border-radius: 0.5rem; 
 	border: none;
-	padding: 1.5625rem; /* 25px */
+	padding: 1.5625rem; 
 	text-align: center;
-	font-size: 1rem; /* 16px */
-	color: white;
+	font-size: 1rem; 
+	color: ${({ theme }) => theme.colors.white};
 	cursor: ${(props) => (props.isChecked ? 'pointer' : 'not-allowed')};
 
 	&:disabled {
-		background: #00000080;
+		background: ${({ theme }) => `${theme.colors.black}80`};
 	}
-`;
+`;

src/pages/AccountEdit/index.tsx

@@ -13,18 +13,18 @@ import {
 	Label,
 	Info,
 } from './styles';
-import { OODDFrame } from '../../components/Frame/Frame';
+import { OODDFrame } from '@components/Frame/Frame';
 
-import BottomButton from '../../components/BottomButton'; // BottomButton 컴포넌트 임포트
+import BottomButton from '@components/BottomButton';
 
 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';
+import back from '@assets/arrow/left.svg';
 
 const AccountEdit: React.FC = () => {
 	const navigate = useNavigate(); // useNavigate 훅 사용
@@ -47,12 +47,12 @@ const AccountEdit: React.FC = () => {
 					</SectionTitle>
 					<SNSInfo>
 						<SnsConnection>
-							<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray3}>
+							<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray[600]}>
 								SNS 연결
 							</StyledText>
 						</SnsConnection>
 						<Text>
-							<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray3}>
+							<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray[600]}>
 								연결된 SNS계정으로 로그인되었습니다.
 							</StyledText>
 						</Text>
@@ -71,15 +71,15 @@ const AccountEdit: React.FC = () => {
 					<MemberInfo>
 						<MemberInfoRow>
 							<Label>
-								<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray3}>
+								<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray[600]}>
 									이름
 								</StyledText>
 							</Label>
 							<Info>-</Info>
 						</MemberInfoRow>
 						<MemberInfoRow>
 							<Label>
-								<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray3}>
+								<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray[600]}>
 									연락처
 								</StyledText>
 							</Label>

src/pages/AccountEdit/styles.tsx

@@ -1,92 +1,91 @@
 import styled from 'styled-components';
 
 export const ProfileEditContainer = styled.div`
-	max-width: 512px; /* 32rem */
+	max-width: 512px; 
 	display: flex;
 	flex-direction: column;
 	position: relative;
 `;
 
 export const Section = styled.div`
-	margin-top: 1.875rem; /* 30px */
-
-	margin-bottom: 1.875rem; /* 30px */
-	width: 100%; /* Section이 부모 컨테이너의 전체 너비를 차지하도록 설정 */
+	margin-top: 1.875rem; 
+	margin-bottom: 1.875rem; 
+	width: 100%; 
 	padding: 0px 30px;
 `;
 
 export const SectionTitle = styled.div`
-	font-size: 1.125rem; /* 18px */
+	font-size: 1.125rem; 
 	font-weight: bold;
-	margin-bottom: 0.625rem; /* 10px */
-	margin-top: 1.125rem; /* 18px */
-	text-align: left; /* 텍스트를 왼쪽 정렬 */
+	margin-bottom: 0.625rem; 
+	margin-top: 1.125rem; 
+	text-align: left; 
 `;
 
 export const SNSInfo = styled.div`
 	display: flex;
 	flex-direction: column;
-	margin-bottom: 0.625rem; /* 10px */
-	margin-top: 3.125rem; /* 50px */
+	margin-bottom: 0.625rem; 
+	margin-top: 3.125rem;
 `;
 
 export const SNSInfoRow = styled.div`
 	display: flex;
 	align-items: center;
-	margin-bottom: 0.625rem; /* 10px */
+	margin-bottom: 0.625rem;
 `;
 
 export const SNSIcon = styled.img`
-	width: 2.5rem; /* 40px */
-	height: 2.5rem; /* 40px */
-	margin-right: 0.625rem; /* 10px */
+	width: 2.5rem; 
+	height: 2.5rem; 
+	margin-right: 0.625rem; 
 	margin-top: 1.875rem;
 	flex-shrink: 0;
 	object-fit: cover;
 `;
 
 export const Text = styled.div`
-	font-size: 0.875rem; /* 14px */
-	color: #666;
+	font-size: 0.875rem; 
+	color: ${({ theme }) => theme.colors.gray[600]};
 	margin-top: 2.1875rem;
-	text-align: left; /* 텍스트를 왼쪽 정렬 */
+	text-align: left; 
 `;
 
 export const SnsConnection = styled.div`
-	font-size: 1rem; /* 16px */
+	font-size: 1rem; 
 	font-weight: bold;
-	color: #333;
-	margin-bottom: 0.625rem; /* 10px */
-	text-align: left; /* 텍스트를 왼쪽 정렬 */
+	color: ${({ theme }) => theme.colors.gray[700]};
+	margin-bottom: 0.625rem; 
+	text-align: left;
 `;
 
 export const MemberInfo = styled.div`
 	display: flex;
 	flex-direction: column;
 	margin-top: 35px;
-	width: 100%; /* 부모 컨테이너의 전체 너비를 차지하도록 설정 */
+	width: 100%;
 `;
 
 export const MemberInfoRow = styled.div`
 	display: flex;
 	align-items: center;
-	justify-content: flex-start; /* 아이템들을 왼쪽으로 정렬 */
-	margin-bottom: 0.625rem; /* 10px */
+	justify-content: flex-start; 
+	margin-bottom: 0.625rem; 
 	margin-top: 10px;
 `;
 
 export const Label = styled.div`
-	font-size: 0.875rem; /* 14px */
-	color: #333;
+	font-size: 0.875rem;
+	color: ${({ theme }) => theme.colors.gray[700]};
 	display: flex;
 	align-items: center;
-	width: 6.25rem; /* 100px, 라벨의 고정 너비 설정 */
+	width: 6.25rem; 
 `;
 
 export const Info = styled.div`
-	font-size: 0.875rem; /* 14px */
-	color: #999;
-	margin-left: 0.625rem; /* 10px */
-	flex-grow: 1; /* 라벨과 함께 라인을 맞추기 위해 넓이를 확장 */
-	text-align: left; /* 텍스트를 왼쪽 정렬 */
+	font-size: 0.875rem; 
+	color: ${({ theme }) => theme.colors.gray[500]};
+	margin-left: 0.625rem; 
+	flex-grow: 1; 
+	text-align: left; 
 `;