From 6fdef6deeaa9ff46f14b0eeb73ae71f24f793081 Mon Sep 17 00:00:00 2001
From: Jeongmin Lee <clcl6084@gmail.com>
Date: Mon, 7 Oct 2024 00:56:32 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=ED=94=84=EB=A1=9C=ED=95=84?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=20UI=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84=20=EB=B0=8F=20=ED=8D=BC=EB=B8=94=EB=A6=AC?=
 =?UTF-8?q?=EC=8B=B1=20#51?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/MypageSettingsKeywords.tsx    | 118 ++++++++++++++++++
 .../_components/MypageSettingsProfile.tsx     |  61 +++++++++
 .../_components/MypageSettingsTab.tsx         |  85 +++++++++++++
 src/app/mypage/settings/page.tsx              |  21 ++++
 src/app/mypage/settings/view.tsx              |  35 ++++++
 src/validations/ProfileUpdateSchema.ts        |  26 ++++
 6 files changed, 346 insertions(+)
 create mode 100644 src/app/mypage/settings/_components/MypageSettingsKeywords.tsx
 create mode 100644 src/app/mypage/settings/_components/MypageSettingsProfile.tsx
 create mode 100644 src/app/mypage/settings/_components/MypageSettingsTab.tsx
 create mode 100644 src/app/mypage/settings/page.tsx
 create mode 100644 src/app/mypage/settings/view.tsx
 create mode 100644 src/validations/ProfileUpdateSchema.ts

diff --git a/src/app/mypage/settings/_components/MypageSettingsKeywords.tsx b/src/app/mypage/settings/_components/MypageSettingsKeywords.tsx
new file mode 100644
index 0000000..c265d94
--- /dev/null
+++ b/src/app/mypage/settings/_components/MypageSettingsKeywords.tsx
@@ -0,0 +1,118 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { FC } from "react";
+import { Controller, useForm } from "react-hook-form";
+
+import {
+  FestivalCategory,
+  FestivalCompanion,
+  FestivalMood,
+  FestivalPriority,
+} from "@/apis/onboarding/onboardingType";
+import { BasicButton } from "@/components/core/Button";
+import {
+  CategoryKeywordInput,
+  MoodKeywordInput,
+} from "@/components/core/Input";
+import { PriorityKeywordInput } from "@/components/core/Input/KeywordInput";
+import CompanionKeywordInput from "@/components/core/Input/KeywordInput/ConpanionKeywordInput";
+import {
+  ProfileUpdateSchema,
+  ProfileUpdateSchemaType,
+} from "@/validations/ProfileUpdateSchema";
+
+interface Props {
+  categories: Array<FestivalCategory>;
+  companions: Array<FestivalCompanion>;
+  priorities: Array<FestivalPriority>;
+  moods: Array<FestivalMood>;
+}
+
+const MypageSettingsKeywords: FC<Props> = ({
+  categories,
+  companions,
+  priorities,
+  moods,
+}) => {
+  const { handleSubmit, control } = useForm<ProfileUpdateSchemaType>({
+    defaultValues: {
+      categoryIds: [],
+      moodIds: [],
+      companionIds: [],
+      priorityIds: [],
+    },
+    resolver: zodResolver(ProfileUpdateSchema),
+  });
+
+  const onSubmit = (data: ProfileUpdateSchemaType) => {
+    console.log(data);
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="flex h-full w-full flex-col justify-between gap-[28px]"
+    >
+      <Controller
+        control={control}
+        name="categoryIds"
+        render={({ field: { onChange, value } }) => (
+          <CategoryKeywordInput
+            categories={categories}
+            selectedCategories={value}
+            onChange={onChange}
+            maxCount={2}
+            label="관심있는 페스티벌 분야"
+            isPrimaryLabel
+          />
+        )}
+      />
+
+      <Controller
+        control={control}
+        name="moodIds"
+        render={({ field: { onChange, value } }) => (
+          <MoodKeywordInput
+            moods={moods}
+            selectedMoods={value}
+            onChange={onChange}
+            maxCount={3}
+            label="선호하는 페스티벌 분위기"
+            isPrimaryLabel
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="companionIds"
+        render={({ field: { onChange, value } }) => (
+          <CompanionKeywordInput
+            companions={companions}
+            selectedCompanions={value}
+            onChange={onChange}
+            isPrimaryLabel
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="priorityIds"
+        render={({ field: { onChange, value } }) => (
+          <PriorityKeywordInput
+            priorities={priorities}
+            selectedPriorities={value}
+            onChange={onChange}
+            maxCount={3}
+            label="페스티벌 우선순위"
+            isPrimaryLabel
+          />
+        )}
+      />
+
+      <BasicButton type="submit" label="완료" />
+    </form>
+  );
+};
+
+export default MypageSettingsKeywords;
diff --git a/src/app/mypage/settings/_components/MypageSettingsProfile.tsx b/src/app/mypage/settings/_components/MypageSettingsProfile.tsx
new file mode 100644
index 0000000..ad9f22e
--- /dev/null
+++ b/src/app/mypage/settings/_components/MypageSettingsProfile.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import React from "react";
+import { Controller, useForm } from "react-hook-form";
+
+import { BasicButton } from "@/components/core/Button";
+import { TextInput } from "@/components/core/Input";
+
+const MypageSettingsProfile = () => {
+  const { control, handleSubmit } = useForm({
+    values: {
+      nickname: "",
+      statusMessage: "",
+    },
+  });
+
+  const onSubmit = () => {};
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="flex h-full w-full flex-col justify-between gap-[28px]"
+    >
+      <Controller
+        control={control}
+        name="nickname"
+        render={({ field: { onChange, value }, formState: { errors } }) => (
+          <TextInput
+            label="닉네임"
+            placeholder="페스티벌 명을 입력해주세요."
+            value={value}
+            onChange={onChange}
+            currentLength={value?.length ?? 0}
+            maxLength={10}
+            error={errors.nickname?.message}
+          />
+        )}
+      />
+
+      <Controller
+        control={control}
+        name="statusMessage"
+        render={({ field: { onChange, value }, formState: { errors } }) => (
+          <TextInput
+            label="상태메세지"
+            placeholder="페스티벌 명을 입력해주세요."
+            value={value}
+            onChange={onChange}
+            currentLength={value?.length ?? 0}
+            maxLength={30}
+            error={errors.statusMessage?.message}
+          />
+        )}
+      />
+
+      <BasicButton type="submit" label="완료" />
+    </form>
+  );
+};
+
+export default MypageSettingsProfile;
diff --git a/src/app/mypage/settings/_components/MypageSettingsTab.tsx b/src/app/mypage/settings/_components/MypageSettingsTab.tsx
new file mode 100644
index 0000000..78d6f50
--- /dev/null
+++ b/src/app/mypage/settings/_components/MypageSettingsTab.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import * as Tabs from "@radix-ui/react-tabs";
+import { FC } from "react";
+
+import {
+  FestivalCategory,
+  FestivalCompanion,
+  FestivalMood,
+  FestivalPriority,
+} from "@/apis/onboarding/onboardingType";
+
+import MypageSettingsKeywords from "./MypageSettingsKeywords";
+import MypageSettingsProfile from "./MypageSettingsProfile";
+
+interface Props {
+  categories: Array<FestivalCategory>;
+  companions: Array<FestivalCompanion>;
+  priorities: Array<FestivalPriority>;
+  moods: Array<FestivalMood>;
+}
+
+const MypageSettingsTab: FC<Props> = ({
+  categories,
+  companions,
+  priorities,
+  moods,
+}) => {
+  const TabList = [
+    {
+      name: "기본정보",
+      contentComponent: <MypageSettingsProfile />,
+    },
+    {
+      name: "맞춤 필터",
+      contentComponent: (
+        <MypageSettingsKeywords
+          categories={categories}
+          companions={companions}
+          priorities={priorities}
+          moods={moods}
+        />
+      ),
+    },
+  ];
+
+  const handleTabChange = () => {
+    const tabElement = document.getElementById(`tab`);
+    if (tabElement) {
+      tabElement.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
+  return (
+    <Tabs.Root className="w-full " defaultValue={TabList[0].name}>
+      <Tabs.List
+        id={"tab"}
+        className="mb-[30px] flex h-[47px] w-full"
+        aria-label="Manage your account"
+      >
+        {TabList.map(({ name }, index) => (
+          <Tabs.Trigger
+            key={name}
+            className="TabsTrigger w-full border-b-[1px] border-gray-scale-400 text-subtitle-semi text-gray-scale-400"
+            value={name}
+            onClick={handleTabChange}
+          >
+            {name}
+          </Tabs.Trigger>
+        ))}
+      </Tabs.List>
+      {TabList.map(({ name, contentComponent }) => (
+        <Tabs.Content
+          key={name}
+          className="flex flex-col gap-[18px] px-[16px]"
+          value={name}
+        >
+          {contentComponent}
+        </Tabs.Content>
+      ))}
+    </Tabs.Root>
+  );
+};
+
+export default MypageSettingsTab;
diff --git a/src/app/mypage/settings/page.tsx b/src/app/mypage/settings/page.tsx
new file mode 100644
index 0000000..f3e7dc4
--- /dev/null
+++ b/src/app/mypage/settings/page.tsx
@@ -0,0 +1,21 @@
+import { getOnboardingData } from "@/apis/onboarding/onboarding";
+import { DefaultHeader } from "@/layout/Mobile/MobileHeader";
+
+import MypageSettingsView from "./view";
+
+export default async function MypageSettingsPage() {
+  const { moods, categories, companions, priorities } =
+    await getOnboardingData();
+
+  return (
+    <div className="mt-[44px]">
+      <DefaultHeader label="프로필 수정" />
+      <MypageSettingsView
+        categories={categories}
+        companions={companions}
+        priorities={priorities}
+        moods={moods}
+      />
+    </div>
+  );
+}
diff --git a/src/app/mypage/settings/view.tsx b/src/app/mypage/settings/view.tsx
new file mode 100644
index 0000000..7a925e0
--- /dev/null
+++ b/src/app/mypage/settings/view.tsx
@@ -0,0 +1,35 @@
+import { FC } from "react";
+
+import {
+  FestivalCategory,
+  FestivalCompanion,
+  FestivalMood,
+  FestivalPriority,
+} from "@/apis/onboarding/onboardingType";
+
+import MypageSettingsTab from "./_components/MypageSettingsTab";
+
+interface Props {
+  categories: Array<FestivalCategory>;
+  companions: Array<FestivalCompanion>;
+  priorities: Array<FestivalPriority>;
+  moods: Array<FestivalMood>;
+}
+
+const MypageSettingsView: FC<Props> = ({
+  categories,
+  companions,
+  priorities,
+  moods,
+}) => {
+  return (
+    <MypageSettingsTab
+      categories={categories}
+      companions={companions}
+      priorities={priorities}
+      moods={moods}
+    />
+  );
+};
+
+export default MypageSettingsView;
diff --git a/src/validations/ProfileUpdateSchema.ts b/src/validations/ProfileUpdateSchema.ts
new file mode 100644
index 0000000..dfef722
--- /dev/null
+++ b/src/validations/ProfileUpdateSchema.ts
@@ -0,0 +1,26 @@
+import { z } from "zod";
+
+import { ONBOARDING_SETTING } from "@/config";
+
+const MoodsSchema = z
+  .array(z.number())
+  .min(ONBOARDING_SETTING.MOOD_MIN, "at least three items");
+
+const PrioritiesSchema = z
+  .array(z.number())
+  .min(ONBOARDING_SETTING.PRIORITY_MIN, "at least one item");
+
+const companionsSchema = z.array(z.number()).min(1, "at least one item");
+
+const CategoriesSchema = z
+  .array(z.number())
+  .min(ONBOARDING_SETTING.CATEGORY_MIN, "at least two items");
+
+export const ProfileUpdateSchema = z.object({
+  categoryIds: CategoriesSchema,
+  moodIds: MoodsSchema,
+  companionIds: companionsSchema,
+  priorityIds: PrioritiesSchema,
+});
+
+export type ProfileUpdateSchemaType = z.output<typeof ProfileUpdateSchema>;