Feature#388 학교대항전 이벤트 페이지 구현

mosu-app/next.config.ts

@@ -27,6 +27,12 @@ const nextConfig: NextConfig = {
                 child_process: false,
             };
         }
+
+        config.module.rules.push({
+            test: /\.svg$/i,
+            use: ["@svgr/webpack"],
+        });
+
         return config;
     },
 

mosu-app/package.json

@@ -75,6 +75,7 @@
         "@storybook/nextjs": "^8.6.12",
         "@storybook/react": "^8.6.12",
         "@storybook/test": "^8.6.12",
+        "@svgr/webpack": "^8.1.0",
         "@tailwindcss/postcss": "^4",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/react": "^16.3.0",

mosu-app/src/@types/kakao.d.ts

@@ -0,0 +1,131 @@
+declare namespace Kakao {
+    function init(key: string): void;
+    function isInitialized(): boolean;
+
+    namespace Share {
+        // 기본 템플릿 공유 버튼 생성
+        function createDefaultButton(options: DefaultButtonOptions): void;
+        // 기본 템플릿 직접 발송
+        function sendDefault(options: DefaultTemplate): void;
+
+        // 커스텀 템플릿 공유 버튼 생성
+        function createCustomButton(options: CustomButtonOptions): void;
+        // 커스텀 템플릿 직접 발송
+        function sendCustom(options: CustomTemplate): void;
+
+        // 스크랩 공유 버튼 생성
+        function createScrapButton(options: ScrapButtonOptions): void;
+        // 스크랩 직접 발송
+        function sendScrap(options: ScrapOptions): void;
+
+        // 이미지 업로드/스크랩/삭제
+        function uploadImage(options: UploadImageOptions): Promise<UploadImageResponse>;
+        function scrapImage(options: ScrapImageOptions): Promise<ScrapImageResponse>;
+        function deleteImage(options: DeleteImageOptions): Promise<void>;
+    }
+
+    interface LinkObject {
+        mobileWebUrl: string;
+        webUrl: string;
+        androidExecutionParams?: string;
+        iosExecutionParams?: string;
+    }
+
+    interface ButtonObject {
+        title: string;
+        link: LinkObject;
+    }
+
+    interface ContentObject {
+        title: string;
+        description?: string;
+        imageUrl: string;
+        link: LinkObject;
+    }
+
+    interface ItemContentObject {
+        profileText?: string;
+        profileImageUrl?: string;
+        titleImageUrl?: string;
+        titleImageText?: string;
+        titleImageCategory?: string;
+        items?: Array<{ item: string; itemOp: string }>;
+        sum?: string;
+        sumOp?: string;
+    }
+
+    interface SocialObject {
+        likeCount?: number;
+        commentCount?: number;
+        sharedCount?: number;
+        viewCount?: number;
+        subscriberCount?: number;
+    }
+
+    interface DefaultTemplate {
+        objectType: "feed" | "list" | "location" | "commerce" | "text" | "calendar";
+        content: ContentObject;
+        itemContent?: ItemContentObject;
+        social?: SocialObject;
+        buttons?: ButtonObject[];
+        text?: string;
+        link?: LinkObject;
+        serverCallbackArgs?: Record<string, string>;
+    }
+
+    interface DefaultButtonOptions extends DefaultTemplate {
+        container: string | HTMLElement;
+    }
+
+    interface CustomTemplate {
+        templateId: number;
+        templateArgs?: Record<string, string>;
+        serverCallbackArgs?: Record<string, string>;
+    }
+
+    interface CustomButtonOptions extends CustomTemplate {
+        container: string | HTMLElement;
+    }
+
+    interface ScrapOptions {
+        requestUrl: string;
+        templateId?: number;
+        templateArgs?: Record<string, string>;
+        serverCallbackArgs?: Record<string, string>;
+    }
+
+    interface ScrapButtonOptions extends ScrapOptions {
+        container: string | HTMLElement;
+    }
+
+    interface UploadImageOptions {
+        file: FileList | File[];
+    }
+    interface UploadImageResponse {
+        infos: {
+            original: { url: string };
+            [key: string]: { url: string };
+        };
+    }
+
+    interface ScrapImageOptions {
+        imageUrl: string;
+    }
+    interface ScrapImageResponse {
+        imageUrl: string;
+    }
+
+    interface DeleteImageOptions {
+        imageUrl: string;
+    }
+}
+
+declare global {
+    interface Window {
+        Kakao: typeof Kakao;
+    }
+}
+
+declare const Kakao: typeof Kakao;
+export = Kakao;
+export as namespace Kakao;

mosu-app/src/features/competition/components/RankBadge/RankBadge.module.scss

@@ -0,0 +1,91 @@
+.rank_badge {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    header {
+        display: flex;
+
+        svg {
+            scale: 1;
+            @media (max-width: 1023px) {
+                scale: 0.75;
+            }
+            @media (max-width: 768px) {
+                scale: 0.5;
+            }
+        }
+
+        svg:first-child {
+            transform: scaleX(-1);
+        }
+
+        svg[data-rank="1"] {
+            path {
+                fill: #bcc9ff;
+            }
+        }
+
+        svg[data-rank="2"],
+        svg[data-rank="3"] {
+            path {
+                fill: #a2ffff;
+            }
+        }
+
+        div {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+
+            img {
+                @media (max-width: 1023px) {
+                    width: 3rem;
+                    height: 3rem;
+                }
+                @media (max-width: 768px) {
+                    width: 2rem;
+                    height: 2rem;
+                }
+            }
+
+            h2 {
+                font-size: 1.75rem;
+                font-weight: 700;
+                text-align: center;
+                color: #fff;
+            }
+        }
+    }
+
+    footer {
+        margin: 0rem 0;
+
+        h1 {
+            font-size: 2rem;
+            font-weight: 800;
+            color: #fff;
+        }
+        h1:not([data-rank="1"]) {
+            font-size: 1.75rem;
+        }
+
+        @media (max-width: 1023px) {
+            h1 {
+                font-size: 1.5rem;
+            }
+            h1:not([data-rank="1"]) {
+                font-size: 1.25rem;
+            }
+        }
+        @media (max-width: 768px) {
+            h1 {
+                font-size: 1.25rem;
+            }
+            h1:not([data-rank="1"]) {
+                font-size: 1rem;
+            }
+        }
+    }
+}

mosu-app/src/features/competition/components/RankBadge/RankBadge.tsx

@@ -0,0 +1,29 @@
+import Image from "next/image";
+
+import imgAward from "@/features/competition/assets/img-award-1th.png";
+import ImgAwardDecorator from "@/features/competition/assets/img-award-decorator.svg";
+
+import styles from "./RankBadge.module.scss";
+
+export interface RankBadgeProps {
+    rank: number;
+    schoolName: string;
+}
+
+export const RankBadge = ({ rank, schoolName }: RankBadgeProps) => {
+    return (
+        <div className={styles.rank_badge}>
+            <header className={styles.rank_badge__award}>
+                <ImgAwardDecorator data-rank={rank} />
+                <div>
+                    <Image src={imgAward} alt="" />
+                    <h2>{rank}위</h2>
+                </div>
+                <ImgAwardDecorator data-rank={rank} />
+            </header>
+            <footer>
+                <h1 data-rank={rank}>{schoolName}</h1>
+            </footer>
+        </div>
+    );
+};

mosu-app/src/features/competition/components/RankBadge/index.tsx

@@ -0,0 +1 @@
+export * from "./RankBadge";

mosu-app/src/features/competition/components/RankInfoCard/RankInfoCard.module.scss

@@ -0,0 +1,91 @@
+.info_section_card {
+    width: 100%;
+    min-width: 110px;
+    max-width: 200px;
+
+    header {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        background: linear-gradient(180deg, #004fce 0%, #0f2667 100%);
+
+        border-radius: 0.5rem;
+        padding: 0.5rem;
+
+        img {
+            width: 40px;
+            height: 40px;
+        }
+
+        h3 {
+            color: #fff;
+            font-size: 1.5rem;
+            font-weight: 700;
+
+            @media (max-width: 1023px) {
+                font-size: 1.25rem;
+            }
+            @media (max-width: 768px) {
+                font-size: 1rem;
+            }
+        }
+    }
+
+    footer {
+        background: linear-gradient(0deg, #004fce 0%, #0f2667 100%);
+
+        padding: 1rem;
+        border-radius: 0.5rem;
+
+        h2 {
+            p {
+                color: #bcc9ff;
+
+                font-size: 1.25rem;
+                font-weight: 700;
+                text-align: center;
+
+                line-height: 120%;
+
+                @media (max-width: 1023px) {
+                    font-size: 1rem;
+                }
+                @media (max-width: 768px) {
+                    font-size: 0.75rem;
+                }
+            }
+        }
+
+        h1 {
+            color: #fff;
+            font-weight: 700;
+            text-align: center;
+
+            span:first-child {
+                font-size: 3rem;
+            }
+            span:last-child {
+                font-size: 1.5rem;
+            }
+
+            @media (max-width: 1023px) {
+                span:first-child {
+                    font-size: 2.5rem;
+                }
+                span:last-child {
+                    font-size: 1.25rem;
+                }
+            }
+            @media (max-width: 768px) {
+                span:first-child {
+                    font-size: 2rem;
+                }
+                span:last-child {
+                    font-size: 1rem;
+                }
+            }
+        }
+    }
+}