Revert "[#414] [프로필] 프로필 수정 페이지 (#426)"

This reverts commit 91b8171.

Author: gxxrxn

.storybook/preview.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import type { Preview } from '@storybook/react';
 import '@/styles/global.css';
 
-import Layout from '../src/v1/layout/Layout';
 import ToastProvider from '../src/ui/Base/Toast/ToastProvider';
 
 const preview: Preview = {
@@ -23,9 +22,7 @@ const preview: Preview = {
   decorators: [
     Story => (
       <ToastProvider>
-        <Layout>
-          <Story />
-        </Layout>
+        <Story />
       </ToastProvider>
     ),
   ],

public/icons/close.svg

@@ -1,25 +1,31 @@
 'use client';
 
-import { Suspense } from 'react';
 import useAllJobQuery from '@/queries/job/useAllJobQuery';
 import useMyProfileQuery from '@/queries/user/useMyProfileQuery';
-
-import { isAuthed } from '@/utils/helpers';
 import AuthRequired from '@/ui/AuthRequired';
+import TopNavigation from '@/ui/common/TopNavigation';
+import ProfileForm from '@/ui/Profile/ProfileForm';
+import { isAuthed } from '@/utils/helpers';
+import { Skeleton, VStack } from '@chakra-ui/react';
+import { Suspense } from 'react';
 
-import EditProfile from '@/v1/profile/EditProfile';
-
-/**
- * @todo
- * Fallback UI 추가하기
- */
-
-const EditProfilePage = () => {
+const EditMyPage = () => {
   return (
     <AuthRequired>
-      <Suspense fallback={null}>
-        <Contents />
-      </Suspense>
+      <VStack justify="center" align="center">
+        <TopNavigation pageTitle="내 프로필 수정" />
+        <Suspense
+          fallback={
+            <VStack gap="2rem" align="stretch" w="100%">
+              <Skeleton w="100%" height="6rem" />
+              <Skeleton w="100%" height="6rem" />
+              <Skeleton w="100%" height="6rem" />
+            </VStack>
+          }
+        >
+          <Contents />
+        </Suspense>
+      </VStack>
     </AuthRequired>
   );
 };
@@ -29,8 +35,8 @@ const Contents = () => {
   const { data: profileData } = useMyProfileQuery();
 
   return allJobQuery.isSuccess ? (
-    <EditProfile profile={profileData} jobGroups={allJobQuery.data.jobGroups} />
+    <ProfileForm profile={profileData} jobGroups={allJobQuery.data.jobGroups} />
   ) : null;
 };
 
-export default EditProfilePage;
+export default EditMyPage;

src/app/profile/me/edit/page.tsx

@@ -7,7 +7,6 @@ import ChakraThemeProvider from '@/components/ChakraThemeProvider';
 import ReactQueryProvider from '@/components/ReactQueryProvider';
 import { ReactNode } from 'react';
 import ErrorPage from '@/app/error';
-import ToastProvider from '@/ui/Base/Toast/ToastProvider';
 
 const ContextProvider = ({ children }: { children: ReactNode }) => {
   return (
@@ -16,9 +15,7 @@ const ContextProvider = ({ children }: { children: ReactNode }) => {
         <ReactQueryProvider>
           <ChakraThemeProvider>
             <ErrorBoundary fallbackRender={ErrorPage}>
-              <ToastProvider>
-                <Layout>{children}</Layout>
-              </ToastProvider>
+              <Layout>{children}</Layout>
             </ErrorBoundary>
           </ChakraThemeProvider>
         </ReactQueryProvider>

src/components/ContextProvider.tsx

@@ -16,7 +16,7 @@ const TopNavigation = ({ children }: TopNavigationProps) => {
 
 const LeftItem = ({ children }: ItemProps) => {
   return (
-    <div className="absolute left-[0rem] [&_svg]:h-[2rem] [&_svg]:w-[2rem] [&_svg]:cursor-pointer">
+    <div className="absolute left-[2rem] [&_svg]:h-[2rem] [&_svg]:w-[2rem] [&_svg]:cursor-pointer">
       {children}
     </div>
   );
@@ -32,15 +32,13 @@ const textAligns = {
 const CenterItem = ({ children, textAlign = 'center' }: CenterItemProps) => {
   const alignClassName = textAligns[textAlign];
   return (
-    <div className={`h-[2rem] w-full px-[1.5rem] ${alignClassName}`}>
-      {children}
-    </div>
+    <div className={`w-full px-[3.5rem] ${alignClassName}`}>{children}</div>
   );
 };
 
 const RightItem = ({ children }: ItemProps) => {
   return (
-    <div className="absolute right-[0rem] flex gap-[1rem] [&_svg]:h-[2rem] [&_svg]:w-[2rem] [&_svg]:cursor-pointer">
+    <div className="absolute right-[2rem] flex gap-[1rem] [&_svg]:h-[2rem] [&_svg]:w-[2rem] [&_svg]:cursor-pointer">
       {children}
     </div>
   );