자주 하는 작업¶

uwksa.ca 프론트엔드에서 자주 수행하는 작업들을 레시피 형식으로 정리했습니다.

시작하기 전에

코드 수정의 전체 워크플로우(클론, 개발 서버 실행, 커밋, 푸시)는 수정 가이드를 참고하세요.

팀원 정보 수정¶

파일: src/data/teamData.ts

팀원 데이터는 4개 팀으로 구분되어 있습니다:

팀 키	팀 이름
`event`	Event Team
`marketing`	Marketing Team
`tech`	Tech Team
`pr`	PR Team

Executive 멤버는 별도로 executives 배열에서 관리합니다.

팀원 추가하기¶

TeamMember 타입에 맞춰 해당 팀 배열에 새 멤버를 추가합니다:

// src/data/teamData.ts

// 1. 해당 팀 배열에 멤버 추가
export const techTeam: TeamMember[] = [
  // ... 기존 멤버들
  {
    name: '홍길동',
    role: 'Developer',
    description: '프론트엔드 개발',
  },
];

프로필 사진 등록¶

팀원을 추가한 후 프로필 사진도 함께 등록해야 합니다. 두 곳을 수정합니다:

1단계: src/assets/ 폴더에 이미지 파일을 추가합니다. 파일명 규칙:

팀	파일명 패턴	예시
Executive	`exec_<영문이름>.<확장자>`	`exec_yewoon.png`, `exec_justin.jpeg`
Event	`event_<영문이름>.jpeg`	`event_dongwan.jpeg`
Marketing	`marketing_<영문이름>.<확장자>`	`marketing_seungyeon.jpg`, `marketing_sohyun.png`
Tech	`tech_<영문이름>.<확장자>`	`tech_kunhee.jpg`, `tech_donghun.jpeg`
PR	`pr_<영문이름>.<확장자>`	`pr_siwon.jpeg`, `pr_nick.jpg`

파일명 주의사항

파일명은 소문자 영문 이름을 사용하고, 확장자는 실제 이미지 형식과 일치해야 합니다. 대소문자가 다르면 빌드 시 이미지가 표시되지 않습니다.

2단계: teamData.ts의 memberImages 객체에 이미지를 등록합니다:

// src/data/teamData.ts
import techGildong from '@/assets/tech_gildong.jpeg';

export const memberImages: Record<string, string> = {
  // ... 기존 이미지들
  '홍길동': techGildong,
};

3단계: 영문 이름이 필요한 경우 memberEnglishNames에도 추가합니다:

export const memberEnglishNames: Record<string, string> = {
  // ... 기존 매핑
  '홍길동': 'Gildong',
};

이벤트 업데이트¶

파일: src/pages/HomePage.tsx, src/pages/EventsPage.tsx

두 파일 모두 수정

이벤트는 홈페이지와 이벤트 페이지 양쪽 모두에 표시될 수 있습니다. 이벤트를 추가하거나 수정할 때 두 파일 모두 확인하세요.

이벤트 데이터 구조¶

이벤트는 LocalizedContent 타입을 사용하지 않고, 페이지 파일 내부에서 한국어/영어 이벤트를 각각 별도로 정의합니다:

const content = {
  ko: {
    events: [
      {
        date: '2/13',
        title: '발렌타인 데이 빼빼로 판매',
        location: 'SLC',
        time: '오전 11시 - 오후 5시',
        description: '발렌타인 데이 빼빼로 판매 이벤트',
        color: 'from-pink-500/20 to-pink-600/10',
      },
    ],
  },
  en: {
    events: [
      {
        date: '2/13',
        title: "Valentine's Day Pepero Sale",
        location: 'SLC',
        time: '11AM - 5PM',
        description: "Valentine's Day Pepero sale event",
        color: 'from-pink-500/20 to-pink-600/10',
      },
    ],
  },
};

이벤트 추가하기¶

해당 페이지 파일의 content 객체에서 ko.events와 en.events 배열에 모두 새 이벤트를 추가합니다.

필드	설명	예시
`date`	날짜 (문자열)	`'3/15'`
`title`	이벤트 제목	`'봄 소풍'`
`location`	장소	`'SLC'`
`time`	시간	`'오후 2시 - 5시'`
`description`	간단한 설명	`'봄 소풍 이벤트'`
`color`	Tailwind 그라데이션 클래스	`'from-green-500/20 to-green-600/10'`

color 값

color는 Tailwind CSS 그라데이션 클래스입니다. 기존 이벤트의 color 값을 참고하여 비슷한 패턴으로 작성하면 됩니다.

제휴 식당 업데이트¶

파일: src/pages/MembershipPage.tsx

식당 추가하기¶

MembershipPage.tsx 파일 내부의 PartnerRestaurant 타입 데이터에 새 식당을 추가합니다:

{
  name: '새 식당 이름',
  address: '123 Example St, Waterloo, ON',
  discount: '10% off for UWKSA members',
  mapUrl: 'https://maps.google.com/...',
  description: '한식 레스토랑',
}

Google Maps URL 얻기

Google Maps에서 해당 식당을 검색합니다
공유 버튼을 클릭합니다
링크 복사를 선택하여 URL을 가져옵니다

소셜 링크 수정¶

파일: src/data/socialLinks.ts

현재 4개의 소셜 링크가 등록되어 있습니다:

Instagram
TikTok
Discord
Email

링크 수정하기¶

socialLinks.ts에서 해당 링크의 URL을 수정합니다. 이메일 주소를 변경하는 경우, 같은 파일의 CONTACT_EMAIL 상수도 함께 수정해야 합니다.

새 페이지 추가¶

새 페이지를 추가하려면 3개 파일을 수정해야 합니다.

1단계: 페이지 컴포넌트 생성¶

src/pages/ 폴더에 새 파일을 만듭니다. named export를 사용합니다:

// src/pages/NewPage.tsx
import { useLanguage } from '@/contexts/AppContext';

export function NewPage() {
  const { language } = useLanguage();

  return (
    <div className="container mx-auto px-4 py-8">
      <h1>{language === 'ko' ? '새 페이지' : 'New Page'}</h1>
      {/* 페이지 내용 */}
    </div>
  );
}

@/ 경로

@/는 ./src 폴더를 가리키는 path alias입니다. 예를 들어 @/contexts/AppContext는 src/contexts/AppContext와 같습니다.

2단계: App.tsx에 라우트 등록¶

src/App.tsx에서 lazy import와 switch case를 추가합니다:

// src/App.tsx

// lazy import 추가 (다른 lazy import들 근처에)
const NewPage = lazy(() =>
  import('./pages/NewPage').then((m) => ({ default: m.NewPage }))
);

// switch case에 추가 (renderPage 함수 내부)
case 'newpage':
  return <NewPage />;

lazy import 패턴

이 프로젝트는 named export를 사용하므로, lazy import 시 .then(m => ({ default: m.NewPage })) 패턴이 필요합니다. default export가 아니라 named export를 변환하는 과정입니다.

3단계: 네비게이션 메뉴에 추가¶

src/components/Header.tsx에서 네비게이션 메뉴에 한/영 라벨을 추가합니다:

// Header.tsx의 네비게이션 항목 배열에 추가
{ path: 'newpage', ko: '새 페이지', en: 'New Page' },

shadcn/ui 컴포넌트 추가¶

이 프로젝트는 shadcn/ui를 사용합니다. 새 UI 컴포넌트가 필요한 경우:

npx shadcn@latest add <컴포넌트명>

예시:

npx shadcn@latest add dialog
npx shadcn@latest add table

추가된 컴포넌트는 src/components/ui/ 폴더에 생성되며, 다음과 같이 사용합니다:

import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';

사용 가능한 컴포넌트 목록은 shadcn/ui 공식 문서에서 확인하세요.