feat: 만든이들 페이지 구현 (#9)

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"
+    }
+]

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;
+`;

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) => <Card key={index} {...contributor} photo={imageMap[contributor.photo]} />);
+
+    return (
+        <>
+            <DefaultGap />
+
+            <TextContainer>
+                <Text size="xl" weight="bold" variant="darkpurple">
+                    만든이들
+                </Text>
+                <Text size="s" weight="normal" variant="lightpurple">
+                    2024 경북대 대동제 홈페이지를 위해 <br />
+                    컴퓨터학부 멋쟁이사자처럼 운영진에서 <br />
+                    학생 분들의 편의를 위해 제작하게 되었습니다. <br />
+                    <br />
+                    이번 축제가 오랜만에 이루어지는 만큼 <br />
+                    더 즐겁고 행복한 축제가 되셨으면 좋겠습니다.
+                    <br />
+                </Text>
+            </TextContainer>
+
+            {teams.map((team) => (
+                <PositionContainer key={team}>
+                    <PositionTextWrapper>
+                        <Text size="xl" weight="bold" variant="darkpurple">
+                            {team}
+                        </Text>
+                    </PositionTextWrapper>
+                    {renderContributors(team)}
+                </PositionContainer>
+            ))}
+        </>
+    );
 }