Merge pull request #16 from LikeLion-KNU/feature/#9

개발팀 소개 페이지 구현

index.html

@@ -11,7 +11,7 @@
                 dataLayer.push(arguments);
             }
             gtag("js", new Date());
-            gtag("config", import.meta.env.VITE_GOOGLE_ANALYTICS);
+            gtag("config", "%import.meta.env.VITE_GOOGLE_ANALYTICS%");
         </script>
         <title>2024 경북대 대동제, 하푸르나</title>
     </head>

src/components/display/Card.styled.ts

@@ -0,0 +1,99 @@
+import styled from "styled-components";
+
+export const SectionWrapper = styled.div`
+    background: #ffffff;
+    padding: 20px;
+    width: 70%;
+    margin-bottom: 30px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    border: 1px solid #d4d2e3;
+    border-radius: 24px;
+`;
+
+export const TopSection = styled.div`
+    display: flex;
+    align-items: center;
+    width: 100%;
+`;
+
+export const Photo = styled.img`
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-right: 20px;
+`;
+
+export const MemberInfo = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+`;
+
+export const MiddleSection = styled.div`
+    width: 100%;
+    padding: 10px 0;
+`;
+
+export const Description = styled.div`
+    margin-top: 6px;
+    list-style: none;
+    padding-left: 0;
+
+    li {
+        position: relative;
+        margin-bottom: 3px;
+        padding-left: 20px;
+
+        &::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 6px;
+            height: 6px;
+            background-color: #adabc3;
+            border-radius: 50%;
+        }
+    }
+`;
+
+export const BottomSection = styled.div`
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    padding: 0;
+`;
+
+export const Contact = styled.div`
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+`;
+
+export const IconLink = styled.a`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    padding: 5px 10px;
+    background-color: #f2f2f2;
+    border-radius: 20px;
+    color: #5d5a88;
+    text-decoration: none;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    font-family: "MesloLGS NF", monospace;
+`;
+
+export const SocialIcon = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+`;

src/components/display/Card.tsx

@@ -0,0 +1,96 @@
+import { FaInstagram, FaLinkedin, FaGithub } from "react-icons/fa";
+
+import { Text } from "../typography/Text";
+import {
+    SectionWrapper,
+    TopSection,
+    Photo,
+    MemberInfo,
+    MiddleSection,
+    Description,
+    BottomSection,
+    Contact,
+    IconLink,
+} from "./Card.styled";
+
+interface ICard {
+    name: string;
+    dept: string;
+    role: string;
+    photo: string;
+    description: string[];
+    contact: {
+        instagram?: string;
+        linkedin?: string;
+        github?: string;
+    };
+    team: string;
+}
+
+const Card: React.FC<ICard> = ({ photo, name, dept, role, description, contact }) => {
+    const instagramURL = contact.instagram ? `https://instagram.com/${contact.instagram}` : null;
+    const linkedinURL = contact.linkedin ? `https://linkedin.com/in/${contact.linkedin}` : null;
+    const githubURL = contact.github ? `https://github.com/${contact.github}` : null;
+
+    return (
+        <>
+            <SectionWrapper>
+                <TopSection>
+                    <Photo src={photo} alt="Profile Photo" />
+                    <MemberInfo>
+                        <Text size="m" weight="bold" variant="darkpurple">
+                            {name}
+                        </Text>
+                        <Text size="xs" weight="bold" variant="lightpurple">
+                            {dept}
+                        </Text>
+                        <Text size="xs" weight="bold" variant="lightpurple">
+                            {role}
+                        </Text>
+                    </MemberInfo>
+                </TopSection>
+                <MiddleSection>
+                    <Description>
+                        {description.map((item, index) => (
+                            <li key={index}>
+                                <Text size="xs" weight="normal" variant="lightpurple">
+                                    {item}
+                                </Text>
+                            </li>
+                        ))}
+                    </Description>
+                </MiddleSection>
+                <BottomSection>
+                    <Contact>
+                        {instagramURL && (
+                            <IconLink href={instagramURL} target="_blank" rel="noopener noreferrer">
+                                <FaInstagram />
+                                <Text size="xxs" weight="normal">
+                                    {contact.instagram}
+                                </Text>
+                            </IconLink>
+                        )}
+                        {linkedinURL && (
+                            <IconLink href={linkedinURL} target="_blank" rel="noopener noreferrer">
+                                <FaLinkedin />
+                                <Text size="xxs" weight="normal">
+                                    {contact.linkedin}
+                                </Text>
+                            </IconLink>
+                        )}
+                        {githubURL && (
+                            <IconLink href={githubURL} target="_blank" rel="noopener noreferrer">
+                                <FaGithub />
+                                <Text size="xxs" weight="normal">
+                                    {contact.github}
+                                </Text>
+                            </IconLink>
+                        )}
+                    </Contact>
+                </BottomSection>
+            </SectionWrapper>
+        </>
+    );
+};
+
+export default Card;

src/components/display/Countdown.tsx

@@ -28,7 +28,7 @@ export const Countdown: React.FC<ICountdown> = ({ targetDate }) => {
             <Text size="l" weight="bold" variant="darkpurple">
                 축제까지 남은 시간
             </Text>
-            <Text size="xl" weight="bold" variant="lightpurple">
+            <Text size="xxl" weight="bold" variant="lightpurple">
                 {displayTime}
             </Text>
             <Text size="xs" weight="normal" variant="darkpurple">

src/components/typography/Text.tsx

@@ -11,6 +11,8 @@ export const Text = styled.span<IText>`
 
     font-size: ${(props) => {
         switch (props.size) {
+            case "xxs":
+                return "12px";
             case "xs":
                 return "14px";
             case "s":
@@ -20,6 +22,8 @@ export const Text = styled.span<IText>`
             case "l":
                 return "22px";
             case "xl":
+                return "28px";
+            case "xxl":
                 return "40px";
             default:
                 return props.size;

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