Feat: 마이페이지 이미지, 자기소개 연동, 회원정보 수정 추가 작업 필요

Funssion-SWM · Aug 12, 2023 · d8f52b9 · d8f52b9
1 parent 0f83f69
commit d8f52b9
Show file tree

Hide file tree

Showing 10 changed files with 139 additions and 61 deletions.
diff --git a/src/app/me/[slug]/page.tsx b/src/app/me/[slug]/page.tsx
@@ -1,9 +1,11 @@
 import Header from '@/components/shared/Header';
 import MemosGrid from '@/components/memo/MemosGrid';
 import Profile from '@/components/shared/Profile';
-import { getUserInfo, getHistory, getMemosByUserId } from '@/service/me';
+import { getHistory, getMemosByUserId } from '@/service/me';
 import LayoutWrapper from '@/components/shared/LayoutWrapper';
 import History from '@/components/history/History';
+import { getUserInfo2 } from '@/service/auth';
+import SettingBtns from '@/components/me/SettingBtns';
 
 type Props = {
   params: {
@@ -13,16 +15,22 @@ type Props = {
 
 export default async function MePage({ params: { slug } }: Props) {
   const memos = await getMemosByUserId(slug);
-  const userInfo = await getUserInfo(slug);
-  const history = await getHistory(slug, (new Date()).getFullYear(), (new Date()).getMonth() + 1, true);
+  const userInfo = await getUserInfo2(slug);
+  const history = await getHistory(
+    slug,
+    new Date().getFullYear(),
+    new Date().getMonth() + 1,
+    true
+  );
   return (
     <section>
       <Header />
       <LayoutWrapper>
         <div className="flex">
-          <section className="w-[300px] min-h-screen p-6 bg-[#F8F9FB]">
+          <section className="flex flex-col w-[300px] min-h-screen p-6 bg-soma-grey-20">
             <Profile userInfo={userInfo} />
-            <History history={history} userId={slug}/>
+            <History history={history} userId={slug} />
+            {/* <SettingBtns userId={slug} /> */}
           </section>
           <section className="grow w-full p-6">
             <h3 className="font-bold text-2xl mb-1">My Memos</h3>
@@ -35,9 +43,9 @@ export default async function MePage({ params: { slug } }: Props) {
 }
 
 export async function generateMetadata({ params }: Props) {
-  const { userName } = await getUserInfo(params.slug);
+  const { nickname } = await getUserInfo2(params.slug);
 
   return {
-    title: userName,
+    title: nickname,
   };
 }
diff --git a/src/app/me/setting/[slug]/page.tsx b/src/app/me/setting/[slug]/page.tsx
@@ -0,0 +1,19 @@
+import MyInfoForm from '@/components/MyInfoForm';
+import { getUserInfo2 } from '@/service/auth';
+
+type Props = {
+  params: {
+    slug: number;
+  };
+};
+
+export default async function MySettingPage({ params: { slug } }: Props) {
+  const userInfo = await getUserInfo2(slug);
+
+  return (
+    <section className="flex flex-col w-full items-center max-w-screen-sm mx-auto mt-24 shadow-lg py-5 px-32">
+      <h1 className="text-3xl font-bold my-5">Inforum</h1>
+      <MyInfoForm userId={slug} userInfo={userInfo} isSignup={false} />
+    </section>
+  );
+}
diff --git a/src/app/signup/setting/[slug]/page.tsx b/src/app/signup/setting/[slug]/page.tsx
@@ -17,7 +17,7 @@ export default function SignupSettingPage({ params: { slug } }: Props) {
   return (
     <section className="flex flex-col w-full items-center max-w-screen-sm mx-auto mt-24 shadow-lg py-5 px-32">
       <h1 className="text-3xl font-bold my-5">Inforum</h1>
-      <MyInfoForm userId={slug} />
+      <MyInfoForm userId={slug} isSignup={true} />
     </section>
   );
 }
diff --git a/src/components/MyInfoForm.tsx b/src/components/MyInfoForm.tsx
@@ -16,18 +16,21 @@ import BlueBtn2 from './shared/BlueBtn2';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { registerUserInfo } from '@/service/auth';
+import { UserInfo2 } from '@/types';
 
 type Props = {
   userId: number;
+  userInfo?: UserInfo2;
+  isSignup: boolean;
 };
 
-export default function MyInfoForm({ userId }: Props) {
+export default function MyInfoForm({ userId, userInfo, isSignup }: Props) {
   const router = useRouter();
 
   const [imageFile, setImageFile] = useState<File | null>(null);
-  const [imageUrl, setImageUrl] = useState('');
-  const [intro, setIntro] = useState('');
-  const [tags, setTags] = useState('');
+  const [imageUrl, setImageUrl] = useState(userInfo?.profileImageFilePath);
+  const [intro, setIntro] = useState(userInfo?.introduce ?? '');
+  const [tags, setTags] = useState(userInfo?.tags ?? '');
 
   const fileInput = useRef() as MutableRefObject<HTMLInputElement>;
 
@@ -43,7 +46,7 @@ export default function MyInfoForm({ userId }: Props) {
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     registerUserInfo(userId, imageFile, intro, tags).then(() => {
-      router.push('/login');
+      isSignup ? router.push('/login') : router.push(`/me/${userId}`);
     });
   };
 
@@ -66,10 +69,10 @@ export default function MyInfoForm({ userId }: Props) {
         >
           <Image
             src={imageUrl === '' ? profileImage : imageUrl}
-            width={0}
-            height={0}
+            width={96}
+            height={96}
             alt="profile"
-            className="rounded-full w-24 h-24"
+            className="rounded-full"
           />
           <Image
             src={editIcon}
@@ -93,10 +96,12 @@ export default function MyInfoForm({ userId }: Props) {
         />
       </div>
       <div className="flex flex-col gap-2 my-3">
-        <BlueBtn text="등록" onClick={() => {}} />
-        <Link href="/login">
-          <BlueBtn2 text="나중에" onClick={() => {}} extraStyle="w-full" />
-        </Link>
+        <BlueBtn text={isSignup ? '등록' : '수정'} onClick={() => {}} />
+        {isSignup && (
+          <Link href="/login">
+            <BlueBtn2 text="나중에" onClick={() => {}} extraStyle="w-full" />
+          </Link>
+        )}
       </div>
     </form>
   );

diff --git a/src/components/me/SettingBtns.tsx b/src/components/me/SettingBtns.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { checkUser } from '@/service/auth';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+
+type Props = {
+  userId: number;
+};
+
+export default function SettingBtns({ userId }: Props) {
+  const [uid, setUid] = useState<number | null>(null);
+
+  async function first() {
+    await checkUser().then((data) => setUid(data.id));
+  }
+
+  useEffect(() => {
+    first();
+  }, []);
+  return (
+    uid === Number(userId) && (
+      <div className="flex flex-col">
+        <Link href={`/me/setting/${userId}`} className="text-center">
+          <button className="mt-8 text-soma-grey-50 text-sm">
+            회원 정보 수정
+          </button>
+        </Link>
+      </div>
+    )
+  );
+}
diff --git a/src/components/shared/Header.tsx b/src/components/shared/Header.tsx
@@ -15,7 +15,7 @@ export default function Header() {
   const dropdownRef = useRef<HTMLElement>(null);
   const [isActive, setIsActive] = useDetectOutsideClick(dropdownRef, false);
   const [isLogin, setIsLogin] = useState<boolean | null>(null);
-  const [imageUrl, setImageUrl] = useState(null);
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
   const { open } = useContext(ModalContext);
 
   async function first() {

diff --git a/src/components/shared/Profile.tsx b/src/components/shared/Profile.tsx
@@ -1,35 +1,31 @@
 import Image from 'next/image';
-import exampleImg from '../../../public/img/profile.png';
+import basicProfileImg from '../../assets/profile.svg';
+import { UserInfo2 } from '@/types';
 
 type Props = {
-  userInfo: {
-    userName: string;
-  };
+  userInfo: UserInfo2;
 };
 
 export default function Profile({ userInfo }: Props) {
   return (
     <section className="flex flex-col items-center">
       <div className="text-center">
         <Image
-          src={exampleImg}
-          alt="exampleImg"
-          height={130}
+          src={userInfo.profileImageFilePath ?? basicProfileImg}
+          alt="profileImg"
+          width={100}
+          height={100}
           className="rounded-full"
         />
-        <p className="font-bold mt-1">{userInfo.userName}</p>
+        <p className="font-bold mt-1">{userInfo.nickname}</p>
         {/* <p>15301</p> */}
       </div>
-
-      {/* <div className="self-start mt-5">
+      <div className="self-start mt-5 w-full">
         <h3 className="font-semibold">자기소개</h3>
-        <p className="bg-gray-200 p-3 rounded-md mt-1">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum
-          explicabo deserunt at minima! Eligendi impedit culpa, natus vero
-          repudiandae suscipit voluptatem at nobis iste quibusdam tempore labore
-          rerum nemo accusantium!
+        <p className="bg-soma-blue-5 p-3 rounded-md mt-1 w-full text-sm h-[150px] overflow-scroll text-soma-grey-60">
+          {userInfo.introduce}
         </p>
-      </div> */}
+      </div>
     </section>
   );
 }
diff --git a/src/service/auth.ts b/src/service/auth.ts
@@ -5,6 +5,7 @@ import {
   LoginData,
   SignUpData,
   SignupResponse,
+  UserInfo2,
 } from '@/types';
 import { URLSearchParams } from 'next/dist/compiled/@edge-runtime/primitives/url';
 
@@ -138,7 +139,7 @@ export async function registerUserInfo(
     .catch(console.error);
 }
 
-export async function getUserInfo2(userId: number) {
+export async function getUserInfo2(userId: number): Promise<UserInfo2> {
   return fetch(
     `${process.env.NEXT_PUBLIC_SERVER_IP_ADDRESS_SECURE}/users/profile/${userId}`
   )

diff --git a/src/service/me.ts b/src/service/me.ts
@@ -1,34 +1,44 @@
-import { UserInfo, Record, Memo } from '@/types'
+import { UserInfo, Record, Memo } from '@/types';
 
 export async function getUserInfo(userId: number): Promise<UserInfo> {
-    return fetch(`${process.env.NEXT_PUBLIC_SERVER_IP_ADDRESS}/mypage/${userId}`)
-      .then((res) => {
-        if (!res.ok) throw new Error('error 발생!');
-        return res.json();
+  return fetch(`${process.env.NEXT_PUBLIC_SERVER_IP_ADDRESS}/mypage/${userId}`)
+    .then((res) => {
+      if (!res.ok) throw new Error('error 발생!');
+      return res.json();
     })
     .catch(console.error);
 }
 
-
-export async function getHistory(userId: number,year: number, month: number, isSSR: boolean): Promise<Record[]> {
-    return fetch(`${isSSR ? process.env.NEXT_PUBLIC_SERVER_IP_ADDRESS : process.env.NEXT_PUBLIC_SERVER_IP_ADDRESS_SECURE}/mypage/${userId}/history?year=${year}&month=${month}`)
-      .then((res) => {
-        if (!res.ok) throw new Error('error 발생!');
-        return res.json();
+export async function getHistory(
+  userId: number,
+  year: number,
+  month: number,
+  isSSR: boolean
+): Promise<Record[]> {
+  return fetch(
+    `${
+      isSSR
+        ? process.env.NEXT_PUBLIC_SERVER_IP_ADDRESS
+        : process.env.NEXT_PUBLIC_SERVER_IP_ADDRESS_SECURE
+    }/mypage/${userId}/history?year=${year}&month=${month}`
+  )
+    .then((res) => {
+      if (!res.ok) throw new Error('error 발생!');
+      return res.json();
     })
     .catch(console.error);
 }
 
 export async function getMemosByUserId(userId: number): Promise<Memo[]> {
-    return fetch(
-      `${process.env.NEXT_PUBLIC_SERVER_IP_ADDRESS}/mypage/${userId}/memos`,
-      {
-        next: { revalidate: 0 },
-      }
-    )
-      .then((res) => {
-        if (!res.ok) throw new Error('error 발생!');
-        return res.json();
-      })
-      .catch(console.error);
-  }
+  return fetch(
+    `${process.env.NEXT_PUBLIC_SERVER_IP_ADDRESS}/mypage/${userId}/memos`,
+    {
+      next: { revalidate: 0 },
+    }
+  )
+    .then((res) => {
+      if (!res.ok) throw new Error('error 발생!');
+      return res.json();
+    })
+    .catch(console.error);
+}
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -71,6 +71,13 @@ export type UserInfo = {
   userName: string;
 };
 
+export type UserInfo2 = {
+  profileImageFilePath: string;
+  nickname: string;
+  introduce: string;
+  tags: string;
+};
+
 export type Record = {
   historyId: number;
   date: string;