Feat/mypage 수정

.changeset/fluffy-candies-remain.md

@@ -0,0 +1,5 @@
+---
+"@date-project/user": minor
+---
+
+modify mypage

apps/user/package.json

@@ -10,6 +10,7 @@
     "check-types": "tsc --noEmit"
   },
   "dependencies": {
+    "@hello-pangea/dnd": "^18.0.1",
     "@vanilla-extract/css": "^1.17.1",
     "@vanilla-extract/css-utils": "^0.1.4",
     "@vanilla-extract/recipes": "^0.5.5",

apps/user/src/app/(auth)/_styles/style.css.ts

@@ -111,7 +111,8 @@ export const loginText = style([
 
 export const loginLink = style([
   {
-    color: Color.accent.default,
+    color: ColorVar.blue.light[8],
+    textDecoration: "underline",
   },
   textSprinkles({ text: "smallBold" }),
 ]);

apps/user/src/app/(auth)/layout.tsx

@@ -10,7 +10,7 @@ export default function AuthLayout({
   const pathName = usePathname();
   const isLoginPage = pathName.includes("login");
   return (
-    <main className={bg}>
+    <main className={bg} id="main">
       <div className={contentWrapper({ isLoginPage })}>{children}</div>
     </main>
   );

apps/user/src/app/mypage/page.tsx

@@ -1,10 +1,9 @@
 "use client";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
-import type { ReactNode } from "react";
-import AccountStage from "../../shared/components/myPage/stages/AccountStage";
-import OptionalStage from "../../shared/components/myPage/stages/OptionalStage";
-import RequiredStage from "../../shared/components/myPage/stages/RequiredStage";
+import AccountStage from "../../shared/components/myPage/Stages/AccountStage";
+import OptionalStage from "../../shared/components/myPage/Stages/OptionalStage";
+import RequiredStage from "../../shared/components/myPage/Stages/RequiredStage";
 import {
   description,
   layoutMain,
@@ -24,26 +23,22 @@ export default function MyPageStage() {
     param: Stage;
     menu: string;
     description: string;
-    component: ReactNode;
   }[] = [
     {
       param: "required",
       menu: "필수 입력",
       description: "필수 정보를 모두 입력하시면 프로필이 공개됩니다.",
-      component: <RequiredStage />,
     },
     {
       param: "optional",
       menu: "선택 입력",
       description: "추가 정보를 입력하시면 매칭 확률이 높아집니다.",
-      component: <OptionalStage />,
     },
     {
       param: "account",
       menu: "회원 정보",
       description:
         "일부 항목은 관리자 승인 후 수정이 가능합니다. 변경이 필요한 경우 문의해주세요.",
-      component: <AccountStage />,
     },
   ];
 
@@ -70,7 +65,9 @@ export default function MyPageStage() {
               </li>
             ))}
           </ul>
-          {tabInfo.find((item) => item.param === stage)?.component}
+          {stage === "required" && <RequiredStage />}
+          {stage === "optional" && <OptionalStage />}
+          {stage === "account" && <AccountStage />}
         </div>
       </section>
     </main>

apps/user/src/shared/components/layouts/header/Header.tsx

@@ -4,6 +4,7 @@ import UserIcon from "@date-project/user/public/userIcon.svg";
 import { Button } from "@repo/ui";
 import Link from "next/link";
 import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import useUserStore from "../../../stores/useUserStore";
 import type { ListType } from "./listType";
 import ProfileMenu from "./ProfileMenu";
@@ -17,7 +18,9 @@ import {
   userProfile,
 } from "./style.css";
 const Header = () => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpenDropdown, setIsOpenDropdown] = useState(false);
+  const [headerDOM, setHeaderDOM] = useState<HTMLElement | null>(null);
+
   const { user, setLogout } = useUserStore();
 
   const menuRef = useRef<HTMLDivElement | null>(null);
@@ -38,16 +41,19 @@ const Header = () => {
         menuRef.current &&
         !menuRef.current.contains(e.target as HTMLElement)
       ) {
-        setIsOpen(false);
+        setIsOpenDropdown(false);
       }
     };
 
     document.addEventListener("click", handleClickOutside);
     return () => {
       document.removeEventListener("click", handleClickOutside);
     };
-  }, [isOpen]);
+  }, [isOpenDropdown]);
 
+  useEffect(() => {
+    setHeaderDOM(document.getElementById("main"));
+  }, []);
   return (
     <header className={header}>
       <div className={logoWrapper}>
@@ -66,18 +72,21 @@ const Header = () => {
             <button
               className={userProfile}
               type="button"
-              onClick={() => setIsOpen((prev) => !prev)}
+              onClick={() => setIsOpenDropdown((prev) => !prev)}
             >
               <UserIcon className={userIcon} alt="user" />
             </button>
-            {isOpen && (
-              <ProfileMenu
-                name="홍길동" // 유저 정보 넘겨주기
-                tel="010-1234-5678" // 대시 추가해서 string으로 넘겨주기
-                list={profileMenuList}
-                ref={menuRef}
-              />
-            )}
+            {isOpenDropdown &&
+              createPortal(
+                <ProfileMenu
+                  name="홍길동" // 유저 정보 넘겨주기
+                  tel="010-1234-5678" // 대시 추가해서 string으로 넘겨주기
+                  list={profileMenuList}
+                  ref={menuRef}
+                  onClose={() => setIsOpenDropdown(false)}
+                />,
+                headerDOM || document.body,
+              )}
           </>
         ) : (
           <>

apps/user/src/shared/components/layouts/header/ProfileMenu.tsx

@@ -19,9 +19,10 @@ type MenuProps = {
   tel: string;
   list?: ListType[];
   ref: Ref<HTMLDivElement>;
+  onClose: () => void;
 };
 
-const ProfileMenu = ({ name, tel, list = [], ref }: MenuProps) => {
+const ProfileMenu = ({ name, tel, list = [], ref, onClose }: MenuProps) => {
   return (
     <div className={menuWrapper} ref={ref}>
       <div className={infoWrapper}>
@@ -35,7 +36,7 @@ const ProfileMenu = ({ name, tel, list = [], ref }: MenuProps) => {
       </div>
       <ul className={listWrapper}>
         {list.map((item: ListType) => (
-          <li key={item.title} className={listItem}>
+          <li key={item.title} className={listItem} onClick={onClose}>
             {item.href && <Link href={item.href}>{item.title}</Link>}
             {item.action && (
               <button type="button" onClick={item.action}>

apps/user/src/shared/components/layouts/header/style.css.ts

@@ -1,6 +1,5 @@
-import { Color, textSprinkles } from "@repo/ui";
+import { Color, textSprinkles, Zindex } from "@repo/ui";
 import { style } from "@vanilla-extract/css";
-import { calc } from "@vanilla-extract/css-utils";
 
 export const header = style({
   position: "fixed",
@@ -69,15 +68,18 @@ export const relative = style({
 });
 // ---- ProfileMenu ----
 export const menuWrapper = style({
-  position: "absolute",
-  right: 0,
-  top: calc.add("100%", "28px").toString(),
+  position: "fixed",
+  top: "80px",
+  right: "32px",
+
   display: "flex",
   flexDirection: "column",
 
   width: "200px",
   borderRadius: "8px",
   backgroundColor: Color.secondary.default,
+
+  zIndex: Zindex.dropdown,
 });
 
 export const infoWrapper = style({

apps/user/src/shared/components/myPage/Stages/AccountStage.tsx

@@ -1,10 +1,12 @@
 import { Button, Select, TextInput } from "@repo/ui";
 
+import type { MouseEvent } from "react";
 import { useState } from "react";
 import type { SubmitHandler } from "react-hook-form";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import { mainAddress, regionList } from "../../../libs/regionList";
 import Label from "../components/label/Label";
+import ResetPasswordDialog from "../components/resetPasswordDialog/ResetPasswordDialog";
 import {
   buttonWrapper,
   form,
@@ -16,6 +18,8 @@ import {
  * @todo : 입력한 정보가 있을때는 해당 데이터를 가져와야함
  */
 const AccountStage = () => {
+  const [isOpenResetPasswordDialog, setIsOpenResetPasswordDialog] =
+    useState(false);
   const [isOpenAddressOption, setIsOpenAddressOption] = useState({
     mainAddress: false,
     subAddress: false,
@@ -69,6 +73,10 @@ const AccountStage = () => {
     referenceCode: "ABCDEF",
   };
 
+  const handleOpenResetPassword = (e: MouseEvent) => {
+    setIsOpenResetPasswordDialog(true);
+  };
+
   return (
     <FormProvider {...method}>
       <form className={form} onSubmit={handleSubmit(onSubmit)}>
@@ -157,7 +165,7 @@ const AccountStage = () => {
             <Button
               variant="primary"
               className={pwChange}
-              // onClick={() => 모달 열기}
+              onClick={handleOpenResetPassword}
             >
               비밀번호 변경하기
             </Button>
@@ -176,6 +184,13 @@ const AccountStage = () => {
           </Button>
         </div>
       </form>
+      {isOpenResetPasswordDialog && (
+        <ResetPasswordDialog
+          isOpen={isOpenResetPasswordDialog}
+          onClose={() => setIsOpenResetPasswordDialog(false)}
+          isMobile={false}
+        />
+      )}
     </FormProvider>
   );
 };

apps/user/src/shared/components/myPage/Stages/OptionalStage.tsx

@@ -1,14 +1,24 @@
-import { Button, CheckBox, Radio, Select, Tag, TextInput } from "@repo/ui";
+import {
+  Button,
+  CheckBox,
+  Radio,
+  Select,
+  Tag,
+  Textarea,
+  TextInput,
+} from "@repo/ui";
 
 import { useState } from "react";
 import type { SubmitHandler } from "react-hook-form";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import { mypageError, myPageLimit } from "../../../libs/formErrorText";
 import { drinkList, mbtiList, othersList } from "../../../libs/optionList";
+import CountText from "../components/countText/CountText";
 import Label from "../components/label/Label";
 import {
   buttonWrapper,
   checkBoxWrapper,
+  countWrapper,
   form,
   radioWrapper,
   section,
@@ -77,7 +87,13 @@ const OptionalStage = () => {
             />
           </div>
           <div>
-            <Label>특기</Label>
+            <div className={countWrapper}>
+              <Label>특기</Label>
+              <CountText
+                count={watch("skill")?.length}
+                limit={myPageLimit.skill.max}
+              />
+            </div>
             <TextInput
               placeholder="특기를 입력해주세요"
               width="100%"
@@ -91,10 +107,15 @@ const OptionalStage = () => {
             />
           </div>
           <div>
-            <Label>자기소개</Label>
-            <TextInput
+            <div className={countWrapper}>
+              <Label>자기소개</Label>
+              <CountText
+                count={watch("introduce")?.length}
+                limit={myPageLimit.introduce.max}
+              />
+            </div>
+            <Textarea
               placeholder="간단한 자기소개를 입력해주세요"
-              width="100%"
               errorMessage={errors.introduce?.message}
               {...register("introduce", {
                 maxLength: {