diff --git a/src/infrastructure/api/index.ts b/src/infrastructure/api/index.ts
new file mode 100644
index 00000000..0102d4ec
--- /dev/null
+++ b/src/infrastructure/api/index.ts
@@ -0,0 +1,18 @@
+import { teamDataMock } from '../mock/team';
+import { TeamService } from './team';
+
+export const api: APIService = getAPIMethod();
+
+function getAPIMethod(): APIService {
+  return provideMockAPIService();
+}
+
+function provideMockAPIService(): APIService {
+  const teamService = teamDataMock();
+
+  return { teamService };
+}
+
+export interface APIService {
+  teamService: TeamService;
+}
diff --git a/src/infrastructure/api/team.ts b/src/infrastructure/api/team.ts
new file mode 100644
index 00000000..90543470
--- /dev/null
+++ b/src/infrastructure/api/team.ts
@@ -0,0 +1,5 @@
+import { IssueData } from './types/team';
+
+export interface TeamService {
+  getIssueInfo(teamID: string, issueID: string): Promise<IssueData>;
+}
diff --git a/src/infrastructure/api/types/team.ts b/src/infrastructure/api/types/team.ts
new file mode 100644
index 00000000..ed59db20
--- /dev/null
+++ b/src/infrastructure/api/types/team.ts
@@ -0,0 +1,23 @@
+export type IssueData = {
+  createdAt: string;
+  title: string;
+  category: string;
+  team: TeamData;
+  issueList: IssueDetail[];
+  writer: string;
+  thumbnail?: string;
+};
+
+type TeamData = {
+  teammates: string[];
+  thumbnail: string;
+  title: string;
+};
+
+type IssueDetail = {
+  writer: string;
+  target: string;
+  body: string;
+  createdAt: string;
+  keywordList: string[];
+};
diff --git a/src/infrastructure/mock/team.data.ts b/src/infrastructure/mock/team.data.ts
new file mode 100644
index 00000000..4b6a78ce
--- /dev/null
+++ b/src/infrastructure/mock/team.data.ts
@@ -0,0 +1,39 @@
+export const TEAM_DATA = {
+  ISSUE_INFO: {
+    createdAt: '2021-12-27',
+    title: '깃알못이라 iOS 프로젝트가 엉켜서 망가졌다',
+    category: '팀컬쳐',
+    team: {
+      teammates: [
+        'https://ww.namu.la/s/34abe06e2ac92dc187a850f51930231b0b933b71ef9372e4ad0c4c2084b231c772ff46ccdbed58e1967cfc9415be646acb7cd18fb95d96bf16052c1634e221ea01c72f96f97a4588c0ed1a9c2f53c741723b5794cecea4f8107ad062cc84e0d4',
+        'https://ww.namu.la/s/0e30b51afeaedaccb096046b25d42d73599c54d16e44e0ea6ffd88a96f81d724e9d38cc3703b7c11ba2a70a4d136b02c68d7a2559a3da2e2dbdb1066424f5728449bc216de079e38f19434a086f7081437e4f833a8aabde3674cd34188c8c839',
+      ],
+      thumbnail: 'https://m.media-amazon.com/images/I/61EeKaRVyUL._AC_SL1100_.jpg',
+      title: '포켓몬주식회사',
+    },
+    issueList: [
+      {
+        writer: '주영주영',
+        target: '서진서진',
+        body: '서진아고맙다',
+        createdAt: '12/20',
+        keywordList: ['고마워'],
+      },
+      {
+        writer: '효인효인',
+        target: '서진서진',
+        body: '서진아\n고맙다',
+        createdAt: '12/20',
+        keywordList: ['고마워'],
+      },
+      {
+        writer: '지연지연',
+        target: '서진서진',
+        body: '서진아\n\n고맙다',
+        createdAt: '12/20',
+        keywordList: ['고마워'],
+      },
+    ],
+    writer: '주영주영',
+  },
+};
diff --git a/src/infrastructure/mock/team.ts b/src/infrastructure/mock/team.ts
new file mode 100644
index 00000000..b3b8a97b
--- /dev/null
+++ b/src/infrastructure/mock/team.ts
@@ -0,0 +1,13 @@
+import { TeamService } from '@api/team';
+import { TEAM_DATA } from './team.data';
+
+export function teamDataMock(): TeamService {
+  const getIssueInfo = async () => {
+    await wait(2000);
+    return TEAM_DATA.ISSUE_INFO;
+  };
+
+  return { getIssueInfo };
+}
+
+const wait = (milliSeconds: number) => new Promise((resolve) => setTimeout(resolve, milliSeconds));
diff --git a/src/presentation/pages/Team/Issue/index.tsx b/src/presentation/pages/Team/Issue/index.tsx
index 86a7ae5d..072df174 100644
--- a/src/presentation/pages/Team/Issue/index.tsx
+++ b/src/presentation/pages/Team/Issue/index.tsx
@@ -1,9 +1,30 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
+import { api } from '@api/index';
+import { IssueData } from '@api/types/team';
 
 function TeamIssue() {
-  const { issueID } = useParams();
-  return <div>팀원소개서 상세, 이슈 번호는 {issueID}</div>;
+  const { teamID, issueID } = useParams();
+  const [issue, setIssue] = useState<IssueData | null>(null);
+  const [isValidating, setIsValidating] = useState(false);
+
+  useEffect(() => {
+    if (!teamID || !issueID) return;
+    (async () => {
+      setIsValidating(true);
+      const data = await api.teamService.getIssueInfo(teamID, issueID);
+      setIssue(data);
+      setIsValidating(false);
+    })();
+  }, [teamID, issueID]);
+
+  return (
+    <>
+      <div>팀원소개서 상세, 이슈 번호는 {issueID}</div>
+      {isValidating && <div>로딩중</div>}
+      <div>{issue && issue.title}</div>
+    </>
+  );
 }
 
 export default TeamIssue;