diff --git a/.changeset/fluffy-candies-remain.md b/.changeset/fluffy-candies-remain.md new file mode 100644 index 0000000..6484af1 --- /dev/null +++ b/.changeset/fluffy-candies-remain.md @@ -0,0 +1,5 @@ +--- +"@date-project/user": minor +--- + +modify mypage diff --git a/apps/user/package.json b/apps/user/package.json index 748d0f8..450719a 100644 --- a/apps/user/package.json +++ b/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", diff --git a/apps/user/src/app/(auth)/_styles/style.css.ts b/apps/user/src/app/(auth)/_styles/style.css.ts deleted file mode 100644 index 0ab293d..0000000 --- a/apps/user/src/app/(auth)/_styles/style.css.ts +++ /dev/null @@ -1,117 +0,0 @@ -import { Color, ColorVar, textSprinkles } from "@repo/ui"; -import { style } from "@vanilla-extract/css"; -import { recipe } from "@vanilla-extract/recipes"; -// ---------layout---------- -export const bg = style({ - background: `linear-gradient(${ColorVar.greyBlue[9]} 0%, ${ColorVar.blue.dark[8]} 100%)`, - height: "100dvh", - display: "flex", - alignItems: "center", - justifyContent: "center", -}); - -export const contentWrapper = recipe({ - base: { - backgroundColor: Color.bg, - borderRadius: "12px", - margin: "0 auto", - width: "420px", - }, - variants: { - isLoginPage: { - true: { - padding: "80px 90px", - }, - false: { - padding: "40px 90px", - }, - }, - }, -}); -// ------------login------------ -export const logo = style({ - display: "flex", - margin: "0 auto 52px", - width: "200px", - height: "64px", -}); - -export const form = style({ - display: "flex", - width: "100%", - flexDirection: "column", - gap: "40px", -}); - -export const inputWrapper = style({ - display: "flex", - flexDirection: "column", - gap: "16px", - width: "100%", -}); -export const buttonWrapper = style({ - width: "100%", - - display: "flex", - flexDirection: "column", - alignItems: "center", - gap: "4px", -}); - -export const loginButton = style({ - width: "100%", - height: "40px", -}); - -export const signupButton = style([ - { - padding: "8px", - }, - textSprinkles({ - text: "medium", - }), -]); -// ------------signup------------ - -export const logoSignup = style({ - display: "flex", - width: "180px", - height: "40px", - margin: "0 auto 52px", -}); - -export const inputLabel = style([ - { - paddingBottom: "10px", - display: "inline-block", - }, - textSprinkles({ text: "medium" }), -]); - -export const pagination = style({ - display: "flex", - justifyContent: "space-between", -}); - -export const pageButton = style({ - width: "80px", - height: "40px", -}); - -export const loginText = style([ - { - fontWeight: 400, - color: Color.text.default, - - display: "inline-block", - paddingTop: "40px", - }, - textSprinkles({ text: "small" }), -]); - -export const loginLink = style([ - { - color: Color.accent.default, - }, - textSprinkles({ text: "smallBold" }), -]); diff --git a/apps/user/src/shared/components/signupSections/AccountSection.tsx b/apps/user/src/app/(auth)/components/signup-sections/account-section.tsx similarity index 96% rename from apps/user/src/shared/components/signupSections/AccountSection.tsx rename to apps/user/src/app/(auth)/components/signup-sections/account-section.tsx index 273741e..3a4a419 100644 --- a/apps/user/src/shared/components/signupSections/AccountSection.tsx +++ b/apps/user/src/app/(auth)/components/signup-sections/account-section.tsx @@ -1,6 +1,9 @@ import { TextInput } from "@repo/ui"; import { useFormContext } from "react-hook-form"; -import { signupError, signupLimit } from "../../libs/formErrorText"; +import { + signupError, + signupLimit, +} from "../../../../shared/constants/form-error-message"; import { inputLabel, inputWrapper } from "./style.css"; const AccountSection = () => { diff --git a/apps/user/src/shared/components/signupSections/InfoSection.tsx b/apps/user/src/app/(auth)/components/signup-sections/info-section.tsx similarity index 95% rename from apps/user/src/shared/components/signupSections/InfoSection.tsx rename to apps/user/src/app/(auth)/components/signup-sections/info-section.tsx index 8d05648..71b46a1 100644 --- a/apps/user/src/shared/components/signupSections/InfoSection.tsx +++ b/apps/user/src/app/(auth)/components/signup-sections/info-section.tsx @@ -1,10 +1,16 @@ import { Radio, Select, TextInput } from "@repo/ui"; import { useState } from "react"; import { Controller, useFormContext } from "react-hook-form"; -import { monthList, yearList } from "../../libs/dateList"; -import { signupError, signupLimit } from "../../libs/formErrorText"; -import { mainAddress, regionList } from "../../libs/regionList"; -import getDayList from "../../utils/getDayList"; +import { monthList, yearList } from "../../../../shared/constants/date-list"; +import { + signupError, + signupLimit, +} from "../../../../shared/constants/form-error-message"; +import { + mainAddress, + regionList, +} from "../../../../shared/constants/region-list"; +import getDayList from "../../../../shared/utils/getDayList"; import { genderWrapper, inputLabel, diff --git a/apps/user/src/shared/components/signupSections/style.css.ts b/apps/user/src/app/(auth)/components/signup-sections/style.css.ts similarity index 100% rename from apps/user/src/shared/components/signupSections/style.css.ts rename to apps/user/src/app/(auth)/components/signup-sections/style.css.ts diff --git a/apps/user/src/app/(auth)/layout.tsx b/apps/user/src/app/(auth)/layout.tsx index c336981..4488352 100644 --- a/apps/user/src/app/(auth)/layout.tsx +++ b/apps/user/src/app/(auth)/layout.tsx @@ -1,6 +1,6 @@ "use client"; import { usePathname } from "next/navigation"; -import { bg, contentWrapper } from "./_styles/style.css"; +import { bg, contentWrapper } from "./style.css"; export default function AuthLayout({ children, @@ -10,7 +10,7 @@ export default function AuthLayout({ const pathName = usePathname(); const isLoginPage = pathName.includes("login"); return ( -
+
{children}
); diff --git a/apps/user/src/app/(auth)/login/page.tsx b/apps/user/src/app/(auth)/login/page.tsx index 8561543..57522de 100644 --- a/apps/user/src/app/(auth)/login/page.tsx +++ b/apps/user/src/app/(auth)/login/page.tsx @@ -4,7 +4,7 @@ import { Button, TextInput } from "@repo/ui"; import Link from "next/link"; import type { SubmitHandler } from "react-hook-form"; import { useForm } from "react-hook-form"; -import { useToastStore } from "../../../shared/components/layouts/clientLayout/ClientLayout"; +import { useToastStore } from "../../../shared/components/layouts/client-layout/client-layout"; import { buttonWrapper, form, @@ -12,7 +12,7 @@ import { loginButton, logo, signupButton, -} from "../_styles/style.css"; +} from "./style.css"; type Login = { tel: number; diff --git a/apps/user/src/app/(auth)/login/style.css.ts b/apps/user/src/app/(auth)/login/style.css.ts new file mode 100644 index 0000000..9f85619 --- /dev/null +++ b/apps/user/src/app/(auth)/login/style.css.ts @@ -0,0 +1,45 @@ +import { textSprinkles } from "@repo/ui"; +import { style } from "@vanilla-extract/css"; + +export const logo = style({ + display: "flex", + margin: "0 auto 52px", + width: "200px", + height: "64px", +}); + +export const form = style({ + display: "flex", + width: "100%", + flexDirection: "column", + gap: "40px", +}); + +export const inputWrapper = style({ + display: "flex", + flexDirection: "column", + gap: "16px", + width: "100%", +}); +export const buttonWrapper = style({ + width: "100%", + + display: "flex", + flexDirection: "column", + alignItems: "center", + gap: "4px", +}); + +export const loginButton = style({ + width: "100%", + height: "40px", +}); + +export const signupButton = style([ + { + padding: "8px", + }, + textSprinkles({ + text: "medium", + }), +]); diff --git a/apps/user/src/app/(auth)/signup/page.tsx b/apps/user/src/app/(auth)/signup/page.tsx index 608c859..47f5f78 100644 --- a/apps/user/src/app/(auth)/signup/page.tsx +++ b/apps/user/src/app/(auth)/signup/page.tsx @@ -6,8 +6,8 @@ import { useRouter } from "next/navigation"; import { useState } from "react"; import type { SubmitHandler } from "react-hook-form"; import { FormProvider, useForm } from "react-hook-form"; -import AccountSection from "../../../shared/components/signupSections/AccountSection"; -import InfoSection from "../../../shared/components/signupSections/InfoSection"; +import AccountSection from "../components/signup-sections/account-section"; +import InfoSection from "../components/signup-sections/info-section"; import { form, loginLink, @@ -15,7 +15,7 @@ import { logoSignup, pageButton, pagination, -} from "../_styles/style.css"; +} from "./style.css"; export default function Signup() { const [part, setPart] = useState<"account" | "info">("account"); diff --git a/apps/user/src/app/(auth)/signup/style.css.ts b/apps/user/src/app/(auth)/signup/style.css.ts new file mode 100644 index 0000000..ee5d80b --- /dev/null +++ b/apps/user/src/app/(auth)/signup/style.css.ts @@ -0,0 +1,53 @@ +import { Color, ColorVar, textSprinkles } from "@repo/ui"; +import { style } from "@vanilla-extract/css"; + +export const form = style({ + display: "flex", + width: "100%", + flexDirection: "column", + gap: "40px", +}); + +export const logoSignup = style({ + display: "flex", + width: "180px", + height: "40px", + margin: "0 auto 52px", +}); + +export const inputLabel = style([ + { + paddingBottom: "10px", + display: "inline-block", + }, + textSprinkles({ text: "medium" }), +]); + +export const pagination = style({ + display: "flex", + justifyContent: "space-between", +}); + +export const pageButton = style({ + width: "80px", + height: "40px", +}); + +export const loginText = style([ + { + fontWeight: 400, + color: Color.text.default, + + display: "inline-block", + paddingTop: "40px", + }, + textSprinkles({ text: "small" }), +]); + +export const loginLink = style([ + { + color: ColorVar.blue.light[8], + textDecoration: "underline", + }, + textSprinkles({ text: "smallBold" }), +]); diff --git a/apps/user/src/app/(auth)/style.css.ts b/apps/user/src/app/(auth)/style.css.ts new file mode 100644 index 0000000..52aa13a --- /dev/null +++ b/apps/user/src/app/(auth)/style.css.ts @@ -0,0 +1,30 @@ +import { Color, ColorVar } from "@repo/ui"; +import { style } from "@vanilla-extract/css"; +import { recipe } from "@vanilla-extract/recipes"; + +export const bg = style({ + background: `linear-gradient(${ColorVar.greyBlue[9]} 0%, ${ColorVar.blue.dark[8]} 100%)`, + height: "100dvh", + display: "flex", + alignItems: "center", + justifyContent: "center", +}); + +export const contentWrapper = recipe({ + base: { + backgroundColor: Color.bg, + borderRadius: "12px", + margin: "0 auto", + width: "420px", + }, + variants: { + isLoginPage: { + true: { + padding: "80px 90px", + }, + false: { + padding: "40px 90px", + }, + }, + }, +}); diff --git a/apps/user/src/app/global.css.ts b/apps/user/src/app/global.css.ts index 4525ba8..8c9986c 100644 --- a/apps/user/src/app/global.css.ts +++ b/apps/user/src/app/global.css.ts @@ -3,6 +3,10 @@ import { globalStyle } from "@vanilla-extract/css"; globalStyle("main", { paddingTop: "72px", }); +globalStyle("body", { + WebkitFontSmoothing: "antialiased", + MozOsxFontSmoothing: "grayscale", +}); /* input type="number" 화살표 제거; */ /* Chrome, Safari, Edge, Opera */ diff --git a/apps/user/src/app/layout.tsx b/apps/user/src/app/layout.tsx index dba3af0..a11953a 100644 --- a/apps/user/src/app/layout.tsx +++ b/apps/user/src/app/layout.tsx @@ -1,5 +1,5 @@ import { Suspense } from "react"; -import ClientLayout from "../shared/components/layouts/clientLayout/ClientLayout"; +import ClientLayout from "../shared/components/layouts/client-layout/client-layout"; import "./global.css"; export default function RootLayout({ diff --git a/apps/user/src/shared/components/notApproved/NotApproved.tsx b/apps/user/src/app/main/components/not-approved/not-approved.tsx similarity index 90% rename from apps/user/src/shared/components/notApproved/NotApproved.tsx rename to apps/user/src/app/main/components/not-approved/not-approved.tsx index aea6689..ab98479 100644 --- a/apps/user/src/shared/components/notApproved/NotApproved.tsx +++ b/apps/user/src/app/main/components/not-approved/not-approved.tsx @@ -1,6 +1,7 @@ import Logo from "@date-project/user/public/logo.svg"; import { Button } from "@repo/ui"; import Link from "next/link"; +import { ROUTES } from "../../../../shared/types/route.enum"; import { button, buttonWrapper, @@ -24,7 +25,7 @@ const NotApproved = () => {

정보를 상세하게 입력하시면 더 빠른 승인이 가능합니다.

- + diff --git a/apps/user/src/shared/components/notApproved/style.css.ts b/apps/user/src/app/main/components/not-approved/style.css.ts similarity index 100% rename from apps/user/src/shared/components/notApproved/style.css.ts rename to apps/user/src/app/main/components/not-approved/style.css.ts diff --git a/apps/user/src/app/my-page/components/count-text/count-text.tsx b/apps/user/src/app/my-page/components/count-text/count-text.tsx new file mode 100644 index 0000000..edbdb14 --- /dev/null +++ b/apps/user/src/app/my-page/components/count-text/count-text.tsx @@ -0,0 +1,15 @@ +import { text } from "./style.css"; + +type Props = { + count: number; + limit: number; +}; +const CountText = ({ count = 0, limit }: Props) => { + return ( + + {count}/{limit} + + ); +}; + +export default CountText; diff --git a/apps/user/src/app/my-page/components/count-text/style.css.ts b/apps/user/src/app/my-page/components/count-text/style.css.ts new file mode 100644 index 0000000..d9c5e17 --- /dev/null +++ b/apps/user/src/app/my-page/components/count-text/style.css.ts @@ -0,0 +1,9 @@ +import { Color, textSprinkles } from "@repo/ui"; +import { style } from "@vanilla-extract/css"; + +export const text = style([ + { + color: Color.text.default, + }, + textSprinkles({ text: "medium" }), +]); diff --git a/apps/user/src/app/my-page/components/image-preview/image-preview-item.tsx b/apps/user/src/app/my-page/components/image-preview/image-preview-item.tsx new file mode 100644 index 0000000..ca836c2 --- /dev/null +++ b/apps/user/src/app/my-page/components/image-preview/image-preview-item.tsx @@ -0,0 +1,29 @@ +import Exit from "@date-project/user/public/exit.svg"; +import Image from "next/image"; +import type { ImageType } from "../stages/type"; +import { deleteButton, image } from "./style.css"; + +type ItemProps = { + item: ImageType; + onClickDelete: (id: string) => void; +}; +const ImagePreviewItem = ({ item, onClickDelete: onClick }: ItemProps) => { + const { id, url } = item; + + return ( +
+ {url && ( + image + )} + +
+ ); +}; + +export default ImagePreviewItem; diff --git a/apps/user/src/shared/components/myPage/components/imagePreview/style.css.ts b/apps/user/src/app/my-page/components/image-preview/style.css.ts similarity index 100% rename from apps/user/src/shared/components/myPage/components/imagePreview/style.css.ts rename to apps/user/src/app/my-page/components/image-preview/style.css.ts diff --git a/apps/user/src/shared/components/myPage/components/imagePreview/ImagePreviewItem.tsx b/apps/user/src/app/my-page/components/imagePreview/ImagePreviewItem.tsx similarity index 84% rename from apps/user/src/shared/components/myPage/components/imagePreview/ImagePreviewItem.tsx rename to apps/user/src/app/my-page/components/imagePreview/ImagePreviewItem.tsx index 2ef3572..347ce89 100644 --- a/apps/user/src/shared/components/myPage/components/imagePreview/ImagePreviewItem.tsx +++ b/apps/user/src/app/my-page/components/imagePreview/ImagePreviewItem.tsx @@ -1,7 +1,7 @@ import Exit from "@date-project/user/public/exit.svg"; import Image from "next/image"; -import type { ImageType } from "../../stages/type"; -import { deleteButton, image } from "./style.css"; +import { deleteButton, image } from "../image-preview/style.css"; +import type { ImageType } from "../stages/type"; type ItemProps = { item: ImageType; diff --git a/apps/user/src/shared/components/myPage/components/label/Label.tsx b/apps/user/src/app/my-page/components/label/label.tsx similarity index 100% rename from apps/user/src/shared/components/myPage/components/label/Label.tsx rename to apps/user/src/app/my-page/components/label/label.tsx diff --git a/apps/user/src/shared/components/myPage/components/label/style.css.ts b/apps/user/src/app/my-page/components/label/style.css.ts similarity index 100% rename from apps/user/src/shared/components/myPage/components/label/style.css.ts rename to apps/user/src/app/my-page/components/label/style.css.ts diff --git a/apps/user/src/shared/components/myPage/Stages/AccountStage.tsx b/apps/user/src/app/my-page/components/stages/account-stage.tsx similarity index 87% rename from apps/user/src/shared/components/myPage/Stages/AccountStage.tsx rename to apps/user/src/app/my-page/components/stages/account-stage.tsx index ea10b9d..e272172 100644 --- a/apps/user/src/shared/components/myPage/Stages/AccountStage.tsx +++ b/apps/user/src/app/my-page/components/stages/account-stage.tsx @@ -1,10 +1,15 @@ 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 "../../../../shared/components/dialogs/reset-password-dialog/reset-password-dialog"; +import { + mainAddress, + regionList, +} from "../../../../shared/constants/region-list"; +import Label from "../label/label"; import { buttonWrapper, form, @@ -16,6 +21,8 @@ import { * @todo : 입력한 정보가 있을때는 해당 데이터를 가져와야함 */ const AccountStage = () => { + const [isOpenResetPasswordDialog, setIsOpenResetPasswordDialog] = + useState(false); const [isOpenAddressOption, setIsOpenAddressOption] = useState({ mainAddress: false, subAddress: false, @@ -69,6 +76,10 @@ const AccountStage = () => { referenceCode: "ABCDEF", }; + const handleOpenResetPassword = (e: MouseEvent) => { + setIsOpenResetPasswordDialog(true); + }; + return (
@@ -157,7 +168,7 @@ const AccountStage = () => { @@ -176,6 +187,13 @@ const AccountStage = () => {
+ {isOpenResetPasswordDialog && ( + setIsOpenResetPasswordDialog(false)} + isMobile={false} + /> + )} ); }; diff --git a/apps/user/src/shared/components/myPage/Stages/OptionalStage.tsx b/apps/user/src/app/my-page/components/stages/optional-stage.tsx similarity index 85% rename from apps/user/src/shared/components/myPage/Stages/OptionalStage.tsx rename to apps/user/src/app/my-page/components/stages/optional-stage.tsx index 48f6f5d..b99ebec 100644 --- a/apps/user/src/shared/components/myPage/Stages/OptionalStage.tsx +++ b/apps/user/src/app/my-page/components/stages/optional-stage.tsx @@ -1,14 +1,31 @@ -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 Label from "../components/label/Label"; +import { + mypageError, + myPageLimit, +} from "../../../../shared/constants/form-error-message"; +import { + drinkList, + mbtiList, + othersList, +} from "../../../../shared/constants/option-list"; +import CountText from "../count-text/count-text"; +import Label from "../label/label"; import { buttonWrapper, checkBoxWrapper, + countWrapper, form, radioWrapper, section, @@ -77,7 +94,13 @@ const OptionalStage = () => { />
- +
+ + +
{ />
- - + + +
+