diff --git a/src/App.tsx b/src/App.tsx
index 140061b0..96beb78e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -57,9 +57,10 @@ const protectedRoutes = [
 // 인증이 필요 없는 페이지 배열
 const publicRoutes = [
 	{ path: '/login', element: <Login /> },
-	{ path: '/signup', element: <SignUp /> },
 	{ path: '/login/complete', element: <LoginComplete /> },
-	{ path: '/terms-agreement', element: <TermsAgreement /> },
+
+	{ path: '/signup', element: <SignUp /> },
+	{ path: '/signup/terms-agreement', element: <TermsAgreement /> },
 ];
 
 const App: React.FC = () => {
diff --git a/src/components/PostItem/dto.ts b/src/components/PostItem/dto.ts
index 23cd3a3c..2db2ca24 100644
--- a/src/components/PostItem/dto.ts
+++ b/src/components/PostItem/dto.ts
@@ -1,4 +1,4 @@
-import { UserPostSummary } from '../../apis/post/dto';
+import { UserPostSummary } from '@apis/post/dto';
 
 export interface Post extends UserPostSummary {}
 
diff --git a/src/components/PostItem/index.tsx b/src/components/PostItem/index.tsx
index 4a4596b0..4beb8355 100644
--- a/src/components/PostItem/index.tsx
+++ b/src/components/PostItem/index.tsx
@@ -1,46 +1,40 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
-import theme from '../../styles/theme';
-import {
-	PostItemContainer,
-	PostImageContainer,
-	PostImage,
-	LikesCountStyledText,
-	Icon,
-	LikesOverlay,
-	PinSvg,
-} from './style';
-import HeartSvg from '../../assets/default/like.svg';
-import MessageSvg from '../../assets/default/message.svg';
-import PinIcon from '../../assets/default/pin.svg';
-import { PostItemProps } from './dto';
+
+import theme from '@styles/theme';
+import PinIcon from '@assets/default/pin.svg';
+import Like from '@components/Icons/Like';
+import Message from '@components/Icons/Message';
+
+import type { PostItemProps } from './dto';
+import { PostItemLayout, PostImageContainer, PostImage, LikesCountStyledText, LikesOverlay, Pin } from './style';
 
 const PostItem: React.FC<PostItemProps> = ({ post, isMyPost = true }) => {
 	const navigate = useNavigate();
-	const imageUrl = post.imageUrl;
+	const postImageUrl = post.imageUrl;
 
-	const handleClick = () => {
+	const handlePostItemClick = () => {
 		const path = isMyPost ? `/my-post/${post.id}` : `/post/${post.id}`;
 		navigate(path);
 	};
 
 	return (
-		<PostItemContainer onClick={handleClick}>
+		<PostItemLayout onClick={handlePostItemClick}>
 			<PostImageContainer>
-				<PostImage src={imageUrl} alt={`post-${post.id}`} />
-				{post.isRepresentative && <PinSvg src={PinIcon} />}
+				<PostImage src={postImageUrl} alt={`post-${post.id}`} />
+				{post.isRepresentative && <Pin src={PinIcon} />}
 				<LikesOverlay>
-					<Icon src={HeartSvg} alt="heart icon" />
+					<Like />
 					<LikesCountStyledText $textTheme={{ style: 'caption1-regular' }} color={theme.colors.gray3}>
 						{post.postLikesCount}
 					</LikesCountStyledText>
-					<Icon src={MessageSvg} alt="message icon" />
+					<Message />
 					<LikesCountStyledText $textTheme={{ style: 'caption1-regular' }} color={theme.colors.gray3}>
 						{post.postCommentsCount}
 					</LikesCountStyledText>
 				</LikesOverlay>
 			</PostImageContainer>
-		</PostItemContainer>
+		</PostItemLayout>
 	);
 };
 
diff --git a/src/components/PostItem/style.tsx b/src/components/PostItem/style.tsx
index 83c253f1..655f234a 100644
--- a/src/components/PostItem/style.tsx
+++ b/src/components/PostItem/style.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import { StyledText } from '../Text/StyledText';
+import { StyledText } from '@components/Text/StyledText';
 
-export const PostItemContainer = styled.article`
+export const PostItemLayout = styled.article`
 	flex: 1 1 calc(50% - 0.5rem); /* 기본적으로 두 개씩 배치되도록 설정 */
 	width: 100%;
 	max-width: 67.5rem; /* 최대 너비 설정 */
@@ -59,7 +59,7 @@ export const LikesCountStyledText = styled(StyledText)`
 	margin: 0 8px 0.5rem 4px;
 `;
 
-export const PinSvg = styled.img`
+export const Pin = styled.img`
 	display: flex;
 	position: absolute;
 	top: 0.75rem;
diff --git a/src/components/TopBar/dto.ts b/src/components/TopBar/dto.ts
index 1f7579f0..84ff4939 100644
--- a/src/components/TopBar/dto.ts
+++ b/src/components/TopBar/dto.ts
@@ -1,12 +1,12 @@
 export interface TopBarProps {
-	text?: string; // 텍스트, optional prop
-	RightButtonSrc?: string; // KebabMenuButton src의 Optional prop
-	LeftButtonSrc?: string; // BackButton src의 Optional prop
-	onLeftClick?: () => void; // BackButton src의 Optional prop
-	onRightClick?: () => void; // KebabMenuButton src의 Optional prop
+	text?: string;
+	RightButtonSrc?: string;
+	LeftButtonSrc?: string;
+	onClickLeftButton?: () => void;
+	onClickRightButton?: () => void;
 	$withBorder?: boolean;
 }
 
-export interface TopbarLayoutProps {
+export interface TopBarLayoutProps {
 	$withBorder?: boolean;
 }
diff --git a/src/components/TopBar/index.tsx b/src/components/TopBar/index.tsx
index 11d57864..2b18fe08 100644
--- a/src/components/TopBar/index.tsx
+++ b/src/components/TopBar/index.tsx
@@ -1,48 +1,49 @@
-import theme from '../../styles/theme';
-import { TopbarLayout, StyledTextLayout, LeftButton, RightButton } from './styles';
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
-import { TopBarProps } from './dto';
+
+import theme from '@styles/theme';
+
+import type { TopBarProps } from './dto';
+import { TopBarLayout, StyledTextWrapper, LeftButton, RightButton } from './styles';
 
 const TopBar: React.FC<TopBarProps> = ({
 	text = '',
 	RightButtonSrc,
 	LeftButtonSrc,
-	onLeftClick,
-	onRightClick,
+	onClickLeftButton,
+	onClickRightButton,
 	$withBorder = false,
 }) => {
-	const nav = useNavigate();
+	const navigate = useNavigate();
 
 	return (
-		<>
-			<TopbarLayout $withBorder={$withBorder}>
-				<LeftButton
-					src={LeftButtonSrc}
-					onClick={() => {
-						if (onLeftClick) {
-							onLeftClick();
-						} else {
-							nav(-1);
-						}
-					}}
-				>
-					<img src={LeftButtonSrc || ''} alt="뒤로가기" />
-				</LeftButton>
-				<StyledTextLayout $textTheme={{ style: 'body1-bold' }} color={theme.colors.black}>
-					{text}
-				</StyledTextLayout>
-				<RightButton
-					src={RightButtonSrc}
-					onClick={() => {
-						if (onRightClick) {
-							onRightClick();
-						}
-					}}
-				>
-					<img src={RightButtonSrc} alt="메뉴" />
-				</RightButton>
-			</TopbarLayout>
-		</>
+		<TopBarLayout $withBorder={$withBorder}>
+			<LeftButton
+				src={LeftButtonSrc}
+				onClick={() => {
+					if (onClickLeftButton) {
+						onClickLeftButton();
+					} else {
+						navigate(-1);
+					}
+				}}
+			>
+				<img src={LeftButtonSrc || ''} alt="뒤로가기" />
+			</LeftButton>
+			<StyledTextWrapper $textTheme={{ style: 'body1-bold' }} color={theme.colors.black}>
+				{text}
+			</StyledTextWrapper>
+			<RightButton
+				src={RightButtonSrc}
+				onClick={() => {
+					if (onClickRightButton) {
+						onClickRightButton();
+					}
+				}}
+			>
+				<img src={RightButtonSrc} alt="메뉴" />
+			</RightButton>
+		</TopBarLayout>
 	);
 };
 
diff --git a/src/components/TopBar/styles.tsx b/src/components/TopBar/styles.tsx
index a5317833..3d06de80 100644
--- a/src/components/TopBar/styles.tsx
+++ b/src/components/TopBar/styles.tsx
@@ -1,8 +1,8 @@
 import styled from 'styled-components';
-import { TopbarLayoutProps } from './dto';
-import { StyledText } from '../Text/StyledText';
+import { StyledText } from '@components/Text/StyledText';
+import type { TopBarLayoutProps } from './dto';
 
-export const TopbarLayout = styled.header<TopbarLayoutProps>`
+export const TopBarLayout = styled.header<TopBarLayoutProps>`
 	display: flex;
 	position: sticky;
 	top: 0; /* 부모 요소의 상단에 붙도록 설정 */
@@ -18,7 +18,7 @@ export const TopbarLayout = styled.header<TopbarLayoutProps>`
 	`}
 `;
 
-export const StyledTextLayout = styled(StyledText)`
+export const StyledTextWrapper = styled(StyledText)`
 	flex-direction: column;
 	align-items: center;
 `;
diff --git a/src/components/UserProfile/dto.ts b/src/components/UserProfile/dto.ts
new file mode 100644
index 00000000..d8a1140e
--- /dev/null
+++ b/src/components/UserProfile/dto.ts
@@ -0,0 +1,5 @@
+export interface UserProfileProps {
+	userImg?: string; // string | undefined
+	bio?: string;
+	nickname: string;
+}
diff --git a/src/components/UserProfile/index.tsx b/src/components/UserProfile/index.tsx
index 04df42f0..3db8059a 100644
--- a/src/components/UserProfile/index.tsx
+++ b/src/components/UserProfile/index.tsx
@@ -1,26 +1,23 @@
 import React from 'react';
-import { StyledText } from '../Text/StyledText';
-import theme from '../../styles/theme';
-import { UserProfileContainer, UserImg, UserDetails, BioStyledText } from './style';
 
-interface UserProfileProps {
-	userImg?: string; // string | undefined
-	bio?: string;
-	nickname: string;
-}
+import theme from '@styles/theme';
+import { StyledText } from '@components/Text/StyledText';
+
+import type { UserProfileProps } from './dto';
+import { UserProfileLayout, UserImg, UserDetailsContainer, StyledBio } from './style';
 
 const UserProfile: React.FC<UserProfileProps> = React.memo(({ userImg, bio = '', nickname }) => {
 	const truncatedBio = bio ? (bio.length > 50 ? bio.substring(0, 50) + '...' : bio) : '';
 	return (
-		<UserProfileContainer>
+		<UserProfileLayout>
 			<UserImg src={userImg} alt={`${nickname}'s profile`} />
-			<UserDetails>
+			<UserDetailsContainer>
 				<StyledText $textTheme={{ style: 'headline2-bold' }}>{nickname}</StyledText>
-				<BioStyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.gray3}>
+				<StyledBio $textTheme={{ style: 'body2-regular' }} color={theme.colors.gray3}>
 					{truncatedBio}
-				</BioStyledText>
-			</UserDetails>
-		</UserProfileContainer>
+				</StyledBio>
+			</UserDetailsContainer>
+		</UserProfileLayout>
 	);
 });
 
diff --git a/src/components/UserProfile/style.tsx b/src/components/UserProfile/style.tsx
index 709717e0..275dbb28 100644
--- a/src/components/UserProfile/style.tsx
+++ b/src/components/UserProfile/style.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import { StyledText } from '../Text/StyledText';
+import { StyledText } from '@components/Text/StyledText';
 
-export const UserProfileContainer = styled.section`
+export const UserProfileLayout = styled.section`
 	display: flex;
 	flex-direction: row;
 `;
@@ -12,7 +12,7 @@ export const UserImg = styled.img`
 	border-radius: 50%;
 `;
 
-export const UserDetails = styled.section`
+export const UserDetailsContainer = styled.section`
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
@@ -21,7 +21,7 @@ export const UserDetails = styled.section`
 	margin-left: 1rem;
 `;
 
-export const BioStyledText = styled(StyledText)`
+export const StyledBio = styled(StyledText)`
 	display: -webkit-box;
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
diff --git a/src/pages/AccountCancel/index.tsx b/src/pages/AccountCancel/index.tsx
index 3877683d..44ace24c 100644
--- a/src/pages/AccountCancel/index.tsx
+++ b/src/pages/AccountCancel/index.tsx
@@ -10,11 +10,11 @@ import back from '../../assets/arrow/left.svg';
 
 import BottomButton from '../../components/BottomButton';
 import { patchUserWithdrawApi } from '../../apis/user';
-import Modal from '../../components/Modal'; 
+import Modal from '../../components/Modal';
 
 const AccountCancel: React.FC = () => {
 	const [isChecked, setIsChecked] = useState(false);
-	const [modalContent, setModalContent] = useState<string | null>(null); 
+	const [modalContent, setModalContent] = useState<string | null>(null);
 	const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
 	const navigate = useNavigate();
 
@@ -55,8 +55,8 @@ const AccountCancel: React.FC = () => {
 				localStorage.clear();
 
 				setTimeout(() => {
-					navigate('/login'); 
-				}, 2000); 
+					navigate('/login');
+				}, 2000);
 			} else {
 				setModalContent(response.code || '알 수 없는 오류가 발생했습니다.');
 				setIsModalVisible(true);
@@ -71,7 +71,7 @@ const AccountCancel: React.FC = () => {
 	return (
 		<OODDFrame>
 			<CancelContainer>
-				<TopBar text="회원 탈퇴" LeftButtonSrc={back} onLeftClick={() => navigate(-1)} />
+				<TopBar text="회원 탈퇴" LeftButtonSrc={back} onClickLeftButton={() => navigate(-1)} />
 
 				<SubTitle>
 					<StyledText as="div" $textTheme={{ style: 'body1-medium', lineHeight: 2 }} color={theme.colors.black}>
@@ -90,28 +90,27 @@ const AccountCancel: React.FC = () => {
 				</Text>
 				<InfoBox>
 					<InfoItem as="div">
-					<StyledText
-						as="div"
-						$textTheme={{ style: 'body1-medium', lineHeight: 2 }}
-						color={theme.colors.black}
-						style={{ whiteSpace: 'nowrap' }} // 줄 바꿈 방지
-					>
-						지금까지 OODD를 이용해주셔서 감사합니다!
-					</StyledText>
-
+						<StyledText
+							as="div"
+							$textTheme={{ style: 'body1-medium', lineHeight: 2 }}
+							color={theme.colors.black}
+							style={{ whiteSpace: 'nowrap' }} // 줄 바꿈 방지
+						>
+							지금까지 OODD를 이용해주셔서 감사합니다!
+						</StyledText>
 					</InfoItem>
 				</InfoBox>
 				<CheckboxWrapper as="div">
 					<label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
-					<input
-						type="checkbox"
-						checked={isChecked}
-						onChange={handleCheckboxChange}
-						style={{ marginRight: '8px' }} // 텍스트와 체크박스 간격 조절
-					/>
-					<StyledText as="span" $textTheme={{ style: 'body4-light', lineHeight: 1 }} color={theme.colors.gray3}>
-						안내사항을 모두 확인하였으며, 이에 동의합니다.
-					</StyledText>
+						<input
+							type="checkbox"
+							checked={isChecked}
+							onChange={handleCheckboxChange}
+							style={{ marginRight: '8px' }} // 텍스트와 체크박스 간격 조절
+						/>
+						<StyledText as="span" $textTheme={{ style: 'body4-light', lineHeight: 1 }} color={theme.colors.gray3}>
+							안내사항을 모두 확인하였으며, 이에 동의합니다.
+						</StyledText>
 					</label>
 				</CheckboxWrapper>
 			</CancelContainer>
@@ -125,14 +124,13 @@ const AccountCancel: React.FC = () => {
 				<BottomButton content="탈퇴하기" onClick={handleDeleteAccount} disabled={!isChecked} />
 			</div>
 			{isModalVisible && (
- 				 <Modal
-   					 content={modalContent || ''} // null일 경우 빈 문자열로 처리
-   					 onClose={handleModalClose}
-   					 isCloseButtonVisible={true}
-   				 	button={{ content: '확인', onClick: handleModalClose }}
-				 />
-)}
-
+				<Modal
+					content={modalContent || ''} // null일 경우 빈 문자열로 처리
+					onClose={handleModalClose}
+					isCloseButtonVisible={true}
+					button={{ content: '확인', onClick: handleModalClose }}
+				/>
+			)}
 		</OODDFrame>
 	);
 };
diff --git a/src/pages/AccountEdit/index.tsx b/src/pages/AccountEdit/index.tsx
index 598bf59d..f78907b7 100644
--- a/src/pages/AccountEdit/index.tsx
+++ b/src/pages/AccountEdit/index.tsx
@@ -37,7 +37,7 @@ const AccountEdit: React.FC = () => {
 	return (
 		<OODDFrame>
 			<ProfileEditContainer>
-				<TopBar text="회원 정보 수정" LeftButtonSrc={back} onLeftClick={() => navigate(-1)} />
+				<TopBar text="회원 정보 수정" LeftButtonSrc={back} onClickLeftButton={() => navigate(-1)} />
 
 				<Section>
 					<SectionTitle>
diff --git a/src/pages/AccountSetting/index.tsx b/src/pages/AccountSetting/index.tsx
index aee54ca6..7da01656 100644
--- a/src/pages/AccountSetting/index.tsx
+++ b/src/pages/AccountSetting/index.tsx
@@ -11,9 +11,9 @@ import back from '../../assets/arrow/left.svg';
 import imageBasic from '../../assets/default/defaultProfile.svg';
 import Profile_s from './../../assets/default/my-page.svg';
 import leave from '../../assets/default/leave.svg';
-import { getUserInfoApi } from '../../apis/user'; 
-import { UserInfoData } from '../../apis/user/dto'; 
-import Loading from '../../components/Loading'; 
+import { getUserInfoApi } from '../../apis/user';
+import { UserInfoData } from '../../apis/user/dto';
+import Loading from '../../components/Loading';
 
 const AccountSetting: React.FC = () => {
 	const navigate = useNavigate();
@@ -67,13 +67,13 @@ const AccountSetting: React.FC = () => {
 	};
 
 	if (isLoading) {
-		return <Loading />; 
+		return <Loading />;
 	}
 
 	return (
 		<OODDFrame>
 			<ProfileEditContainer>
-				<TopBar text="계정 관리" LeftButtonSrc={back} onLeftClick={() => navigate(-1)} />
+				<TopBar text="계정 관리" LeftButtonSrc={back} onClickLeftButton={() => navigate(-1)} />
 
 				<ProfilePicWrapper>
 					<ProfilePic>
@@ -89,7 +89,7 @@ const AccountSetting: React.FC = () => {
 					<Row>
 						<Label>
 							<StyledText $textTheme={{ style: 'body6-regular', lineHeight: 0 }} color={theme.colors.gray3}>
-							{userProfile?.name} | {userProfile?.email}
+								{userProfile?.name} | {userProfile?.email}
 							</StyledText>
 						</Label>
 					</Row>
diff --git a/src/pages/Chats/ChatRoom/index.tsx b/src/pages/Chats/ChatRoom/index.tsx
index f7125cff..f3e11f69 100644
--- a/src/pages/Chats/ChatRoom/index.tsx
+++ b/src/pages/Chats/ChatRoom/index.tsx
@@ -234,10 +234,10 @@ const ChatRoom: React.FC = () => {
 				text={opponentInfo?.nickname || '알수없음'}
 				LeftButtonSrc={Back}
 				RightButtonSrc={KebabMenu}
-				onLeftClick={() => {
+				onClickLeftButton={() => {
 					nav(-1);
 				}}
-				onRightClick={() => {
+				onClickRightButton={() => {
 					setIsMenuBottomSheetOpen(true);
 				}}
 				$withBorder={true}
diff --git a/src/pages/Home/HomeTopBar/index.tsx b/src/pages/Home/HomeTopBar/index.tsx
index def7acee..59bae2c5 100644
--- a/src/pages/Home/HomeTopBar/index.tsx
+++ b/src/pages/Home/HomeTopBar/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, ButtonContainer, HomeLogo, HomeTopBarContainer } from './styles';
 import logo from '@assets/default/oodd.svg';
-import Alarm from '@/components/Icons/Alarm';
+import Alarm from '@components/Icons/Alarm';
 
 // Home 페이지의 상단 바입니다. 로고와 알림이 있습니다.
 // TODO: 버튼 클릭 이벤트 처리 필요
diff --git a/src/pages/Home/OOTD/Feed/dto.ts b/src/pages/Home/OOTD/Feed/dto.ts
index f58b891d..b89b9f6a 100644
--- a/src/pages/Home/OOTD/Feed/dto.ts
+++ b/src/pages/Home/OOTD/Feed/dto.ts
@@ -1,4 +1,4 @@
-import { PostSummary } from '@/apis/post/dto';
+import { PostSummary } from '@apis/post/dto';
 
 export interface FeedProps {
 	feed: PostSummary;
diff --git a/src/pages/Home/OOTD/Feed/index.tsx b/src/pages/Home/OOTD/Feed/index.tsx
index 9a3251b4..4d6be4ed 100644
--- a/src/pages/Home/OOTD/Feed/index.tsx
+++ b/src/pages/Home/OOTD/Feed/index.tsx
@@ -24,8 +24,8 @@ import xBtn from '@assets/default/reject.svg';
 import { useNavigate } from 'react-router-dom';
 import defaultProfile from '@assets/default/defaultProfile.svg';
 import dayjs from 'dayjs';
-import Heart from '@/components/Icons/Heart';
-import Message from '@/components/Icons/Message';
+import Heart from '@components/Icons/Heart';
+import Message from '@components/Icons/Message';
 import { OptionsBottomSheetProps } from '@components/BottomSheet/OptionsBottomSheet/dto';
 import OptionsBottomSheet from '@components/BottomSheet/OptionsBottomSheet';
 import CommentBottomSheet from '@components/CommentBottomSheet';
diff --git a/src/pages/Login/LoginComplete/index.tsx b/src/pages/Login/LoginComplete/index.tsx
index 5e59b4fe..f7132bed 100644
--- a/src/pages/Login/LoginComplete/index.tsx
+++ b/src/pages/Login/LoginComplete/index.tsx
@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { getUserInfoByJwtApi } from '@/apis/auth';
-import { handleError } from '@/apis/util/handleError';
-import { postTermsAgreementApi } from '@/apis/user';
+import { getUserInfoByJwtApi } from '@apis/auth';
+import { handleError } from '@apis/util/handleError';
+import { postTermsAgreementApi } from '@apis/user';
 
-import Loading from '@/components/Loading';
-import Modal from '@/components/Modal';
+import Loading from '@components/Loading';
+import Modal from '@components/Modal';
 
 const LoginComplete: React.FC = () => {
 	const [isModalOpen, setIsModalOpen] = useState(false);
diff --git a/src/pages/Login/SocialLoginButton/index.tsx b/src/pages/Login/SocialLoginButton/index.tsx
index d14330ed..b448688e 100644
--- a/src/pages/Login/SocialLoginButton/index.tsx
+++ b/src/pages/Login/SocialLoginButton/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import theme from '@/styles/theme';
+import theme from '@styles/theme';
 
 import type { SocialLoginProps } from './dto';
 
diff --git a/src/pages/Login/SocialLoginButton/style.tsx b/src/pages/Login/SocialLoginButton/style.tsx
index 51d18de8..044dff37 100644
--- a/src/pages/Login/SocialLoginButton/style.tsx
+++ b/src/pages/Login/SocialLoginButton/style.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { StyledText } from '@/components/Text/StyledText';
+import { StyledText } from '@components/Text/StyledText';
 
 export const SocialLoginContainer = styled.button<{ $bgColor: string; $border?: boolean }>`
 	display: flex;
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index 5e5292fd..fa3ce121 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { OODDFrame } from '@/components/Frame/Frame';
-import theme from '@/styles/theme';
+import { OODDFrame } from '@components/Frame/Frame';
+import theme from '@styles/theme';
 
-import kakaoLogo from '@/assets/default/snsIcon/kakao.svg';
-import naverLogo from '@/assets/default/snsIcon/naver.svg';
+import kakaoLogo from '@assets/default/snsIcon/kakao.svg';
+import naverLogo from '@assets/default/snsIcon/naver.svg';
 
 import SocialLoginButton from './SocialLoginButton/index';
 
diff --git a/src/pages/Login/styles.tsx b/src/pages/Login/styles.tsx
index de9838c7..5acd57a9 100644
--- a/src/pages/Login/styles.tsx
+++ b/src/pages/Login/styles.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { StyledText } from '@/components/Text/StyledText';
+import { StyledText } from '@components/Text/StyledText';
 
 export const LoginContainer = styled.main`
 	display: flex;
diff --git a/src/pages/PostImageSelect/index.tsx b/src/pages/PostImageSelect/index.tsx
index adba904c..74ed26c8 100644
--- a/src/pages/PostImageSelect/index.tsx
+++ b/src/pages/PostImageSelect/index.tsx
@@ -142,7 +142,7 @@ const PostImageSelect: React.FC<ImageSelectModalProps> = () => {
 				<TopBar
 					text="OOTD 업로드"
 					LeftButtonSrc={images.length === 0 ? X : Left}
-					onLeftClick={images.length === 0 ? handleClose : handlePrev}
+					onClickLeftButton={images.length === 0 ? handleClose : handlePrev}
 				/>
 				<Content>
 					{images.length === 0 ? (
diff --git a/src/pages/PostInstaFeedSelect/index.tsx b/src/pages/PostInstaFeedSelect/index.tsx
index 5cc26e76..732b99ae 100644
--- a/src/pages/PostInstaFeedSelect/index.tsx
+++ b/src/pages/PostInstaFeedSelect/index.tsx
@@ -71,14 +71,14 @@ const PostInstaFeedSelect: React.FC<InstaFeedSelectModalProps> = () => {
 
 	// 페이지 종료 함수
 	const handleClose = () => {
-		navigate(`/profile/${userId}`); 
+		navigate(`/profile/${userId}`);
 	};
 
 	return (
 		<OODDFrame>
 			{isSuccessModalOpen && <Modal {...connectSuccessModalProps} />}
 			{isFailModalOpen && <Modal {...connectFailModalProps} />}
-			<TopBar text="가져올 OOTD 선택" LeftButtonSrc={X} onLeftClick={handleClose} />{' '}
+			<TopBar text="가져올 OOTD 선택" LeftButtonSrc={X} onClickLeftButton={handleClose} />{' '}
 			<Content>
 				{posts.map((post, index) => (
 					<PostContainer key={index} onClick={() => handlePostSelect(post)}>
diff --git a/src/pages/PostUpload/index.tsx b/src/pages/PostUpload/index.tsx
index 35ab0469..fff08fcb 100644
--- a/src/pages/PostUpload/index.tsx
+++ b/src/pages/PostUpload/index.tsx
@@ -308,7 +308,7 @@ const PostUpload: React.FC<PostUploadModalProps> = () => {
 	return (
 		<OODDFrame>
 			<UploadContainer>
-				<TopBar text="OOTD 업로드" LeftButtonSrc={Left} onLeftClick={handlePrev} />
+				<TopBar text="OOTD 업로드" LeftButtonSrc={Left} onClickLeftButton={handlePrev} />
 				<Content>
 					<ImageSwiper images={selectedImages} />
 					<StyledInput
diff --git a/src/pages/Profile/index.tsx b/src/pages/Profile/index.tsx
index fb44b151..eba79c1b 100644
--- a/src/pages/Profile/index.tsx
+++ b/src/pages/Profile/index.tsx
@@ -108,8 +108,8 @@ const Profile: React.FC = () => {
 					<TopBar
 						RightButtonSrc={MoreSvg}
 						LeftButtonSrc={BackSvg}
-						onLeftClick={() => navigate(-1)}
-						onRightClick={() => setIsOptionsBottomSheetOpen(true)} // OptionsBottomSheet 열기
+						onClickLeftButton={() => navigate(-1)}
+						onClickRightButton={() => setIsOptionsBottomSheetOpen(true)} // OptionsBottomSheet 열기
 					/>
 				)}
 
@@ -121,11 +121,7 @@ const Profile: React.FC = () => {
 					/>
 				</Header>
 
-				{isMyPage ? (
-					<ButtonSecondary />
-				) : (
-					<Button onClick={() => setIsBottomSheetOpen(true)}>매칭신청</Button>
-				)}
+				{isMyPage ? <ButtonSecondary /> : <Button onClick={() => setIsBottomSheetOpen(true)}>매칭신청</Button>}
 
 				<StatsContainer>
 					<Stat>
@@ -135,16 +131,12 @@ const Profile: React.FC = () => {
 					{isMyPage && (
 						<Stat>
 							<StatLabel>코멘트</StatLabel>
-							<StatNumber>
-								{posts.reduce((sum, post) => sum + (post.postCommentsCount || 0), 0)}
-							</StatNumber>
+							<StatNumber>{posts.reduce((sum, post) => sum + (post.postCommentsCount || 0), 0)}</StatNumber>
 						</Stat>
 					)}
 					<Stat>
 						<StatLabel>좋아요</StatLabel>
-						<StatNumber>
-							{posts.reduce((sum, post) => sum + (post.postLikesCount || 0), 0)}
-						</StatNumber>
+						<StatNumber>{posts.reduce((sum, post) => sum + (post.postLikesCount || 0), 0)}</StatNumber>
 					</Stat>
 				</StatsContainer>
 
diff --git a/src/pages/ProfileEdit/index.tsx b/src/pages/ProfileEdit/index.tsx
index f40830c7..c3608fe5 100644
--- a/src/pages/ProfileEdit/index.tsx
+++ b/src/pages/ProfileEdit/index.tsx
@@ -10,7 +10,7 @@ import {
 	CameraIcon,
 	UserInfo,
 	Username,
-	EmailInput
+	EmailInput,
 } from './styles';
 import { StyledText } from '../../components/Text/StyledText';
 import theme from '../../styles/theme';
@@ -127,7 +127,7 @@ const ProfileEdit: React.FC = () => {
 				profilePictureUrl: profilePictureUrl || '',
 				bio: bio || '',
 			};
-			
+
 			const response = await patchUserInfoApi(payload, storedUserId);
 
 			if (response.isSuccess) {
@@ -157,7 +157,7 @@ const ProfileEdit: React.FC = () => {
 	return (
 		<OODDFrame>
 			<ProfileEditContainer>
-				<TopBar text="회원정보 수정" LeftButtonSrc={back} onLeftClick={() => navigate(-1)} />
+				<TopBar text="회원정보 수정" LeftButtonSrc={back} onClickLeftButton={() => navigate(-1)} />
 				{isModalVisible && (
 					<Modal
 						content={modalContent || ''}
diff --git a/src/pages/SignUp/index.tsx b/src/pages/SignUp/index.tsx
index 78a82256..2df51cbf 100644
--- a/src/pages/SignUp/index.tsx
+++ b/src/pages/SignUp/index.tsx
@@ -1,16 +1,16 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { patchUserInfoApi } from '@/apis/user';
-import type { PatchUserInfoRequest } from '@/apis/user/dto';
-import { handleError } from '@/apis/util/handleError';
+import { patchUserInfoApi } from '@apis/user';
+import type { PatchUserInfoRequest } from '@apis/user/dto';
+import { handleError } from '@apis/util/handleError';
 
-import OODDlogo from '@/assets/default/oodd.svg';
+import OODDlogo from '@assets/default/oodd.svg';
 
-import { OODDFrame } from '@/components/Frame/Frame';
-import { StyledText } from '@/components/Text/StyledText';
-import BottomButton from '@/components/BottomButton';
-import Modal from '@/components/Modal';
+import { OODDFrame } from '@components/Frame/Frame';
+import { StyledText } from '@components/Text/StyledText';
+import BottomButton from '@components/BottomButton';
+import Modal from '@components/Modal';
 
 import { getCurrentUserId } from '@utils/getCurrentUserId';
 
diff --git a/src/pages/SignUp/style.tsx b/src/pages/SignUp/style.tsx
index 2fc3ec1e..ce60e0be 100644
--- a/src/pages/SignUp/style.tsx
+++ b/src/pages/SignUp/style.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { StyledText } from '@/components/Text/StyledText';
+import { StyledText } from '@components/Text/StyledText';
 
 export const SignUpLayout = styled.main`
 	display: flex;
diff --git a/src/pages/TermsAgreement/index.tsx b/src/pages/TermsAgreement/index.tsx
index db8bb9e8..0c650bd0 100644
--- a/src/pages/TermsAgreement/index.tsx
+++ b/src/pages/TermsAgreement/index.tsx
@@ -1,21 +1,21 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { postTermsAgreementApi } from '@/apis/user';
-import { handleError } from '@/apis/util/handleError';
+import { postTermsAgreementApi } from '@apis/user';
+import { handleError } from '@apis/util/handleError';
 
-import Back from '@/assets/arrow/left.svg';
-import OODDlogo from '@/assets/default/oodd.svg';
+import Back from '@assets/arrow/left.svg';
+import OODDlogo from '@assets/default/oodd.svg';
 
-import { OODDFrame } from '@/components/Frame/Frame';
-import { StyledText } from '@/components/Text/StyledText';
-import BottomButton from '@/components/BottomButton';
-import TopBar from '@/components/TopBar';
-import Modal from '@/components/Modal';
+import { OODDFrame } from '@components/Frame/Frame';
+import { StyledText } from '@components/Text/StyledText';
+import BottomButton from '@components/BottomButton';
+import TopBar from '@components/TopBar';
+import Modal from '@components/Modal';
 
 import { getCurrentUserId } from '@utils/getCurrentUserId';
 
-import { LogoWrapper, LogoImg } from '@/pages/SignUp/style';
+import { LogoWrapper, LogoImg } from '@pages/SignUp/style';
 
 import { TermsAgreementLayout, StyledTitle, CheckboxList, CheckboxItem, CheckboxInput, Divider } from './styles';
 
@@ -84,7 +84,7 @@ const TermsAgreement: React.FC = () => {
 
 	return (
 		<OODDFrame>
-			<TopBar LeftButtonSrc={Back} onLeftClick={navigateToLogin} />
+			<TopBar LeftButtonSrc={Back} onClickLeftButton={navigateToLogin} />
 			<TermsAgreementLayout>
 				<LogoWrapper>
 					<LogoImg src={OODDlogo} />
diff --git a/src/pages/TermsAgreement/styles.tsx b/src/pages/TermsAgreement/styles.tsx
index 6bc7ee34..c12d1725 100644
--- a/src/pages/TermsAgreement/styles.tsx
+++ b/src/pages/TermsAgreement/styles.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { StyledText } from '@/components/Text/StyledText';
+import { StyledText } from '@components/Text/StyledText';
 
 export const TermsAgreementLayout = styled.main`
 	display: flex;
diff --git a/src/pages/verification/index.tsx b/src/pages/verification/index.tsx
index 6891d6f2..fcb2d5f3 100644
--- a/src/pages/verification/index.tsx
+++ b/src/pages/verification/index.tsx
@@ -104,7 +104,7 @@ const Verification: React.FC = () => {
 	return (
 		<OODDFrame>
 			<VerificationWrapper>
-				<TopBar text="본인인증" LeftButtonSrc={back} onLeftClick={() => navigate(-1)} />
+				<TopBar text="본인인증" LeftButtonSrc={back} onClickLeftButton={() => navigate(-1)} />
 
 				<Container>
 					<Title>
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 26cbc668..e3847893 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -33,7 +33,7 @@
       "@assets/*": ["assets/*"],
       "@config/*": ["config/*"],
       "@context/*": ["context/*"],
-      "@page/*": ["page/*"],
+      "@pages/*": ["pages/*"],
       "@recoil/*": ["recoil/*"],
       "@utils/*": ["utils/*"],
     },
diff --git a/vite.config.ts b/vite.config.ts
index d8972fc6..cd1583e5 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -20,7 +20,7 @@ export default defineConfig({
 			'@assets': path.resolve(__dirname, 'src/assets'),
 			'@config': path.resolve(__dirname, 'src/config'),
 			'@context': path.resolve(__dirname, 'src/context'),
-			'@page': path.resolve(__dirname, 'src/page'),
+			'@pages': path.resolve(__dirname, 'src/pages'),
 			'@recoil': path.resolve(__dirname, 'src/recoil'),
 			'@utils': path.resolve(__dirname, 'src/utils'),
 		},