새길 FE Repository

1. 소개

새길은 2025 새만금 공공데이터 공모전 신규데이터 생산 부문에 참가한 웹 개발 프로젝트 출품작입니다.
사용자 맞춤형 문화 콘텐츠를 추천하고, 결과를 지도에 시각화하는 설문조사 데이터 수집 플랫폼입니다.

• 🌐 배포 링크 : 설문조사 참여하기
• 🛠️ 사용 스택 : JavaScript, TypeScript, React, Next.js, Tailwind CSS, Axios, Vercel
• 👥 참여 인원 : 총 4명 (BE 1, FE 2, UX/UI 1)
• ⏳ 개발 기간 : 2025.07

---

2. 수행 역할

노현지

• 기존 코드 구조 개선 및 재사용성 향상 작업 (랜딩 페이지, 온보딩 설문 페이지)
• 추천 결과 페이지
• 서비스 만족도 조사 모달
• 설문 제출 완료 페이지
• 버튼 공통 컴포넌트
• API 함수 구현
• Vercel 배포

양혜린

• 랜딩 페이지 개선 및 반응형 스타일 적용
• 온보딩 설문 페이지 반응형 스타일 적용

4. 디렉토리 구조

펼쳐보기📁

src/
├─ app/
│  ├─ _components/
│  │  ├─ LandingPage/
│  │  │  └─ index.tsx
│  │  ├─ SurveyScreen/
│  │  │  ├─ hooks/
│  │  │  │  ├─ usePostSurvey.ts
│  │  │  │  └─ useSurvey.ts
│  │  │  ├─ index.tsx
│  │  │  ├─ ProgressBar.jsx
│  │  │  └─ SurveyOption.tsx
│  │  └─ TransitionScreen/
│  │     └─ index.tsx
│  ├─ recommend/
│  │  ├─ _components/
│  │  │  ├─ MapView/
│  │  │  │  ├─ index.tsx
│  │  │  │  └─ RecommendationMarker.tsx
│  │  │  └─ RecommendationPanel/
│  │  │     ├─ index.tsx
│  │  │     ├─ SkeletonCard.tsx
│  │  │     └─ SpaceCard.tsx
│  │  ├─ SatisfactionModalContent/
│  │  │  ├─ hooks/
│  │  │  │  └─ usePatchSatisfaction.ts
│  │  │  ├─ index.tsx
│  │  │  └─ SatisfactionForm.tsx
│  │  ├─ NavBar.tsx
│  │  ├─ SatisfactionModalButton.tsx
│  │  ├─ _hooks/
│  │  │  └─ useGetRecommendation.ts
│  │  └─ page.tsx
│  ├─ submit-success/
│  │  └─ page.tsx
│  ├─ favicon.ico
│  ├─ globals.css
│  ├─ layout.tsx
│  └─ page.tsx
├─ assets/
│  ├─ fonts/
│  ├─ icons/
│  ├─ images/
│  └─ logo/
├─ components/
│  ├─ Button/
│  ├─ ErrorScreen/
│  └─ Modal/
├─ constants/
│  ├─ satisfactionData.ts
│  ├─ spaceData.ts
│  ├─ surveyData.ts
│  └─ transitionData.ts
├─ lib/
│  ├─ apis/
│  │  └─ survey.ts
│  ├─ axiosInstance.ts
│  └─ type.ts
└─ utils/
   ├─ createNewUser.ts
   ├─ getCity.ts
   ├─ getDestination.ts
   └─ getMidpoint.ts

---

5. 기타

• Notion 문서 : 노션 링크

(🔝 back to top)