마이코드 (MyCode)

문화행사 정보를 한 곳에서 관리하고 검색할 수 있는 크로스 플랫폼 애플리케이션

목차

• 소개
• 주요 기능
• 기술 스택
• 프로젝트 구조

소개

마이코드는 문화행사 정보를 편리하게 검색하고 관리할 수 있는 모바일 애플리케이션입니다. Expo와 React Native를 기반으로 iOS, Android 플랫폼을 지원합니다.

주요 기능

• 홈 - 다양한 문화행사 정보 탐색
• 검색 - 키워드 기반 행사 검색
• 일정 관리 - 관심 있는 행사 일정 관리
• 찜하기 - 관심 행사 북마크
• 지도 - Naver Map 기반 행사 위치 확인
• 마이페이지 - 프로필 및 설정 관리
• 소셜 로그인 - Kakao, Apple 로그인 지원
• 공유 - Kakao 공유 기능

기술 스택

Core

• React Native 0.79.3
• Expo SDK ~53.0
• TypeScript ~5.8.3
• React 19.0.0

Navigation & Routing

• Expo Router ~5.1.4
• React Navigation 7.x

Styling

• NativeWind 4.x (TailwindCSS for React Native)
• TailwindCSS 3.4.17

State Management

• Zustand 5.x

Key Libraries

• @react-native-kakao - Kakao SDK (로그인, 공유)
• @mj-studio/react-native-naver-map - Naver Map
• expo-apple-authentication - Apple 로그인
• react-native-calendars - 캘린더 UI
• react-native-reanimated - 애니메이션
• axios - HTTP 클라이언트

프로젝트 구조

JECT-1-FE/
├── app/                    # Expo Router 페이지
│   ├── (tabs)/            # 탭 네비게이션 페이지
│   │   ├── index.tsx         # 홈
│   │   ├── search_tab.tsx    # 검색
│   │   ├── schedule.tsx      # 일정
│   │   └── mypage.tsx        # 마이페이지
│   ├── detail/            # 상세 페이지
│   ├── my/                # 마이페이지 하위 페이지
│   ├── search-keywords/   # 검색 키워드
│   ├── search-results/    # 검색 결과
│   ├── _layout.tsx        # Root Layout
│   └── +not-found.tsx     # 404 페이지
│
├── components/             # 재사용 가능한 컴포넌트
│   ├── ui/                # UI 기본 컴포넌트
│   ├── home/              # 홈 관련 컴포넌트
│   ├── detail/            # 상세 페이지 컴포넌트
│   ├── search/            # 검색 관련 컴포넌트
│   ├── schedule/          # 일정 관련 컴포넌트
│   ├── like/              # 좋아요 관련 컴포넌트
│   └── map/               # 지도 관련 컴포넌트
│
├── features/               # 기능별 모듈
├── hooks/                  # Custom Hooks
├── stores/                 # Zustand 스토어
├── constants/              # 상수 정의
├── types/                  # TypeScript 타입 정의
├── utils/                  # 유틸리티 함수
├── assets/                 # 정적 파일
│   ├── fonts/             # 폰트 파일
│   └── images/            # 이미지 파일
├── scripts/                # 스크립트
├── plugins/                # Expo 플러그인
│
├── app.config.js           # Expo 설정
├── package.json            # 프로젝트 의존성
├── tsconfig.json           # TypeScript 설정
├── tailwind.config.js      # TailwindCSS 설정
├── babel.config.js         # Babel 설정
└── metro.config.js         # Metro 번들러 설정