Merge pull request #28 from pythonkr/fix/sponsor-prospedctus-view

Fix: 스타일 변경

Author: jungmir

src/components/Footer/SponsorList.tsx

@@ -22,7 +22,7 @@ const SponsorList = () => {
         <SponsorTableList>
           {listOfSponsorLevel.map((level) => (
             <SponsorTable
-              max={level.name.toLowerCase() === "keystone" ? 1 : 4}
+              max={level.name === "키스톤" ? 1 : 3}
               levelName={t(level.name)}
               sponsors={level.sponsor}
             />

src/components/Footer/SponsorTable.tsx

@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 
 type Props = React.HTMLAttributes<HTMLDivElement> & {
-  max: Number;
+  max: number;
   levelName: string;
   sponsors: Sponsor[];
 };
@@ -27,6 +27,7 @@ function SponsorTable({ max, levelName, sponsors, ...rest }: Props) {
 const LogoImage = styled.img`
   background: white;
   color: black;
+  min-width: 15vw;
 `;
 
 const SponsorCard = styled.div`

src/components/common/Collapse/index.tsx

@@ -2,7 +2,7 @@ import React, { useRef, useState } from "react";
 import styled from "styled-components";
 
 type Props = React.HTMLAttributes<HTMLDivElement> & {
-  order: Number;
+  order: number;
   header: string;
   content: string;
 };

src/models/api/sponsor.ts

@@ -7,41 +7,41 @@ export type APISponsor = {
 };
 
 export type APISponsorBenefit = {
-  id: Number;
+  id: number;
   name: string;
   desc: string;
   unit: string;
   is_countable: boolean;
-  offer: Number;
+  offer: number;
   uncountable_offer: string;
 }
 
 export type APISponsorLevel = {
-  id: Number;
+  id: number;
   name: string;
   desc: string;
   visible: boolean;
-  price: Number;
-  limit: Number;
-  order: Number;
+  price: number;
+  limit: number;
+  order: number;
   benefits: APISponsorBenefit[];
 }
 
 export type APISponsorLevelOnly = {
-  id: Number;
+  id: number;
   name: string;
   desc: string;
   visible: boolean;
-  price: Number;
-  limit: Number;
-  order: Number;
+  price: number;
+  limit: number;
+  order: number;
 }
 
 export type APISponsorLevelWithSponsor = {
-  id: Number;
+  id: number;
   name: string;
   desc: string;
   visible: boolean;
-  order: Number;
+  order: number;
   sponsor: APISponsor[];
 }

src/models/sponsor.ts

@@ -1,10 +1,10 @@
 import { APISponsorLevel, APISponsorBenefit, APISponsor, APISponsorLevelOnly, APISponsorLevelWithSponsor } from "./api/sponsor";
 
 export class SponsorBenefit {
-  id: Number;
+  id: number;
   name: string;
   desc: string;
-  offer: Number;
+  offer: number;
   unit: string;
   is_countable: boolean;
   uncountable_offer: string;
@@ -36,13 +36,13 @@ export class SponsorBenefit {
 }
 
 export class SponsorLevel {
-  id: Number;
+  id: number;
   name: string;
   desc: string;
   visible: boolean;
-  price: Number;
-  limit: Number;
-  order: Number;
+  price: number;
+  limit: number;
+  order: number;
   benefits: SponsorBenefit[]
 
   private constructor(p: SponsorLevel) {
@@ -74,11 +74,11 @@ export class SponsorLevel {
 }
 
 export class SponsorLevelWithSponsor {
-  id: Number;
+  id: number;
   name: string;
   desc: string;
   visible: boolean;
-  order: Number;
+  order: number;
   sponsor: Sponsor[];
 
   private constructor(p: SponsorLevelWithSponsor) {
@@ -106,13 +106,13 @@ export class SponsorLevelWithSponsor {
 }
 
 class SponsorLevelOnly {
-  id: Number;
+  id: number;
   name: string;
   desc: string;
   visible: boolean;
-  price: Number;
-  limit: Number;
-  order: Number;
+  price: number;
+  limit: number;
+  order: number;
 
   private constructor(p: SponsorLevelOnly) {
     this.id = p.id;

src/pages/Sponsor/SponsorDetail.tsx

@@ -90,7 +90,7 @@ const H1 = styled.h1`
 const H3 = styled.h3`
   margin-top: 1.5rem;
   font-size: 24px;
-  color: #b0a8fe;
+  color: white;
 
   @media only screen and (max-width: 810px) {
     padding: 0 1rem;

src/pages/Sponsor/SponsorLevelList.tsx

@@ -9,6 +9,10 @@ const SponsorLevelList = () => {
   const [listOfSponsorLevel, setListOfSponsorLevel] = useState<SponsorLevel[][]>([]);
   const [listOfSponsorBenefit, setListOfSponsorBenefit] = useState<SponsorBenefit[]>([]);
 
+  const prettryPrice = (price: number) => {
+    return new Intl.NumberFormat("ko-KR").format(price);
+  };
+
   const getBenefitDescription = (benefit: SponsorBenefit | undefined) => {
     if (benefit === undefined) return "-";
     if (benefit.is_countable) {
@@ -21,7 +25,7 @@ const SponsorLevelList = () => {
     SponsorAPI.listSponsorLevels().then((levels) => {
       const onlyVisible = levels.filter((level) => level.visible);
       if (onlyVisible.length > 4) {
-        const half_length = Math.ceil(onlyVisible.length / 2);
+        const half_length = Math.floor(onlyVisible.length / 2);
         const firstSide = onlyVisible.slice(0, half_length);
         const secondSide = onlyVisible.slice(half_length);
         setListOfSponsorLevel([firstSide, secondSide]);
@@ -48,6 +52,18 @@ const SponsorLevelList = () => {
                 ))}
               </thead>
               <tbody>
+                <tr>
+                  <td>후원금</td>
+                  {sponsorLevel.map((level) => {
+                    const unit = level.name === "출판사" ? " 권" : " 원";
+                    return (
+                      <td>
+                        {prettryPrice(level.price)}
+                        {unit}
+                      </td>
+                    );
+                  })}
+                </tr>
                 {listOfSponsorBenefit.map((benefit) => (
                   <tr>
                     <td>{benefit.name}</td>
@@ -83,7 +99,7 @@ const SponsorLevelList = () => {
             <li>{t("추후 일부 내용이 변경될 수 있습니다.")}</li>
             <li>
               {t(
-                "스타트업 스폰서십은 사내에서 파이썬을 사용하고, 설립 3년 이하, 사내 인원 30인 이하인 곳에 한합니다."
+                "스타트업 스폰서십은 사내에서 파이썬을 사용하고, 설립 5년 이하, 사내 인원 30인 이하인 곳에 한합니다."
               )}
             </li>
             <li>{t("커뮤니티 스폰서십은 비영리 단체에 한해 후원이 가능합니다.")}</li>