[#414] [프로필] 프로필 수정 페이지

.storybook/preview.tsx

@@ -3,6 +3,7 @@ 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 = {
@@ -22,7 +23,9 @@ const preview: Preview = {
   decorators: [
     Story => (
       <ToastProvider>
-        <Story />
+        <Layout>
+          <Story />
+        </Layout>
       </ToastProvider>
     ),
   ],

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

@@ -1,31 +1,25 @@
 'use client';
 
+import { Suspense } from 'react';
 import useAllJobQuery from '@/queries/job/useAllJobQuery';
 import useMyProfileQuery from '@/queries/user/useMyProfileQuery';
-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 AuthRequired from '@/ui/AuthRequired';
+
+import EditProfile from '@/v1/profile/EditProfile';
+
+/**
+ * @todo
+ * Fallback UI 추가하기
+ */
 
-const EditMyPage = () => {
+const EditProfilePage = () => {
   return (
     <AuthRequired>
-      <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>
+      <Suspense fallback={null}>
+        <Contents />
+      </Suspense>
     </AuthRequired>
   );
 };
@@ -35,8 +29,8 @@ const Contents = () => {
   const { data: profileData } = useMyProfileQuery();
 
   return allJobQuery.isSuccess ? (
-    <ProfileForm profile={profileData} jobGroups={allJobQuery.data.jobGroups} />
+    <EditProfile profile={profileData} jobGroups={allJobQuery.data.jobGroups} />
   ) : null;
 };
 
-export default EditMyPage;
+export default EditProfilePage;

src/components/ContextProvider.tsx

@@ -7,6 +7,7 @@ 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 (
@@ -15,7 +16,9 @@ const ContextProvider = ({ children }: { children: ReactNode }) => {
         <ReactQueryProvider>
           <ChakraThemeProvider>
             <ErrorBoundary fallbackRender={ErrorPage}>
-              <Layout>{children}</Layout>
+              <ToastProvider>
+                <Layout>{children}</Layout>
+              </ToastProvider>
             </ErrorBoundary>
           </ChakraThemeProvider>
         </ReactQueryProvider>

src/stories/Base/InputLength.stories.tsx

@@ -0,0 +1,76 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+
+import Button from '@/ui/Base/Button';
+import Input from '@/ui/Base/Input';
+import InputLength from '@/ui/Base/InputLength';
+import ErrorMessage from '@/ui/Base/ErrorMessage';
+
+const meta: Meta<typeof InputLength> = {
+  title: 'Base/InputLength',
+  component: InputLength,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InputLength>;
+
+type DefaultValues = {
+  password: string;
+};
+
+const InputLengthUseWithForm = () => {
+  const {
+    register,
+    watch,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<DefaultValues>({
+    mode: 'all',
+  });
+
+  const handleSubmitForm: SubmitHandler<DefaultValues> = ({ password }) => {
+    alert(`password: ${password}`);
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(handleSubmitForm)}
+      className="flex w-full flex-col gap-[1.6rem]"
+    >
+      <div className="flex flex-col gap-[0.5rem]">
+        <Input
+          placeholder="비밀번호를 입력해주세요."
+          {...register('password', {
+            required: '필수 항목입니다.',
+            minLength: { value: 2, message: '2자 이상 입력해 주세요.' },
+            maxLength: { value: 10, message: '10자 이하 입력해 주세요.' },
+          })}
+          error={!!errors.password}
+        />
+        <div className="flex flex-row-reverse justify-between gap-[0.4rem]">
+          <InputLength
+            currentValue={watch('password')}
+            isError={!!errors.password}
+            maxLength={10}
+          />
+          {errors.password && (
+            <ErrorMessage>{errors.password.message}</ErrorMessage>
+          )}
+        </div>
+      </div>
+      <Button
+        size="large"
+        type="submit"
+        onClick={handleSubmit(handleSubmitForm)}
+      >
+        Submit
+      </Button>
+    </form>
+  );
+};
+
+export const Default: Story = {
+  render: () => <InputLengthUseWithForm />,
+};

src/stories/layout/Layout.stories.tsx

@@ -1,4 +1,4 @@
-import Layout from '@/v1/layout';
+import Layout from '@/v1/layout/Layout';
 import { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof Layout> = {

src/ui/Base/InputLength.tsx

@@ -0,0 +1,22 @@
+type InputLengthProps = {
+  currentValue: string;
+  isError: boolean;
+  maxLength: number;
+};
+
+const InputLength = ({
+  currentValue = '',
+  isError,
+  maxLength,
+}: InputLengthProps) => {
+  const currentLength = currentValue ? currentValue.length : 0;
+  const textColor = isError ? 'text-warning-800 ' : 'text-main-900';
+
+  return (
+    <div>
+      <span className={textColor}>{currentLength}</span>/{maxLength}
+    </div>
+  );
+};
+
+export default InputLength;

src/ui/Base/TopNavigation.tsx

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