💚 icpc 신촌 홈페이지 수정 - 💰개인후원/운영진 추가

신촌프관팀 임무

- 갓동주님의 짱짱 코드를 흩뜨려놓기

므아앙

💰TODO

- SUAPC 시즌별 소개에 개인후원 파트 추가하기

- 후원 및 협업 소개에 개인후원 소개 추가하기

 

+ 시즌별 운영진도 넣을까?

---

 

💰SUAPC 시즌별 소개에 개인후원 파트 추가하기

 

public/history/suapc/

2024 Winter.json 

- 데이터 추가하기

 

currentSeasonData.personalSponsor

"personalSponsor": ["정람지", "정은체", "goldchae"]

---

pages/

suapc.page.js

- 구조 고치기

 

"개인 후원자" 섹션

- personalSponsor 속성이 있고 배열이면 ? 뜨고 : 없으면 안 뜨게

{currentSeasonData.personalSponsor &&
            Array.isArray(currentSeasonData.personalSponsor) && (
              <TextWrap
                title="개인후원"
                content={currentSeasonData.personalSponsor.join(", ")}
              />
            )}

 

이정도로?

---

💰후원 및 협업 소개에 개인후원 소개 추가하기

components/SponsorNav

SponsorNav.js

스폰서용 네브바 만들

기업/개인 

 

components/SponsorNav/Sponsor

CorporateSponsorship.js

PersonalSponsorship.js

원래 있던 후원사 내용을 분리해서 CorporateSponsorship.js에 넣고PersonalSponsorship.js 개인후원 내용 추가

import styled, { css } from "styled-components";

const PersonalSponsorship = () => {
  return (
    <div className="main-wrap" style={{ paddingTop: "1.2rem" }}>
      <div className="content-wrap-main">
        <ItemWrap className="slide-up" style={{ animationDelay: "300ms" }}>
          <MainTextTitle>
            <span style={{ letterSpacing: "-0.03rem" }}>ICPC Sinchon</span>을
            도와주실 <br className="show-if-mobile" />
            개인 후원자님을 환영합니다.
          </MainTextTitle>
          <TextSubTitle>
            지금까지의 모든 연합 활동에 후원자님의 후원이 큰 도움이 되었습니다.
          </TextSubTitle>
        </ItemWrap>
        <ImgWrap>
          <img
            className="slide-up"
            src="/res/stickers-3.jpg"
            alt="dev-community-stickers"
            style={{ animationDelay: "500ms" }}
          />
        </ImgWrap>
        <ItemWrap
          className="slide-up"
          style={{ marginTop: "2rem", animationDelay: "700ms" }}
        >
          <TextTitle>다음의 계좌로 후원금을 받고 있습니다.</TextTitle>
          <TextSubTitle>123456789</TextSubTitle>
        </ItemWrap>
        <ItemWrap
          className="slide-up"
          style={{ marginTop: "2rem", animationDelay: "700ms" }}
        >
          <TextTitle>후원 후 다음의 폼을 작성해주세요.</TextTitle>
          <TextSubTitle>
            희망자/N만원 이상 후원자만 작성해주시면 됩니다.
          </TextSubTitle>
        </ItemWrap>
        <ItemWrap
          className="slide-up"
          style={{ marginTop: "2rem", animationDelay: "700ms" }}
        >
          <TextTitle>다음과 혜택을 제공합니다.</TextTitle>
          <ul>
            <li>SUAPC 홈페이지 후원자 성함 기재</li>
            <li>SUAPC 해당 시즌 기념품 제공</li>
            <li>N만원 이상 후원 시 특별상명 지정</li>
            <li>드릴 수 있는 게 없어요</li>
          </ul>
        </ItemWrap>

        <ItemWrap className="slide-up" style={{ animationDelay: "1300ms" }}>
          <TextTitle>언제든지 ICPC Sinchon과 함께하세요</TextTitle>
          <TextSubTitle>
            좋은 마음으로 후원에 함께해주시는 만큼 ICPC Sinchon도 행사 개최에
            최선을 다할 것을 약속드립니다.
            <br />
            관련 문의는 <span className="email" />
            으로 연락주시면 감사드리겠습니다.
          </TextSubTitle>
        </ItemWrap>
      </div>
    </div>
  );
};

const SinchonColor = css`
  color: #009d3e;
`;
const ImgWrap = styled.div`
  height: 400px;
  overflow: hidden;

  margin: 1rem 0 4rem 0;

  @media (max-width: 1000px) {
    height: 50vw;
    img {
      height: 50vw;
      max-width: unset;
    }
  }
`;

const ItemWrap = styled.div`
  padding-bottom: 1rem;
`;
const MainTextTitle = styled.h1`
  ${SinchonColor}

  font-family: 'KeepCalmMed', 'Apple SD Gothic Neo';
  font-size: 1.8rem;
  font-weight: 700;

  @media (max-width: 470px) {
    font-size: 1.6rem;
  }

  @media (max-width: 400px) {
    font-size: 1.4rem;
  }
`;

const TextTitle = styled.div`
  ${SinchonColor}

  font-family: 'KeepCalmMed', 'Apple SD Gothic Neo';
  font-size: 1.4rem;
  font-weight: 700;

  @media (max-width: 470px) {
    font-size: 1.1rem;
  }
`;

const TextSubTitle = styled.div`
  font-size: 0.9rem;
  font-weight: 500;
`;

export default PersonalSponsorship;

 

pages/

sponser.page.js

<SponsorNav
        onSponsorNavClick={onSponsorNavClick}
        currentSponsorIdx={currentSponsorIdx}
      />

네브바 넣고

 

네브바 내용에 따라서

{currentSponsorIdx === 0 && <CorporateSponsorship />}
{currentSponsorIdx === 1 && <PersonalSponsorship />}

각각의 내용이

 

 

?? 선택된 네브바 요소 색 바꾸는 코드가 어디에?

일단 그냥 만듦

후원 네브바 추가

기본으로는 기업 후원이 뜨게

 

흐음~ 사진 똑같으니까 별로다 그치

240 렌더링 우려먹기를 다시 한번?!

으음...

---

+

💰SUAPC 시즌별 소개에 운영진 파트 추가하기

 

managementTeamTable

>managementTeamTable.js

(awards와 달리 div 1 div2 같은 게 없어서 wraps 같은 거 없어도 ok)

생성하여 운영진표 컴포넌트 만들고,

import styled from "styled-components";

const TableWrap = styled.div`
  overflow-x: auto;
  white-space: nowrap;
`;

export default function ManagementTeamTable({ data }) {
  return (
    <TableWrap>
      <table>
        <thead>
          <tr>
            <th css={{ width: "6rem" }}>직책</th>
            <th css={{ width: "6rem" }}>이름</th>
            <th css={{ width: "6rem" }}>학교</th>
          </tr>
        </thead>
        <tbody>
          {data[0].president?.map((member) => (
            <tr key={"team-president-" + member.name}>
              <td>회장</td>
              <td>{member.name}</td>
              <td>{member.school ? member.school : "-"}</td>
            </tr>
          ))}
          {data[0].member?.map((member) => (
            <tr key={"team-member-" + member.name}>
              <td>운영진</td>
              <td>{member.name}</td>
              <td>{member.school ? member.school : "-"}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </TableWrap>
  );
}

 

pages/

suapc.page.js

- 컴포넌트 삽입

<ItemWrap>
              {organizer.filter(
                (item) =>
                  item.year === currentYear && item.season === currentSeason,
              ).length > 0 && (
                <div>
                  <ItemTitle>운영진</ItemTitle>
                  <ManagementTeamTable
                    data={organizer.filter(
                      (item) =>
                        item.year === currentYear &&
                        item.season === currentSeason,
                    )}
                  />
                </div>
              )}
            </ItemWrap>

년도/시즌 데이터 가져와서 넘기기

 

public/history/

organizer.json

- 데이터 이용

학교 데이터 없으면 안 뜨게 하기

 

??딴 시즌 클릭햇다가 돌아오면 안 된다

사부가해결해줄거다

는 니엘이가 해결해줬다

year의 타입이 안 맞는 문제였다~

 

딴 시즌도 뜬다

학교 - 해결~

---

next.js 페이지 렌더링 작동 방식

next.config.js 에

module.exports = {
  pageExtensions: ["page.tsx", "page.ts", "page.jsx", "page.js"],
  exportPathMap: function () {
    return {
      "/": { page: "/" },
      "/suapc": { page: "/suapc" },
      "/halloffame": { page: "/halloffame" },
      "/sponser": { page: "/sponser" },
      "/campcontest": { page: "/campcontest" },
      "/personalsponsor": { page: "/personalsponsor" },
    };
  }

 

이렇게