[feat] add forms to mypage

src/app/mypage/components/Button.module.css

@@ -0,0 +1,14 @@
+.button {
+  width: 100%;
+  background-color: var(--violet);
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 24px;
+  color: var(--white);
+}
+
+.button:disabled {
+  background-color: var(--gray-400);
+  cursor: auto;
+}

src/app/mypage/components/Button.tsx

@@ -0,0 +1,18 @@
+import { ButtonHTMLAttributes, PropsWithChildren } from 'react';
+import styles from './Button.module.css';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string;
+}
+
+export default function Button({
+  className = '',
+  children,
+  ...props
+}: PropsWithChildren<ButtonProps>) {
+  return (
+    <button className={`${styles.button} ${className}`} {...props}>
+      {children}
+    </button>
+  );
+}

src/app/mypage/components/FileInput.module.css

@@ -0,0 +1,32 @@
+.label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100px;
+  height: 100px;
+  border-radius: 8px;
+  background-color: var(--gray-200);
+  cursor: pointer;
+  position: relative;
+}
+
+.iconContainer {
+  position: relative;
+  width: 20px;
+  height: 20px;
+}
+
+.input {
+  display: none;
+}
+
+@media screen and (min-width: 768px) {
+  .label {
+    width: 182px;
+    height: 182px;
+  }
+  .imageContainer {
+    width: 30px;
+    height: 30px;
+  }
+}

src/app/mypage/components/FileInput.tsx

@@ -0,0 +1,44 @@
+import { ChangeEvent, useState } from 'react';
+import Image from 'next/image';
+import { UseFormSetValue } from 'react-hook-form';
+import { FormValues } from './ProfileForm';
+import styles from './FileInput.module.css';
+
+interface FileInputProps {
+  name: 'imgFile';
+  setValue: UseFormSetValue<FormValues>;
+}
+
+export default function FileInput({ name, setValue }: FileInputProps) {
+  const [preview, setPreview] = useState('');
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      setPreview(URL.createObjectURL(file));
+      setValue('image', file);
+    }
+  };
+
+  return (
+    <>
+      <label className={styles.label} htmlFor={name}>
+        {preview ? (
+          <Image src={preview} alt="미리보기" fill />
+        ) : (
+          <div className={styles.iconContainer}>
+            <Image src="/icons/add.svg" alt="이미지 추가" fill />
+          </div>
+        )}
+      </label>
+      <input
+        className={styles.input}
+        type="file"
+        accept="image/png, image/jpeg"
+        name={name}
+        id={name}
+        onChange={handleChange}
+      />
+    </>
+  );
+}

src/app/mypage/components/Input.module.css

@@ -0,0 +1,44 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.inputWrapper {
+  position: relative;
+}
+
+.input {
+  width: 100%;
+  border: 1px solid var(--gray-300);
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+  color: var(--black-100);
+  padding: 12px 16px;
+}
+
+.input:read-only {
+  outline: none;
+}
+
+.input:focus:not(:read-only) {
+  outline-color: var(--violet);
+}
+
+.input::placeholder {
+  color: var(--gray-400);
+}
+
+.errorFocus {
+  outline: 1px solid var(--red);
+}
+
+.error {
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  color: var(--red);
+}

src/app/mypage/components/Input.tsx

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import { FieldError, UseFormRegisterReturn } from 'react-hook-form';
+import Label from './Label';
+import styles from './Input.module.css';
+
+interface InputProps {
+  type: string;
+  name: string;
+  className?: string;
+  label?: string;
+  placeholder?: string;
+  children?: ReactNode;
+  register?: UseFormRegisterReturn;
+  error?: FieldError;
+  readOnly?: boolean;
+}
+
+export default function Input({
+  type,
+  name,
+  className = '',
+  label = '',
+  placeholder = '',
+  children,
+  register,
+  error,
+  readOnly = false,
+}: InputProps) {
+  return (
+    <div className={`${styles.container} ${className}`}>
+      <Label htmlFor={name}>{label}</Label>
+      <div className={styles.inputWrapper}>
+        <input
+          className={`${styles.input} ${error ? styles.errorFocus : ''}`}
+          type={type}
+          placeholder={placeholder}
+          readOnly={readOnly}
+          {...register}
+        />
+        {children}
+        {error && <span className={styles.error}>{error.message}</span>}
+      </div>
+    </div>
+  );
+}

src/app/mypage/components/Label.module.css

@@ -0,0 +1,13 @@
+.label {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  color: var(--black-100);
+}
+
+@media screen and (min-width: 768px) {
+  .label {
+    font-size: 16px;
+    line-height: 26px;
+  }
+}

src/app/mypage/components/Label.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import styles from './Label.module.css';
+
+interface LabelProps {
+  htmlFor: string;
+  children?: ReactNode;
+}
+
+export default function Label({ htmlFor, children }: LabelProps) {
+  return (
+    <label className={styles.label} htmlFor={htmlFor}>
+      {children}
+    </label>
+  );
+}

src/app/mypage/components/PasswordForm.module.css

@@ -0,0 +1,28 @@
+.form h2 {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 26px;
+  color: var(--black-100);
+  margin-bottom: 40px;
+}
+
+.input {
+  margin-bottom: 16px;
+}
+
+.button {
+  margin-top: 24px;
+  padding: 15px 113.5px;
+}
+
+@media screen and (min-width: 768px) {
+  .form h2 {
+    font-size: 24px;
+    line-height: 32px;
+    margin-bottom: 24px;
+  }
+
+  .button {
+    padding: 14px 236px;
+  }
+}

src/app/mypage/components/PasswordForm.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import Input from './Input';
+import Button from './Button';
+import styles from './PasswordForm.module.css';
+
+interface FormValues {
+  currentPassword: string;
+  newPassword: string;
+  newPasswordConfirmation: string;
+}
+
+export default function PasswordForm() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+    watch,
+    trigger,
+  } = useForm<FormValues>({ mode: 'onChange' });
+
+  const watchedPassword = watch('newPassword');
+
+  const onSubmit = () => {};
+
+  useEffect(() => {
+    if (watchedPassword) {
+      trigger('newPasswordConfirmation');
+    }
+  }, [watchedPassword, trigger]);
+
+  return (
+    <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
+      <h2>비밀번호 변경</h2>
+      <Input
+        className={styles.input}
+        type="password"
+        name="currentPassword"
+        label="현재 비밀번호"
+        placeholder="비밀번호 입력"
+      />
+      <Input
+        className={styles.input}
+        type="password"
+        name="newPassword"
+        label="새 비밀번호"
+        placeholder="새 비밀번호 입력"
+        register={register('newPassword', {
+          minLength: {
+            value: 8,
+            message: '비밀번호를 8자 이상 입력해주세요.',
+          },
+        })}
+        error={errors.newPassword}
+      />
+      <Input
+        type="password"
+        name="newPasswordConfirmation"
+        label="새 비밀번호 확인"
+        placeholder="새 비밀번호 확인"
+        register={register('newPasswordConfirmation', {
+          validate: {
+            matchesPassword: (value) =>
+              value === watchedPassword || '비밀번호가 일치하지 않습니다.',
+          },
+        })}
+        error={errors.newPasswordConfirmation}
+      />
+      <Button className={styles.button} type="submit" disabled={!isValid}>
+        변경
+      </Button>
+    </form>
+  );
+}

src/app/mypage/components/ProfileForm.module.css

@@ -0,0 +1,28 @@
+.form h2 {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 26px;
+  color: var(--black-100);
+  margin-bottom: 40px;
+}
+
+.input {
+  margin-bottom: 16px;
+}
+
+.button {
+  margin-top: 24px;
+  padding: 15px 113.5px;
+}
+
+@media screen and (min-width: 768px) {
+  .form h2 {
+    font-size: 24px;
+    line-height: 32px;
+    margin-bottom: 24px;
+  }
+
+  .button {
+    padding: 14px 236px;
+  }
+}