📖 TIL - King's Ear is (KEI) 프로젝트 Day 1: 기획과 설계의 시작

✨ 오늘의 진행 사항

오늘은 팀 프로젝트를 위해 WBS와 기획을 팀원들과 논의하고, 피그마를 활용해 WBS를 작성했다.
처음 사용하는 피그마가 낯설었지만, 새로운 기술을 배우고 프로젝트 목표를 달성하기 위해 팀원들과 소통한 경험이 새로웠다.

1. 프로젝트 기획

• 프로젝트명: King's Ear is (KEI)
• 목적: 내배캠 대원들을 위한 익명 커뮤니티 플랫폼 구축
• 핵심 가치:
  • 익명성 보장을 통한 자유로운 소통
  • 좋아요 기반의 인기 콘텐츠 노출
  • 로그인 기반의 커뮤니티 활동

2. 주요 기능 설계

// 핵심 기능 구조
const features = {
  auth: ['로그인', '회원가입', '정보수정'],
  community: ['게시글 CRUD', '댓글', '좋아요'],
  content: ['인기글 슬라이드', '무한스크롤'],
  lecture: ['강의자료 링크', '타임라인 코멘트']
};

3. 페이지 구조 설계

• Home: 앱 소개 및 인기글 슬라이드
• Feed: 게시글 목록 및 작성 (반응형 모달)
• Detail: 게시글 상세 및 댓글
• Auth: 로그인/회원가입/정보찾기
• Mypage: 개인정보 관리
• Lecture: 강의 자료 모음

💡 기술 스택 결정

1. 핵심 기술

• Supabase: 백엔드 서비스
• React: 프론트엔드 프레임워크
• Context API: 상태관리
• React Router DOM: 라우팅

2. 추가 도전 과제

• SNS 로그인 연동
• 무한 스크롤 구현
• 반응형 디자인
• 로그인을 하지 않은 사용자가 피드 페이지 스크롤시 일부 제한

🎨 디자인 작업

• Figma를 활용한 와이어프레임 제작
• 페이지별 레이아웃 구성
• 컴포넌트 디자인 시안 작성

🚀 초기 개발 환경 설정

# 프로젝트 기본 설정
npm create vite@latest
npm install react-router-dom @supabase/supabase-js

🤔 내일의 과제

1. 컴포넌트 기본 레이아웃 설정
2. Supabase 테이블 설계
3. 기본 라우팅 설정
4. 공통 컴포넌트 개발 시작

💭 오늘의 소감

첫 팀 프로젝트라 설렘 반, 걱정 반인 상태다.
기획 단계에서 예상보다 많은 시간이 소요되었고, 와이어프레임 작성 중 실제 구현에 대한 고민도 시작되었다.
내가 담당할 부분은 Home 페이지로, 다른 페이지에 비해 기술적인 난이도는 낮을 것 같지만,
사용자와의 첫 만남이 이뤄지는 중요한 페이지인 만큼 신중하게 코딩해 나가야겠다고 생각했다.

📌 배운 점

• 기획의 중요성
• 팀원들과의 소통과 의견 조율 방법
• Figma 활용 스킬

🎯 내일의 목표

• 구체적인 컴포넌트 구조 설계
  -Supabase 학습 및 테이블 설계
• 팀원들과의 역할 분담 명확화