feat :: profile 정보

src/apis/students/index.ts

@@ -16,7 +16,10 @@ export const Signup = () => {
 
   return useMutation(
     async (body: RequestBody) => {
-      const response = await axios.post<ResponseBody>(`${process.env.NEXT_PUBLIC_BASE_URL}${router}`, body);
+      const response = await axios.post<ResponseBody>(
+        `${process.env.NEXT_PUBLIC_BASE_URL}${router}`,
+        body
+      );
       return response.data;
     },
     {
@@ -72,7 +75,10 @@ export const Signup = () => {
 export const MyProfile = () => {
   return useQuery(
     ["myProfile"],
-    async () => await instance.get<MyProfileProps>(`${router}/my`),
+    async () => {
+      const { data } = await instance.get<MyProfileProps>(`${router}/my`);
+      return data;
+    },
     {
       refetchOnWindowFocus: false,
     }

src/apis/students/type.ts

@@ -11,6 +11,10 @@ export interface RequestBody {
 export interface MyProfileProps {
   student_name: string;
   student_gcn: string;
-  department: string; // 소개과 | 임베과 | 정보보안 | 인공지능
+  department:
+    | "SOFTWARE_DEVELOP"
+    | "EMBEDDED_SOFTWARE"
+    | "INFORMATION_SECURITY"
+    | "AI_SOFTWARE";
   profile_image_url: string;
 }

src/app/mypage/page.tsx

@@ -1,3 +1,9 @@
+import DetailProfile from "@/components/mypage/DetailProfile";
+
 export default function MyPage() {
-  return <>mypage</>;
+  return (
+    <>
+      <DetailProfile />
+    </>
+  );
 }

src/components/SuggestionHeader.tsx

@@ -9,15 +9,15 @@ interface PropsType {
 }
 
 export default function SuggestionHeader({ listType }: PropsType) {
-  const { data } = MyProfile();
+  const { data: profile } = MyProfile();
 
   const suggestionHeaderDummy = {
     Company: {
       title: "🏢 이런 기업은 어떠세요?",
       router: "/companies",
     },
     Recruitments: {
-      title: `👩‍💻 ${data?.data.student_name || "사용자"}님의 관심 분야에요`,
+      title: `👩‍💻 ${profile?.student_name || "사용자"}님의 관심 분야에요`,
 
       router: "/recruitments",
     },

src/components/common/Chips.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { TechCodeResponensType } from "@/util/type";
+import { TechCodeResponensType } from "@/util/type/type";
 import React from "react";
 
 interface PropsType {

src/components/common/Header.tsx

@@ -14,7 +14,7 @@ function Header() {
     return null;
   }
 
-  const profile = MyProfile();
+  const { data: profile } = MyProfile();
 
   return (
     <div
@@ -62,15 +62,15 @@ function Header() {
             width={28}
             height={28}
             src={`${
-              profile.data?.data.profile_image_url &&
+              profile?.profile_image_url &&
               process.env.NEXT_PUBLIC_IMAGE_URL +
                 "/" +
-                profile.data.data.profile_image_url
+                profile?.profile_image_url
             }`}
             alt="프로필사진"
           />
           <p className="text-[#333333] text-b2 font-r">
-            {profile.data?.data.student_name}
+            {profile?.student_name}
           </p>
         </div>
         <div>

src/components/common/SearchDropDown.tsx

@@ -7,7 +7,7 @@ import TextFiled from "./TextFiled";
 import useForm from "@/hook/useForm";
 import Chips from "./Chips";
 import { GetCode } from "@/apis/code";
-import { TechCodeResponensType } from "@/util/type";
+import { TechCodeResponensType } from "@/util/type/type";
 import GhostBtn from "./Button/GhostBtn";
 import { setQueryStringType, useQueryString } from "@/hook/useQueryString";
 
@@ -46,7 +46,7 @@ function SearchDropDown({ title }: PropsType) {
 function TechCodeDropDownComponent({
   closeDropDown,
   setQueryString,
-  getQueryString
+  getQueryString,
 }: {
   closeDropDown: () => void;
   setQueryString: (newValue: setQueryStringType) => void;

src/components/mypage/DetailProfile.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { MyProfile } from "@/apis/students";
+import { departmentEnum } from "@/util/object/enum";
+import { KebabItemType } from "@/util/type/kebabMenu";
+import { useToastStore } from "@team-return/design-system";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { Cookies } from "react-cookie";
+import KebabMenu from "../common/Dropdown/KebabMenu";
+import GhostTag from "./GhostTag";
+
+export default function DetailProfile() {
+  const { append } = useToastStore();
+  const navigator = useRouter();
+  const cookies = new Cookies();
+
+  const { data: profile } = MyProfile();
+
+  const kebabItems: KebabItemType[] = [
+    {
+      label: "프로필 수정",
+      onClick: () => {
+        append({
+          title: "",
+          message: "개발 중인 기능입니다.",
+          type: "YELLOW",
+        });
+      },
+    },
+    {
+      label: "비밀변호 변경",
+      onClick: () => {
+        append({
+          title: "",
+          message: "개발 중인 기능입니다.",
+          type: "YELLOW",
+        });
+      },
+    },
+    {
+      label: "버그 제보하기",
+      onClick: () => {
+        append({
+          title: "",
+          message: "개발 중인 기능입니다.",
+          type: "YELLOW",
+        });
+      },
+    },
+    {
+      label: "로그아웃",
+      onClick: () => {
+        navigator.push("/account/login");
+        cookies.remove("access_token");
+        cookies.remove("refresh_token");
+      },
+    },
+  ];
+
+  return (
+    <div className="flex items-center gap-6 px-[9vw]">
+      <div className="w-[100px] h-[100px] rounded-[50%] shadow-elevaiton overflow-hidden flex items-center justify-center">
+        <Image
+          width={100}
+          height={100}
+          src={
+            profile
+              ? `${process.env.NEXT_PUBLIC_IMAGE_URL}/${profile.profile_image_url}`
+              : ""
+          }
+          alt="프로필 사진"
+        />
+      </div>
+      <div className="flex-1">
+        <div className="flex items-center gap-2">
+          <p className="text-h5 leading-h5 font-m">{profile?.student_name}</p>
+          <GhostTag>{profile?.student_gcn}</GhostTag>
+        </div>
+        <p className="text-b3 leading-b3 font-r text-[#7F7F7F]">
+          {profile && departmentEnum[profile.department]}
+        </p>
+      </div>
+      <KebabMenu items={kebabItems} />
+    </div>
+  );
+}

src/components/mypage/GhostTag.tsx

@@ -0,0 +1,13 @@
+interface PropsType {
+  children?: string | number;
+}
+
+export default function GhostTag({ children }: PropsType) {
+  return (
+    <div className="px-2 py-[2px] border border-[#18DB89] rounded-[100px] h-fit w-fit">
+      <p className="text-caption leading-caption font-m text-[#18DB89]">
+        {children}
+      </p>
+    </div>
+  );
+}

src/components/recruitments/RecruitmentsTable.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { RecruitmentsDetailTable } from "@/apis/recruitments/type";
-import { hiringProgressEnum } from "@/util/enum";
+import { hiringProgressEnum } from "@/util/object/enum";
 import { money_regex, time_parsing } from "@/util/regex";
 import { Icon } from "@team-return/design-system";
 import React, { useState } from "react";

src/util/enum.ts → src/util/object/enum.ts

@@ -9,3 +9,10 @@ export enum hiringProgressEnum {
   AI = "AI면접",
   CODING_TEST = "코딩테스트",
 }
+
+export enum departmentEnum {
+  SOFTWARE_DEVELOP = '소프트웨어개발과',
+  EMBEDDED_SOFTWARE = '임베디드소프트웨어과',
+  INFORMATION_SECURITY = '정보보안과',
+  AI_SOFTWARE = '인공지능스프트웨어과'
+}