자주 하는 작업¶

uwksa.ca 프론트엔드에서 자주 수정하는 포인트를 현재 코드 구조 기준으로 정리했습니다.

팀원 정보 수정¶

파일: src/data/teamData.ts

이 파일에는 아래 네 가지 정보가 함께 들어 있습니다.

executives
teams
memberImages
memberEnglishNames

현재 팀 ID:

pr
marketing
event
tech
finance

팀원 추가하기¶

teams 배열 안의 해당 팀에 멤버를 추가합니다.

{
  id: 'tech',
  name: { ko: '기술 팀', en: 'Tech Team' },
  members: [
    { name: '홍길동', role: 'Member' },
  ],
}

role은 현재 Lead 또는 Member만 사용합니다.

프로필 사진 등록¶

src/assets/exec_pfps/에 이미지를 추가합니다.
memberImages에 import와 매핑을 추가합니다.
영문명이 필요하면 memberEnglishNames도 같이 수정합니다.

import techGildong from '@/assets/exec_pfps/tech_gildong.jpeg';

export const memberImages: Record<string, string> = {
  '홍길동': techGildong,
};

export const memberEnglishNames: Record<string, string> = {
  '홍길동': 'Gildong Hong',
};

홈페이지 문구 / 카드 수정¶

파일: src/pages/HomePage.tsx

이 페이지는 content.ko / content.en 객체 안에 대부분의 텍스트를 직접 가지고 있습니다.

주로 수정하는 항목:

mainTitle
joinDescription
events
news

홈페이지 이벤트 카드 수정¶

홈페이지의 이벤트 카드는 현재 임시 카드 3개를 직접 렌더링합니다.

events: [
  {
    title: '추후 이벤트 (TBD)',
    description: '추가 이벤트는 추후 공지됩니다.',
  },
]

홈페이지 카드 구조는 EventsPage.tsx의 로드맵 이벤트 구조와 다릅니다.

이벤트 로드맵 업데이트¶

파일: src/pages/EventsPage.tsx

이벤트 페이지는 ROADMAP_EVENTS 상수를 기준으로 동작합니다.

const ROADMAP_EVENTS = [
  {
    date: '3/15',
    title: { ko: '봄 소풍', en: 'Spring Picnic' },
    location: { ko: 'Waterloo Park', en: 'Waterloo Park' },
    time: { ko: '오후 2시', en: '2 PM' },
    description: {
      ko: '간단한 야외 모임입니다.',
      en: 'A casual outdoor meetup.',
    },
    color: 'from-green-500/20 to-green-600/10',
    applyUrl: 'https://example.com',
  },
];

필드 설명:

date: 3/15 같은 문자열 또는 TBD
title, location, time, description: ko / en 객체
color: 마커/카드 시각 스타일
applyUrl: 신청 링크, 없으면 버튼이 비활성 상태로 표시됨

제휴 식당 업데이트¶

파일: src/pages/MembershipPage.tsx

제휴 식당은 partnerRestaurants 배열에서 관리합니다.

{
  name: '새 식당',
  address: '123 Example St',
  mapUrl: 'https://maps.app.goo.gl/...',
  hours: '11am - 9pm',
  discount: '10%',
}

추가로 로고가 있으면 다음 필드를 함께 쓸 수 있습니다.

logo
logoContainerClassName
modalLogoContainerClassName

로고 이미지는 현재 src/assets/membership/logos/ 아래에서 import해서 사용합니다.

멤버십 가입 링크 변경¶

멤버십 CTA 링크는 MembershipPage.tsx 안에 직접 들어 있습니다. members.uwksa.ca/signup 경로가 바뀌면 이 파일도 함께 수정해야 합니다.

갤러리 업데이트¶

파일: src/pages/GalleryPage.tsx

갤러리는 현재 아래 두 레이어를 함께 관리합니다.

원본 이미지 import
썸네일 이미지 import

import MT1 from '@/assets/gallery/MT1.png';
import MT1_THUMB from '@/assets/gallery/thumbs/MT1.png';

const galleryImages = [
  { title: 'W26 KSA MT', thumb: MT1_THUMB, full: MT1 },
];

이미지를 추가할 때는 thumb와 full을 함께 맞춰야 하고, 임시 항목도 필요하면 같이 조정합니다.

연락처 / 소셜 링크 수정¶

파일:

src/data/socialLinks.ts
src/pages/ContactPage.tsx

이메일과 소셜 링크는 socialLinks.ts를 기준으로 관리합니다.

export const CONTACT_EMAIL = 'uofwaterlooksa@gmail.com';

ContactPage.tsx의 뉴스레터 폼은 현재 UI 상태만 바꾸며, 실제 백엔드 전송은 하지 않습니다. 문구를 바꿀 수는 있지만, 실제 구독 기능을 기대하고 연결하면 안 됩니다.

좌석 확인 페이지 수정¶

파일:

public/seatcheck/index.html
public/seatcheck/app.js
public/seatcheck/styles.css

이 페이지는 정적 HTML/JS 앱이며, members.uwksa.ca의 좌석 확인 API를 직접 호출합니다.

핵심 포인트:

기본 API base: https://members.uwksa.ca
호출 경로: /api/event/<event_slug>/checkin
쿼리스트링 ?event=<slug>로 이벤트 slug를 바꿀 수 있음

새 페이지 추가¶

1단계: `src/pages/`에 새 컴포넌트 추가¶

export function NewPage() {
  return <div>New Page</div>;
}

2단계: `src/App.tsx`에 lazy import와 route 추가¶

const NewPage = lazy(() =>
  import('./pages/NewPage').then((m) => ({ default: m.NewPage }))
);

case '/newpage':
  return <NewPage />;

3단계: 네비게이션에 노출할지 결정¶

헤더 메뉴에도 보여야 하면 src/components/Header.tsx의 navItems 배열을 수정합니다.

{ label: '새 페이지', href: '#/newpage' }

네비게이션에 넣지 않아도 App.tsx에 route만 있으면 직접 접근은 가능합니다.