diff --git a/src/assets/daegun.png b/src/assets/daegun.png
new file mode 100644
index 0000000..b46b313
Binary files /dev/null and b/src/assets/daegun.png differ
diff --git a/src/assets/donggun.png b/src/assets/donggun.png
new file mode 100644
index 0000000..05e60c1
Binary files /dev/null and b/src/assets/donggun.png differ
diff --git a/src/assets/dongpil.png b/src/assets/dongpil.png
new file mode 100644
index 0000000..035756a
Binary files /dev/null and b/src/assets/dongpil.png differ
diff --git a/src/assets/hyoeun.png b/src/assets/hyoeun.png
new file mode 100644
index 0000000..718a1c6
Binary files /dev/null and b/src/assets/hyoeun.png differ
diff --git a/src/assets/jeongsik.png b/src/assets/jeongsik.png
new file mode 100644
index 0000000..a498529
Binary files /dev/null and b/src/assets/jeongsik.png differ
diff --git a/src/assets/jiwoong.png b/src/assets/jiwoong.png
new file mode 100644
index 0000000..fd1b88c
Binary files /dev/null and b/src/assets/jiwoong.png differ
diff --git a/src/assets/junhyeok.png b/src/assets/junhyeok.png
new file mode 100644
index 0000000..216728d
Binary files /dev/null and b/src/assets/junhyeok.png differ
diff --git a/src/constants/contributors.json b/src/constants/contributors.json
new file mode 100644
index 0000000..538f23d
--- /dev/null
+++ b/src/constants/contributors.json
@@ -0,0 +1,81 @@
+[
+ {
+ "name": "김대건",
+ "dept": "컴퓨터학부 20",
+ "role": "멋쟁이사자처럼 12기 회장",
+ "photo": "daegun",
+ "description": ["지도 페이지 개발", "기여한 부분 2", "기여한 부분 3"],
+ "contact": {
+ "instagram": "toothless.kid"
+ },
+ "team": "Front-End"
+ },
+ {
+ "name": "이효은",
+ "dept": "컴퓨터학부 21",
+ "role": "멋쟁이사자처럼 12기 운영진",
+ "photo": "hyoeun",
+ "description": ["웹 페이지 디자인", "", "기여한 부분 3"],
+ "contact": {
+ "instagram": "hyon__er"
+ },
+ "team": "Front-End"
+ },
+ {
+ "name": "조동필",
+ "dept": "컴퓨터학부 19",
+ "role": "멋쟁이사자처럼 12기 운영진",
+ "photo": "dongpil",
+ "description": ["웹 페이지 디자인", "기여한 부분 2", "기여한 부분 3"],
+ "contact": {
+ "instagram": "j0_dph"
+ },
+ "team": "Front-End"
+ },
+ {
+ "name": "채준혁",
+ "dept": "컴퓨터학부 21",
+ "role": "멋쟁이사자처럼 12기 운영진",
+ "photo": "junhyeok",
+ "description": ["메인 페이지 개발", "만든이들 페이지 개발 2", "웹 페이지 디자인"],
+ "contact": {
+ "instagram": "junyeokk_",
+ "linkedin": "junhyeokchae",
+ "github": "junyeokk"
+ },
+ "team": "Front-End"
+ },
+ {
+ "name": "이동건",
+ "dept": "컴퓨터학부 20",
+ "role": "멋쟁이사자처럼 12기 운영진",
+ "photo": "donggun",
+ "description": ["기여한 부분 1", "기여한 부분 2", "기여한 부분 3"],
+ "contact": {
+ "instagram": "thismovinggun"
+ },
+ "team": "Back-End"
+ },
+ {
+ "name": "전지웅",
+ "dept": "컴퓨터학부 19",
+ "role": "멋쟁이사자처럼 12기 운영진",
+ "photo": "jiwoong",
+ "description": ["기여한 부분 1", "기여한 부분 2", "기여한 부분 3"],
+ "contact": {
+ "instagram": "dnd._.hihi"
+ },
+ "team": "Back-End"
+ },
+ {
+ "name": "최정식",
+ "dept": "컴퓨터학부 21",
+ "role": "멋쟁이사자처럼 12기 운영진",
+ "photo": "jeongsik",
+ "description": ["기여한 부분 1", "기여한 부분 2", "기여한 부분 3"],
+ "contact": {
+ "instagram": "siksik__choi"
+ },
+ "team": "Back-End"
+ }
+]
diff --git a/src/pages/ContributorPage.styled.ts b/src/pages/ContributorPage.styled.ts
new file mode 100644
index 0000000..2e10a4f
--- /dev/null
+++ b/src/pages/ContributorPage.styled.ts
@@ -0,0 +1,32 @@
+import styled from "styled-components";
+
+export const DefaultGap = styled.div`
+ margin-top: 120px;
+`;
+
+export const TextContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-top: 50px;
+ text-align: center;
+ line-height: 1.5;
+
+ span {
+ margin-bottom: 10px;
+ }
+`;
+
+export const PositionContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin: 40px 0;
+`;
+
+export const PositionTextWrapper = styled.div`
+ margin-bottom: 20px;
+ font-family: "MesloLGS NF", monospace;
+`;
diff --git a/src/pages/ContributorPage.styled.tsx b/src/pages/ContributorPage.styled.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/ContributorPage.tsx b/src/pages/ContributorPage.tsx
index 741114b..749b976 100644
--- a/src/pages/ContributorPage.tsx
+++ b/src/pages/ContributorPage.tsx
@@ -1,3 +1,64 @@
+import { Text } from "@/components/typography/Text";
+
+import daegun from "@/assets/daegun.png";
+import donggun from "@/assets/donggun.png";
+import dongpil from "@/assets/dongpil.png";
+import hyoeun from "@/assets/hyoeun.png";
+import jeongsik from "@/assets/jeongsik.png";
+import jiwoong from "@/assets/jiwoong.png";
+import junhyeok from "@/assets/junhyeok.png";
+
+import contributors from "@/constants/contributors.json";
+
+import Card from "../components/display/Card";
+import { DefaultGap, TextContainer, PositionContainer, PositionTextWrapper } from "./ContributorPage.styled";
+
+const imageMap: { [key: string]: string } = {
+ daegun,
+ hyoeun,
+ dongpil,
+ junhyeok,
+ donggun,
+ jiwoong,
+ jeongsik,
+};
+const teams = ["Front-End", "Back-End"];
+
export default function ContributorPage() {
- return <>;
+ const renderContributors = (team: string): JSX.Element[] =>
+ contributors
+ .filter((contributor) => contributor.team === team)
+ .map((contributor, index) => );
+
+ return (
+ <>
+
+
+
+
+ 만든이들
+
+
+ 2024 경북대 대동제 홈페이지를 위해
+ 컴퓨터학부 멋쟁이사자처럼 운영진에서
+ 학생 분들의 편의를 위해 제작하게 되었습니다.
+
+ 이번 축제가 오랜만에 이루어지는 만큼
+ 더 즐겁고 행복한 축제가 되셨으면 좋겠습니다.
+
+
+
+
+ {teams.map((team) => (
+
+
+
+ {team}
+
+
+ {renderContributors(team)}
+
+ ))}
+
+ );
}