|
| 1 | +import Page from "components/common/Page"; |
| 2 | +import React, { useMemo } from "react"; |
| 3 | +import styled from "styled-components"; |
| 4 | +import { sortByKey } from "utils"; |
| 5 | +import useTranslation from "utils/hooks/useTranslation"; |
| 6 | +import { FallbackImg } from "components/common/FallbackImg"; |
| 7 | +import { SloganShort } from "assets/icons"; |
| 8 | + |
| 9 | +const OrganizingTeam = () => { |
| 10 | + const t = useTranslation(); |
| 11 | + type Member = { |
| 12 | + name: string; |
| 13 | + displayName?: string; |
| 14 | + comment?: React.ReactNode; |
| 15 | + imageFileName?: string; |
| 16 | + }; |
| 17 | + const members = useMemo<Member[]>( |
| 18 | + () => |
| 19 | + sortByKey<Member>( |
| 20 | + [ |
| 21 | + { name: "배권한", comment: "우리모두 파이썬으로 같이 합시다." }, |
| 22 | + { name: "권혁민", comment: "asdfasdfasdfasdf", imageFileName: "권혁민.jpg" }, |
| 23 | + { name: "박성흠" }, |
| 24 | + { name: "김순태" }, |
| 25 | + { name: "김강민" }, |
| 26 | + { |
| 27 | + name: "이우섭", |
| 28 | + displayName: "WooSub Lee", |
| 29 | + comment: ( |
| 30 | + <> |
| 31 | + LoveFrom,{" "} |
| 32 | + <a href="https://www.linkedin.com/in/woosublee" target="_blank" rel="noreferrer"> |
| 33 | + https://www.linkedin.com/in/woosublee |
| 34 | + </a> |
| 35 | + </> |
| 36 | + ), |
| 37 | + imageFileName: "이우섭.png", |
| 38 | + }, |
| 39 | + { name: "이영은" }, |
| 40 | + { name: "심명진" }, |
| 41 | + { name: "이한결" }, |
| 42 | + { |
| 43 | + name: "이준원", |
| 44 | + comment: ( |
| 45 | + <> |
| 46 | + 아직 파이썬 실력이 이븐하지 않습니다.{" "} |
| 47 | + <a href="https://github.com/cpprhtn" target="_blank" rel="noreferrer"> |
| 48 | + https://github.com/cpprhtn |
| 49 | + </a> |
| 50 | + </> |
| 51 | + ), |
| 52 | + imageFileName: "이준원.jpeg", |
| 53 | + }, |
| 54 | + { name: "노하은" }, |
| 55 | + { name: "이해용", comment: "파이썬을 좋아하는 개발자입니다." }, |
| 56 | + { |
| 57 | + name: "김수빈", |
| 58 | + displayName: "김수빈 (sudosubin)", |
| 59 | + comment: "내려갈 때 보았네 올라갈 때 보지 못한 그 꽃", |
| 60 | + imageFileName: "김수빈S.png", |
| 61 | + }, |
| 62 | + { name: "정미르", comment: "if import this and hire(me): can_do_anything()" }, |
| 63 | + { |
| 64 | + name: "이준영", |
| 65 | + displayName: "이준영 / MUsoftware", |
| 66 | + comment: "개미는 (뚠뚠) 오늘도 (뚠뚠) 열심히 일을 하네", |
| 67 | + imageFileName: "이준영.png", |
| 68 | + }, |
| 69 | + { name: "김민정" }, |
| 70 | + { name: "강나영" }, |
| 71 | + { name: "윤준기" }, |
| 72 | + { |
| 73 | + name: "송지헌", |
| 74 | + displayName: "송지헌 / Honey", |
| 75 | + comment: "Everything for Python!c Moments", |
| 76 | + imageFileName: "송지헌.png", |
| 77 | + }, |
| 78 | + { name: "김지희" }, |
| 79 | + { |
| 80 | + name: "삐야기", |
| 81 | + comment: "파이썬 나라의 개발자들이 먹을 치킨을 튀기고 있는 삐야기입니다.", |
| 82 | + imageFileName: "삐야기.jpg", |
| 83 | + }, |
| 84 | + { name: "박조은", comment: "Now is better than never.", imageFileName: "박조은.png" }, |
| 85 | + ], |
| 86 | + "name" |
| 87 | + ), |
| 88 | + [] |
| 89 | + ); |
| 90 | + |
| 91 | + return ( |
| 92 | + <Page> |
| 93 | + <h1>{t("파이콘 한국 준비위원회")}</h1> |
| 94 | + <p> |
| 95 | + {t( |
| 96 | + "파이콘 한국 준비위원회는 2014년 조직되어, 올해 열한 번째 한국에서의 파이콘 행사를 준비하고 있습니다. " |
| 97 | + )} |
| 98 | + <br /> |
| 99 | + {t( |
| 100 | + "준비위원회는 매년 신규 멤버를 모집하는 파이콘을 사랑하는 사람들의 열린 모임입니다." |
| 101 | + )}{" "} |
| 102 | + {t("(가나다순)")} |
| 103 | + </p> |
| 104 | + |
| 105 | + {members.map((m, idx) => ( |
| 106 | + <MemberContainer key={`${m.name}-${idx}`}> |
| 107 | + <section className="left"> |
| 108 | + {m.imageFileName ? ( |
| 109 | + <FallbackImg |
| 110 | + src={`/images/organizingTeam/${m.imageFileName}`} |
| 111 | + alt={m.name} |
| 112 | + errorFallback={<SloganShort />} |
| 113 | + /> |
| 114 | + ) : ( |
| 115 | + <SloganShort /> |
| 116 | + )} |
| 117 | + </section> |
| 118 | + <section className="right"> |
| 119 | + <h4>{m.displayName ?? m.name}</h4> |
| 120 | + <div>{m.comment ?? "Pythonic Moments"}</div> |
| 121 | + </section> |
| 122 | + </MemberContainer> |
| 123 | + ))} |
| 124 | + </Page> |
| 125 | + ); |
| 126 | +}; |
| 127 | + |
| 128 | +export default OrganizingTeam; |
| 129 | + |
| 130 | +const MemberContainer = styled.div` |
| 131 | + width: 50%; |
| 132 | + margin: 0 auto; |
| 133 | + padding: 0.5rem 0; |
| 134 | +
|
| 135 | + display: flex; |
| 136 | +
|
| 137 | + & > section.left { |
| 138 | + width: 5rem; |
| 139 | + height: 5rem; |
| 140 | + margin: 0.5rem; |
| 141 | +
|
| 142 | + border-radius: 50%; |
| 143 | + border: 1px solid var(--pico-muted-border-color); |
| 144 | +
|
| 145 | + * { |
| 146 | + width: 100%; |
| 147 | + height: 100%; |
| 148 | + min-width: 100%; |
| 149 | + min-height: 100%; |
| 150 | + max-width: 100%; |
| 151 | + max-height: 100%; |
| 152 | + border-radius: 50%; |
| 153 | + } |
| 154 | +
|
| 155 | + @media only screen and (max-width: 809px) { |
| 156 | + width: 5rem; |
| 157 | + height: 5rem; |
| 158 | + margin: 0.25rem; |
| 159 | + } |
| 160 | + } |
| 161 | +
|
| 162 | + & > section.right { |
| 163 | + display: flex; |
| 164 | + flex-direction: column; |
| 165 | + justify-content: center; |
| 166 | +
|
| 167 | + h4 { |
| 168 | + color: #febd99; |
| 169 | + margin-bottom: 0.2rem; |
| 170 | + } |
| 171 | +
|
| 172 | + & > div { |
| 173 | + margin-bottom: 0.3rem; |
| 174 | + color: var(--pico-h3-color); |
| 175 | + font-size: 0.8rem; |
| 176 | + font-weight: bold; |
| 177 | + min-height: 1rem; |
| 178 | + } |
| 179 | + } |
| 180 | +
|
| 181 | + @media only screen and (max-width: 809px) { |
| 182 | + width: 75%; |
| 183 | +
|
| 184 | + p { |
| 185 | + font-size: 0.8rem; |
| 186 | + font-weight: bold; |
| 187 | + } |
| 188 | + } |
| 189 | +`; |
0 commit comments