hoodie-project/partyguam-frontend

파티 구해? partyguam!🧚‍♀️파티 구해? partyguam!🧚‍♀️파티 구해? partyguam!🧚‍♀️파티 구해? partyguam!🧚‍♀️파티 구해? partyguam!🧚‍♀️파티 구해? partyguam!🧚‍♀️파티 구해? partyguam!🧚‍♀️파티 구해? partyguam!🧚‍♀️파티 구해? partyguam!🧚‍♀️파티 구해? partyguam!🧚‍♀️파티 구해? partyguam!🧚‍♀️파티 구해? partyguam!🧚‍♀️파티 구해? partyguam!🧚‍♀️파티 구해? partyguam!🧚‍♀️파티 구해? partyguam!🧚‍♀️파티 구해? partyguam!🧚‍

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

partyguam-frontend's Issues

로그인 성공 시 전역 처리

👀 어떤 기능인가요?

추가하려는 기능에 대해 간결하게 설명해주세요

📝 작업 상세 내용

• 전역 쿠키 관리
• 전역 User data 관리
• 로그인 상태에 따른 routing 관리
  이외에 Refactor 할 수 있는 건 챙겨가자

🔍 참고할만한 자료(선택)

로그인 기능 왜 안 돼?

세부프로필 API 연결

👀 어떤 기능인가요?

추가하려는 기능에 대해 간결하게 설명해주세요

• 세부프로필에서 모든 질문은 server가 관리하고 있다.
• 세부프로필 각 단계 별 다음 버튼을 누를 때마다 각 단계 별 저장이 필요하다.
• 그러면서 세부프로필 각 단계 별 응답은 전역적으로 들고 있어야 한다.
• 그러기 위해선 전역 로그인 로직이 우선적으로 처리 되어야 한다.
• 전역 로그인 로직이 우선적으로 처리되기 위해선 구글 로그인도 완료 되는 것이 좋을 듯 하다.
• 세부프로필 마지막 완료 버튼 누를 시엔 router.push가 세부프로필 완료 페이지로 가야 한다.

📝 작업 상세 내용

• 로그인 로직 중 발생 401 error 해결
• 전역 로그인 #19 해결
• 세부프로필 전역 store 관리
• 세부프로필 각 Q list get api 연동
• 세부프로필 각 submit post api 연동
• 세부프로필 각 수정시 delete, post 동시 요청 구현
• 세부프로필 완료 페이지 제작

🔍 참고할만한 자료(선택)

파티 수정 UI 개발

👀 어떤 기능인가요?

추가하려는 기능에 대해 간결하게 설명해주세요

파티 수정 UI 개발

하면서 여러 수정된 작업 챙겨가기..

📝 작업 상세 내용

• 파티 수정 UI 개발
• 모달 문구 전체 수정
• 로그인 모달 UI 수정
• 좌측 플로팅 메뉴 UI

🔍 참고할만한 자료(선택)

모든 Select의 api를 고쳐봐요

👀 어떤 목적인가요?

리펙토링 목적에 대해 간결하게 설명해주세요

AS-IS

기존 api는 전체 position List를 받아서 프론트에서 filter 로직을 통해 matching 시켜주고 있었다.

위 사진처럼 데이터를 전부 받아서

프론트엔드에서 데이터를 정제해주는 작업을 하고 있었음.

TO-BE

연결된 select의 경우, 하나의 select를 클릭하면 그 다음 Select는 이전의 Select의 Id값에 따라 바뀔 것이다.
즉, 전체 리스트를 받아서 select를 하나하나 프론트에서 정제해주던 로직을 걷어내고
백엔드에게 선택한 Id값만 넘겨서 해당 List를 받아오는 것으로 고칠 것이다...

📝 작업 상세 내용

• JoinDetail에서 포지션 선택
• PartyCreate에서 포지션 선택
• JoinDetail에서 지역 선택

🔍 참고할만한 자료(선택)

파티 지원 페이지

👀 어떤 기능인가요?

추가하려는 기능에 대해 간결하게 설명해주세요

📝 작업 상세 내용

• 파티 지원 페이지 UI
• 파티 지원 API
• TODO

🔍 참고할만한 자료(선택)

폴더 구조 세팅

목적

기깔나는 폴더 구조 세팅을 위함

작업 상세 내용

• type interface 관련 폴더
• 상태관리 라이브러리 선택 후 관련 폴더
• queries 관련 폴더
• 스타일 변수 관리 폴더

---

참고 사항

form input validation check 로직

👀 어떤 기능인가요?

추가하려는 기능에 대해 간결하게 설명해주세요

회원가입 form validation check 로직

📝 작업 상세 내용

• constants 폴더에 validate message 정해서 넣어두기
  -> 정책 다시 확인 필요 -> 확인되면 이슈에 댓글로 남겨두깅
• from -> form 관련 라이브러리 뭐 사용할까
• form validation check 로직 구현
• 가입하기 페이지 구현
• Typography 공통 컴포넌트로 빼기

🔍 참고할만한 자료(선택)

google login

👀 어떤 기능인가요?

추가하려는 기능에 대해 간결하게 설명해주세요

📝 작업 상세 내용

• TODO
• TODO
• TODO

🔍 참고할만한 자료(선택)

파티 모집 페이지

👀 어떤 기능인가요?

추가하려는 기능에 대해 간결하게 설명해주세요

📝 작업 상세 내용

• 파티 모집 페이지
• 파티 모집 페이지 Input 추가 버튼 UI
• 파티 모집 페이지 Input list 추가, 생성 로직
• 파티 모집 생성 API (/dev/api/parties/{partyId}/recruitments)
• 포지션 항목 조회 API (/dev/api/positions)

🔍 참고할만한 자료(선택)

세부 프로필 작성 UI구현

👀 어떤 기능인가요?

추가하려는 기능에 대해 간결하게 설명해주세요

📝 작업 상세 내용

• progress bar component
• 지역 선택 component
• select component
• check box component
• toast ui component

🔍 참고할만한 자료(선택)

파티 생성 페이지 구현

👀 어떤 기능인가요?

추가하려는 기능에 대해 간결하게 설명해주세요

📝 작업 상세 내용

• image input ui
• tip box ui
• 말풍선 ui
• 파티 생성 ui
• 파티 유형 List api 연동
• 파티 생성 Form data api 연동
• 경고 모달
• 생성 완료 모달

🔍 참고할만한 자료(선택)

공통 모달 컴포넌트

👀 어떤 기능인가요?

추가하려는 기능에 대해 간결하게 설명해주세요

📝 작업 상세 내용

• 필수 회원가입 시 뒤로가기 버튼, home버튼을 누를 시 '회원가입 완료되지 않았습니다' 컴포넌트 띄워져야함
• 세부 프로필 작성시 다음 버튼을 눌러 초기 post api를 보내지 않은 경우에
  X 버튼, home버튼을 누를 시 '입력한 내용들이 모두 초기화 됩니다' 컴포넌트 띄워져야 함

🔍 참고할만한 자료(선택)

login 진입 modal component

👀 어떤 기능인가요?

추가하려는 기능에 대해 간결하게 설명해주세요

📝 작업 상세 내용

• 로그인 모달 portal
• atom component 전체 리펙토링, style object map 리펙토링
• 모달 전역 관리 context

🔍 참고할만한 자료(선택)

Next.js Server-Side Request Forgery in Server Actions

어떤 버그인가요?

어떤 버그인지 간결하게 설명해주세요

Next.js Server-Side Request Forgery in Server Actions

👀 어떤 상황에서 발생한 버그인가요?

(가능하면) Given-When-Then 형식으로 서술해주세요

Next.js에서 Server-Side Request Forgery(SSRF)에 대한 취약점이 제기됨

Next.js 어플리케이션이 보낸 것처럼 보이는 요청이 공격자에 의해 만들어질 수 있다는 것. (아래 조건을 만족 시)

• 14.1.1버전 미만의 Next.js사용시
• Next.js에서 Server Actions기능을 사용할 시
• Server Action이 '/'로 시작하는 상대 경로로의 리다이렉팅을 수행할 경우

📝 해결 방안

해결 방안을 설명해주세요

해결 방안은 Next.js의 버전 업!!!! github에서 자동 버전업 버튼을 제공해서 PR까지 만들어줌!

kakao login

👀 어떤 기능인가요?

추가하려는 기능에 대해 간결하게 설명해주세요

📝 작업 상세 내용

• TODO
• TODO
• TODO

🔍 참고할만한 자료(선택)

상단바(로고, 메뉴, 로그인 버튼) 구현

👀 어떤 기능인가요?

추가하려는 기능에 대해 간결하게 설명해주세요

페이지 공통 헤더인 상단바 구현
아직 모든 정책이 정해지지 않았기에 후순위로 미뤄질 듯

📝 작업 상세 내용

• 로고
• 메뉴
• 로그인 버튼 (로그인 안 했을 땐 로그인버튼 , 로그인 했을 땐 사용자 프로필)
• 상태창

🔍 참고할만한 자료(선택)

피그마

프로젝트 초기 세팅

• Next.js 초기 세팅 (pnpm, eslint, prettier, etc)
• 맥 미니 서버 띄워보기

디자인 시스템에 맞춘 토큰 수정

👀 어떤 목적인가요?

리펙토링 목적에 대해 간결하게 설명해주세요

디자인 시스템에 맞춘 토큰 수정

📝 작업 상세 내용

• 타이포그래피 속성 맞춤
• 색상명 변경

🔍 참고할만한 자료(선택)

공통 컴포넌트 작성

👀 어떤 기능인가요?

추가하려는 기능에 대해 간결하게 설명해주세요

회원가입 페이지 구현을 위한 atomic하고 dynamic한 공통 컴포넌트 구현

📝 작업 상세 내용

• select component(validate, disabled, reset)
• input component(validate, disabled, reset)
• button component(white small button, white medium button, green full button, 색상과 크기에 다이나믹한 버튼 만들기)
• Txt component(title label, description label, ...)
• Date component
• Chip component

🔍 참고할만한 자료(선택)

피그마

파티 지원 페이지

👀 어떤 기능인가요?

추가하려는 기능에 대해 간결하게 설명해주세요

📝 작업 상세 내용

• 파티 지원 페이지 UI
• 파티 지원 API (/dev/api/parties/{partyId}/recruitments/{partyRecruitmentId}/applications)

🔍 참고할만한 자료(선택)