새길 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)