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

Fix: 스타일 변경
pythonkr · Sep 21, 2024 · afc18ec · afc18ec
2 parents 975eaff + 1dbd914
commit afc18ec
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 30 deletions.
diff --git a/src/components/Footer/SponsorList.tsx b/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}
  />

diff --git a/src/components/Footer/SponsorTable.tsx b/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`

diff --git a/src/components/common/Collapse/index.tsx b/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;
 };

diff --git a/src/models/api/sponsor.ts b/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[];
 }
diff --git a/src/models/sponsor.ts b/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;

diff --git a/src/pages/Sponsor/SponsorDetail.tsx b/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;

diff --git a/src/pages/Sponsor/SponsorLevelList.tsx b/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>