[FE] SISC1-216 [FEAT] 외부페이지 제작(동아리소개, 임원소개, 운용포트폴리오)

frontend/src/components/external/Filter.jsx

@@ -0,0 +1,38 @@
+import styles from './Filter.module.css';
+
+const Filter = ({ items, value, onChange }) => {
+  if (!items || items.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.line} />
+
+      <div className={styles.content}>
+        <div className={styles.title}>Filter</div>
+
+        <ul className={styles.list} role="list" aria-label="필터 옵션">
+          {items.map((label) => {
+            const isActive = value === label;
+
+            return (
+              <li key={label} className={styles.listItem}>
+                <button
+                  type="button"
+                  className={`${styles.item} ${isActive ? styles.active : ''}`}
+                  onClick={() => onChange(label)}
+                  aria-pressed={isActive}
+                >
+                  {label}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default Filter;

frontend/src/components/external/Filter.module.css

@@ -0,0 +1,68 @@
+.wrap {
+  display: flex;
+  align-items: flex-start;
+  padding: 28px 18px;
+  width: 220px;
+}
+
+.line {
+  width: 1px;
+  height: 254px;
+  background: #cbcbcb;
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #656565;
+  margin-bottom: 16px;
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  max-height: 220px;
+  overflow-y: auto;
+
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  align-items: center;
+
+  -webkit-overflow-scrolling: touch;
+}
+
+.listItem {
+  margin: 0;
+  padding: 0;
+}
+
+.item {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 146%;
+  color: #656565;
+}
+
+.active {
+  font-weight: 700;
+  color: #142d56;
+}
+
+.list::-webkit-scrollbar {
+  width: 0px;
+}

frontend/src/components/external/Info.jsx

@@ -0,0 +1,28 @@
+import styles from './Info.module.css';
+
+const teamInfo = {
+  '증권 1팀':
+    '주도업종 발굴, 매매전략 공유 및 분석, 시장에 영향을 미치는 뉴스에 대한 이해 도움, 세종모의투자 진행으로 매매 분석. (상대적으로 활동 난이도가 쉬운 편에 속하는 팀)',
+  '증권 2팀':
+    '주도업종 발굴, 매매전략 공유 및 분석, 시장에 영향을 미치는 뉴스에 대한 이해 도움, 세종모의투자 진행으로 매매 분석. (상대적으로 활동 난이도가 쉬운 편에 속하는 팀)',
+  '증권 3팀':
+    '주도업종 발굴, 매매전략 공유 및 분석, 시장에 영향을 미치는 뉴스에 대한 이해 도움, 세종모의투자 진행으로 매매 분석. (상대적으로 활동 난이도가 쉬운 편에 속하는 팀)',
+  '자산 운용팀':
+    '동아리 펀드 자금을 운용하는 부서, 주식투자 경험자 우대 + 운용 성과 보수 지급 (벤치마크 초과 수익률 비례) / 투자할 기업 재무제표에 대한 이해 & 기초 이론 바탕의 기업 실적 및 가치 분석 (실제 펀드 자금을 운영하는 만큼 실력과 책임감 중요)',
+  '금융 IT팀': '빅데이터와 ai를 활용해 다양한 금융 서비스를 제작',
+  매크로팀:
+    '경제 지표(금리, 환율, 물가 등) 분석 / 국내외 거시경제 동향 분석 및 전망 / 중앙은행 정책(통화정책, 금리 정책) 모니터링 / 리서치 리포트 작성 및 투자 전략 제안 / 글로벌 경제 및 정치 이슈 분석 / 타 대학과 매크로 리포트 교류전 참여 (전반적인 경제에 대한 지식이 있어야 하고, 리포트 작성에 다소 시간 할애 필요)',
+  트레이딩팀:
+    '실전 트레이딩을 위한 학습 / 차트 수급 및 기술적 분석 활용 / 기간 내 특징주 이슈 정리 / 매크로 / 산업 트렌드 분석 / 각종 투자대회 입상 목표 / 매 주 트레이딩 학습 적용 및 피드백 매매일지 작성 / 하나증권 본부장님 지원하에 트레이딩 교육 예정 (실제 개인 투자를 전제로 하며 모의투자대회 입상을 목표로 하는 만큼 높은 수준의 인원 요구)',
+};
+
+const Info = ({ team }) => {
+  return (
+    <div className={styles.container}>
+      <span className={styles.title}>{team}</span>
+      <span className={styles.desc}>{teamInfo[team]}</span>
+    </div>
+  );
+};
+
+export default Info;

frontend/src/components/external/Info.module.css

@@ -0,0 +1,21 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 45px;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 40px;
+  line-height: 146%;
+  color: #142d56;
+}
+
+.desc {
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 180%;
+  letter-spacing: -0.03em;
+  color: #000000;
+  word-break: keep-all;
+}

frontend/src/components/external/MemberCard.jsx

@@ -0,0 +1,21 @@
+import styles from './MemberCard.module.css';
+
+const MemberCard = ({ datas }) => {
+  return (
+    <div className={styles.container}>
+      {datas.map((data, index) => {
+        return (
+          <div className={styles.cardSection} key={index}>
+            <div className={styles.card}></div>
+            <div className={styles.nameSection}>
+              <span className={styles.role}>{data.role}</span>
+              <span className={styles.name}>{data.name}</span>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default MemberCard;

frontend/src/components/external/MemberCard.module.css

@@ -0,0 +1,41 @@
+.container {
+  max-width: 850px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 10px;
+}
+
+.cardSection {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.card {
+  width: 260px;
+  height: 340px;
+  background-color: #f4f4f4;
+}
+
+.nameSection {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.role {
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 146%;
+  letter-spacing: -0.04em;
+  color: #616161;
+}
+
+.name {
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 146%;
+  letter-spacing: -0.04em;
+  color: #171717;
+}

frontend/src/components/external/PortfolioItem.jsx

@@ -0,0 +1,21 @@
+import styles from './PortfolioItem.module.css';
+import profile from '../../assets/profile-image.png';
+
+const PortfolioItem = ({ data }) => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.preview}>
+        <img src={profile} alt="프로필 이미지" className={styles.image} />
+        <div className={styles.titleSection}>
+          <div className={styles.author}>
+            <span className={styles.role}>{data.role}</span>
+            <span className={styles.time}>{data.time}분전</span>
+          </div>
+          <span className={styles.title}>{data.title}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PortfolioItem;

frontend/src/components/external/PortfolioItem.module.css

@@ -0,0 +1,50 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid #cdd4db;
+  padding-bottom: 35px;
+  cursor: pointer;
+}
+
+.preview {
+  display: flex;
+  gap: 20px;
+}
+
+.image {
+  width: 48px;
+  height: 48px;
+}
+
+.titleSection {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.author {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.role {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 100%;
+  color: #828282;
+}
+
+.time {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 100%;
+  color: #aaaaaa;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 100%;
+  color: #616161;
+}

frontend/src/pages/external/External.module.css

@@ -1,14 +1,16 @@
 .container {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
+  background-color: #ffffff;
 }
 
 .header {
-  background: url('../../assets/external/external-detail-image.png') center
-    no-repeat;
-  height: 25%;
+  background: url('../../assets/external/external-detail-image.png') no-repeat
+    center;
+  background-size: cover;
+  height: 250px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -26,3 +28,47 @@
 .divider {
   width: 250px;
 }
+
+.info {
+  display: flex;
+  padding: 80px 100px;
+  gap: 45px;
+}
+
+.logoSection {
+  display: flex;
+  gap: 10px;
+  width: 340px;
+  height: 58px;
+}
+
+.logo {
+  width: 56px;
+  height: 56px;
+}
+
+.name {
+  word-break: keep-all;
+  color: #142d56;
+  font-weight: 700;
+  font-size: 28px;
+  line-height: 100%;
+}
+
+.filter {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.content {
+  max-width: 700px;
+}
+
+.portfolio {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 80px 100px;
+  gap: 45px;
+}