diff --git a/src/components/user/comment/commentComponent/CommentComponentLayout.tsx b/src/components/user/comment/commentComponent/CommentComponentLayout.tsx
index a19b5b45..a9316519 100644
--- a/src/components/user/comment/commentComponent/CommentComponentLayout.tsx
+++ b/src/components/user/comment/commentComponent/CommentComponentLayout.tsx
@@ -5,7 +5,7 @@ import useComment from '../../../../hooks/user/CommentHooks/useComment';
 import ReplyComponent from '../replyComponent/ReplyComponent';
 import ArrowUp from '../../../../assets/ArrowUp.svg';
 import CommentComponent from './commentComponent/CommentComponent';
-import { CommentType } from '../../../../models/comment';
+import type { CommentType } from '../../../../models/comment';
 import dropdownButton from '../../../../assets/dropdownButton.svg';
 import ArrowDown from '../../../../assets/ArrowDown.svg';
 
diff --git a/src/components/user/comment/commentComponent/commentComponent/CommentComponent.tsx b/src/components/user/comment/commentComponent/commentComponent/CommentComponent.tsx
index b5e63ce6..85977be1 100644
--- a/src/components/user/comment/commentComponent/commentComponent/CommentComponent.tsx
+++ b/src/components/user/comment/commentComponent/commentComponent/CommentComponent.tsx
@@ -3,7 +3,7 @@ import * as S from './CommentComponent.styled';
 import chat from '../../../../../assets/chat.svg';
 import { Link } from 'react-router-dom';
 import CommentInput from '../../commentInput/CommentInput';
-import { CommentType } from '../../../../../models/comment';
+import type { CommentType } from '../../../../../models/comment';
 import { ROUTES } from '../../../../../constants/user/routes';
 import Avatar from '../../../../common/avatar/Avatar';
 
diff --git a/src/components/user/customerService/CustomerServiceHeader.tsx b/src/components/user/customerService/CustomerServiceHeader.tsx
index 47a14493..5d3e9939 100644
--- a/src/components/user/customerService/CustomerServiceHeader.tsx
+++ b/src/components/user/customerService/CustomerServiceHeader.tsx
@@ -1,7 +1,4 @@
-import {
-  ArrowUturnLeftIcon,
-  MagnifyingGlassIcon,
-} from '@heroicons/react/24/outline';
+import { MagnifyingGlassIcon, XCircleIcon } from '@heroicons/react/24/outline';
 import * as S from './CustomerServiceHeader.styled';
 import MovedInquiredLink from './MoveInquiredLink';
 import { Outlet } from 'react-router-dom';
@@ -55,7 +52,7 @@ export default function CustomerServiceHeader({
                 aria-label='show all result'
                 onClick={handleReset}
               >
-                <ArrowUturnLeftIcon />
+                <XCircleIcon />
               </S.UturnButton>
             )}
             <S.SearchButton type='submit' aria-label='search'>
diff --git a/src/components/user/customerService/inquiry/Inquiry.tsx b/src/components/user/customerService/inquiry/Inquiry.tsx
index 3ede44c3..af49aef4 100644
--- a/src/components/user/customerService/inquiry/Inquiry.tsx
+++ b/src/components/user/customerService/inquiry/Inquiry.tsx
@@ -65,6 +65,8 @@ export default function Inquiry() {
       content: form.content.trim() !== '',
     };
 
+    console.log(isCategoryOpen);
+
     if (!isValid.category) {
       return handleModalOpen(INQUIRY_MESSAGE.selectCategory);
     }
@@ -188,12 +190,7 @@ export default function Inquiry() {
             </S.InquiryFileWrapper>
           </S.ContentWrapper>
           <S.SendButtonWrapper>
-            <S.SendButton
-              type='submit'
-              onClick={() => setIsCategoryOpen((prev) => !prev)}
-            >
-              제출
-            </S.SendButton>
+            <S.SendButton type='submit'>제출</S.SendButton>
           </S.SendButtonWrapper>
         </S.InquiryWrapper>
       </S.InquiryForm>
diff --git a/src/components/user/customerService/noticeDetail/NoticeDetailBundle.styled.ts b/src/components/user/customerService/noticeDetail/NoticeDetailBundle.styled.ts
index b8dfa27e..c9b9e6aa 100644
--- a/src/components/user/customerService/noticeDetail/NoticeDetailBundle.styled.ts
+++ b/src/components/user/customerService/noticeDetail/NoticeDetailBundle.styled.ts
@@ -1,8 +1,7 @@
 import styled from 'styled-components';
+import { SpinnerWrapperStyled } from '../../mypage/Spinner.styled';
 
-export const SpinnerWrapper = styled.div`
-  height: 60vh;
-`;
+export const SpinnerWrapper = styled(SpinnerWrapperStyled)``;
 
 export const Container = styled.section`
   width: 75%;
diff --git a/src/components/user/customerService/noticeDetail/content/NoticeDetailContent.tsx b/src/components/user/customerService/noticeDetail/content/NoticeDetailContent.tsx
index 45581300..d85e94a2 100644
--- a/src/components/user/customerService/noticeDetail/content/NoticeDetailContent.tsx
+++ b/src/components/user/customerService/noticeDetail/content/NoticeDetailContent.tsx
@@ -1,7 +1,7 @@
 import { EyeIcon } from '@heroicons/react/24/outline';
 import { formatDate } from '../../../../../util/format';
 import * as S from './NoticeDetailContent.styled';
-import logo from '../../../../assets/mainlogo.svg';
+import logo from '../../../../../assets/mainlogo.svg';
 import ContentBorder from '../../../../common/contentBorder/ContentBorder';
 
 interface NoticeDetailContentProps {
diff --git a/src/components/user/home/projectCardLists/ProjectCardLists.tsx b/src/components/user/home/projectCardLists/ProjectCardLists.tsx
index 06ee8194..3c62ab01 100644
--- a/src/components/user/home/projectCardLists/ProjectCardLists.tsx
+++ b/src/components/user/home/projectCardLists/ProjectCardLists.tsx
@@ -12,9 +12,9 @@ import Pagination from '../../../common/pagination/Pagination';
 export type Display = 'flex' | 'grid';
 
 export default function ProjectCardLists() {
+  const [display, setDisplay] = useState<Display>('grid');
   const { projectListsData, isLoading } = useProjectCardListData();
   const { searchFilters, handleUpdateFilters } = useSaveSearchFiltering();
-  const [display, setDisplay] = useState<Display>('grid');
 
   const handleChangePagination = (page: number) => {
     handleUpdateFilters('page', page);
diff --git a/src/components/user/home/searchFiltering/filteringContents/FilteringContents.tsx b/src/components/user/home/searchFiltering/filteringContents/FilteringContents.tsx
index 0bcf8133..9288dbcd 100644
--- a/src/components/user/home/searchFiltering/filteringContents/FilteringContents.tsx
+++ b/src/components/user/home/searchFiltering/filteringContents/FilteringContents.tsx
@@ -1,13 +1,13 @@
 import Filtering from './filtering/Filtering';
 import * as S from './FilteringContents.styled';
+import beginner from '../../../../../assets/beginner.svg';
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
-import SkillTagBox from '../../../../common/skillTagBox/SkillTagBox';
 import React, { useState } from 'react';
 import { useSearchFilteringSkillTag } from '../../../../../hooks/user/useSearchFilteringSkillTag';
 import { useOutsideClick } from '../../../../../hooks/user/useOutsideClick';
 import { useSaveSearchFiltering } from '../../../../../hooks/user/useSaveSearchFiltering';
 import { SEARCH_FILTERING_DEFAULT_VALUE } from '../../../../../constants/user/homeConstants';
-import beginner from '../../../../../assets/beginner.svg';
+import SkillTagBox from '../../../../common/skillTagBox/SkillTagBox';
 
 export default function FilteringContents() {
   const { positionTagsData, methodTagsData } = useSearchFilteringSkillTag();
diff --git a/src/components/user/home/searchFiltering/filteringContents/filtering/Filtering.tsx b/src/components/user/home/searchFiltering/filteringContents/filtering/Filtering.tsx
index 9e5e5b3a..e1ff06db 100644
--- a/src/components/user/home/searchFiltering/filteringContents/filtering/Filtering.tsx
+++ b/src/components/user/home/searchFiltering/filteringContents/filtering/Filtering.tsx
@@ -1,10 +1,11 @@
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import * as S from './Filtering.styled';
 import { useEffect, useState } from 'react';
+import type { MethodTag, PositionTag } from '../../../../../../models/tags';
+import { useOutsideClick } from '../../../../../../hooks/user/useOutsideClick';
 import { useSaveSearchFiltering } from '../../../../../../hooks/user/useSaveSearchFiltering';
-import { MethodTag, PositionTag } from '../../../../../../models/tags';
 import { SEARCH_FILTERING_DEFAULT_VALUE } from '../../../../../../constants/user/homeConstants';
-import { useOutsideClick } from '../../../../../../hooks/user/useOutsideClick';
+
 interface FilteringProps {
   selects: PositionTag[] | MethodTag[];
   defaultValue: string;
diff --git a/src/components/user/manageProjects/CardList.tsx b/src/components/user/manageProjects/CardList.tsx
index a0976f6d..544775b4 100644
--- a/src/components/user/manageProjects/CardList.tsx
+++ b/src/components/user/manageProjects/CardList.tsx
@@ -1,8 +1,7 @@
 import * as S from './CardList.styled';
-
 import type { ManagedProject } from '../../../models/manageMyProject';
 import Card from './Card';
-import CreateButton from '../../assets/createProjectButton.svg';
+import CreateButton from '../../../assets/createProjectButton.svg';
 import { ROUTES } from '../../../constants/user/routes';
 
 interface CardListProps {
diff --git a/src/components/user/manageProjects/passNonPassList/DeleteButton.styled.ts b/src/components/user/manageProjects/passNonPassList/DeleteButton.styled.ts
index 77027c7b..f5d6aa2a 100644
--- a/src/components/user/manageProjects/passNonPassList/DeleteButton.styled.ts
+++ b/src/components/user/manageProjects/passNonPassList/DeleteButton.styled.ts
@@ -5,6 +5,14 @@ export const DeleteButton = styled.button`
     color: #e69191;
     width: 1.2rem;
     height: 1.2rem;
+    border-radius: 50%;
+  }
+
+  &:hover {
+    transform: scale(1.1);
+    svg {
+      color: ${({ theme }) => theme.color.white};
+    }
   }
 
   &:disabled {
diff --git a/src/components/user/manageProjects/passNonPassList/DeleteButton.tsx b/src/components/user/manageProjects/passNonPassList/DeleteButton.tsx
index b1f6bbb8..9847456e 100644
--- a/src/components/user/manageProjects/passNonPassList/DeleteButton.tsx
+++ b/src/components/user/manageProjects/passNonPassList/DeleteButton.tsx
@@ -1,6 +1,6 @@
 import { ButtonHTMLAttributes } from 'react';
 import * as S from './DeleteButton.styled';
-import { XCircleIcon } from '@heroicons/react/24/outline';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 interface DeleteButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   onClick: () => void;
   disabled: boolean;
@@ -8,8 +8,14 @@ interface DeleteButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
 function DeleteButton({ onClick, disabled }: DeleteButtonProps) {
   return (
-    <S.DeleteButton onClick={onClick} disabled={disabled}>
-      <XCircleIcon />
+    <S.DeleteButton
+      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation();
+        onClick();
+      }}
+      disabled={disabled}
+    >
+      <XMarkIcon />
     </S.DeleteButton>
   );
 }
diff --git a/src/components/user/manageProjects/passNonPassList/PassNonPassItem.styled.ts b/src/components/user/manageProjects/passNonPassList/PassNonPassItem.styled.ts
index f34d2d24..42dea82b 100644
--- a/src/components/user/manageProjects/passNonPassList/PassNonPassItem.styled.ts
+++ b/src/components/user/manageProjects/passNonPassList/PassNonPassItem.styled.ts
@@ -6,6 +6,7 @@ export const ItemWrapper = styled.li`
   align-items: center;
   width: 100%;
   padding: 1rem;
+  cursor: pointer;
   border: 1px solid ${({ theme }) => theme.color.grey};
   border-radius: ${({ theme }) => theme.borderRadius.primary};
   transition: all 0.2s ease;
@@ -23,7 +24,6 @@ export const ItemWrapper = styled.li`
 export const NickName = styled.p`
   font-size: ${({ theme }) => theme.heading.small.fontSize};
   font-weight: 400;
-  cursor: pointer;
 
   @media ${({ theme }) => theme.mediaQuery.tablet} {
     font-size: ${({ theme }) => theme.heading.small.tabletFontSize};
diff --git a/src/components/user/manageProjects/passNonPassList/PassNonPassItem.tsx b/src/components/user/manageProjects/passNonPassList/PassNonPassItem.tsx
index 78476d23..7ffed7c8 100644
--- a/src/components/user/manageProjects/passNonPassList/PassNonPassItem.tsx
+++ b/src/components/user/manageProjects/passNonPassList/PassNonPassItem.tsx
@@ -7,25 +7,26 @@ import * as S from './PassNonPassItem.styled';
 interface PassNonPassItemProps {
   userInfo: ApplicantInfo;
   projectData: ProjectDetailPlusExtended;
-  hanldeStatus: ({ status, userId }: useMutationParams) => void;
+  handleStatus: ({ status, userId }: useMutationParams) => void;
   handleUserInfo: (userId: number) => void;
 }
 
 function PassNonPassItem({
   userInfo,
-  hanldeStatus,
+  handleStatus,
   projectData,
   handleUserInfo,
 }: PassNonPassItemProps) {
   return (
-    <S.ItemWrapper>
-      <S.NickName onClick={() => handleUserInfo(userInfo.userId)}>
-        {userInfo.user.nickname}
-      </S.NickName>
+    <S.ItemWrapper
+      onClick={() => handleUserInfo(userInfo.userId)}
+      aria-label='지원자 이력보기'
+    >
+      <S.NickName>{userInfo.user.nickname}</S.NickName>
       <DeleteButton
         disabled={projectData.isDone}
         onClick={() =>
-          hanldeStatus({ status: 'WAITING', userId: userInfo.userId })
+          handleStatus({ status: 'WAITING', userId: userInfo.userId })
         }
       />
     </S.ItemWrapper>
diff --git a/src/components/user/manageProjects/passNonPassList/PassNonPassList.tsx b/src/components/user/manageProjects/passNonPassList/PassNonPassList.tsx
index 8571f160..d5d8b87a 100644
--- a/src/components/user/manageProjects/passNonPassList/PassNonPassList.tsx
+++ b/src/components/user/manageProjects/passNonPassList/PassNonPassList.tsx
@@ -27,7 +27,7 @@ function PassNonPassList({
         <PassNonPassItem
           key={data.userId}
           handleUserInfo={handleUserInfo}
-          hanldeStatus={handleStatus}
+          handleStatus={handleStatus}
           userInfo={data}
           projectData={projectData}
         />
diff --git a/src/components/user/mypage/ContentTab.tsx b/src/components/user/mypage/ContentTab.tsx
index f1d38833..35b32858 100644
--- a/src/components/user/mypage/ContentTab.tsx
+++ b/src/components/user/mypage/ContentTab.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 import * as S from './ContentTab.styled';
 import { Link, Outlet, useLocation } from 'react-router-dom';
+import { ROUTES } from '../../../constants/user/routes';
 import ScrollWrapper from './ScrollWrapper';
 import MovedInquiredLink from '../customerService/MoveInquiredLink';
-import { ROUTES } from '../../../constants/user/routes';
 
 interface Filter {
   title: string;
diff --git a/src/components/user/mypage/Spinner.styled.ts b/src/components/user/mypage/Spinner.styled.ts
index 3af3c123..db3608d0 100644
--- a/src/components/user/mypage/Spinner.styled.ts
+++ b/src/components/user/mypage/Spinner.styled.ts
@@ -10,7 +10,7 @@ const spin = keyframes`
   }
 `;
 
-export const SpinnerWrapper = styled.div`
+export const SpinnerContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -25,3 +25,11 @@ export const Circle = styled.div<{ $size: string; $color: string }>`
   border-radius: 50%;
   animation: ${spin} 1s linear infinite;
 `;
+
+export const SpinnerWrapperStyled = styled.div`
+  width: 100vw;
+  height: 60vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
diff --git a/src/components/user/mypage/Spinner.tsx b/src/components/user/mypage/Spinner.tsx
index 1a44dcc0..9ee09bcc 100644
--- a/src/components/user/mypage/Spinner.tsx
+++ b/src/components/user/mypage/Spinner.tsx
@@ -7,9 +7,9 @@ interface SpinnerProps {
 
 const Spinner = ({ size = '50px', color = '#3e5879' }: SpinnerProps) => {
   return (
-    <S.SpinnerWrapper>
+    <S.SpinnerContainer>
       <S.Circle $size={size} $color={color} />
-    </S.SpinnerWrapper>
+    </S.SpinnerContainer>
   );
 };
 
diff --git a/src/components/user/mypage/activityLog/inquiries/Inquiries.tsx b/src/components/user/mypage/activityLog/inquiries/Inquiries.tsx
index 046e1a36..ecb5ba25 100644
--- a/src/components/user/mypage/activityLog/inquiries/Inquiries.tsx
+++ b/src/components/user/mypage/activityLog/inquiries/Inquiries.tsx
@@ -9,7 +9,7 @@ export default function Inquiries() {
   const { myInquiriesData, isLoading } = useGetMyInquiries();
 
   if (isLoading) {
-    return <Spinner size='50px' color='#3e5879' />;
+    return <Spinner />;
   }
 
   if (!myInquiriesData || myInquiriesData?.length === 0)
diff --git a/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx b/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx
index 82a5735b..e7a5168b 100644
--- a/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx
+++ b/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
+import type { MyInquiries } from '../../../../../../models/activityLog';
 import * as S from './Inquiry.styled';
-import { MyInquiries } from '../../../../../../models/activityLog';
 import { My_INQUIRIES_MESSAGE } from '../../../../../../constants/user/customerService';
 
 interface InquiryProps {
diff --git a/src/components/user/mypage/joinedProject/MyJoinProjects.tsx b/src/components/user/mypage/joinedProject/MyJoinProjects.tsx
index a7d2bdc2..b0e57953 100644
--- a/src/components/user/mypage/joinedProject/MyJoinProjects.tsx
+++ b/src/components/user/mypage/joinedProject/MyJoinProjects.tsx
@@ -11,8 +11,9 @@ const MyJoinProjects = () => {
   const { myJoinedProjectListData, isLoading } = useMyJoinedProjectList();
 
   if (isLoading) {
-    return <Spinner size='50px' color='#3e5879' />;
+    return <Spinner />;
   }
+
   if (!myJoinedProjectListData) return;
 
   return (
diff --git a/src/components/user/mypage/joinedProject/Project.tsx b/src/components/user/mypage/joinedProject/Project.tsx
index ec215e35..31cfd7b9 100644
--- a/src/components/user/mypage/joinedProject/Project.tsx
+++ b/src/components/user/mypage/joinedProject/Project.tsx
@@ -1,6 +1,6 @@
 import * as S from './Project.styled';
 import { EllipsisHorizontalIcon } from '@heroicons/react/24/outline';
-import { JoinedProject } from '../../../../models/userProject';
+import type { JoinedProject } from '../../../../models/userProject';
 import beginner from '../../../../assets/beginner.svg';
 
 interface ProjectProps {
diff --git a/src/components/user/mypage/myProfile/MyProfile.tsx b/src/components/user/mypage/myProfile/MyProfile.tsx
index 0178e634..39a98518 100644
--- a/src/components/user/mypage/myProfile/MyProfile.tsx
+++ b/src/components/user/mypage/myProfile/MyProfile.tsx
@@ -36,7 +36,9 @@ const MyProfile = () => {
       </S.FilterWrapper>
       <ScrollWrapper $height='0%' scrollRef={scrollRef}>
         <S.SectionContainer>
-          <Outlet context={{ myData, scrollRef, handleModalOpen }} />
+          <Outlet
+            context={{ userInfoData: myData, scrollRef, handleModalOpen }}
+          />
         </S.SectionContainer>
       </ScrollWrapper>
       <Modal isOpen={isOpen} onClose={handleModalClose}>
diff --git a/src/components/user/mypage/myProfile/profile/Profile.styled.ts b/src/components/user/mypage/myProfile/profile/Profile.styled.ts
index 23176798..17e46c7d 100644
--- a/src/components/user/mypage/myProfile/profile/Profile.styled.ts
+++ b/src/components/user/mypage/myProfile/profile/Profile.styled.ts
@@ -88,6 +88,10 @@ export const IconWrapper = styled.div`
   border: 1px solid #f0f0f0;
 `;
 
+export const PositionWrapper = styled.div`
+  flex-wrap: wrap;
+`;
+
 export const Bio = styled.p`
   white-space: pre-line;
   word-break: break-word;
diff --git a/src/components/user/mypage/myProfile/profile/Profile.tsx b/src/components/user/mypage/myProfile/profile/Profile.tsx
index b7fc4ddf..85ab6adb 100644
--- a/src/components/user/mypage/myProfile/profile/Profile.tsx
+++ b/src/components/user/mypage/myProfile/profile/Profile.tsx
@@ -2,7 +2,7 @@ import * as S from './Profile.styled';
 import BeginnerIcon from '../../../../../assets/beginner.svg';
 import 'chart.js/auto';
 import { ChartOptions } from 'chart.js';
-import { Link, useOutletContext } from 'react-router-dom';
+import { Link, useLocation, useOutletContext } from 'react-router-dom';
 import { Radar } from 'react-chartjs-2';
 import { useEffect } from 'react';
 import MyProfileWrapper from '../MyProfileWrapper';
@@ -12,10 +12,12 @@ import { ROUTES } from '../../../../../constants/user/routes';
 
 export default function Profile() {
   const {
-    myData,
+    userInfoData,
     scrollRef,
-  }: { myData: UserInfo; scrollRef: React.RefObject<HTMLDivElement> } =
+  }: { userInfoData: UserInfo; scrollRef: React.RefObject<HTMLDivElement> } =
     useOutletContext();
+  const location = useLocation();
+  const myPage = location.pathname.includes('mypage') ? true : false;
 
   useEffect(() => {
     if (scrollRef.current) {
@@ -28,8 +30,8 @@ export default function Profile() {
       <MyProfileWrapper>
         <label>닉네임</label>
         <S.NicknameBackgroundBox>
-          <S.NicknameSpan>{myData.nickname}</S.NicknameSpan>
-          {Boolean(myData.beginner) && (
+          <S.NicknameSpan>{userInfoData.nickname}</S.NicknameSpan>
+          {Boolean(userInfoData.beginner) && (
             <S.IconWrapper>
               <img src={BeginnerIcon} alt='beginner' width='20' height='20' />
             </S.IconWrapper>
@@ -40,8 +42,8 @@ export default function Profile() {
         <label>스킬셋</label>
         <S.BackgroundBox>
           <ul>
-            {myData.skills.length > 0 ? (
-              myData.skills.map((skill) => (
+            {userInfoData.skills.length > 0 ? (
+              userInfoData.skills.map((skill) => (
                 <li key={skill.name}>
                   <img
                     src={skill.img}
@@ -53,7 +55,11 @@ export default function Profile() {
                 </li>
               ))
             ) : (
-              <li>{PROFILE_DEFAULT_MESSAGE.skills}</li>
+              <li>
+                {myPage
+                  ? PROFILE_DEFAULT_MESSAGE.mySkills
+                  : PROFILE_DEFAULT_MESSAGE.skills}
+              </li>
             )}
           </ul>
         </S.BackgroundBox>
@@ -61,31 +67,40 @@ export default function Profile() {
       <MyProfileWrapper>
         <label>포지션</label>
         <S.BackgroundWrapper>
-          <div>
-            {myData.skills.length > 0 ? (
-              myData.positions
+          <S.PositionWrapper>
+            {userInfoData.skills.length > 0 ? (
+              userInfoData.positions
                 .sort()
                 .map((position) => (
                   <span key={position.name}>{position.name}</span>
                 ))
             ) : (
-              <span>{PROFILE_DEFAULT_MESSAGE.positions}</span>
+              <span>
+                {myPage
+                  ? PROFILE_DEFAULT_MESSAGE.myPositions
+                  : PROFILE_DEFAULT_MESSAGE.positions}
+              </span>
             )}
-          </div>
+          </S.PositionWrapper>
         </S.BackgroundWrapper>
       </MyProfileWrapper>
       <MyProfileWrapper>
         <label>깃허브</label>
         <S.BackgroundWrapper>
-          <span>{myData.github || PROFILE_DEFAULT_MESSAGE.github}</span>
+          <span>
+            {userInfoData.github ||
+              (myPage
+                ? PROFILE_DEFAULT_MESSAGE.myGithub
+                : PROFILE_DEFAULT_MESSAGE.github)}
+          </span>
         </S.BackgroundWrapper>
       </MyProfileWrapper>
       <S.List>
         <label>경&nbsp;&nbsp;&nbsp;력</label>
         <S.BackgroundBox>
           <ul>
-            {myData.career?.length ? (
-              myData.career?.map((career) => (
+            {userInfoData.career?.length ? (
+              userInfoData.career?.map((career) => (
                 <li key={`-${career.name}`}>
                   <span>{career.name}</span> ({career.periodStart.slice(0, 10)}{' '}
                   ~ {career.periodEnd.slice(0, 10)}{' '}
@@ -93,7 +108,11 @@ export default function Profile() {
                 </li>
               ))
             ) : (
-              <li>{PROFILE_DEFAULT_MESSAGE.career}</li>
+              <li>
+                {myPage
+                  ? PROFILE_DEFAULT_MESSAGE.myCareer
+                  : PROFILE_DEFAULT_MESSAGE.career}
+              </li>
             )}
           </ul>
         </S.BackgroundBox>
@@ -101,7 +120,12 @@ export default function Profile() {
       <S.List>
         <label>소&nbsp;&nbsp;&nbsp;개</label>
         <S.BackgroundBox>
-          <S.Bio>{myData.bio || PROFILE_DEFAULT_MESSAGE.bio}</S.Bio>
+          <S.Bio>
+            {userInfoData.bio ||
+              (myPage
+                ? PROFILE_DEFAULT_MESSAGE.myBio
+                : PROFILE_DEFAULT_MESSAGE.bio)}
+          </S.Bio>
         </S.BackgroundBox>
       </S.List>
 
@@ -123,7 +147,7 @@ export default function Profile() {
           </S.ChartBox>
         </S.BackgroundBox>
       </S.List>
-      <Link to={ROUTES.changePw}>비밀번호 재설정</Link>
+      {myPage && <Link to={ROUTES.changePw}>비밀번호 재설정</Link>}
     </S.ProfileSection>
   );
 }
diff --git a/src/components/user/userPage/userProfile/UserProfile.tsx b/src/components/user/userPage/userProfile/UserProfile.tsx
index 02accded..fb30315d 100644
--- a/src/components/user/userPage/userProfile/UserProfile.tsx
+++ b/src/components/user/userPage/userProfile/UserProfile.tsx
@@ -1,94 +1,43 @@
-import * as S from '../../';
-import BeginnerIcon from '../../../assets/beginner.svg';
-import { useParams } from 'react-router-dom';
+import * as S from '../../../user/mypage/myProfile/MyProfile.styled';
+import { Outlet, useParams } from 'react-router-dom';
 import { useUserProfileInfo } from '../../../../hooks/user/useUserInfo';
-import Title from '../../../common/title/Title';
+import { useModal } from '../../../../hooks/useModal';
+import { useRef } from 'react';
+import NoMyInfo from '../../mypage/myProfile/NoMyInfo';
+import Spinner from '../../mypage/Spinner';
+import ScrollWrapper from '../../mypage/ScrollWrapper';
+import Modal from '../../../common/modal/Modal';
 
 const UserProfile = () => {
   const { userId } = useParams();
-  const { userData } = useUserProfileInfo(Number(userId));
+  const { userData, isLoading } = useUserProfileInfo(Number(userId));
+  const { isOpen, message, handleModalOpen, handleModalClose } = useModal();
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  if (isLoading) {
+    return <Spinner size='50px' color='#3e5879' />;
+  }
+
+  if (!userData) {
+    return <NoMyInfo />;
+  }
 
   return (
-    <>
-      <S.TitleWrapper>
-        <Title size='semiLarge'>유저 정보</Title>
-      </S.TitleWrapper>
-      <S.Container>
-        <S.ProfileSection>
-          <S.Wrapper>
-            <label>닉네임</label>
-            <S.BackgroundWrapper>
-              <span>{userData?.nickname}</span>
-              <S.IconWrapper>
-                {userData?.beginner === true ? (
-                  <img
-                    src={BeginnerIcon}
-                    alt='beginner'
-                    width='16'
-                    height='16'
-                  />
-                ) : (
-                  ''
-                )}
-              </S.IconWrapper>
-            </S.BackgroundWrapper>
-          </S.Wrapper>
-          <S.Wrapper>
-            <label>스킬셋</label>
-            <S.BackgroundBox>
-              <ul>
-                {userData?.skills.map((skill) => (
-                  <li key={skill.name}>
-                    <img
-                      src={skill.img}
-                      alt={skill.name}
-                      width='40'
-                      height='40'
-                    />
-                    <span>{skill.name}</span>
-                  </li>
-                ))}
-              </ul>
-            </S.BackgroundBox>
-          </S.Wrapper>
-          <S.Wrapper>
-            <label>포지션</label>
-            <S.BackgroundWrapper>
-              {userData?.positions.map((position) => (
-                <span key={position.name}>{position.name}</span>
-              ))}
-            </S.BackgroundWrapper>
-          </S.Wrapper>
-          <S.Wrapper>
-            <label>깃허브</label>
-            <S.BackgroundWrapper>
-              <span>{userData?.github}</span>
-            </S.BackgroundWrapper>
-          </S.Wrapper>
-          <S.List>
-            <label>경&nbsp;&nbsp;&nbsp;력</label>
-            <S.BackgroundBox>
-              <ul>
-                {userData?.career?.map((career) => (
-                  <li key={career.name}>
-                    <span>{career.name}</span> (
-                    {career.periodStart.slice(0, 10)} ~{' '}
-                    {career.periodEnd.slice(0, 10)}{' '}
-                    <span> - {career.role}</span>)
-                  </li>
-                ))}
-              </ul>
-            </S.BackgroundBox>
-          </S.List>
-          <S.List>
-            <label>소&nbsp;&nbsp;&nbsp;개</label>
-            <S.BackgroundBox>
-              <S.Bio>{userData?.bio}</S.Bio>
-            </S.BackgroundBox>
-          </S.List>
-        </S.ProfileSection>
-      </S.Container>
-    </>
+    <S.Container>
+      <S.FilterWrapper>
+        <S.FilterTitle>유저정보</S.FilterTitle>
+      </S.FilterWrapper>
+      <ScrollWrapper $height='0%' scrollRef={scrollRef}>
+        <S.SectionContainer>
+          <Outlet
+            context={{ userInfoData: userData, scrollRef, handleModalOpen }}
+          />
+        </S.SectionContainer>
+      </ScrollWrapper>
+      <Modal isOpen={isOpen} onClose={handleModalClose}>
+        {message}
+      </Modal>
+    </S.Container>
   );
 };
 
diff --git a/src/constants/sidebarItems.tsx b/src/constants/sidebarItems.tsx
index d1567109..ee3a9571 100644
--- a/src/constants/sidebarItems.tsx
+++ b/src/constants/sidebarItems.tsx
@@ -1,9 +1,9 @@
+import { ROUTES } from './user/routes';
 import {
   UserGroupIcon,
   PencilSquareIcon,
   UserPlusIcon,
 } from '@heroicons/react/24/outline';
-import { ROUTES } from './user/routes';
 
 export const applicantsMenuItems = (projectId: number, isDone?: boolean) => {
   return [
diff --git a/src/constants/user/authConstants.ts b/src/constants/user/authConstants.ts
index ac9b25a6..e64d3ef9 100644
--- a/src/constants/user/authConstants.ts
+++ b/src/constants/user/authConstants.ts
@@ -1,7 +1,7 @@
-import kakao from '../assets/kakao.svg';
-import naver from '../assets/naver.svg';
-import google from '../assets/google.svg';
-import github from '../assets/github.svg';
+import kakao from '../../assets/kakao.svg';
+import naver from '../../assets/naver.svg';
+import google from '../../assets/google.svg';
+import github from '../../assets/github.svg';
 
 export const AUTH_MESSAGE = {
   isNotToken: '로그인 토큰이 존재하지 않습니다.',
diff --git a/src/constants/user/myPageProfile.ts b/src/constants/user/myPageProfile.ts
index d9ea3c55..eff0d123 100644
--- a/src/constants/user/myPageProfile.ts
+++ b/src/constants/user/myPageProfile.ts
@@ -1,7 +1,12 @@
 export const PROFILE_DEFAULT_MESSAGE = {
-  github: '깃허브를 공유하세요.',
-  positions: '포지션을 선택해주세요.',
-  skills: '스킬을 선택해주세요.',
-  career: '경력을 기록하세요.',
-  bio: '소개를 적어주세요.',
+  myGithub: '깃허브를 공유하세요.',
+  myPositions: '포지션을 선택해주세요.',
+  mySkills: '스킬을 선택해주세요.',
+  myCareer: '경력을 기록하세요.',
+  myBio: '소개를 적어주세요.',
+  github: '깃허브 링크가 없습니다.',
+  positions: '선택한 포지션이 없습니다.',
+  skills: '선택한 스킬이 없습니다.',
+  career: '기록한 경력이 없습니다.',
+  bio: '소개가 없습니다.',
 };
diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx
index 4596c1fb..632497bb 100644
--- a/src/pages/login/Login.tsx
+++ b/src/pages/login/Login.tsx
@@ -7,15 +7,15 @@ import { z } from 'zod';
 import { Controller, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import Button from '../../components/common/Button/Button';
-import { useAuth } from '../../hooks/useAuth';
-import { useModal } from '../../hooks/useModal';
-import Modal from '../../components/common/modal/Modal';
 import {
   ERROR_MESSAGES,
   OAUTH_PROVIDERS,
 } from '../../constants/user/authConstants';
-import InputText from '../../components/user/auth/InputText';
+import { useAuth } from '../../hooks/useAuth';
 import { ROUTES } from '../../constants/user/routes';
+import { useModal } from '../../hooks/useModal';
+import Modal from '../../components/common/modal/Modal';
+import InputText from '../../components/user/auth/InputText';
 
 const loginSchema = z.object({
   email: z
diff --git a/src/pages/login/LoginSuccess.tsx b/src/pages/login/LoginSuccess.tsx
index cb42cae1..53a33a2b 100644
--- a/src/pages/login/LoginSuccess.tsx
+++ b/src/pages/login/LoginSuccess.tsx
@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import useAuthStore from '../../store/authStore';
+import { ROUTES } from '../../constants/user/routes';
 import * as S from './Login.styled';
 import { Spinner } from '../../components/common/loadingSpinner/LoadingSpinner.styled';
 import Modal from '../../components/common/modal/Modal';
 import { useModal } from '../../hooks/useModal';
-import { ROUTES } from '../../constants/user/routes';
 import { AUTH_MESSAGE } from '../../constants/user/authConstants';
 
 function LoginSuccess() {
diff --git a/src/pages/user/changePassword/ChangePassword.tsx b/src/pages/user/changePassword/ChangePassword.tsx
index 41e5327b..2f58dc4f 100644
--- a/src/pages/user/changePassword/ChangePassword.tsx
+++ b/src/pages/user/changePassword/ChangePassword.tsx
@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import Mainlogo from '../../assets/mainlogo.svg';
+import Mainlogo from '../../../assets/mainlogo.svg';
 import { z } from 'zod';
 import { Controller, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
diff --git a/src/pages/user/customerService/faq/FAQ.styled.ts b/src/pages/user/customerService/faq/FAQ.styled.ts
index 2efc6015..cebc2b9a 100644
--- a/src/pages/user/customerService/faq/FAQ.styled.ts
+++ b/src/pages/user/customerService/faq/FAQ.styled.ts
@@ -1,8 +1,7 @@
 import styled from 'styled-components';
+import { SpinnerWrapperStyled } from '../../../../components/user/mypage/Spinner.styled';
 
-export const SpinnerWrapper = styled.div`
-  height: 60vh;
-`;
+export const SpinnerWrapper = styled(SpinnerWrapperStyled)``;
 
 export const Container = styled.section`
   margin-top: 2rem;
diff --git a/src/pages/user/customerService/notice/Notice.styled.ts b/src/pages/user/customerService/notice/Notice.styled.ts
index 60578597..42c0d321 100644
--- a/src/pages/user/customerService/notice/Notice.styled.ts
+++ b/src/pages/user/customerService/notice/Notice.styled.ts
@@ -1,9 +1,8 @@
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
+import { SpinnerWrapperStyled } from '../../../../components/user/mypage/Spinner.styled';
 
-export const SpinnerWrapper = styled.div`
-  height: 60vh;
-`;
+export const SpinnerWrapper = styled(SpinnerWrapperStyled)``;
 
 export const Container = styled.section`
   margin-top: 2rem;
diff --git a/src/pages/user/main/Create.tsx b/src/pages/user/main/Create.tsx
index 233ff70d..038e74b3 100644
--- a/src/pages/user/main/Create.tsx
+++ b/src/pages/user/main/Create.tsx
@@ -1,5 +1,5 @@
 import * as S from './About.styled';
-import createImg from '../../assets/create.svg';
+import createImg from '../../../assets/create.svg';
 import { forwardRef } from 'react';
 interface CreateProps {
   ref?: React.Ref<HTMLDivElement>;
diff --git a/src/pages/user/main/HeroSection.tsx b/src/pages/user/main/HeroSection.tsx
index 9ad2ebd7..a0a5e5c0 100644
--- a/src/pages/user/main/HeroSection.tsx
+++ b/src/pages/user/main/HeroSection.tsx
@@ -1,6 +1,6 @@
 import * as S from './HeroSection.styled';
-import landimg from '../../assets/landing.svg';
-import DownArrow from '../../assets/arrow.svg';
+import landimg from '../../../assets/landing.svg';
+import DownArrow from '../../../assets/arrow.svg';
 import { Link } from 'react-router-dom';
 import { ROUTES } from '../../../constants/user/routes';
 import Button from '../../../components/common/Button/Button';
diff --git a/src/pages/user/main/Manage.tsx b/src/pages/user/main/Manage.tsx
index 1f0401da..7fbbcb74 100644
--- a/src/pages/user/main/Manage.tsx
+++ b/src/pages/user/main/Manage.tsx
@@ -1,5 +1,5 @@
 import * as S from './About.styled';
-import manageImg from '../../assets/manage_project.svg';
+import manageImg from '../../../assets/manage_project.svg';
 import { forwardRef } from 'react';
 interface ManageProps {
   ref?: React.Ref<HTMLDivElement>;
diff --git a/src/pages/user/main/Project.tsx b/src/pages/user/main/Project.tsx
index 56dd61e5..6add8af6 100644
--- a/src/pages/user/main/Project.tsx
+++ b/src/pages/user/main/Project.tsx
@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import ProjectImg from '../../assets/project.svg';
+import ProjectImg from '../../../assets/project.svg';
 import * as S from './About.styled';
 
 interface ProjectProps {
diff --git a/src/pages/user/main/Result.tsx b/src/pages/user/main/Result.tsx
index 2fa7bcb6..74aeeb45 100644
--- a/src/pages/user/main/Result.tsx
+++ b/src/pages/user/main/Result.tsx
@@ -1,5 +1,5 @@
 import * as S from './About.styled';
-import resultImg from '../../assets/result_project.svg';
+import resultImg from '../../../assets/result_project.svg';
 import { forwardRef } from 'react';
 interface ResultProps {
   ref?: React.Ref<HTMLDivElement>;
diff --git a/src/pages/user/manage/myProjectParticipantsPass/MyProjectVolunteersPass.styled.ts b/src/pages/user/manage/myProjectParticipantsPass/MyProjectVolunteersPass.styled.ts
index 712e8ed2..2990927e 100644
--- a/src/pages/user/manage/myProjectParticipantsPass/MyProjectVolunteersPass.styled.ts
+++ b/src/pages/user/manage/myProjectParticipantsPass/MyProjectVolunteersPass.styled.ts
@@ -5,6 +5,7 @@ export const Container = styled.div`
   justify-content: center;
   align-items: center;
   margin-top: 24px;
+  padding: 0 60px;
 `;
 
 export const Title = styled.h1`
diff --git a/src/pages/user/manage/myProjectParticipantsPass/MyProjectVolunteersPass.tsx b/src/pages/user/manage/myProjectParticipantsPass/MyProjectVolunteersPass.tsx
index b60bf2d1..bd59d00a 100644
--- a/src/pages/user/manage/myProjectParticipantsPass/MyProjectVolunteersPass.tsx
+++ b/src/pages/user/manage/myProjectParticipantsPass/MyProjectVolunteersPass.tsx
@@ -59,7 +59,7 @@ const MyProjectVolunteersPass = () => {
                 )}
               </S.ListWrapper>
               <S.ListWrapper>
-                <S.Title>불 합격자 리스트</S.Title>
+                <S.Title>불합격자 리스트</S.Title>
                 {projectData && (
                   <PassNonPassList
                     handleStatus={handlePassNonPassStatus}
diff --git a/src/pages/user/manage/myProjectVolunteer/MyProjectVolunteer.styled.ts b/src/pages/user/manage/myProjectVolunteer/MyProjectVolunteer.styled.ts
index 24c116a3..e1d189db 100644
--- a/src/pages/user/manage/myProjectVolunteer/MyProjectVolunteer.styled.ts
+++ b/src/pages/user/manage/myProjectVolunteer/MyProjectVolunteer.styled.ts
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 export const Container = styled.div`
   display: flex;
   margin-top: 24px;
+  padding: 0 60px;
 `;
 
 export const ContentWrapper = styled.div`
diff --git a/src/pages/user/userpage/UserPage.tsx b/src/pages/user/userpage/UserPage.tsx
index 46b81c0a..53e54e45 100644
--- a/src/pages/user/userpage/UserPage.tsx
+++ b/src/pages/user/userpage/UserPage.tsx
@@ -5,7 +5,6 @@ import loadingImg from '../../../assets/loadingImg.svg';
 import { ROUTES } from '../../../constants/user/routes';
 import { useUserProfileInfo } from '../../../hooks/user/useUserInfo';
 import Sidebar from '../../../components/common/sidebar/Sidebar';
-import ScrollWrapper from '../../../components/user/mypage/ScrollWrapper';
 
 const UserPage = () => {
   const { userId } = useParams();
@@ -17,7 +16,7 @@ const UserPage = () => {
       icon: <UserIcon width='20px' height='20px' />,
     },
     {
-      label: '참여한 프로젝트 현황',
+      label: '참여 프로젝트',
       path: `${ROUTES.userpage}/${userId}/${ROUTES.userJoinedProject}`,
       icon: <DocumentTextIcon width='20px' height='20px' />,
     },
@@ -32,9 +31,7 @@ const UserPage = () => {
         profileImage={isLoading ? loadingImg : userData?.profileImg}
       />
       <S.Wrapper>
-        <ScrollWrapper>
-          <Outlet />
-        </ScrollWrapper>
+        <Outlet />
       </S.Wrapper>
     </S.Container>
   );
diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx
index f26e47b3..e83c68c1 100644
--- a/src/routes/AppRoutes.tsx
+++ b/src/routes/AppRoutes.tsx
@@ -319,6 +319,7 @@ const AppRoutes = () => {
         {
           path: '',
           element: <UserProfile />,
+          children: [{ index: true, element: <Profile /> }],
         },
         {
           path: ROUTES.userJoinedProject,