🔀 :: 마이페이지

src/apis/applications/index.ts

@@ -1,9 +1,9 @@
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { useToastStore } from "@team-return/design-system";
 import { AxiosError } from "axios";
 import { useRouter } from "next/navigation";
 import { instance } from "../axios";
-import { ApplyRequestItmeType } from "./type";
+import { ApplicationsResponseType, ApplyRequestItmeType } from "./type";
 
 const router = "/applications";
 
@@ -51,3 +51,13 @@ export default function useApplyToCompany(recruitmentId: string) {
     }
   );
 }
+
+
+export function useGetApplications() {
+  return useQuery(["GetApplications"], async () => {
+    const { data } = await instance.get<ApplicationsResponseType>(
+      `${router}/students`
+    );
+    return data;
+  });
+}

src/apis/applications/type.ts

@@ -5,6 +5,25 @@ export interface ApplyRequestItmeType {
   type: AttachmentsType;
 }
 
-export interface ApplyRequestBody {
+export type ApplicationsStatusType =
+  | "REQUESTED"
+  | "APPROVED"
+  | "FAILED"
+  | "PASS"
+  | "REJECTED";
+
+export interface ApplicationItemType {
+  application_id: number;
+  company: string;
   attachments: ApplyRequestItmeType[];
+  application_status: ApplicationsStatusType;
+}
+
+export interface ApplicationsResponseType {
+  applications: ApplicationItemType[];
+  count: number
 }
+
+export interface ApplyRequestBody {
+  attachments: ApplyRequestItmeType[];
+}

src/apis/code/index.ts

@@ -1,6 +1,6 @@
-import { CodeType, GetCodeType } from "./type";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
+import { CodeType, GetCodeType } from "./type";
 
 const router = "/codes";
 

src/apis/recruitments/index.ts

@@ -4,7 +4,7 @@ import { instance } from "../axios";
 import {
   GetNumberOfPagesType,
   RecruitmentsDetailType,
-  RecruitmentsListResponseType,
+  RecruitmentsListResponseType
 } from "./type";
 
 const router = "/recruitments";

src/apis/reviews/index.ts

@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import { instance } from "../axios";
 import {
   getReviewDetailResponseProps,
-  getReviewListResponseProps,
+  getReviewListResponseProps
 } from "./type";
 
 const router = "/reviews";

src/apis/students/index.ts

@@ -16,7 +16,10 @@ export const useSignup = () => {
 
   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 useSignup = () => {
 export const useMyProfile = () => {
   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/apis/user/index.ts

@@ -1,9 +1,9 @@
-import { useToastStore, Toast } from "@team-return/design-system";
 import { useMutation } from "@tanstack/react-query";
+import { useToastStore } from "@team-return/design-system";
+import axios, { AxiosError } from "axios";
 import { useRouter } from "next/navigation";
 import { useCookies } from "react-cookie";
 import { RequestBody, ResponseBody } from "./type";
-import axios, { AxiosError } from "axios";
 
 const router = "/users";
 

src/app/globals.css

@@ -15,6 +15,9 @@
     -ms-user-select: text;
     user-select: text;
   }
+  .dropDownMenu {
+    @apply flex-1 text-b3 leading-b3 font-m text-[#7f7f7f] flex justify-start items-center px-[10px] cursor-pointer hover:text-[#333333];
+  }
 }
 
 * {

src/app/mypage/page.tsx

@@ -1,3 +1,11 @@
+import AppliedCompaniesList from "@/components/mypage/AppliedCompaniesList";
+import DetailProfile from "@/components/mypage/DetailProfile";
+
 export default function MyPage() {
-  return <>mypage</>;
+  return (
+    <div className="py-[56px] mx-[9vw]">
+      <DetailProfile />
+      <AppliedCompaniesList />
+    </div>
+  );
 }

src/components/SuggestionHeader.tsx

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

src/components/common/Button/FIleDownload.tsx

@@ -0,0 +1,26 @@
+import Link from "next/link";
+import { file_name_regex } from "@/util/regex";
+import { Icon } from "@team-return/design-system";
+
+interface PropsType {
+  fileURL: string;
+  onClick?: (props: any) => void;
+}
+
+export default function FileDownload({ fileURL, onClick }: PropsType) {
+  return (
+    <Link
+      href={`${process.env.NEXT_PUBLIC_IMAGE_URL}/${fileURL}`}
+      passHref
+      target="_blank"
+      onClick={onClick}
+    >
+      <div className="flex items-center justify-center w-fit h-fit gap-2 px-3 py-1 rounded-[8px] bg-[#f7f7f7] hover:underline">
+        <p className="text-caption leading-caption font-r text-[#7F7F7F] max-w-[100px] overflow-hidden whitespace-nowrap text-ellipsis">
+          {file_name_regex(fileURL)}
+        </p>
+        <Icon icon="Download" size={12} color="gray60" />
+      </div>
+    </Link>
+  );
+}

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/Dropdown/KebabMenu.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useDropDown } from "@/hook/useDropDown";
+import { KebabItemType } from "@/util/type/kebabMenu";
+import { Icon } from "@team-return/design-system";
+
+interface PropsType {
+  items: KebabItemType[];
+}
+
+export default function KebabMenu({ items }: PropsType) {
+  const { DropDownComponent, toggleDropdown, closeDropDown } = useDropDown();
+  return (
+    <div className="relative cursor-pointer" onClick={toggleDropdown}>
+      <Icon icon="KebabMenu" size={24} color="gray80" />
+      <DropDownComponent>
+        <div className="absolute top-[30px] right-0 z-[3] w-[150px] bg-white rounded-b-[16px] rounded-tl-[16px] rounded-tr-[4px] py-3 shadow-elevaiton flex flex-col items-center">
+          {items.map(({ label, onClick }, idx) => (
+            <div
+              key={idx}
+              className="flex items-center justify-center w-full py-3 text-b3 leading-b3 font-m text-[#7f7f7f] cursor-pointer hover:text-[#333333]"
+              onClick={() => {
+                closeDropDown();
+                onClick();
+              }}
+            >
+              {label}
+            </div>
+          ))}
+        </div>
+      </DropDownComponent>
+    </div>
+  );
+}

src/components/common/Header.tsx

@@ -14,7 +14,7 @@ function Header() {
     return null;
   }
 
-  const profile = useMyProfile();
+  const { data: profile } = useMyProfile();
 
   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

@@ -5,7 +5,7 @@ import { useDropDown } from "@/hook/useDropDown";
 import useForm from "@/hook/useForm";
 import { RecruitmentsQueryType } from "@/hook/useQueryString/type";
 import { useQueryString } from "@/hook/useQueryString/useQueryString";
-import { TechCodeResponensType } from "@/util/type";
+import { TechCodeResponensType } from "@/util/type/type";
 import { Icon } from "@team-return/design-system";
 import React, { useEffect, useState } from "react";
 import GhostBtn from "./Button/GhostBtn";

src/components/company/CompanyTitle.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useDropDown } from "@/hook/useDropDown";
-import { Icon } from "@team-return/design-system";
+import { getCompanyKebabItems } from "@/util/object/kebabMenuItems";
+import { KebabItemType } from "@/util/type/kebabMenu";
 import Image from "next/image";
+import KebabMenu from "../common/Dropdown/KebabMenu";
 
 interface PropsType {
   business_number?: string;
@@ -21,10 +22,11 @@ export default function CompanyTitle({
   onClickInterview,
   children,
 }: PropsType) {
-  const { DropDownComponent, toggleDropdown, closeDropDown } = useDropDown();
+  const kebabItems: KebabItemType[] = getCompanyKebabItems(
+    onClickRecruitments,
+    onClickInterview
+  );
 
-  const menuStyle =
-    "flex-1 text-b3 leading-b3 font-m text-[#7f7f7f] flex justify-start items-center px-[10px] cursor-pointer hover:text-[#333333]";
   return (
     <div className="flex items-center justify-between w-full">
       <div className="flex gap-6">
@@ -47,34 +49,7 @@ export default function CompanyTitle({
         </div>
       </div>
       {onClickInterview && onClickRecruitments && (
-        <button
-          className="relative flex items-center justify-center bg-white border-none cursor-pointer"
-          onClick={toggleDropdown}
-        >
-          <Icon icon="KebabMenu" size={20} color="gray60" />
-          <DropDownComponent>
-            <div className="absolute top-[30px] right-0 w-[150px] h-[100px] bg-white rounded-b-[16px] rounded-tl-[16px] rounded-tr-[4px] p-[10px] shadow-elevaiton flex flex-col">
-              <div
-                className={menuStyle}
-                onClick={() => {
-                  onClickRecruitments();
-                  closeDropDown();
-                }}
-              >
-                모집의뢰서 조회
-              </div>
-              <div
-                className={menuStyle}
-                onClick={() => {
-                  onClickInterview();
-                  closeDropDown();
-                }}
-              >
-                면접 후기 조회
-              </div>
-            </div>
-          </DropDownComponent>
-        </button>
+        <KebabMenu items={kebabItems} />
       )}
       {children}
     </div>

src/components/mypage/ApplicationStatus.tsx

@@ -0,0 +1,19 @@
+import { ApplicationsStatusType } from "@/apis/applications/type";
+import { applicationEnum, applicationStatusStyle } from "@/util/object/enum";
+
+interface PropsType {
+  status: ApplicationsStatusType;
+}
+
+export default function ApplicationStatus({ status }: PropsType) {
+  return (
+    <div
+      className="py-[6px] px-3 rounded-[4px]"
+      style={applicationStatusStyle[status]}
+    >
+      <p className="text-caption leading-caption font-r">
+        {applicationEnum[status]}
+      </p>
+    </div>
+  );
+}