feat(community): 비밀번호 변경 페이지 추가

apps/community/src/app/my/change-password/page.tsx

@@ -0,0 +1,16 @@
+import ChangePasswordForm from '~/components/my/change-password/change-password-form';
+import { PageHeader } from '~/components/page-header';
+
+const ChangePasswordPage = () => {
+  return (
+    <>
+      <PageHeader
+        title="비밀번호 변경"
+        description="등록한 비밀번호를 변경할 수 있어요."
+      />
+      <ChangePasswordForm />
+    </>
+  );
+};
+
+export default ChangePasswordPage;

apps/community/src/components/my/change-password/change-password-form.css.ts

@@ -0,0 +1,27 @@
+import { screen, themeVars } from '@aics-client/design-system/styles';
+import { style } from '@vanilla-extract/css';
+
+const formWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  margin: '0 auto',
+  gap: '2rem',
+  width: '60%',
+});
+
+const newPasswordWrapper = style({
+  display: 'grid',
+  gap: themeVars.spacing.xl,
+  ...screen.lg({
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: themeVars.spacing.md,
+  }),
+});
+
+const inputField = style({
+  width: '100%',
+});
+
+export { formWrapper, newPasswordWrapper, inputField };

apps/community/src/components/my/change-password/change-password-form.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { Button, Input } from '@aics-client/design-system';
+import * as styles from '~/components/my/change-password/change-password-form.css';
+
+const changePasswordSchema = z
+  .object({
+    currentPassword: z
+      .string()
+      .min(1, { message: '현재 비밀번호를 입력해주세요.' }),
+    newPassword: z
+      .string()
+      .min(8, { message: '비밀번호는 최소 8자 이상이어야 합니다.' })
+      .regex(
+        /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[~!@#$%^&*])[a-zA-Z0-9~!@#$%^&*]{8,15}$/,
+        { message: '비밀번호는 영문, 숫자, 특수문자를 포함해야 합니다.' },
+      ),
+    confirmNewPassword: z
+      .string()
+      .min(1, { message: '새 비밀번호 확인을 입력해주세요.' }),
+  })
+  .refine((data) => data.newPassword === data.confirmNewPassword, {
+    message: '비밀번호가 일치하지 않습니다.',
+    path: ['confirmNewPassword'],
+  });
+
+const defaultValues = {
+  currentPassword: '',
+  newPassword: '',
+  confirmNewPassword: '',
+};
+
+const ChangePasswordForm = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = useForm<z.infer<typeof changePasswordSchema>>({
+    resolver: zodResolver(changePasswordSchema),
+    mode: 'onChange',
+    defaultValues,
+  });
+
+  const onSubmit = (data: z.infer<typeof changePasswordSchema>) => {
+    // TODO: 비밀번호 변경 API 호출
+    console.log(data);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className={styles.formWrapper}>
+      <Input
+        {...register('currentPassword')}
+        type="password"
+        label="현재 비밀번호"
+        placeholder="현재 비밀번호를 입력해주세요"
+        message={errors.currentPassword?.message}
+      />
+
+      <div className={styles.newPasswordWrapper}>
+        <Input
+          {...register('newPassword')}
+          className={styles.inputField}
+          type="password"
+          label="새 비밀번호"
+          placeholder="변경할 비밀번호를 입력해주세요"
+          message={errors.newPassword?.message}
+        />
+        <Input
+          {...register('confirmNewPassword')}
+          className={styles.inputField}
+          type="password"
+          label="새 비밀번호 확인"
+          placeholder="비밀번호를 다시 입력해주세요"
+          message={errors.confirmNewPassword?.message}
+        />
+      </div>
+
+      <Button type="submit" color="black" disabled={!isValid}>
+        비밀번호 변경
+      </Button>
+    </form>
+  );
+};
+
+export default ChangePasswordForm;

packages/design-system/src/components/button/button.css.ts

@@ -47,6 +47,7 @@ const buttonVariants = recipe({
     disabled: {
       true: {
         cursor: 'default',
+        opacity: themeVars.opacity[75],
       },
       false: {
         cursor: 'pointer',