[Outsourcing_Day 1] HotPlace In Seoul 🔥

아웃소싱이란? 기업이나 조직이 특정 업무를 외부 전문 업체나 개인에게 위탁

→ 한 회사의 개발자가 되었다 생각하고 주어진 요구사항을 잘 반영해서 아웃소싱 프로젝트를 성공시켜 봅시다!

---

두 번째 협업 프로젝트.

이번에는 세 가지 서비스 중 한 가지 이상을 포함한 웹사이트를 구현해야 한다.

우리 조(하이파이브✋)는 지도 서비스, 유튜브 영상 지원, 설문조사에 따른 결과 중 카카오 지도, 유튜브 를 선택하였다.

 

2025.02.26 (수) Works

 

1. 아이디어 스케치 - 피그마

2. S.A(Starting Assignments) 정하기
- 프로젝트 주제
- 포함할 내용
- 구성
- 기능
3. 팀 규칙 정하기 
- 커밋 컨벤션
- git rules

 

 

아이디어 스케치

 

세 가지 서비스 중 한 가지 이상을 골라서 페이지를 구현해야하기 때문에 조원 각자의 자유로운 아이디어를 모아보았다.

나는 AI를 활용하여 유튜브 영상의 내용을 간략히 요약하는 서비스를 제공해주는 사이트를 생각했다.

하지만 생각해보면 이것은 그저 한가지의 기능이었고, 다른 주제의 프로젝트를 진행할 때 반영해보면 좋을 듯 하다.

 

정해진 주제는 '핫플 공유지도'

이 주제로 개인적으로 생각하는 기능 및 레이아웃을 피그마에 대략적으로 그려가며 함께 이야기 나누었다.

 

여러 의견을 조합한 내용은 다음과 같다.

사용자에게 카카오 지도를 통해 서울 한정으로 지역별 핫플을 추천해주며 관련 유튜브 영상도 함께 제공한다.

또한 카테고리를 선택하여 주변 음식점과 카페를 지도상에 나타낸다.

회원가입과 로그인 한 사용자는 해당 지역을 북마크할 수 있으며 마이페이지에서 확인이 가능하다.

 

 

S.A 작성

 

📍프로젝트 주제 및 한 줄 정리

앞서 말했 듯, 카카오지도와 유튜브를 활용하여 서울 내 지역별 핫플 공유 지도이다.

📍포함할 내용

1. 회원가입, 로그인으로 회원 관리
2. 카카오 지도 
   • 주변 장소 리스트 나타내기
   • 우리가 제공하는 핫플 마커 지도에 표시
   • 마커 클릭 시
     • 해당 장소 정보(음식점 이름, 주소, 운영시간, 번호, 주차 여부, 전화번호 등)
     • 핫플 관련 영상 정보
     • 핫플 좋아요
     • 핫플 마커 북마크
3. 유튜브
   • 핫플 장소 관련 영상 3~5개 제공

📍페이지 구성

1. 로그인
2. 회원가입
3. 메인페이지
   • 지역 카테고리 & 지도(고정)
   • 영상리스트
4. 마이페이지
   • 프로필 확인 및 수정
   • 북마크 한 핫플

📍기능

1. 회원가입을 통해 사용자의 정보를 저장
2. 로그인을 통해 페이지 및 기능 이용 권한 부여
3. 지역별 핫플 정보 전달
4. 카카오지도 API
   • 핫플 장소 정보 나타내기(음식점 이름, 주소, 운영시간, 번호, 주차 여부, 전화번호 등)
   • [음식점, 카페] 카테고리로 주변 장소 리스트로 나타내기 (무한스크롤)
5. 유튜브 API
   • 핫플 장소 관련 유튜브 영상 플레이어
   • 주변 가게 무한스크롤

 

 

팀 규칙 정하기

 

📍git rules

• 이슈 활성화
  • 기능 구현 전 이슈를 먼저 작성하여 이슈 번호를 확인하기
• 브랜치명 생성
  • `Feature/[issue-number]-setting_project`

와 같이 브랜치 명을 정하여 이슈 번호에 대한 브랜치를 생성한다.

많은 브랜치명이 있지만 아마 Feature/ 을 많이 사용하게 될 것이라고 이야기 나누었다.

 

• 커밋 메세지
  • update:#10 title change
    (타입:#이슈번호 내용)

작업 타입과 함께 마찬가지로 이슈 번호에 대한 커밋 메세지를 작성한다.

메세지의 내용과 형식은 자유롭게 ~

 

 

• PR
  • 아래와 같은 형식으로 PR을 작성하게 되며 틀은 바로 사용될 수 있도록 설정!

### 이슈 번호
> 해당 이슈 번호를 적습니다.

### 작업 설명
> 작업한 내용을 적습니다.

### 리뷰 요구 사항
> 리뷰 예상 시간 및 고민 사항을 적습니다.
> 논의가 필요한 부분 남겨주세용

### 미리보기
> 프론트에서 디자인에 변경사항 또는 새로운 디자인을 머지하는 경우 이미지를 첨부합니다.

 

 

📍Code Convention

 

• src 하위의 디렉토리 구조 및 파일구조

• app/: router, compositeProvider 등 프로젝트의 환경 설정 같은 파일을 저장
• public/: 이미지, 파비콘, 폰트 등의 정적 파일을 저장
• components/: 재사용 가능한 컴포넌트를 저장합니다. 폴더 하위에 파일을 생성함
  • common/: 프로젝트 전반적으로 사용되는 공통 컴포넌트
  • layout/: header, footer등 layout에서 사용되는 컴포넌트
  • (영역)/: 개인마다 사용할 디렉터리 (예: my-page/)
• lib/: 유틸리티 함수, API 호출 관련 함수, 헬퍼 등을 저장
  • api/: supabase 사용하기 쉽도록 캡슐화한 함수들
  • hooks/: 커스텀 훅 ⇒ 개인 브랜치에서 Tanstack 쿼리 사용하
  • utils/: 다양한 유틸리티 함수
• store/ : zustand, 클라이언트 전역 상태관리 디렉터리
• data/: 프로젝트 전반에 사용되는 상수를 저장합니다.

• 디렉토리 네이밍 : kebab-case
• 파일 네이밍 : 컴포넌트를 포함한 파일의 이름은 PascalCase
• React Hook : ‘use’로 시작하는 camelCase
• 이외의 파일 :  camelCase
• API 함수명
  • GET API - get[로직 명] / 예시 : getPeeds
  • POST/PATCH/PUT/UPDATE/DELETE API - 요청타입[로직 명] / 예시 : postSignIn (로그인 함수)
• 이벤트 핸들러
  • handle[로직] - 이벤트 핸들러를 정의할 때 handle로 시작 / 예시 - handleAddPokemon
  • on[적절한 로직 명] - 이벤트 핸들러를 매개변수로 받을 때 인자명이 on 으로 시작 / 예시 - onRemovePokemon
• 복수명을 나타내는 변수명 : 's' 붙이기 / 예시 - pokemons
• Named Function VS Arrow Function

// Named Function //컴포넌트, 페이지 
function helloWorld() {
	console.log('hello world!');
}

// Arrow Function // 컴포넌트와 페이지를 제외!한 내부 함수 등 나머지
const helloWorld = () => {
	console.log('hello world!');
}
// or
const helloWorld = () => console.log('hello world!');

 

 

 

 

Tomorrow Task

- 와이어프레임 짜기(전체적인 레이아웃)

 

- 기능 확실히 정하기

- supabase 테이블 의견 나누기