[Feat, Fix] 더미 데이터 함수 수정, 프로필 액션 테스트 중

src/app/(route)/_components/SearchInput.tsx

@@ -3,10 +3,10 @@
 import useQueryString from "@/hooks/useQueryString";
 import { FormEvent } from "react";
 
-export default function SearchInput() {
+export default function SearchInput({ origin = "study" }: { origin?: string }) {
   const onChangeQuery = useQueryString({
     paramsKey: "q",
-    queryInclude: "search",
+    queryInclude: origin === "study" ? "search" : origin,
   });
 
   const onSubmit = (e: FormEvent<HTMLFormElement>) => {

src/app/(route)/my/like-study/page.tsx

@@ -1,26 +1,36 @@
-import NoneStudyComponent from "@/app/(route)/study/_components/NoneStudyComponent";
+import Link from "next/link";
+import NoneContentItemBase from "@/app/_components/NoneContentItemBase";
 import SectionTitle from "@/common/Atoms/Text/SectionTitle";
 import StudyCardItem from "@/common/Organisms/StudyCardItem";
-import StudyCardList from "@/common/Templates/CardList";
-import { getStudiesData } from "@/dummies/studies";
+import { getStudiesData, TStudyCard } from "@/dummies/studies";
 
 export default function MyStudyLiked() {
-  const studyCard = getStudiesData();
+  const studyCards: TStudyCard[] = getStudiesData();
   return (
     <>
       <SectionTitle size="md" className="mb-6">
         찜한 스터디
       </SectionTitle>
       <div>
-        {/* TODO: 스터디 카드에서 찜한 스터디 표시 추가 필요 */}
-        {studyCard.length === 0 ? (
-          <NoneStudyComponent />
+        {studyCards.length === 0 ? (
+          <NoneContentItemBase>
+            <p className="text-main-500 font-semibold">
+              찜한 스터디가 없습니다.
+              <br />첫 스터디를 찜해보세요!
+            </p>
+            <Link
+              href={"/study"}
+              className="block py-3 px-4 bg-main-500 text-white font-semibold rounded-2xl"
+            >
+              스터디 구경가기
+            </Link>
+          </NoneContentItemBase>
         ) : (
-          <div className="grid grid-cols-2 lg:grid-cols-3 gap-gutter-sm xl:gap-gutter-xl">
-            {studyCard.map((card) => (
+          <ul className="grid grid-cols-2 lg:grid-cols-3 gap-gutter-sm xl:gap-gutter-xl">
+            {studyCards.map((card) => (
               <StudyCardItem key={card.id} card={card} />
             ))}
-          </div>
+          </ul>
         )}
       </div>
     </>

src/app/(route)/my/post/page.tsx

@@ -3,10 +3,11 @@ import { getPosts } from "@/dummies/posts";
 import SectionTitle from "@/common/Atoms/Text/SectionTitle";
 import Dropdown from "@/common/Molecules/Dropdown";
 import LinkButton from "@/common/Atoms/LinkButton";
-import PostListItem from "@/common/Organisms/PostListItem";
 import NotFound from "@/app/not-found";
 import PostListWithPagination from "@/common/Templates/PostListWithPagination";
 import { WriteIcon } from "@/common/Atoms/Image/Icon";
+import { TPost } from "@/types/model/PostItem";
+import NonePostItem from "../../post/_components/NonePostItem";
 
 const POST_FROM = [
   { key: "community", label: "커뮤니티" },
@@ -16,7 +17,7 @@ const POST_FROM = [
 type TQuery = { from?: string };
 
 export default function MyPost({ searchParams }: { searchParams: TQuery }) {
-  const posts = getPosts();
+  const posts: TPost[] = []; //getPosts();
   const from = searchParams?.from || "community";
   const postFrom = POST_FROM.find((item) => item.key === from);
   if (postFrom === undefined) {
@@ -28,7 +29,7 @@ export default function MyPost({ searchParams }: { searchParams: TQuery }) {
         찜한 스터디
       </SectionTitle>
       <div className="flex flex-row items-start justify-between pb-6 border-b border-b-line-neutral">
-        <Dropdown
+        {/* <Dropdown
           buttonLabel={postFrom.label}
           items={POST_FROM.map((item) => (
             <li
@@ -41,16 +42,20 @@ export default function MyPost({ searchParams }: { searchParams: TQuery }) {
             </li>
           ))}
         />
-        {postFrom.key === "community" && (
-          <LinkButton href="/post/write">
-            <WriteIcon />
-            <span className="text-body-600">커뮤니티 글 작성하기</span>
-          </LinkButton>
-        )}
-      </div>
-      <div className="flex flex-col gap-0">
-        <PostListWithPagination posts={posts} />
+        {postFrom.key === "community" && ( */}
+        <LinkButton href="/post/write" className="self-end ml-auto">
+          <WriteIcon />
+          <span className="text-body-600">커뮤니티 글 작성하기</span>
+        </LinkButton>
+        {/* )} */}
       </div>
+      {posts.length > 0 ? (
+        <div className="flex flex-col gap-0">
+          <PostListWithPagination posts={posts.slice(0, 1)} />
+        </div>
+      ) : (
+        <NonePostItem />
+      )}
     </>
   );
 }

src/app/(route)/my/profile/_components/FormEditProfile.tsx

@@ -18,34 +18,34 @@ import { profileAction } from "@/lib/action";
 import handleAlert from "@/app/(auth)/_components/ErrorAlert";
 
 export default function FormEditProfile({
-  data,
-  setData,
-  session,
+  userId,
+  profile,
+  sessionProvider,
 }: {
-  data: TProfileData;
-  setData: Dispatch<SetStateAction<TProfileData>>;
-  session: Session | null;
+  userId: string;
+  profile: TProfileData;
+  sessionProvider: string;
 }) {
-  const changeData = (
-    e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>
-  ) => {
-    console.log(e.target.name);
-    const name = e.target.name;
-    const value = e.target.value;
-    setData((p) => ({ ...p, [name]: value }));
-  };
-  const changeMultiSelect: (
-    newValue: unknown,
-    actionMeta: ActionMeta<unknown>
-  ) => void = (newValue) => {
-    // console.log({ newValue });
-    if (Array.isArray(newValue)) setData((p) => ({ ...p, interest: newValue }));
-  };
+  // const changeData = (
+  //   e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>
+  // ) => {
+  //   console.log(e.target.name);
+  //   const name = e.target.name;
+  //   const value = e.target.value;
+  //   setData((p) => ({ ...p, [name]: value }));
+  // };
+  // const changeMultiSelect: (
+  //   newValue: unknown,
+  //   actionMeta: ActionMeta<unknown>
+  // ) => void = (newValue) => {
+  //   // console.log({ newValue });
+  //   if (Array.isArray(newValue)) setData((p) => ({ ...p, interest: newValue }));
+  // };
 
   async function save(e: FormEvent<HTMLFormElement>) {
     e.preventDefault();
 
-    const userId = "669bf4d4894a60fc9669e924";
+    // const userId = profile?.userId._id as string;
     const formData = new FormData(e.currentTarget);
 
     try {
@@ -62,25 +62,26 @@ export default function FormEditProfile({
         <Input.Text
           name="positionTag"
           placeholder="이름 앞에 추가될 포지션 태그를 추가하세요"
-          value={data.positionTag}
-          onChange={changeData}
+          // value={data.positionTag}
+          // onChange={changeData}
         />
       </ProfileInputArea>
       <ProfileInputArea label="내 소개">
         <Input.Textarea
           name="introduce"
           placeholder="나를 소개할 말을 추가하세요"
-          onChange={changeData}
+          // onChange={changeData}
         />
       </ProfileInputArea>
-      {session?.account.provider === "credentials" && (
-        <ProfileInputArea label="이메일">
-          <Input.Email
-            name="email"
-            value={data.email}
-            onChange={changeData}
-            placeholder="이메일 주소를 입력하세요"
-          />
+      <ProfileInputArea label="이메일">
+        <Input.Email
+          name="email"
+          // value={data.email}
+          // onChange={changeData}
+          placeholder="이메일 주소를 입력하세요"
+          readOnly={sessionProvider !== "credentials"}
+        />
+        {false && (
           <div className="flex gap-4 items-center">
             <Button
               variation="outline"
@@ -92,19 +93,20 @@ export default function FormEditProfile({
               *변경 후 재인증이 필요합니다.
             </span>
           </div>
-        </ProfileInputArea>
-      )}
+        )}
+      </ProfileInputArea>
       <ProfileInputArea label="관심 카테고리">
         <Input.Select
           name="interest"
           placeholder="관심 카테고리를 추가하세요"
           isMulti
           options={CATEGORIES}
-          value={data.interest}
-          onChange={changeMultiSelect}
+          defaultValue={profile.interest}
+          // value={data.interest}
+          // onChange={changeMultiSelect}
         />
       </ProfileInputArea>
-      <Button type="submit" variation="solid" className="self-start">
+      <Button type="submit" variation="solid" className="self-end">
         프로필 저장
       </Button>
     </form>

src/app/(route)/my/profile/_components/ProfileForms.tsx

@@ -11,6 +11,8 @@ import DeleteAccountConfirm from "./DeleteAccountConfirm";
 import ProfilePreview from "./ProfilePreview";
 import { Session } from "next-auth";
 import { CategoryOption } from "@/types/model/Category";
+import { ProfileSchema } from "@/types/model/Profile";
+import { CATEGORIES_ALL_OPTIONS } from "@/constants/categories/job_category";
 
 export type TProfileData = {
   profileUrl: string;
@@ -20,32 +22,54 @@ export type TProfileData = {
   interest: Array<CategoryOption>;
 };
 
-export default function ProfileForms({ session }: { session: Session | null }) {
-  const user = getUser();
-  const defaultData = {
-    profileUrl: session?.user.image || "",
-    positionTag: user.position,
-    introduce: "",
-    email: session?.user.email || "",
-    interest: user.interest,
+export default function ProfileForms({
+  userId,
+  profile,
+  sessionProvider,
+}: {
+  userId: string;
+  profile: ProfileSchema | null;
+  sessionProvider: string;
+}) {
+  // const user = getUser();
+  const interestCategory: CategoryOption[] =
+    profile?.my_category && profile.my_category.length > 0
+      ? profile?.my_category.map(
+          (value) =>
+            CATEGORIES_ALL_OPTIONS.find(
+              (opt) => opt.value === value
+            ) as CategoryOption
+        )
+      : [];
+  const profileData = {
+    profileUrl: profile?.userId.profile_img || "",
+    positionTag: profile?.position_tag || "",
+    introduce: profile?.introduce || "",
+    email: profile?.userId.email || "",
+    interest: interestCategory || [],
   };
-  const [data, setData] = useState<TProfileData>(defaultData);
+  console.log({ profile, profileData });
 
-  const setProfileImage = (image: string) => {
-    setData((prev) => ({ ...prev, profileUrl: image }));
-  };
+  // const [data, setData] = useState<TProfileData>(defaultData);
+  // const setProfileImage = (image: string) => {
+  //   setData((prev) => ({ ...prev, profileUrl: image }));
+  // };
 
   return (
     <>
       <div className="grid xl:grid-cols-[5fr_4fr] xl:items-start gap-gutter-xl">
         <div className="flex flex-col gap-8">
-          <p className="text-H2 text-label-dimmed">{session?.user.name}</p>
+          <p className="text-H2 text-label-dimmed">{profile?.userId.name}</p>
           <ProfileInputArea label="아바타 이미지">
-            <ProfileImageInput setProfileImage={setProfileImage} />
+            <ProfileImageInput />
           </ProfileInputArea>
           <div className="w-full h-[1px] border-t border-t-line-normal"></div>
-          <FormEditProfile data={data} setData={setData} session={session} />
-          {session?.account.provider === "credentials" && (
+          <FormEditProfile
+            userId={userId}
+            profile={profileData}
+            sessionProvider={sessionProvider}
+          />
+          {sessionProvider === "credentials" && (
             <>
               <div className="w-full h-[1px] border-t border-t-line-normal"></div>
               <SectionTitle size="md" className="mb-2">
@@ -58,14 +82,14 @@ export default function ProfileForms({ session }: { session: Session | null }) {
           <SectionTitle size="md" className="mb-2">
             연락처 수정
           </SectionTitle>
-          <FormUpdatePhoneNumber defaultValue={user.phone} />
+          <FormUpdatePhoneNumber defaultValue={profile?.userId.phone} />
           <div className="w-full h-[1px] border-t border-t-line-normal"></div>
           <DeleteAccountConfirm />
         </div>
 
-        <div className="previewBox rounded-2xl hidden xl:sticky xl:top-20 p-6 border border-line-normal xl:flex flex-col gap-4">
-          <ProfilePreview name={session?.user.name} data={data} />
-        </div>
+        {/* <div className="previewBox rounded-2xl hidden xl:sticky xl:top-20 p-6 border border-line-normal xl:flex flex-col gap-4">
+          <ProfilePreview name={profile?.userId.name} data={profileData} />
+        </div> */}
       </div>
     </>
   );

src/app/(route)/my/profile/_components/ProfileImageInput.tsx

@@ -1,15 +1,12 @@
+"use client";
 import { ChangeEvent, useEffect, useState } from "react";
 
 import useModal from "@/hooks/useModal";
 import ProfileImagePreviewModal from "./ProfileImagePreviewModal";
 import Button from "@/common/Atoms/Form/Button";
 import ImageInputWithButton from "@/common/Molecules/Form/ImageInputWithButton";
 
-export default function ProfileImageInput({
-  setProfileImage,
-}: {
-  setProfileImage: (image: string) => void;
-}) {
+export default function ProfileImageInput() {
   const [imageUrl, setImageUrl] = useState("");
   const { Modal, open, close } = useModal({
     children: (
@@ -47,10 +44,13 @@ export default function ProfileImageInput({
 
   function onSave() {
     // TODO: DB에 저장
-    setProfileImage(imageUrl);
     close();
   }
 
+  function onDelete() {
+    setImageUrl("");
+  }
+
   return (
     <>
       <div>
@@ -68,13 +68,13 @@ export default function ProfileImageInput({
           >
             이미지 변경하기
           </ImageInputWithButton>
-          {/* <Button
+          <Button
             variation="text"
             colors={{ bg: "bg-label-neutral", text: "text-label-neutral" }}
-            onClick={() => setImageUrl("")}
+            onClick={onDelete}
           >
             이미지 제거
-          </Button> */}
+          </Button>
         </div>
         <p className="text-label-400 text-label-alt mt-2">
           *권장 이미지 - 확장자: png, jpg, jpeg / 용량: 1MB 이하