Feat/마이페이지 개인화#106

src/app/mypage/my-active/my-comment/page.tsx

@@ -1,4 +1,4 @@
-// import CommentList from '@/domains/shared/components/comment/CommentList';
+import MyComment from '@/domains/mypage/components/pages/my-active/MyComment';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
@@ -7,6 +7,6 @@ export const metadata: Metadata = {
 };
 
 function Page() {
-  return <>{/* <CommentList /> */}</>;
+  return <MyComment />;
 }
 export default Page;

src/app/mypage/my-active/my-like/page.tsx

@@ -1,4 +1,5 @@
 // import PostCard from '@/domains/community/main/PostCard';
+import MyLike from '@/domains/mypage/components/pages/my-active/MyLike';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
@@ -7,6 +8,6 @@ export const metadata: Metadata = {
 };
 
 function Page() {
-  return <section>{/* <PostCard posts={posts} isLoading={isLoading} /> */}</section>;
+  // return <MyLike />;
 }
 export default Page;

src/app/mypage/my-active/my-post/page.tsx

@@ -1,4 +1,4 @@
-// import PostCard from '@/domains/community/main/PostCard';
+import MyPost from '@/domains/mypage/components/pages/my-active/MyPost';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
@@ -7,6 +7,6 @@ export const metadata: Metadata = {
 };
 
 function Page() {
-  return <div>{/* <PostCard posts={posts} isLoading={isLoading} /> */}</div>;
+  return <MyPost />;
 }
 export default Page;

src/app/mypage/my-alarm/page.tsx

@@ -1,4 +1,4 @@
-import Alarm from '@/domains/mypage/components/Alarm';
+import MyAlarm from '@/domains/mypage/components/pages/my-alarm/MyAlarm';
 
 import { Metadata } from 'next';
 
@@ -10,10 +10,7 @@ export const metadata: Metadata = {
 function Page() {
   return (
     <div className="flex flex-col gap-3">
-      <Alarm></Alarm>
-      <Alarm></Alarm>
-      <Alarm></Alarm>
-      <Alarm></Alarm>
+      <MyAlarm />
     </div>
   );
 }

src/app/mypage/my-bar/page.tsx

@@ -1,4 +1,4 @@
-import CocktailCard from '@/domains/shared/components/cocktail-card/CocktailCard';
+import MyBar from '@/domains/mypage/components/pages/my-bar/MyBar';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {
@@ -7,19 +7,6 @@ export const metadata: Metadata = {
 };
 
 function Page() {
-  return (
-    <div
-      className="grid grid-cols-1 justify-items-center mt-10 gap-8  sm:[grid-template-columns:repeat(2,minmax(0,320px))]  sm:justify-evenly md:[grid-template-columns:repeat(3,minmax(0,250px))]  
-  "
-    >
-      <CocktailCard
-        src=""
-        textSize1="text-xl"
-        name="Old Pashioned"
-        nameKo="올드 패션드"
-        keep={false}
-      ></CocktailCard>
-    </div>
-  );
+  return <MyBar />;
 }
 export default Page;

src/domains/mypage/api/fetchProfile.ts

@@ -0,0 +1,36 @@
+'use client';
+import { getApi } from '@/app/api/config/appConfig';
+import { useEffect, useState } from 'react';
+
+interface Profile {
+  abvDegree: number;
+  abvLabel: string;
+  abvLevel: number;
+  email?: string;
+  id: number;
+  myCommentCount: number;
+  myKeepCount: number;
+  myLikedPostCount: number;
+  myPostCount: number;
+  nickname: string;
+}
+
+function useFetchProfile() {
+  const [profile, setProfile] = useState<Profile | null>(null);
+
+  const fetchProfile = async () => {
+    const res = await fetch(`${getApi}/me/profile`, {
+      method: 'GET',
+      credentials: 'include',
+    });
+    const json = await res.json();
+    setProfile(json.data);
+  };
+
+  useEffect(() => {
+    fetchProfile();
+  }, []);
+
+  return { profile, fetchProfile };
+}
+export default useFetchProfile;

src/domains/mypage/components/Alarm.tsx

@@ -4,7 +4,12 @@ import clsx from 'clsx';
 import Image from 'next/image';
 import { useState } from 'react';
 
-function Alarm() {
+interface Props {
+  title: string;
+  content: string;
+}
+
+function Alarm({ title, content }: Props) {
   const [isClick, setIsClick] = useState(false);
 
   const handleClick = () => {
@@ -27,8 +32,8 @@ function Alarm() {
           <p className="text-sm text-white/80">10분 전</p>
         </div>
         <div className="flex flex-col">
-          <h2 className="text-lg font-bold">새로운 좋아요 알림</h2>
-          <p className="text-sm text-white/80">User님이 내 글에 좋아요를 누르셨습니다.</p>
+          <h2 className="text-lg font-bold">{title}</h2>
+          <p className="text-sm text-white/80">{content}</p>
         </div>
       </div>
     </div>

src/domains/mypage/components/EditNickName.tsx

@@ -1,27 +1,76 @@
+import { getApi } from '@/app/api/config/appConfig';
 import Button from '@/shared/components/button/Button';
 import TextButton from '@/shared/components/button/TextButton';
 import Input from '@/shared/components/Input-box/Input';
 import ModalLayout from '@/shared/components/modal-pop/ModalLayout';
+import { useToast } from '@/shared/hook/useToast';
+import { Dispatch, SetStateAction } from 'react';
 
 interface Props {
   open: boolean;
   onClose: () => void;
+  setNickName: (v: string) => void;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+  editNickName: string;
+  setEditNickName: Dispatch<SetStateAction<string>>;
 }
 
-function EditNickName({ open, onClose }: Props) {
+function EditNickName({
+  open,
+  onClose,
+  setNickName,
+  setIsOpen,
+  editNickName,
+  setEditNickName,
+}: Props) {
+  const { toastError } = useToast();
+  const handlesave = async () => {
+    if (editNickName.length <= 1) {
+      toastError('닉네임은 2글자 이상 입력해야합니다');
+      return;
+    }
+
+    await setNickName(editNickName);
+
+    await fetch(`${getApi}/me/profile`, {
+      method: 'PATCH',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        nickname: editNickName,
+      }),
+    });
+    await setIsOpen(false);
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEditNickName(e.target.value);
+  };
+
   return (
     <ModalLayout
       title="닉네임 수정"
       description="닉네임을 수정해주세요."
       open={open}
       onClose={onClose}
-      buttons={<Button>저장</Button>}
+      buttons={
+        <Button type="submit" onClick={handlesave}>
+          저장
+        </Button>
+      }
     >
       <div className="flex flex-col gap-3 items-end">
         <label htmlFor="editNickName" className="sr-only">
           닉네임변경
         </label>
-        <Input placeholder="8글자 이내로 입력해주세요" id="editNicName" className="w-full" />
+        <Input
+          onChange={(e) => handleChange(e)}
+          placeholder="8글자 이내로 입력해주세요"
+          id="editNickName"
+          className="w-full"
+        />
         <TextButton onClick={onClose}>기존 이름으로 돌아가기</TextButton>
       </div>
     </ModalLayout>

src/domains/mypage/components/ToggleBtn.tsx

@@ -1,13 +1,45 @@
 'use client';
+import { getApi } from '@/app/api/config/appConfig';
+import { useToast } from '@/shared/hook/useToast';
 import clsx from 'clsx';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 function ToggleBtn() {
-  const [isClick, setIsClick] = useState(false);
+  const [isClick, setIsClick] = useState<boolean | null>(null);
+  const { toastSuccess } = useToast();
 
-  const handleClick = () => {
-    setIsClick(!isClick);
+  useEffect(() => {
+    const fetchToggle = async () => {
+      try {
+        const res = await fetch(`${getApi}/me/notification-setting`, {
+          method: 'GET',
+          credentials: 'include',
+        });
+        const json = await res.json();
+        setIsClick(json.data.enabled);
+      } catch {
+        console.error();
+      }
+    };
+    fetchToggle();
+  }, []);
+
+  const handleClick = async () => {
+    if (isClick === null) return;
+    const next = !isClick;
+    setIsClick(next);
+
+    await fetch(`${getApi}/me/notification-setting`, {
+      method: 'PATCH',
+      credentials: 'include',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        enabled: next,
+      }),
+    });
+    next ? toastSuccess('알림이 설정되었습니다.') : toastSuccess('알림이 해제되었습니다');
   };
+
   return (
     <button
       className={clsx(

src/domains/mypage/components/WithdrawModal.tsx

@@ -1,7 +1,10 @@
+'use client';
+
 import CrySsury from '@/shared/assets/ssury/ssury_cry.webp';
 import Image from 'next/image';
 import ModalLayout from '@/shared/components/modal-pop/ModalLayout';
 import Button from '@/shared/components/button/Button';
+
 interface Props {
   open: boolean;
   onClose: () => void;

src/domains/mypage/components/pages/my-active/MyComment.tsx

@@ -0,0 +1,36 @@
+'use client';
+import { getApi } from '@/app/api/config/appConfig';
+import { CommentType } from '@/domains/community/types/post';
+import CommentList from '@/domains/shared/components/comment/CommentList';
+import { useEffect, useState } from 'react';
+
+function MyComment() {
+  const [myComment, setMyComment] = useState<CommentType[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const fetchComment = async () => {
+    const res = await fetch(`${getApi}/me/comments`, {
+      method: 'GET',
+      credentials: 'include',
+    });
+    const json = await res.json();
+    console.log(json);
+    setMyComment(json.data.items);
+  };
+
+  useEffect(() => {
+    fetchComment();
+  }, []);
+
+  return (
+    <section>
+      {/* {CommentList.length !== 0 ? (
+        <CommentList comments={myComment} isLoading={isLoading} />
+      ) : (
+        <div className="flex justify-center">
+          <p>작성한 댓글이 없습니다.</p>
+        </div>
+      )} */}
+    </section>
+  );
+}
+export default MyComment;

src/domains/mypage/components/pages/my-active/MyLike.tsx

@@ -0,0 +1,32 @@
+'use client';
+import { getApi } from '@/app/api/config/appConfig';
+import PostCard from '@/domains/community/main/PostCard';
+import { useEffect, useState } from 'react';
+
+interface MyLike {
+  postId: number;
+  title: string;
+  likedAt: Date;
+  posetCreatedAt: Date;
+}
+
+function MyLike() {
+  const [myLike, setMyLike] = useState<MyLike[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const fetchLike = async () => {
+    const res = await fetch(`${getApi}/me/likes/posts`, {
+      method: 'GET',
+      credentials: 'include',
+    });
+    const json = await res.json();
+    // setMyLike(json.data.items);
+  };
+
+  useEffect(() => {
+    fetchLike();
+  }, []);
+
+  // return <PostCard posts={myLike} isLoading={isLoading} />;
+}
+export default MyLike;

src/domains/mypage/components/pages/my-active/MyPost.tsx

@@ -0,0 +1,25 @@
+'use client';
+import { getApi } from '@/app/api/config/appConfig';
+import PostCard from '@/domains/community/main/PostCard';
+import { useEffect, useState } from 'react';
+
+function MyPost() {
+  const [myPost, setMyPost] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const fetchPost = async () => {
+    const res = await fetch(`${getApi}/me/posts`, {
+      method: 'GET',
+      credentials: 'include',
+    });
+    const json = await res.json();
+    setMyPost(json.data.items);
+  };
+
+  useEffect(() => {
+    console.log(myPost);
+    fetchPost();
+  }, []);
+
+  return <PostCard posts={myPost} isLoading={isLoading} />;
+}
+export default MyPost;