SPORTS CALENDAR

모든 경기를
한 곳에서

EVERYMATCH

EveryMatch Dashboard
프로스포츠 경기일정 통합관리 캘린더 🏆SSAFY 우수상 수상
2024.11.18 - 11.27 (10일)
2명
풀스택, UI/UX 디자인
Java, Vue.js, MySQL, Spring Boot, MyBatis

내 팀 경기만 모은 맞춤 캘린더

야구부터 농구까지, 개인에 커스터마이징된 스포츠 캘린더입니다.
관심 팀을 설정하고 알림을 통해 경기를 놓치지 않도록 도와줍니다.
AI팀 추천과 챗봇으로 새로운 팬심의 즐거움까지 느낄 수 있습니다.

01. KEY FOCUS

나의 관심 팀만 쏙!
모든 경기 일정을 한 캘린더에서

EveryMatch Calendar Layout
Focus 1

내 응원 팀의 일정만 쏙쏙,
관심 팀 맞춤형 캘린더

스포츠 캘린더 경기 알림
Focus 2

경기 규칙부터 팀 추천까지,
팬심을 넓히는 스마트한 파트너

AI 팀 추천 스포츠 전문가 챗봇
02. SITE STRUCTURE

서비스 구성도 및
담당 개발 파트

EveryMatch
챗봇
AI팀 추천
관심 팀 설정
관심팀 추가/삭제
캘린더
당일경기조회
마이페이지
회원정보 수정
비밀번호 변경
회원가입
로그인/아웃
비밀번호 찾기
회원탈퇴
경기일정 알림
03. SERVICE

단순한 달력이 아니라,
팀을 향한 애정을 시각화했습니다

Calendar View

경기 일정 히트맵

FullCalendar를 커스터마이징하여, 일자별 경기 밀도에 따라 색상의 농도가 변하는 직관적인 UI를 구현했습니다.

Team Setting

관심 팀 맞춤 설정

야구, 축구, 농구 등 종목에 관계없이 내가 응원하는 팀만을 골라 나만의 캘린더를 구성할 수 있습니다.

Notification

경기 임박 알림 서비스

관심 팀 경기 시작 1시간 전, 놓치지 않도록 이메일 알림을 자동 발송하는 스케줄링 시스템을 구축했습니다.

04. AI ASSISTANT

더 재밌게,
AI 기능

AI 팀 추천

"응원 팀이 없어도 괜찮습니다."
사용자의 성향을 분석하여 AI가 가장 적합한 스포츠 팀을 추천해줍니다.

AI Team Recommendation
스포츠 전문 챗봇

경기 규칙부터 선수 정보까지, 궁금한 점은 언제든 파트너 챗봇에게 물어볼 수 있습니다.

AI Chatbot Interaction
05. KEY CONTRIBUTIONS

기여의 핵심,
주요 회고점 및 기술적 극복

01

BCrypt 암호화 로그인 보안 구축

사용자 비밀번호 저장 시 Salt가 포함된 BCrypt 해싱을 적용하여 보안을 강화했습니다.

BCrypt Hashing
02

Spring Scheduler 활용 이메일 알림 배치 처리

경기 시작 1시간 전 알림을 위해 @Scheduled로 배치 작업을 구성하고, JavaMailSender를 활용하여 메일을 발송하도록 구현했습니다.

Spring Scheduler JavaMailSender
03

Vanilla CSS 커스텀 디자인 시스템

외부 라이브러리에 의존하지 않고, Vanilla CSS로 커스텀 디자인 시스템을 개발하여 일관성 있는 UI를 구현했습니다.

Vanilla CSS Custom UI System
04. SECURITY

기본부터 확실하게,
보안과 데이터 보호

SecurityConfig.java
@Bean
public SecurityFilterChain filterChain(HttpSecurity http) {
    http
        .csrf().disable()
        .sessionManagement()
        .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
        .and()
        .authorizeRequests()
        .antMatchers("/api/auth/**").permitAll()
        .anyRequest().authenticated()
        .and()
        .addFilterBefore(new JwtAuthenticationFilter(jwtTokenProvider), 
                         UsernamePasswordAuthenticationFilter.class);
    
    return http.build();
}
Spring Security + JWT

Spring Security와 JWT를 연동해 보며, 토큰을 사용한 인증 및 인가 처리 과정을 직접 경험하고 구현해 보았습니다.

BCrypt 암호화

사용자 비밀번호는 BCrypt 해싱 알고리즘을 적용하여 DB 유출 시에도 복호화가 불가능하도록 보호했습니다.

05. UI/UX & GROWTH

10일간의 몰입,
성장의 기록

🎨 커스텀 UI 구현

기존 라이브러리에 의존하던 방식에서 벗어나, Flexbox와 Grid 등 CSS의 핵심 속성을 직접 다루며 기획한 UI를 그대로 화면에 구현해냈습니다.

Vue.js Component Responsive

💪 "된다"는 자신감

짧은 기간, 풀스택 개발이라는 압박 속에서도
"막막한 순간에도 반드시 해답을 찾아낸다"
강한 끈기와 논리적인 문제 해결력을 얻었습니다.

Full Stack Debugging
SSAFY 우수상 🏆

모든 경기를 한 곳에서,
EveryMatch