[feat] add mypage layout and responsive CSS

src/app/(with-header-sidebar)/mypage/_components/AlertModal.module.css

@@ -0,0 +1,31 @@
+.modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 26px;
+  color: var(--black-100);
+  padding: 32px 40px;
+}
+
+.button {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 24px;
+  padding: 9px 83.5px;
+}
+
+@media screen and (min-width: 768px) {
+  .modal {
+    font-size: 20px;
+    line-height: 32px;
+    padding: 40px 64px;
+  }
+  .button {
+    font-size: 16px;
+    line-height: 26px;
+    padding: 11px 106px;
+  }
+}

src/app/(with-header-sidebar)/mypage/_components/AlertModal.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import Button from '@/components/Button';
+import styles from './AlertModal.module.css';
+import useModalStore from '../_store/modalStore';
+
+export default function AlertModal({ children }: { children: ReactNode }) {
+  const { closeModal } = useModalStore();
+
+  return (
+    <div className={styles.modal}>
+      {children}
+      <Button className={styles.button} onClick={closeModal}>
+        확인
+      </Button>
+    </div>
+  );
+}

src/app/mypage/components/FileInput.module.css → src/app/(with-header-sidebar)/mypage/_components/FileInput.module.css

@@ -20,6 +20,26 @@
   display: none;
 }
 
+.image {
+  border-radius: 8px;
+}
+
+.hoverContent {
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.label:hover .image {
+  filter: brightness(50%);
+  transition: filter 0.3s ease-in-out;
+}
+
+.label:hover .hoverContent {
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+  z-index: 1;
+}
+
 @media screen and (min-width: 768px) {
   .label {
     width: 182px;

src/app/mypage/components/FileInput.tsx → src/app/(with-header-sidebar)/mypage/_components/FileInput.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect } from 'react';
 import { ChangeEvent, useState } from 'react';
 import Image from 'next/image';
@@ -31,7 +33,16 @@ export default function FileInput({ name, setValue, url, id }: FileInputProps) {
     <>
       <label className={styles.label} htmlFor={id}>
         {preview ? (
-          <Image src={preview} alt="미리보기" fill />
+          <>
+            <Image src={preview} alt="미리보기" fill className={styles.image} />
+            <Image
+              src="/icons/edit.svg"
+              alt="이미지수정"
+              width={30}
+              height={30}
+              className={styles.hoverContent}
+            />
+          </>
         ) : (
           <div className={styles.iconContainer}>
             <Image src="/icons/add.svg" alt="이미지 추가" fill />

src/app/(with-header-sidebar)/mypage/_components/Form.module.css

@@ -0,0 +1,64 @@
+.form {
+  background-color: var(--white);
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.profile {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
+.userInfo {
+  flex: 1;
+}
+
+.form h2 {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 26px;
+  color: var(--black-100);
+  margin-bottom: 40px;
+}
+
+.input {
+  margin-bottom: 16px;
+}
+
+.button {
+  line-height: 24px;
+  margin-top: 24px;
+  padding: 15px 0;
+}
+
+@media screen and (min-width: 768px) {
+  .form {
+    padding: 24px;
+  }
+
+  .form h2 {
+    font-size: 24px;
+    line-height: 32px;
+    margin-bottom: 24px;
+  }
+
+  .profile {
+    flex-direction: row;
+    gap: 42px;
+  }
+
+  .button {
+    padding: 14px 0;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .form {
+    max-width: 672px;
+  }
+
+  .userInfo {
+    max-width: 400px;
+  }
+}

src/app/mypage/components/Input.tsx → src/app/(with-header-sidebar)/mypage/_components/Input.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { ReactNode } from 'react';
 import { FieldError, UseFormRegisterReturn } from 'react-hook-form';
 import Label from './Label';
@@ -38,8 +40,8 @@ export default function Input({
           {...register}
         />
         {children}
-        {error && <span className={styles.error}>{error.message}</span>}
       </div>
+      {error && <span className={styles.error}>{error.message}</span>}
     </div>
   );
 }

src/app/mypage/components/PasswordForm.tsx → src/app/(with-header-sidebar)/mypage/_components/PasswordForm.tsx

@@ -1,10 +1,14 @@
+'use client';
+
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import Input from './Input';
 import Button from '@/components/Button';
-import { ERROR_MESSAGES } from '../constants/message';
+import { ERROR_MESSAGES } from '../_constants/message';
 import styles from './Form.module.css';
-import { updatePassword } from '../lib/authHelper';
+import useModalStore from '../_store/modalStore';
+import axios from '../_lib/axios';
+import AlertModal from './AlertModal';
 
 export interface PasswordFormValues {
   currentPassword: string;
@@ -16,18 +20,43 @@ export default function PasswordForm() {
   const {
     register,
     handleSubmit,
-    formState: { errors },
+    formState: { errors, isValid },
     watch,
     trigger,
     setError,
     reset,
   } = useForm<PasswordFormValues>({ mode: 'onChange' });
+  const { openModal } = useModalStore();
 
   const customIsValid = Object.keys(errors).length === 0;
   const watchedPassword = watch('newPassword');
 
-  const onSubmit = async (data: PasswordFormValues) =>
-    updatePassword(data, reset, setError);
+  const onSubmit = async (data: PasswordFormValues) => {
+    try {
+      await axios.put('/auth/password', {
+        password: data.currentPassword,
+        newPassword: data.newPassword,
+      });
+      reset();
+    } catch (error) {
+      if (error instanceof Error) {
+        if (error.message === ERROR_MESSAGES.CURRENT_PASSWORD_INCORRECT) {
+          openModal(<AlertModal>{error.message}</AlertModal>);
+          setError('currentPassword', {
+            type: 'manual',
+            message: error.message,
+          });
+        }
+        if (error.message === ERROR_MESSAGES.SAME_AS_OLD_PASSWORD) {
+          openModal(<AlertModal>{error.message}</AlertModal>);
+          setError('newPassword', {
+            type: 'manual',
+            message: error.message,
+          });
+        }
+      }
+    }
+  };
 
   useEffect(() => {
     if (watchedPassword) {
@@ -44,7 +73,9 @@ export default function PasswordForm() {
         name="currentPassword"
         label="현재 비밀번호"
         placeholder="비밀번호 입력"
-        register={register('currentPassword')}
+        register={register('currentPassword', {
+          required: ERROR_MESSAGES.PASSWORD_REQUIRE,
+        })}
         error={errors.currentPassword}
       />
       <Input
@@ -54,6 +85,7 @@ export default function PasswordForm() {
         label="새 비밀번호"
         placeholder="새 비밀번호 입력"
         register={register('newPassword', {
+          required: ERROR_MESSAGES.PASSWORD_REQUIRE,
           minLength: {
             value: 8,
             message: ERROR_MESSAGES.PASSWORD_TOO_SHORT,
@@ -70,11 +102,17 @@ export default function PasswordForm() {
           validate: {
             matchesPassword: (value) =>
               value === watchedPassword || ERROR_MESSAGES.PASSWORDS_MATCH,
+            required: (value) =>
+              value !== '' || ERROR_MESSAGES.PASSWORD_REQUIRE,
           },
         })}
         error={errors.newPasswordConfirmation}
       />
-      <Button className={styles.button} type="submit" disabled={!customIsValid}>
+      <Button
+        className={styles.button}
+        type="submit"
+        disabled={!(isValid && customIsValid)}
+      >
         변경
       </Button>
     </form>

src/app/(with-header-sidebar)/mypage/_components/ProfileForm.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import useAuth from '../_hooks/useAuth';
+import FileInput from './FileInput';
+import Input from './Input';
+import Button from '@/components/Button';
+import { updateProfile } from '../_lib/userService';
+import styles from './Form.module.css';
+import { ERROR_MESSAGES } from '../_constants/message';
+
+export interface ProfileFormValues {
+  image: File | null;
+  email: string;
+  nickname: string;
+}
+
+export default function ProfileForm() {
+  const { user } = useAuth();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+    setValue,
+    reset,
+  } = useForm<ProfileFormValues>({ mode: 'onChange' });
+
+  const onSubmit = async (data: ProfileFormValues) => updateProfile(data);
+
+  useEffect(() => {
+    if (user) {
+      const { email, nickname } = user;
+      reset({ email, nickname });
+    }
+  }, [reset, user]);
+
+  return (
+    <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
+      <h2>프로필</h2>
+      <div className={styles.profile}>
+        <FileInput
+          id="image"
+          name="image"
+          setValue={setValue}
+          url={user?.profileImageUrl}
+        />
+        <div className={styles.userInfo}>
+          <Input
+            className={styles.input}
+            type="text"
+            name="email"
+            label="이메일"
+            register={register('email')}
+            readOnly
+          />
+          <Input
+            className={styles.input}
+            type="text"
+            name="nickname"
+            label="닉네임"
+            placeholder="닉네임 입력"
+            register={register('nickname', {
+              required: ERROR_MESSAGES.NICKNAME_REQUIRE,
+            })}
+            error={errors.nickname}
+          />
+          <Button className={styles.button} type="submit" disabled={!isValid}>
+            저장
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}

src/app/(with-header-sidebar)/mypage/_components/modal.module.css

@@ -0,0 +1,17 @@
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.modal {
+  background: var(--white);
+  border-radius: 16px;
+}