From 686a1b97a1804c101fc8b175ceb2758294db2b1b Mon Sep 17 00:00:00 2001 From: urjimyu Date: Fri, 23 Feb 2024 15:45:32 +0000 Subject: [PATCH] =?UTF-8?q?Develop=EC=97=90=EC=84=9C=20main=20merge=20(2?= =?UTF-8?q?=EC=B0=A8=20qa=EB=A5=BC=20=EC=9C=84=ED=95=9C=20=EC=B5=9C?= =?UTF-8?q?=EC=A2=85=20=EB=B0=98=EC=98=81)=20(#422)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [공통] 폰트 적용 및 토너먼트 타이머 시도 (#163) * feat: router prop 변경 * style: 글자 정렬 변경 * feat: 인덱스 타이틀 스윗 수정 * style: font link 연결 * fix: 빌드 에러 해결 * Feat/#161 props drilling ranking (#165) * feat: navigate 추가 * feat: query string으로 param 넘기기 * feat: useLocation 코드 작성 * feat: query string으로 받아오는 값 코드 작성 * fix: 로그인 버튼 보이게 함 * fix: 버튼 보이게 수정 * fix: & 로 수정 * fix: start 뷰 relative * fix: 옵서널 파라미터로 수정 * fix: null 값 처리 재 배치 * fix: null 값 처리 재 배치 --------- Co-authored-by: Wang HoEun * [마이페이지] 아이콘 변경 (#160) * feat: 새로운 아이콘 넣기 * feat: bottom 값 추가 --------- Co-authored-by: Wang HoEun * [선물 등록] 선물 등록하기 화면 POST api 에러 해결 (#166) * feat: 비동기 처리 고려해서 link 값 전달되도록 수정 * feat: POST 성공 후 navigate 에러 해결 * feat: 광고 더미 수정 * feat: 빌드 에러 해결 * [토너먼트] outlink 보러가기 기능 구현 및 스타일 수정 (#173) * feat: onClick 시 외부 링크 이동 * feat: 더보기 버튼 없으면 링크 보이지 않기 * style: 보러가기 스타일 수정 * [홈페이지, 마이페이지] props drilling main (#175) * feat: 온보딩으로 이동 * feat: navigate date에 따라서 구분 + roomId 넘겨주기 * fix: 로그인 임시 부분 주석 처리 --------- Co-authored-by: Wang HoEun * [토너먼트] 리프레쉬 아이콘 작동 및 스타일 수정 (#178) * feat: 리프레쉬 함수 구현 * feat: 타입 수정 및 onClick 프롭 추가 * style: 리프레쉬 아이콘 스타일 수정 * style: 확인을 위해 type any로 바꾸기 * fix: memberToken 주석 처리 * fix: 원상태로 복귀 * fix: 주석 처리 * feat: local에 저장 * fix: 안쓰는 애들 삭제 * fix: localstorage에 저장 * fix: data 구조 수정 * [토너먼트] 다음버튼 활성화, 타이머 세팅, 다시하기 버튼 구현 (#182) * feat: 버튼 활성화 처리 * feat: 타이머 업데이트 * chore: timer text 변경 * feat: 다시하기 reload() 처리인데, 룸 아이디 잘 들어갈지 모르겠음 * fix: 안쓰는 커스텀 스타일 수정 * [온보딩] step06 퍼널로 복귀 & 로직 완료 & 참여자 뷰 구현 (#184) * chore: svg 파일추가 * chore: svg 파일 추가 * style: 초대 마감 뷰 구현 * feat: 초대 마감 뷰 라우터 처리 * feat: kakao 공유하기 커스텀 훅 작성 * feat: kakao 공유하기 useEffect로 구현 * style: 스타일 코드 props에 $ 추가로 에러 해결 * style: 스타일 코드에 기간 Period 추가 * feat: 선물 전달일 당일 출력 완료 * style: 데드라인 페이지 스타일 코드 분리 * feat: 데드라인 페이지에서 버튼 클릭 시 홈으로 이동 * feat: 온보딩 결과 페이지 라우터 처리 * style: 온보딩 헤더 패딩 삭제 * feat: 기존 step06 다시 퍼널로 복귀 * feat: step05에서 다음 클릭 시 invitationCode 저장후 step06로 연결 * feat: step06에서 result페이지 주소 복사 * feat: 참여자의 뷰 구현 & GET 받아오기 * feat: 카카오 로그인 클릭 시 홈으로 이동 * chore: 빌드 에러 해결 * chore: 빌드 에러 해결 * feat: 로컬 비우는 버튼 생성 * fix: 토큰 존재 여부 함수 생성 * fix: 로그인 오류 수정 * [선물등록, 선물홈] 타이머 수정, 뒤로 가기 구현 (#190) * feat: 선물 홈 뒤로가기 버튼 * feat: 뒤로가기 구현 * feat: 뒤로가기 구현 * feat: 불필요한 파일 제거 * feat: 링크가 유효하지 않을 때 라우팅 연결 * feat: 입력창 숫자일 때 화살표 안 뜨게 * feat: 선물 상태바 구현 * feat: 미니 타이머 기능 수정 * feat: api 수정 반영 * [선물홈]내가 고른 선물 구현 (#191) * feat: 링크 복사 구현 * feat: 내가 등록한 선물 구현 * feat: 내가 고른 선물 구현 * fix: 불필요한 코드 삭제 * fix: 빌드에러 해결 * fix: 빌드에러 해결 * [상세 페이지]delete api (#192) * feat: roomId 넘어가는 문제 해결 * fix: 코드 수정했지만 여전히 오류남 * feat: delete 코드 작성 * fix: react-query delete 문법 바꿔보기 * fix: 안쓰는 import 문 삭제 * fix: api url 수정 * feat: mutation 로직 코드 수정 * fix: component 랜더링 방식 수정 * fix: 로그인 오류 수정 * fix: 안쓰는 것들 정리 --------- Co-authored-by: Wang HoEun * feat: 수정하기 버튼 등장 조건 추가 * feat: 햄버거 바 메뉴 (#194) * [토너먼트] 토너먼트 화면 스타일 리팩토링 (#196) * feat: header 토너먼트 구현 * feat: header 토너먼트 구현 * chore: 주석 제거 * style: padding 2rem 추가 및 랭킹에 헤더 구현 * style: 토너먼트 배경 및 헤더 재배치 * style: 아이템 info 패딩 값 * feat: 결과 헤더 및 패딩값 조절 * style: 토너먼트 인트로 헤더 조절 * feat: 아이템 총 개수 인트로 화면 표시 * style: 폰트 컬러 변경 * chore: 아이콘 추가 * feat: 아이템 없을 때 예외처리 * chore: 구문 분리 * feat: 라운드 세트 수 로직 추가 * [전체]클립보드 복사 및 자잘한 수정 (#200) * feat: 선물 홈 뒤로가기 버튼 * feat: 뒤로가기 구현 * feat: 뒤로가기 구현 * feat: 불필요한 파일 제거 * feat: 링크가 유효하지 않을 때 라우팅 연결 * feat: 입력창 숫자일 때 화살표 안 뜨게 * feat: 선물 상태바 구현 * feat: 미니 타이머 기능 수정 * feat: api 수정 반영 * Feat/#185 copy link (#201) * feat: 링크 복사 구현 * feat: 내가 등록한 선물 구현 * feat: 내가 고른 선물 구현 * fix: 불필요한 코드 삭제 * fix: 빌드에러 해결 * fix: 빌드에러 해결 * feat: 버튼 이벤트 적용 * Refactor/#164 tournament result layout (#202) * feat: header 토너먼트 구현 * feat: header 토너먼트 구현 * chore: 주석 제거 * style: padding 2rem 추가 및 랭킹에 헤더 구현 * style: 토너먼트 배경 및 헤더 재배치 * style: 아이템 info 패딩 값 * feat: 결과 헤더 및 패딩값 조절 * style: 토너먼트 인트로 헤더 조절 * feat: 아이템 총 개수 인트로 화면 표시 * style: 폰트 컬러 변경 * chore: 아이콘 추가 * feat: 아이템 없을 때 예외처리 * chore: 구문 분리 * feat: 라운드 세트 수 로직 추가 * style: 랭킹 아이콘 및 카카오 버튼 구현 * style: 버튼 폰트 컬러 및 색상 * [시작 페이지] start view 오류 해결 (#205) * fix: 로그인 오류 수정 * fix: start 2번째 사진 수정 * fix: start 화면 뷰 다르게 하기 * fix: 안쓰는 import 문 삭제 --------- Co-authored-by: Wang HoEun * 리프레쉬 토큰 오류 수정 (#207) * feat: roomId 넘어가는 문제 해결 * fix: 코드 수정했지만 여전히 오류남 * feat: delete 코드 작성 * fix: react-query delete 문법 바꿔보기 * fix: 안쓰는 import 문 삭제 * fix: api url 수정 * feat: mutation 로직 코드 수정 * fix: component 랜더링 방식 수정 * fix: 로그인 오류 수정 * fix: 안쓰는 것들 정리 * fix: 리프레쉬 토큰 재 설정 * fix: 로그인 부분 main 코드로 변경 * feat: 온보딩으로 이동 --------- Co-authored-by: Wang HoEun * 리프레쉬 토큰 재 수정 (#210) * fix: 로그인 오류 수정 * fix: 토큰 재요청 --------- Co-authored-by: Wang HoEun * Fix/#209 refresh token re (#213) * fix: 로그인 오류 수정 * fix: 토큰 재요청 * fix: param으로 넘기는거로 수정 * fix: start 페이지 수정 --------- Co-authored-by: Wang HoEun * fix: 기호 삭제하기 * fix: editpage도 수정 * fix: 안 쓰는 import 수정 * fix: 리액트 쿼리로 되돌림 get method * fix: param 방법으로 바꾸기 * fix: 안쓰는 import 문 * fix: data 구조 수정 * fix: param으로 다 수정 * fix:giftee 없애기 * fix: type부분 분류 + refresh 토큰 * style: home으로 이동 삭제 * fix: token data 구조 수정 * fix: 리프레쉬 토큰 api 수정 * fix: 리프레쉬 토큰 body 공유 * fix: refresh token post 수정 * [마이페이지] 헤더 구현 (#212) * feat: header 마이페이지 및 홈 구현 * fix : 롤백 * fix: api access token 없이 (#226) * fix: mypage view 수정 * [온보딩] 자잘한 qa들 (미완) (#229) * [공통컴포넌트] 모달창 구현 (#80) * feat: 모달창 구현 * feat: modal 버튼 함수 프롭 전달 * style: 스타일 속성 순서 * style: 단위 변경 * [토너먼트] 토너먼트 플로우 화면 퍼블리싱 (#72) * feat: 토너먼트 공통 버튼 도입 * docs: 토너먼트 컨테이너 폴더변경 * style: 토너먼트 패딩 값 변경 * feat: 공통 컴포넌트 시작하기 버튼 구현 * feat: 시작하기 버튼 후 라운드 시작 로직 구현! * chore: 네이밍 오타 수정 * style: 스타일 코드 분리 * feat: btn_next - border 지우기 * style: theme 토너먼트 폰트 추가 * docs: 폴더 이동 * style: 토너먼트 카드 스타일 분리 * style: 토너먼트 카드 스타일 분리 * style: 스타일 속성 순서 * feat: 토너먼트 footer 컴포넌트 구현 * feat: 토너먼트 title 컴포넌트 구현 * style: 폴더 구조 이동 * chore: 아이콘 이미지 추가 * chore: 아이콘 추가 * feat: 토너먼트 불필요한 div 삭제 * feat: 더보기 아이콘 추가 링크 * style: 이전 버튼 패딩 값 조절 * feat: 새로고침 아이콘 추가 * feat: header 임시 높이 조정 * fix: 빌드 오류 아이콘 수정 * style: 가운데 정렬 * style: rem 폰트 변경 * [기능 구현] kakao login (#85) * chore: 이슈 템플릿 추가 * chore: 이슈 템플릿 수정 * feat: Login 페이지 생성 * style: style코드 mixin으로 변경 * [초기세팅] 초기세팅 main으로 합치기 (#49) * chore: 이슈 템플릿 추가 * add: 프로젝트 생성 * init: 의존성 모듈 설치 * docs: 풀리퀘 템플릿 추가 * feat: PR 시 임시배포 구현 * feat: 자동 배포 workflow 구현 * chore: 버전 수정 * chore: 오타 수정 * chore: 설명 주석 추가 * [초기세팅] eslint 설정 및 prettier 설정 (#14) * chore: eslint 설정 및 prettier 설정 * fix: node true 추가 * fix: 중복 singleQuote 설정 제거 --------- Co-authored-by: Wang HoEun * [초기세팅] GlobalStyle 작성 (#7) * add: styled-component 설치 * feat: meta 태그 수정 * feat: setScreenSize 유틸 함수 작성 * feat: GlobalStyle 작성 * feat: App.tsx 내 GlobalStyle과 GlobalEvent 구현 * chore: styled-reset 라이브러리 설치 * fix: reset 라이브러리 설치로 GlobalStyle 수정 * feat: vw관련 설정 추가 * [초기세팅] Formatting 파일 구조 및 라우팅 설정 (#8) * feat: 라우팅 대쉬보드 생성 * feat: 라우터 설정 * feat: app 파일 routerProvider 적용 * feat: 폴더구조 세팅 * chore: 라우터 패키지 추가 * chore: 라우터 패키지 추가 * [초기세팅] husky 설정 및 lint staged 설정 (#15) * chore: husky 설정 및 lint staged 설정 * feat: husky commitlint 설정 * merge change --------- Co-authored-by: Wang HoEun * [초기세팅] recoil 설치 및 파일 설정 (#17) * feat: recoil 설치 및 파일 설정 * feat: RecoilRoot 설정 * chore: react-router-dom 선언 인식 문제 위해 재 설치 --------- Co-authored-by: Wang HoEun * feat: react-query 설치 및 세팅 및 key 파일 생성 (#18) Co-authored-by: Wang HoEun * [초기세팅] svgr 설치 / open-graph (#16) * chore: svgr 설치 * chore: open graph 라이브러리 설치 * chore: vite svgr 세팅 및 custom 파일 생성 * style: yarn svgr 치니까 tsx 파일로 변동 완료. --------- Co-authored-by: Wang HoEun * [초기세팅] Github Actions 수정(Vercel 배포 연결, preview 수정) (#25) * [초기세팅] 자주 사용하는 속성들 mixin 설정 (#23) * feat: mixin 설정 공통적으로 많이 쓰일 수 있는 flexBox,inlineFlexBox,flexCenter 를 먼저 설정하였음. 추후에 디자인이 나오면 더 추가시킬 예정입니다(ex.애니메이션) * feat: mixin 불러오기 위한 theme 설정 * feat: Styles 컴포넌트 생성 * feat: App 컴포넌트를 Styles 감싸기 * docs: 리드미 작성 (#24) * 초기세팅/theme 설정 (#37) * feat: theme color 설정 * feat: theme font 설정 * style: colors & fonts에 뎁스 추가 * chore: SUIT font 파일 추가 * feat: font-face 추가 & import 문제 * fix: import 이슈 해결을 위한 중괄호 제거 * fix: 필요하지 않은 파일 및 코드 제거 * [초기세팅] 화면 사이즈 layout 분리 (#28) * feat: 대쉬보드 레이아웃 변경 및 사이즈 스타일 적용 * feat: app 리사이즈 useEffect 제거 * feat: useEffect 제거 후 스타일 고정 * feat: 레이아웃 커스텀 훅 구현 * feat: 라우터 폴더 구조 변경 * feat: layout 폴더 구조 변경 * feat: theme fonts, colors 구조 수정 (#43) * [초기세팅] 모바일 리사이징 레이아웃 적용 안되는 이슈 해결 (#45) * feat: 대쉬보드 레이아웃 변경 및 사이즈 스타일 적용 * feat: app 리사이즈 useEffect 제거 * feat: useEffect 제거 후 스타일 고정 * feat: 레이아웃 커스텀 훅 구현 * feat: 라우터 폴더 구조 변경 * feat: layout 폴더 구조 변경 * fix: 모바일 위드값 적용안되는 이슈 해결 * fix: 함수 호출 변경 * fix: global width값 제거 * docs: setscreensize 파일 삭제 * [초기세팅] PR 미리보기 액션 수정 (#39) * feat: 각 PR에 접근할 수 있도록 설정 추가 * feat: 불필요한 설정 제거 * chore: 빌드 에러 해결 * [초기세팅] svgr GUI 아이콘 등록 (#48) * feat: 대쉬보드 레이아웃 변경 및 사이즈 스타일 적용 * feat: app 리사이즈 useEffect 제거 * feat: useEffect 제거 후 스타일 고정 * feat: 레이아웃 커스텀 훅 구현 * feat: 라우터 폴더 구조 변경 * feat: layout 폴더 구조 변경 * fix: 모바일 위드값 적용안되는 이슈 해결 * fix: 함수 호출 변경 * fix: global width값 제거 * docs: setscreensize 파일 삭제 * docs: 아이콘 및 로고 추가 + svgr 변환 * chore: 빌드 에러 처리 --------- Co-authored-by: Wang Hoeun <38005874+hoeun0723@users.noreply.github.com> Co-authored-by: Wang HoEun Co-authored-by: 장정안 <126966681+ExceptAnyone@users.noreply.github.com> Co-authored-by: LEE KAYOUNG / KATIE <104339899+imeureka@users.noreply.github.com> * feat: query key 세팅 및 instance 생성 (type 수정 필요) * chore: axios 설치 * refactor: queryKeys 파일 삭제 * feat: react-query user login api 코드 작성 * feat: Login 로직 코드와 서버 연결 코드 작성 * fix: baseurl import 수정 및 code queryString 으로 구현 * style: 안 쓰는 코드 정리 및 로직 코드 정리 * fix: 안 쓰는 import문 삭제 * fix: 안쓰는 import 문 삭제 * fix: strict mode 지우기 * fix: method 변경 및 console.log 작성 * fix: method get으로 수정 * fix: router link 재설정 * fix: 라우터 주소 재 설정 * fix: strict mode 삭제 * feat: console 추가 * fix: useEffect 위치 수정 * fix: router 구조 * fix: router browserRouter로 수정 * fix: json vercel 파일 추가 * fix: Router 컴포넌트 수정 * fix: path 수정 * fix: 최신 router로 다시 변경 * fix: 데이터 타입 수정 * fix: local 저장 코드 잠시 주석 * fix: data Type 다시 수정 * fix: 안 쓰는 import 삭제 * feat: localstorage에 token 저장 * feat: localstorage 에 token 저장 * fix: console.log로 찍어보기 * fix: data type 구현 * fix: localstorage에 토큰 저장 * fix: 안쓰는 css 파일 삭제 --------- Co-authored-by: Jimin Yu <92876819+urjimyu@users.noreply.github.com> Co-authored-by: Wang HoEun Co-authored-by: 장정안 <126966681+ExceptAnyone@users.noreply.github.com> Co-authored-by: LEE KAYOUNG / KATIE <104339899+imeureka@users.noreply.github.com> * [토너먼트] 토너먼트 결과 화면 퍼블리싱 (#82) * feat: 토너먼트 컴포넌트 폴더 구조 * feat: 토너먼트 결과 화면 카드 컴포넌트 구현 * feat: 토너먼트 타이틀 컴포넌트 * feat: 토너먼트 결과 레이아웃 컴포넌트 * feat: 토너먼트 결과 footer 컴포넌트 * feat: 토너먼트 유저 현황 미니타이머 컴포넌트 구현 * feat: 토너먼트 footer 영역 구현 * feat: 공통 컴포넌트 수정 * style: 공통 버튼 수정 및 footer 색 변경 * docs: 폴더명 대문자 변경 * fix: 토너먼트 컨테이너 충동 해결 * fix: 빌드 오류 해결 * [토너먼트] 최종 순위 확인 뷰 퍼블리싱 (#86) * feat: 토너먼트 컴포넌트 폴더 구조 * feat: 토너먼트 결과 화면 카드 컴포넌트 구현 * feat: 토너먼트 타이틀 컴포넌트 * feat: 토너먼트 결과 레이아웃 컴포넌트 * feat: 토너먼트 결과 footer 컴포넌트 * feat: 토너먼트 유저 현황 미니타이머 컴포넌트 구현 * feat: 토너먼트 footer 영역 구현 * feat: 공통 컴포넌트 수정 * style: 공통 버튼 수정 및 footer 색 변경 * chore: 메달아이콘 추가 * feat: 토너먼트 랭킹 화면 타이틀 작업 * feat: 토너먼트 랭킹 순위 아이템 컴포넌트 구현 * feat: 토너먼트 랭킹 페이지 구현 * feat: price 공통 컴포넌트 구현 * style: 공통 priceTag 적용 * fix: 이미지 아이콘 오류 해결 * fix: 안쓰는 아이콘 제거 * fix: 폴더 구조 변경 import * [토너먼트] 대소문자 변경 파일 변경 (#95) * chore: 이슈 템플릿 추가 * chore: 이슈 템플릿 수정 * [초기세팅] 초기세팅 main으로 합치기 (#49) * chore: 이슈 템플릿 추가 * add: 프로젝트 생성 * init: 의존성 모듈 설치 * docs: 풀리퀘 템플릿 추가 * feat: PR 시 임시배포 구현 * feat: 자동 배포 workflow 구현 * chore: 버전 수정 * chore: 오타 수정 * chore: 설명 주석 추가 * [초기세팅] eslint 설정 및 prettier 설정 (#14) * chore: eslint 설정 및 prettier 설정 * fix: node true 추가 * fix: 중복 singleQuote 설정 제거 --------- Co-authored-by: Wang HoEun * [초기세팅] GlobalStyle 작성 (#7) * add: styled-component 설치 * feat: meta 태그 수정 * feat: setScreenSize 유틸 함수 작성 * feat: GlobalStyle 작성 * feat: App.tsx 내 GlobalStyle과 GlobalEvent 구현 * chore: styled-reset 라이브러리 설치 * fix: reset 라이브러리 설치로 GlobalStyle 수정 * feat: vw관련 설정 추가 * [초기세팅] Formatting 파일 구조 및 라우팅 설정 (#8) * feat: 라우팅 대쉬보드 생성 * feat: 라우터 설정 * feat: app 파일 routerProvider 적용 * feat: 폴더구조 세팅 * chore: 라우터 패키지 추가 * chore: 라우터 패키지 추가 * [초기세팅] husky 설정 및 lint staged 설정 (#15) * chore: husky 설정 및 lint staged 설정 * feat: husky commitlint 설정 * merge change --------- Co-authored-by: Wang HoEun * [초기세팅] recoil 설치 및 파일 설정 (#17) * feat: recoil 설치 및 파일 설정 * feat: RecoilRoot 설정 * chore: react-router-dom 선언 인식 문제 위해 재 설치 --------- Co-authored-by: Wang HoEun * feat: react-query 설치 및 세팅 및 key 파일 생성 (#18) Co-authored-by: Wang HoEun * [초기세팅] svgr 설치 / open-graph (#16) * chore: svgr 설치 * chore: open graph 라이브러리 설치 * chore: vite svgr 세팅 및 custom 파일 생성 * style: yarn svgr 치니까 tsx 파일로 변동 완료. --------- Co-authored-by: Wang HoEun * [초기세팅] Github Actions 수정(Vercel 배포 연결, preview 수정) (#25) * [초기세팅] 자주 사용하는 속성들 mixin 설정 (#23) * feat: mixin 설정 공통적으로 많이 쓰일 수 있는 flexBox,inlineFlexBox,flexCenter 를 먼저 설정하였음. 추후에 디자인이 나오면 더 추가시킬 예정입니다(ex.애니메이션) * feat: mixin 불러오기 위한 theme 설정 * feat: Styles 컴포넌트 생성 * feat: App 컴포넌트를 Styles 감싸기 * docs: 리드미 작성 (#24) * 초기세팅/theme 설정 (#37) * feat: theme color 설정 * feat: theme font 설정 * style: colors & fonts에 뎁스 추가 * chore: SUIT font 파일 추가 * feat: font-face 추가 & import 문제 * fix: import 이슈 해결을 위한 중괄호 제거 * fix: 필요하지 않은 파일 및 코드 제거 * [초기세팅] 화면 사이즈 layout 분리 (#28) * feat: 대쉬보드 레이아웃 변경 및 사이즈 스타일 적용 * feat: app 리사이즈 useEffect 제거 * feat: useEffect 제거 후 스타일 고정 * feat: 레이아웃 커스텀 훅 구현 * feat: 라우터 폴더 구조 변경 * feat: layout 폴더 구조 변경 * feat: theme fonts, colors 구조 수정 (#43) * [초기세팅] 모바일 리사이징 레이아웃 적용 안되는 이슈 해결 (#45) * feat: 대쉬보드 레이아웃 변경 및 사이즈 스타일 적용 * feat: app 리사이즈 useEffect 제거 * feat: useEffect 제거 후 스타일 고정 * feat: 레이아웃 커스텀 훅 구현 * feat: 라우터 폴더 구조 변경 * feat: layout 폴더 구조 변경 * fix: 모바일 위드값 적용안되는 이슈 해결 * fix: 함수 호출 변경 * fix: global width값 제거 * docs: setscreensize 파일 삭제 * [초기세팅] PR 미리보기 액션 수정 (#39) * feat: 각 PR에 접근할 수 있도록 설정 추가 * feat: 불필요한 설정 제거 * chore: 빌드 에러 해결 * [초기세팅] svgr GUI 아이콘 등록 (#48) * feat: 대쉬보드 레이아웃 변경 및 사이즈 스타일 적용 * feat: app 리사이즈 useEffect 제거 * feat: useEffect 제거 후 스타일 고정 * feat: 레이아웃 커스텀 훅 구현 * feat: 라우터 폴더 구조 변경 * feat: layout 폴더 구조 변경 * fix: 모바일 위드값 적용안되는 이슈 해결 * fix: 함수 호출 변경 * fix: global width값 제거 * docs: setscreensize 파일 삭제 * docs: 아이콘 및 로고 추가 + svgr 변환 * chore: 빌드 에러 처리 --------- Co-authored-by: Wang Hoeun <38005874+hoeun0723@users.noreply.github.com> Co-authored-by: Wang HoEun Co-authored-by: 장정안 <126966681+ExceptAnyone@users.noreply.github.com> Co-authored-by: LEE KAYOUNG / KATIE <104339899+imeureka@users.noreply.github.com> * fix: strict mode 지우기 * fix: method get으로 수정 * fix: router link 재설정 * fix: 라우터 주소 재 설정 * feat: console 추가 * fix: useEffect 위치 수정 * fix: router 구조 * fix: router browserRouter로 수정 * fix: json vercel 파일 추가 * fix: Router 컴포넌트 수정 * fix: path 수정 * fix: 최신 router로 다시 변경 * fix: 데이터 타입 수정 * fix: local 저장 코드 잠시 주석 * fix: data Type 다시 수정 * fix: 안 쓰는 import 삭제 * fix: 토너먼트 대소문자 변경 * fix: 대소문자 파일 변경 Tournament * fix: onBoarding 대소문자 변경 * fix: Onboarding -> OnBoarding 변경 * fix: onboardingSteps 로 변경 --------- Co-authored-by: Jimin Yu <92876819+urjimyu@users.noreply.github.com> Co-authored-by: Wang Hoeun <38005874+hoeun0723@users.noreply.github.com> Co-authored-by: Wang HoEun Co-authored-by: 장정안 <126966681+ExceptAnyone@users.noreply.github.com> * [선물 등록 페이지] 내가 등록한 선물 페이지 UI 구현 (#65) * feat: 임시로 선물 등록 테스트 페이지 추가 * feat: 선물 링크 등록 테스트 임시로 기능 구현 * feat: 내가 추가한 선물 페이지 UI 구현중 * feat: 라우터에 페이지 임시 추가 * style: 이미지 어셋 추가 * feat: 내가 추가한 선물 페이지 UI 구현 * feat: 선물 등록하기 뷰 구현 * feat: 내가 등록한 선물 뷰 UI 구현 * chore: 화살표 함수로 수정 * feat: 내가 등록한 선물 컴포넌트 분리 * chore: 빌드 에러 해결 * feat: 빌드 에러 해결 * feat: rem 단위로 수정 * [최신화] 기존 브랜치에서 새로운 브랜치로 코드 복붙 (#97) * fix: 디벨롭에서 새로운 브랜치를 파서 step05까지의 코드 복붙 * fix: step06까지 복붙 완료 * [선물홈] 선물홈 UI 구현 (#91) * feat: 선물 홈 라우터 연결 * feat: GiftHome 상단 컴포넌트 구현중 * feat: theme 수정 반영 * feat: 선물홈 상단 애니메이션 제외 UI 구현 * chore: countdown flip animation 라이브러리 설치 * feat: 선물홈 하단 '친구가 등록한 선물' UI 구현 * style: 선물홈 친구, 2030 공통 스타일 생성 * style: 전체 패딩 0으로 설정 * style: 선물홈 2030, 친구 부분 공통 스타일 구현 * feat: 선물홈 2030, 친구 UI 구현 * feat: haeder, footer 제거 * style: 타이머 폰트 추가 * style: svg 파일 추가 * feat: 카운트다운 카드 컴포넌트 분리 * fix: 빌드 에러 해결 * feat: 타이머 컴포넌트 생성 * feat: 아이콘 추가 * feat: 공통 스타일 분리 * feat: 컴포넌트 분리 * feat: 더미 데이터 추가 * fix: 빌드 에러 해결 * [선물 등록하기] 링크 등록 플로우 내가 등록한 선물 제외 UI 구현 완료 (#93) * feat: 높이 설정 추가 * feat: 공통 버튼 테두리 없애기 * feat: 다음 버튼 따로 구현 * feat: 입력창 뷰 구현 * feat: 링크 입력 화면 UI 구현 * feat: 다음 버튼 활성화 수정 * feat: 링크 있을 때 선물 등록 UI 구현 * feat: 링크 있을 때 선물 등록 UI 구현 * feat: 링크 없을 때 UI 구현 * feat: header, footer 제거 * feat: 직접 입력 화면 UI 구현 * feat: 링크 없이 입력 버튼 연결 * feat: 첫번째 링크 입력 화면 UI 수정 * feat: 폴더구조 정리 및 공통 컴포넌트 분리 * feat: 상단 선물 바 위치 조건 추가 * feat: 썸네일 컴포넌트 분리 * feat: 가격은 삭제 아이콘 안 뜨도록 수정 * feat: input padding 추가 * feat: 페이지 레이아웃 분리 * fix: 빌드 에러 해결 * [선물 홈, 선물 등록] 전반적인 뷰 수정 및 플로우 연결 (#100) * style: 불필요한 파일 제거 * feat: 선물홈 헤더 추가 * style: 오타 수정 및 커서 포인터 설정 * feat: 플로팅 버튼 구현 * feat: 헤더 및 버튼 구현 * feat: 페이지 연결 * style: 아이콘 추가 * style: 북마크 이미지 추가 * feat: 플로우 연결 * feat: 모달 추가 * chore: 빌드 에러 해결 위해서 불필요한 코드 추가 * feat: 라우터 중복 수정 * fix: 빌드 에러 해결중 * fix: 빌드 에러 해결 * fix: 빌드 에러 해결 * [마이페이지] 뷰 작업 + Card Component 제작 (#92) * chore: 이슈 템플릿 추가 * chore: 이슈 템플릿 수정 * [초기세팅] 초기세팅 main으로 합치기 (#49) * chore: 이슈 템플릿 추가 * add: 프로젝트 생성 * init: 의존성 모듈 설치 * docs: 풀리퀘 템플릿 추가 * feat: PR 시 임시배포 구현 * feat: 자동 배포 workflow 구현 * chore: 버전 수정 * chore: 오타 수정 * chore: 설명 주석 추가 * [초기세팅] eslint 설정 및 prettier 설정 (#14) * chore: eslint 설정 및 prettier 설정 * fix: node true 추가 * fix: 중복 singleQuote 설정 제거 --------- Co-authored-by: Wang HoEun * [초기세팅] GlobalStyle 작성 (#7) * add: styled-component 설치 * feat: meta 태그 수정 * feat: setScreenSize 유틸 함수 작성 * feat: GlobalStyle 작성 * feat: App.tsx 내 GlobalStyle과 GlobalEvent 구현 * chore: styled-reset 라이브러리 설치 * fix: reset 라이브러리 설치로 GlobalStyle 수정 * feat: vw관련 설정 추가 * [초기세팅] Formatting 파일 구조 및 라우팅 설정 (#8) * feat: 라우팅 대쉬보드 생성 * feat: 라우터 설정 * feat: app 파일 routerProvider 적용 * feat: 폴더구조 세팅 * chore: 라우터 패키지 추가 * chore: 라우터 패키지 추가 * [초기세팅] husky 설정 및 lint staged 설정 (#15) * chore: husky 설정 및 lint staged 설정 * feat: husky commitlint 설정 * merge change --------- Co-authored-by: Wang HoEun * [초기세팅] recoil 설치 및 파일 설정 (#17) * feat: recoil 설치 및 파일 설정 * feat: RecoilRoot 설정 * chore: react-router-dom 선언 인식 문제 위해 재 설치 --------- Co-authored-by: Wang HoEun * feat: react-query 설치 및 세팅 및 key 파일 생성 (#18) Co-authored-by: Wang HoEun * [초기세팅] svgr 설치 / open-graph (#16) * chore: svgr 설치 * chore: open graph 라이브러리 설치 * chore: vite svgr 세팅 및 custom 파일 생성 * style: yarn svgr 치니까 tsx 파일로 변동 완료. --------- Co-authored-by: Wang HoEun * [초기세팅] Github Actions 수정(Vercel 배포 연결, preview 수정) (#25) * [초기세팅] 자주 사용하는 속성들 mixin 설정 (#23) * feat: mixin 설정 공통적으로 많이 쓰일 수 있는 flexBox,inlineFlexBox,flexCenter 를 먼저 설정하였음. 추후에 디자인이 나오면 더 추가시킬 예정입니다(ex.애니메이션) * feat: mixin 불러오기 위한 theme 설정 * feat: Styles 컴포넌트 생성 * feat: App 컴포넌트를 Styles 감싸기 * docs: 리드미 작성 (#24) * 초기세팅/theme 설정 (#37) * feat: theme color 설정 * feat: theme font 설정 * style: colors & fonts에 뎁스 추가 * chore: SUIT font 파일 추가 * feat: font-face 추가 & import 문제 * fix: import 이슈 해결을 위한 중괄호 제거 * fix: 필요하지 않은 파일 및 코드 제거 * [초기세팅] 화면 사이즈 layout 분리 (#28) * feat: 대쉬보드 레이아웃 변경 및 사이즈 스타일 적용 * feat: app 리사이즈 useEffect 제거 * feat: useEffect 제거 후 스타일 고정 * feat: 레이아웃 커스텀 훅 구현 * feat: 라우터 폴더 구조 변경 * feat: layout 폴더 구조 변경 * feat: theme fonts, colors 구조 수정 (#43) * [초기세팅] 모바일 리사이징 레이아웃 적용 안되는 이슈 해결 (#45) * feat: 대쉬보드 레이아웃 변경 및 사이즈 스타일 적용 * feat: app 리사이즈 useEffect 제거 * feat: useEffect 제거 후 스타일 고정 * feat: 레이아웃 커스텀 훅 구현 * feat: 라우터 폴더 구조 변경 * feat: layout 폴더 구조 변경 * fix: 모바일 위드값 적용안되는 이슈 해결 * fix: 함수 호출 변경 * fix: global width값 제거 * docs: setscreensize 파일 삭제 * [초기세팅] PR 미리보기 액션 수정 (#39) * feat: 각 PR에 접근할 수 있도록 설정 추가 * feat: 불필요한 설정 제거 * chore: 빌드 에러 해결 * [초기세팅] svgr GUI 아이콘 등록 (#48) * feat: 대쉬보드 레이아웃 변경 및 사이즈 스타일 적용 * feat: app 리사이즈 useEffect 제거 * feat: useEffect 제거 후 스타일 고정 * feat: 레이아웃 커스텀 훅 구현 * feat: 라우터 폴더 구조 변경 * feat: layout 폴더 구조 변경 * fix: 모바일 위드값 적용안되는 이슈 해결 * fix: 함수 호출 변경 * fix: global width값 제거 * docs: setscreensize 파일 삭제 * docs: 아이콘 및 로고 추가 + svgr 변환 * chore: 빌드 에러 처리 --------- Co-authored-by: Wang Hoeun <38005874+hoeun0723@users.noreply.github.com> Co-authored-by: Wang HoEun Co-authored-by: 장정안 <126966681+ExceptAnyone@users.noreply.github.com> Co-authored-by: LEE KAYOUNG / KATIE <104339899+imeureka@users.noreply.github.com> * fix: strict mode 지우기 * fix: method get으로 수정 * fix: router link 재설정 * fix: 라우터 주소 재 설정 * feat: console 추가 * fix: useEffect 위치 수정 * fix: router 구조 * fix: router browserRouter로 수정 * fix: json vercel 파일 추가 * fix: Router 컴포넌트 수정 * fix: path 수정 * fix: 최신 router로 다시 변경 * fix: 데이터 타입 수정 * fix: local 저장 코드 잠시 주석 * fix: data Type 다시 수정 * fix: 안 쓰는 import 삭제 * feat: 마이페이지 생성 후 배경 이미지 불러오기 * feat: 마이페이지 유저 div 구현 * feat: 선물 방 뷰 없을때 페이지 구현 완료 * feat: 진행 중이지 않은 선물 방 div 태그 생성 * feat: header 라우터 기능 추가 * feat: 컴포넌트 어느정도 구현 완료 하지만 edit 부분 수정 필요 * fix: 버튼 사이즈 merge 후 custom 으로 넘기기 * fix: settings 위치 수정 * refactor: setting icon 위치 수정 * fix: tag 수정 * feat: 색상 변동 된거 적용 * style: type3 수정 및 margin 주기 * feat: 종료된 선물방 컴포넌트 구현 및 수정 페이지 구현 * feat: detail page router 적용 * fix: 안쓰는 import 문 삭제 --------- Co-authored-by: Jimin Yu <92876819+urjimyu@users.noreply.github.com> Co-authored-by: Wang HoEun Co-authored-by: 장정안 <126966681+ExceptAnyone@users.noreply.github.com> Co-authored-by: LEE KAYOUNG / KATIE <104339899+imeureka@users.noreply.github.com> * [선물 등록] 버튼 조건에 맞게 활성화, 광고 삭제 기능 구현 (#106) * feat: 버튼 비활성화 속성 추가 * feat: input 조건에 따른 버튼 활성화 수정 * fix: 스타일 props $ 추가 * feat: 광고 삭제 기능 구현 * feat: 아이콘 교체 * fix: 빌드 에러 해결 * [마이페이지] react-query 데이터 패칭 방식 예시 코드 작성 (#107) * style: Wrapper 컨벤션 맞추기 * feat: mypage 데이터 패칭 react query hooks 작성,아직 테스트 전 * feat: 임시 token 저장 과정 코드 작성 * fix: react-query 받아오는 코드 수정 , 추후 mypage 받아오는 부분 undefined 해결 필요 * feat: react-query api mypage에서 불러오기 * refactor: 폴더명 변경 * refactor: 안쓰는 import 문 삭제 및 navigate 코드 주석 * fix: 안쓰는 import 문 정리 --------- Co-authored-by: Wang HoEun * [토너먼트] 라운딩 로직 및 부전승 처리 (#111) * style: 인트로 시작 버튼 변경 * chore: 이미지 추가 * feat: 목업데이터 설정 * feat: 아이템 카드 적용 * feat: 토너먼트 랜덤 아이템 함수 * feat: 라우터 안쓰는 페이지 제거 * faet: 레이아웃 헤더 삭제 * feat: 데이터 개수 반영 * feat: 1라운드 로직 구현 * feat: 랜덤 세트 형성 로직 구현 + 훅 분리 * feat: 목업데이터 형성 * feat: 다음 버튼 구현 * feat: 불필요한 주석 제거 * feat: 선택되면 일단 선택 체크 성공 * feat: 라우터 변경 * feat: 토너먼트 인트로 컴포넌트 프롭 수정 * feat: 토너먼트 라운딩 로직 구현 * feat: 토너먼트 푸터, 타이틀 프롭 변경 * feat: 결과 제출 프롭 설정 * chore: 배경 이미지 추가 * chore: 배경 추가 * feat: 토너먼트 선택 아이템 저장 후 프롭 전달 * feat: 토너먼트 결과 화면 프롭 전달 받기 * feat: 헤더 삭제 * chore: 배경 이미지 설정 * feat: 토너먼트 부전승 처리 * chore: 토너먼트 플로우 컨테이너 주석처리 * chore: 빌드 오류 해결 * fix: 프롭 전달 삭제 빌드 오류 해결 * chore: 로직 의심 주석 추가 * [선물홈, 선물등록, 세부페이지] api 타입 및 hooks 파일 생성 (#114) * feat: 선물홈 메인 get 연결 * feat: api 관련 파일 생성 * feat: api types 파일 생성 * feat: GET hooks 생성 * feat: 선물홈 api 연결 * feat: api 관련 커스텀 훅 작성 및 타입 작성 * fix: 오타 수정 * chore: 불필요한 주석 삭제 및 로그 메시지 수정 * fix: url 수정 * [온보딩] 온보딩 POST & 카카오 공유하기 (#110) * feat: 최상위 컴포넌트에서 상태 관리 작성 * chore: app.css index.css 삭제 * feat: step01 유저 입력 값 저장 * feat: step03 날짜 값 api명세서 형식에 맞게 상태에 저장 * feat: step02 이미지 url 형식에 맞게 저장 * fix: value가 있을 때 onChange가 없었던 이슈 해결 * chore: 쓰지 않는 router 파일 제거 * style: step05 mixin으로 변경 * style: input 스타일 코드 추가 * chore: TODO 주석 추가 * feat: step05 dateType에 따른 출력 변경 * feat: step04 -05 props 내려 받기 * feat: step04 props 전달 * feat: 날짜 & 시간 선택 시 api명세서 형식에 맞게 출력 및 저장 * feat: 라디오 버튼 온클릭 이벤트 추가 * chore: 쓰지 않는 코드 제거 * feat: step04에서 선택한 날짜와 시간을 step05로 가지고 오기 위한 props 전달 * feat: date-fns 라이브러리 사용하여 선택한 시간 더하기 * feat: 전반적으로 버튼 스타일 props에 $추가 * style: 웹 warning 삭제를 위한 $추가 * feat: step05 시간 업데이트 포매팅 후 저장 * feat: step06 룸 입장 콘솔로그 추가 * feat: 상위 컴포넌트인 온보딩페이지 에서 전체 상태 값 확인 * feat: index.html에 카카오 공유 관련 script 태그 추가 * feat: Window에 Kakao 타입 정의 * feat: 모든 스텝에서 저장한 값들 step6로 props 전달 * feat: 카카오 공유하기 기능 추가 * feat: 헤더 토큰 확인을 위한 client.ts export 추가 * feat: 온보딩 타입 지정 * feat: step05 useMutation post 구현 * feat: 라디오 버튼 props 추가 * feat: 온보딩 post 커스텀 훅으로 분리 * chore: 쓰지 않는 코드 제거 * chore: 빌드 에러 수정 * feat: 이미지 미리보기 구현 시 files[0]의 null값 대비 if문 구현 * chore: 빌드 에러 해결 * chore: 필요없는 주석 제거 * feat: 헤더에 토큰 이슈를 위한 useEffect 주석처리 * feat: timerOpen 삼항연산자로 변경 * [토너먼트] 토너먼트 선물 리스트 조회 API (#117) * feat: useTournament 훅 로직 수정 * feat: giftData 타입 설정 * feat: 토너먼트 선물 리스트 조회 API * feat: 토너먼트 데이터 패칭 * fix: 빌드 오류 TournamentFlowContainer 프롭 추가 * feat: post tournament 10개 로직 * feat: api post 인스턴스 생성 및 타입 설정 * feat: 부전승 결과 처리랑 짝수 결과 처리 나눔 * feat: 타입 변경 * fix: 안쓰는 state 제거 * [선물홈, 선물세부, 선물등록] gifthome detail api (#124) * feat: 선물홈 api 연결 후 값 반영 * feat: 서버통신 훅 수정 * feat: 데이터 타입 수정 * feat: 세부페이지 연결 * feat: 선물 홈 연결 * feat: 내가 등록한 선물 api 연결 * feat: 내가 등록한 선물 api 연결 * feat: 선물 등록 post api 연결 * feat: props 수정 * chore: 에러 해결 * feat: 등록 상품 개수에 따라 다르게 화면 이동 * feat: 빌드 에러 해결중 * feat: 빌드 에러 해결 * feat: 빌드 에러 해결 * feat: 빌드 에러 해결 * [마이페이지] api 연결 후 기능 구현 (#125) * refactor: 호출 코드 변경 * style: 스타일 코드 간편화 * feat: data 존재 여부에 따른 view 전환 * feat: cardRoom에 data 전달 하지만 오류 남. 해결 필요 * feat: 선물방 존재여부에 따른 0번째 1번째 카드 호출 * feat: detail page 데이터 호출 성공 * feat: room member api 연결 코드 작성 * feat: editroom api 기능 구현 완료 삭제 기능 구현 필요 * style: detail view wrap roomId 넘어주기와 폴더명 변경 * feat: done detail room roomwrapper wrap 추가 * fix: delte mutation 코드 수정 * style: delete 코드 정리 오류 나는 거 해결 필요 * feat: 안쓰는 import 문 삭제 + login 토큰 부분 주석 처리 * fix: 안 쓰는 코드 주석 처리 --------- Co-authored-by: Wang HoEun * Refactor/#88 tournament layout (#126) * chore: icon 추가 * feat: 시작하기 버튼 가운데 정렬 * style: text 글자 가운데 정렬 * [로딩 과 에러] 로딩 페이지와 에러 페이지 (#127) * style: 임시 코드 설정 * feat: Loading 페이지 생성 * feat: lottie 설치 후 적용 * refactor: suspensequery로 수정 * feat: errorboundary 설정 * fix: 안 쓰는 import 문 삭제 * fix: 기존 코드 대로 되돌림. token 부분 --------- Co-authored-by: Wang HoEun * [토너먼트] 유저, 시간 그리고 부전승 로직 수정 (#128) * feat: 토너먼트 참여유저 및 종료 시간 받아오기 * feat: 토너먼트 참여유저 및 종료 시간 user 컴포넌트에 전달 * feat: get API 인스턴스 생성 * feat: get member data 받아오기 데이터 수정 * feat: modal 오픈 * style : 모달창 닫고 결과 화면 바꾸기 * feat: 부전승 처리 로직 * feat: 토너먼트 랜덤 로직 추가 * fix: useSuspenseQuery로 변경 빌드 에러 해결 * fix: useQuery 안쓰는 거 제거 * [토너먼트] 토너먼트 최종 결과 조회 API (#130) * style: 최종 순위 확인 화면 스타일 수정 및 이미지 추가 * feat: 토너먼트 랭킹 get API 쿼리 훅 생성 * feat: 토너먼트 useGetRanking api 호출 * feat: 토너먼트 카드 프롭 전달 * feat: 기프트 랭킹 아이템 타입 설정 * [시작페이지] start page 애니메이션 컴포넌트 (#129) * feat: main 이미지 몇개 넣기 * feat: 사진 불러오기 * feat: 애니메이션 component 화 후 적용 * style: login 부분 주석 수정 * fix: 안 쓰는 import 문 삭제 --------- Co-authored-by: Wang HoEun * [선물홈, 선물등록] 선물 링크 유효성 검사 api 연결, 타이머 기능 구현 마무리 (#131) * feat: 오픈그래프 post 구현중 * feat: 오픈그래프 post 연결 * feat: 친구들이 등록한 선물 연결 * feat: 오픈그래프 정보에 따른 플로우 구현 * feat: 카운트다운 타이머 구현 * feat: 미니타이머 연결 * feat: 미니타이머 타입 수정 * feat: 타입 수정 * feat: 미니타이머 추가 * feat: 타이머 수정 * chore: 빌드 에러 해결 * fix: 빌드 에러 해결 * [토너먼트] 랭킹 화면 API 데이터 패칭 (#140) * chore: 아이콘 추가 * feat: API GET 메달 랭킹에 따라 변경 * feat: 메달 인덱스 추가 * feat: router 설정 * feat: 링크 복사 구현 * feat: 이미지 공유하기 (url png 안됨) * [토너먼트] 다음 버튼 로직 구현 및 이미지 불러오기 (#138) * feat: 다음버튼 활성화 * feat: 다음버튼 구현 * chore: props type convert * feat: select 로직 수정 및 이미지 프롭 추가 * [시작페이지,마이페이지] header, footer (#141) * feat: start header 생성 * feat: 이전 버튼이 들어 있는 detail page 속 header 구현 * refactor: mypage header fixed * feat: footer 구현 * feat: footer link 이동 * feat: sidebar 나오게 * fix: 안쓰는 import 문 삭제 * fix: import 문 삭제 --------- Co-authored-by: Wang HoEun * [온보딩] presigned-url 로 이미지 업로드 후 모든 온보딩 정보를 모아서 POST (#121) * feat: 이슈번호 #99와 동일하게 복붙 * feat: presignedUrl post 커스텀 훅 작성 * feat: OnboardingInfo type 이름 api 명세서에 맞게 변경 * feat: etc 폴더 내에 타입들 지정 * feat: step05 에서 presigned Url post 보내는 로직 일부 구현 * feat: files null값 대비 조건문 작성 * feat: presigned url 확인 위한 콘솔 추가 * feat: step02 props 추가 * feat: 온보딩 최상위 컴포넌트에 presigned url 저장할 수 있는 state 추가 * feat: presigned Url post 작성 * feat: step02 fileName 확인 위한 콘솔 로그 추가 * feat: step05 presigned url 받기 위한 fileName 이름 확인 콘솔 추가 * feat: presignedUrl POST 훅 파라미터 수정 * feat: presignedUrl 쿼리 파라미터 제거 후 추출 * feat: type 추가 & post 주소 url 변경 * feat: presignedUrl 관련 로직 함수 분리 * feat: 온보딩 페이지 step05 props 수정 * feat: PUT 메서드 커스텀 훅 작성 * feat: step05에 모든 온보딩정보 props 전달 * feat: step05에서 다음 버튼 클릭 시 presigned url PUT 함수 호출 * feat: imageUrl에 올바르게 저장되지 않는 현상 수정 * feat: updateOnBoardingInfo 안에 imageUrl 스프레드 문법으로 추가 * chore: 빌드에러 수정 * feat: step06 렌더링 확인 useEffect * feat: Get 커스텀 훅 작성 * feat: POST 함수 내에서 invitationCode 추출 * feat: 초대 코드 저장할 상태 최상위 컴포넌트에 추가 * feat: post 커스텀 훅에 초대 코드 return 받게 수정 * feat: step05에 초대코드 저장 * feat: POST 커스텀 훅 안에 GET 호출하여 순서대로 STEP05에서 진행 * feat: presigned-url 삼항 연산자 사용 * feat: response.data 알맞은 곳에 출력 * feat: presigned Url 엠티뷰 props * feat: presignedUrl로 스타일 태그 수정 * feat: 기본 엠티 뷰 presigned Url (해결 x) * feat: 피그마 형식에 맞게 step06 날짜 출력 * feat: Step06 상위 컴포넌트로 이동 -> 라우터 분리 * feat: step06 상위 컴포넌트로 구조 이동 * feat: 온보딩 버튼 onclick 이벤트 추가 * feat: useNavigate로 props 전달 * feat: filename 존재 여부에 따라 post put 다르게 출력 * feat: step06 에서 마지막 초대코드 POST 커스텀 훅 작성 * feat: POST와 GET을 콜백으로 넘겨줬던 코드를 다시 원래대로 분리 * chore: 빌드 에러 해결 * chore: 빌드 에러 해결 * chore: 빌드에러 해결 * feat: POST 커스텀 훅 안에 invitationCode 추가 * chore:확인용 콘솔로그들 추가 * feat: POST 커스텀 훅 내에 useState 추가 * feat:Step05 내에서 초대코드 상태에 저장 * feat: GET 커스텀 훅 내에 null값일 경우 조건문 추가 * feat: Step06 GET 받아오기 구현 * feat: POST 커스텀 훅 리턴 값 수정 * feat: 입장 버튼 클릭 시 Post 커스텀 훅 구현 * feat: 커스텀 훅을 Step06에서 사용하여 POST * feat: 온보딩 버튼에 disabled 추가 * feat: 라디오 버튼 선택해야만 다음 버튼 활성화 * style: step06인 온보딩 파이널의 헤더 구현(햄버거만 있는것) * feat: 온보딩 포스트 커스텀 훅 작성 * style: 온보딩 파이널 컴포넌트에 헤더 추가 * feat: 온보딩 파이널의 최종 POST 커스텀 훅 구현 * style: 온보딩헤더 props 수정 * chore: response 추가 * chore: 콘솔로그 추가 * chore: 필요없는 코드 제거 * style: 모든 온보딩 헤더 수정 * feat: client.ts 제네릭 수정 * style: 온보딩 페이지 헤더 구현 * chore: 콘솔로그 추가 * feat: step06 날짜 출력 boolean 값 추가 * feat: 온보딩 post 커스텀 훅 타입 지정 * feat: 첫번 째 스텝만 뒤로가기 구현 * [로그아웃/리프레쉬토큰] Logout / RefreshToken (#145) * feat: logout 코드 작성 * feat: refreshToken재발급 코드 작성 완료 * feat: 로그아웃 구현 * fix: import 삭제 --------- Co-authored-by: Wang HoEun * [커스텀훅] 링크복사 함수 커스텀 훅 분리 (#142) * style: 이미지 공유 함수 버튼 삭제 및 스타일 분리 * feat: 링크 복사 커스텀 훅 분리 * [선물등록] 미니타이머 구현, presigned url (#147) * feat: presignedUrl 적용 및 POST까지 연결 * feat: 데이터 삭제 시 바로 반영 * feat: 상품 등록 완료 버튼 조건부 활성화 추가 * style: 배경 이미지 추가 * feat: 타이머 숫자 형태 수정 * style: 배경 이미지 추가 * feat: 가격 포맷팅 * chore: 데이터 타입 수정 * feat: 빌드 에러 해결중 * feat: 빌드 에러 해결중 * [선물홈, 선물등록] 선물 링크 유효성 검사 api 연결, 타이머 기능 구현 마무리 (#149) * feat: 오픈그래프 post 구현중 * feat: 오픈그래프 post 연결 * feat: 친구들이 등록한 선물 연결 * feat: 오픈그래프 정보에 따른 플로우 구현 * feat: 카운트다운 타이머 구현 * feat: 미니타이머 연결 * feat: 미니타이머 타입 수정 * feat: 타입 수정 * feat: 미니타이머 추가 * feat: 타이머 수정 * chore: 빌드 에러 해결 * fix: 빌드 에러 해결 * fix: 빌드 에러 해결 * Delete public/motions/motion_02.json motion 파일 삭제 * [시작 페이지] start page (#151) * feat: start 페이지 코드 복사붙여넣기 * feat: animation 코드 복사 붙여넣기 * fix: 안쓰는 로그인 문 주석 처리 * fix: 안쓰는import 문 삭제 --------- Co-authored-by: Wang HoEun * [커스텀훅] 카카오톡 공유하기 기능 (#155) * chore: json 파일 푸쉬 * feat: 카카오 공유하기 리액트 자체구현 * feat: 카카오 공유 API utils * feat: 토너먼트 env 파일 변경 * [시작페이지] start page final (#154) * refactor: 화면 위치 조절 * fix: footer 위치 수정 * fix: 안 쓰는 import 문 삭제 --------- Co-authored-by: Wang HoEun * [온보딩] 링크 복사 & 선물전달일과 토너먼트 시작 날짜 계산 (#156) * feat: step06 링크복사 구현 * feat: useQuery를 useSuspense로 변경 * feat: 선물 전달일 당일인지 아닌지에 따라 다르게 로직 구현(미완) * style: 라디오 버튼 props 추가 * style: 공통 Title customStyle제거 * chore: 빌드 에러 해결 * [선물 등록, 선물 홈] presignedUrl, 가격 포맷팅, 링크 가져오기, 미니타이머 (#157) * feat: presignedUrl Post, GET 에러 해결 * feat: 선물 등록 POST 에러 해결중 * feat: 가격 포맷팅 * feat: 선물 등록 POST 에러 해결중 * feat: 빌드 에러 해결 * [마이페이지] roomId query string으로 넘기기 (#162) * feat: roomId 넘어가는 문제 해결 * fix: 코드 수정했지만 여전히 오류남 * feat: delete 코드 작성 * fix: react-query delete 문법 바꿔보기 * fix: 안쓰는 import 문 삭제 --------- Co-authored-by: Wang HoEun * [공통] 폰트 적용 및 토너먼트 타이머 시도 (#163) * feat: router prop 변경 * style: 글자 정렬 변경 * feat: 인덱스 타이틀 스윗 수정 * style: font link 연결 * fix: 빌드 에러 해결 * Feat/#161 props drilling ranking (#165) * feat: navigate 추가 * feat: query string으로 param 넘기기 * feat: useLocation 코드 작성 * feat: query string으로 받아오는 값 코드 작성 * fix: 로그인 버튼 보이게 함 * fix: 버튼 보이게 수정 * fix: & 로 수정 * fix: start 뷰 relative * fix: 옵서널 파라미터로 수정 * fix: null 값 처리 재 배치 * fix: null 값 처리 재 배치 --------- Co-authored-by: Wang HoEun * [마이페이지] 아이콘 변경 (#160) * feat: 새로운 아이콘 넣기 * feat: bottom 값 추가 --------- Co-authored-by: Wang HoEun * [선물 등록] 선물 등록하기 화면 POST api 에러 해결 (#166) * feat: 비동기 처리 고려해서 link 값 전달되도록 수정 * feat: POST 성공 후 navigate 에러 해결 * feat: 광고 더미 수정 * feat: 빌드 에러 해결 * [토너먼트] outlink 보러가기 기능 구현 및 스타일 수정 (#173) * feat: onClick 시 외부 링크 이동 * feat: 더보기 버튼 없으면 링크 보이지 않기 * style: 보러가기 스타일 수정 * [홈페이지, 마이페이지] props drilling main (#175) * feat: 온보딩으로 이동 * feat: navigate date에 따라서 구분 + roomId 넘겨주기 * fix: 로그인 임시 부분 주석 처리 --------- Co-authored-by: Wang HoEun * [토너먼트] 리프레쉬 아이콘 작동 및 스타일 수정 (#178) * feat: 리프레쉬 함수 구현 * feat: 타입 수정 및 onClick 프롭 추가 * style: 리프레쉬 아이콘 스타일 수정 * style: 확인을 위해 type any로 바꾸기 * fix: memberToken 주석 처리 * fix: 원상태로 복귀 * fix: 주석 처리 * feat: local에 저장 * fix: 안쓰는 애들 삭제 * fix: localstorage에 저장 * fix: data 구조 수정 * [토너먼트] 다음버튼 활성화, 타이머 세팅, 다시하기 버튼 구현 (#182) * feat: 버튼 활성화 처리 * feat: 타이머 업데이트 * chore: timer text 변경 * feat: 다시하기 reload() 처리인데, 룸 아이디 잘 들어갈지 모르겠음 * fix: 안쓰는 커스텀 스타일 수정 * [온보딩] step06 퍼널로 복귀 & 로직 완료 & 참여자 뷰 구현 (#184) * chore: svg 파일추가 * chore: svg 파일 추가 * style: 초대 마감 뷰 구현 * feat: 초대 마감 뷰 라우터 처리 * feat: kakao 공유하기 커스텀 훅 작성 * feat: kakao 공유하기 useEffect로 구현 * style: 스타일 코드 props에 $ 추가로 에러 해결 * style: 스타일 코드에 기간 Period 추가 * feat: 선물 전달일 당일 출력 완료 * style: 데드라인 페이지 스타일 코드 분리 * feat: 데드라인 페이지에서 버튼 클릭 시 홈으로 이동 * feat: 온보딩 결과 페이지 라우터 처리 * style: 온보딩 헤더 패딩 삭제 * feat: 기존 step06 다시 퍼널로 복귀 * feat: step05에서 다음 클릭 시 invitationCode 저장후 step06로 연결 * feat: step06에서 result페이지 주소 복사 * feat: 참여자의 뷰 구현 & GET 받아오기 * feat: 카카오 로그인 클릭 시 홈으로 이동 * chore: 빌드 에러 해결 * chore: 빌드 에러 해결 * feat: 로컬 비우는 버튼 생성 * fix: 토큰 존재 여부 함수 생성 * fix: 로그인 오류 수정 * [선물등록, 선물홈] 타이머 수정, 뒤로 가기 구현 (#190) * feat: 선물 홈 뒤로가기 버튼 * feat: 뒤로가기 구현 * feat: 뒤로가기 구현 * feat: 불필요한 파일 제거 * feat: 링크가 유효하지 않을 때 라우팅 연결 * feat: 입력창 숫자일 때 화살표 안 뜨게 * feat: 선물 상태바 구현 * feat: 미니 타이머 기능 수정 * feat: api 수정 반영 * [선물홈]내가 고른 선물 구현 (#191) * feat: 링크 복사 구현 * feat: 내가 등록한 선물 구현 * feat: 내가 고른 선물 구현 * fix: 불필요한 코드 삭제 * fix: 빌드에러 해결 * fix: 빌드에러 해결 * [상세 페이지]delete api (#192) * feat: roomId 넘어가는 문제 해결 * fix: 코드 수정했지만 여전히 오류남 * feat: delete 코드 작성 * fix: react-query delete 문법 바꿔보기 * fix: 안쓰는 import 문 삭제 * fix: api url 수정 * feat: mutation 로직 코드 수정 * fix: component 랜더링 방식 수정 * fix: 로그인 오류 수정 * fix: 안쓰는 것들 정리 --------- Co-authored-by: Wang HoEun * feat: 수정하기 버튼 등장 조건 추가 * feat: 햄버거 바 메뉴 (#194) * feat: 타이머 컴포넌트 분리 * feat: Step02에서 이미지 파일 자체를 저장 * feat: 타이머 부분 컴포넌트로 분리 * feat: 이미지 파일 formData로 저장 후 PUT * feat: 상위 컴포넌트에서 imageFile props 전달 * feat: POST presigned URL 타입 변경 * feat: 참여자 뷰 타이틀을 받아온 데이터 기반으로 출력 * [토너먼트] 토너먼트 화면 스타일 리팩토링 (#196) * feat: header 토너먼트 구현 * feat: header 토너먼트 구현 * chore: 주석 제거 * style: padding 2rem 추가 및 랭킹에 헤더 구현 * style: 토너먼트 배경 및 헤더 재배치 * style: 아이템 info 패딩 값 * feat: 결과 헤더 및 패딩값 조절 * style: 토너먼트 인트로 헤더 조절 * feat: 아이템 총 개수 인트로 화면 표시 * style: 폰트 컬러 변경 * chore: 아이콘 추가 * feat: 아이템 없을 때 예외처리 * chore: 구문 분리 * feat: 라운드 세트 수 로직 추가 * [전체]클립보드 복사 및 자잘한 수정 (#200) * feat: 선물 홈 뒤로가기 버튼 * feat: 뒤로가기 구현 * feat: 뒤로가기 구현 * feat: 불필요한 파일 제거 * feat: 링크가 유효하지 않을 때 라우팅 연결 * feat: 입력창 숫자일 때 화살표 안 뜨게 * feat: 선물 상태바 구현 * feat: 미니 타이머 기능 수정 * feat: api 수정 반영 * Feat/#185 copy link (#201) * feat: 링크 복사 구현 * feat: 내가 등록한 선물 구현 * feat: 내가 고른 선물 구현 * fix: 불필요한 코드 삭제 * fix: 빌드에러 해결 * fix: 빌드에러 해결 * feat: 버튼 이벤트 적용 * feat: step02 이미지 네임 방식 변경 * Refactor/#164 tournament result layout (#202) * feat: header 토너먼트 구현 * feat: header 토너먼트 구현 * chore: 주석 제거 * style: padding 2rem 추가 및 랭킹에 헤더 구현 * style: 토너먼트 배경 및 헤더 재배치 * style: 아이템 info 패딩 값 * feat: 결과 헤더 및 패딩값 조절 * style: 토너먼트 인트로 헤더 조절 * feat: 아이템 총 개수 인트로 화면 표시 * style: 폰트 컬러 변경 * chore: 아이콘 추가 * feat: 아이템 없을 때 예외처리 * chore: 구문 분리 * feat: 라운드 세트 수 로직 추가 * style: 랭킹 아이콘 및 카카오 버튼 구현 * style: 버튼 폰트 컬러 및 색상 * style: 캘린더 가운데 배치 * [시작 페이지] start view 오류 해결 (#205) * fix: 로그인 오류 수정 * fix: start 2번째 사진 수정 * fix: start 화면 뷰 다르게 하기 * fix: 안쓰는 import 문 삭제 --------- Co-authored-by: Wang HoEun * 리프레쉬 토큰 오류 수정 (#207) * feat: roomId 넘어가는 문제 해결 * fix: 코드 수정했지만 여전히 오류남 * feat: delete 코드 작성 * fix: react-query delete 문법 바꿔보기 * fix: 안쓰는 import 문 삭제 * fix: api url 수정 * feat: mutation 로직 코드 수정 * fix: component 랜더링 방식 수정 * fix: 로그인 오류 수정 * fix: 안쓰는 것들 정리 * fix: 리프레쉬 토큰 재 설정 * fix: 로그인 부분 main 코드로 변경 * feat: 온보딩으로 이동 --------- Co-authored-by: Wang HoEun * 리프레쉬 토큰 재 수정 (#210) * fix: 로그인 오류 수정 * fix: 토큰 재요청 --------- Co-authored-by: Wang HoEun * Fix/#209 refresh token re (#213) * fix: 로그인 오류 수정 * fix: 토큰 재요청 * fix: param으로 넘기는거로 수정 * fix: start 페이지 수정 --------- Co-authored-by: Wang HoEun * fix: 기호 삭제하기 * fix: editpage도 수정 * fix: 안 쓰는 import 수정 * fix: 리액트 쿼리로 되돌림 get method * fix: param 방법으로 바꾸기 * fix: 안쓰는 import 문 * fix: data 구조 수정 * fix: param으로 다 수정 * fix:giftee 없애기 * fix: type부분 분류 + refresh 토큰 * style: home으로 이동 삭제 * feat: 파일이름 파싱 방식 변경 * style: 타이머 위치 조정(수정 필요!!!!!) * feat: 타이머 컴포넌트 인풋 위치 수정 * feat: 중복되는 https를 파싱 * fix: token data 구조 수정 * fix: 리프레쉬 토큰 api 수정 * fix: 리프레쉬 토큰 body 공유 * feat: 파일 이름 파싱 방식 변경 * feat: 참여자 뷰에서 로그인 클릭 시 로그인 수행 * chore: 필요없는 콘솔 제거 * style: 라디오 버튼 width 수정 * style: 안쓰는 코드 제거 * style: step06 이미지 기본값으로 설정 * fix : PUT 403 에러 해결 * fix: refresh token post 수정 * feat: 라디오 버튼 조건문 추가 * style: 스타일 수정 * [마이페이지] 헤더 구현 (#212) * feat: header 마이페이지 및 홈 구현 * fix : 롤백 * fix: api access token 없이 (#226) * chore: 필요없는 코드 제거 * feat: 링크복사를 배포주소로 변경 * feat: step03에 props 전달하여 출력 --------- Co-authored-by: LEE KAYOUNG / KATIE <104339899+imeureka@users.noreply.github.com> Co-authored-by: Wang Hoeun <38005874+hoeun0723@users.noreply.github.com> Co-authored-by: Jimin Yu <92876819+urjimyu@users.noreply.github.com> Co-authored-by: Wang HoEun * fix: 카카오 공유하기 링크 수정 (#231) * [QA] (#234) * feat: 미니 타이머 고치기 * feat: 사진 뜨도록 수정 * feat: 내가 등록한 선물 조건 걸어주기 * feat: 업로드 가능한 이미지 형식 제한 * feat: 완료 버튼 활성화 조건 추가 * feat: 미리보기 수정 * feat: 더미데이터 추가 * chore: 주석처리 * fix: 빌드 에러 해결 * fix: 토너먼트 파람 변경 (#236) * fix: profile image url 수정 * [온보딩] qa 중 (#239) * feat: 카카오 공유하기 시 초대코드로 이동 * feat: imageUrl 빈 문자열로 변경해서 POST * chore: 빌드에러 해결 * fix: router merge 시 수정 된거 복귀 * fix:토너먼트 라우터 수정 (#244) * [QA] 아웃링크 추가 구현, 타이머 수정 (#246) * chore: 불필요한 주석 삭제 * feat: 불필요한 조건문 * feat: 타이머 수정 테스트 * feat: 아이템 아웃링크 구현 * chore: 불필요한 주석 제거 * feat: 아웃링크 연결 * feat: 라우터 연결 * [온보딩] 모바일 폰트 적용 및 색상 적용 (#248) * feat: 라디오 버튼 모바일에서 활성화(왕호은왕천재) * style: 폰트 적용 및 색상 * chore: 빌드 에러 해결 * chore: 빌드 에러 해결 * fix: 기프트 홈 파람 변경 (#250) * [토너먼트] 아이템 0개이면 0개 화면 예외처리 (#254) * fix: 기프트 홈 파람 변경 * fix: 토너먼트 예외처리 * [온보딩] 지웠던 POST 및 카카오 공유 & 입장 클릭 시 roomId 받아서 navigate 이동 (#257) * feat: 카카오 공유에 props로 넘겨받은 이름 출력 * feat: 실수로 지운 POST 다시 작성 * feat: roomId 상태로 저장 * feat: step05에서 지웠던 post 에서 룸 id 저장 후 다음 스텝 넘기기 * feat: navigate로 roomId 받아서 선물 홈으로 넘김 * [토너먼트] get user roomid 프롭 전달 (#262) * fix: tournament fix * fix: 안쓰는 파일 주석 처리 * feat: 뒤로가기 수정중 * feat: 라우팅 수정 * feat: 빌드 에러 해결 * 초대 & 카카오공유 & 2차 qa (#267) * 깃 충돌 후 폴더 복사 후 새 브랜치 첫 푸쉬 * chore:빌드 에러 해결 * feat: 라우팅 수정 마무리 * feat: 서버통신 수정중 * fix: 빌드 에러 해결중 * feat: presigned url 제거 * fix: QA 적용중 * feat: 스타일 수정 * feat: 버튼 수정 * feat: 기능 수정 * [QA] 토너먼트 스타일 QA 1차 피드백 반영 (#273) * fix: 카카오 공유하기 링크 수정 * feat: 링크복사 baseUrl 수정 * style: 스타일 변경 토너먼트 뷰 * style: app wrapper 변경 및 헤더 * style: 모달창 가격 * fix: 토너먼트 라우터 구조 변경 * feat: 빌드 에러 해결 * feat: 이미지 수정 시 null로 POST * feat: navigate 수정 * feat: 간격 조정 * feat: 빌드 에러 수정 * feat: 디자인 수정 * feat: 디자인 수정 * feat: 초대 링크 수정 * fix: 충돌 해결 후 머지중 * feat: 초대 구현 * Home/Mypage 디자인 qa 진행 완료 (#272) * refactor: type icon 수정 * refactor: footer 수정 * refactor: icon 적용 * refactor: detail view 수정 * refactor: 선물방 뷰 수정 * refactor: 시작 페이지 수정 * refactor: 마이페이지 * refactor: 로딩과 애니메이션 수정 * refactor: gift Room 수정 * fix: build에러 해결 --------- Co-authored-by: Wang HoEun * feat: 이미지 조건 변경 * [온보딩] 스타일 속성 변경 (#278) * feat: 뒤로가기 버튼 제거 * style: qa 반영 오전 5시 18분 * style: 카카오 링크 zindex 추가 * style: 온보딩 스텝 스타일 * fix: 빌드 오류 해결 --------- Co-authored-by: 장정안 * [토너먼트] gifted 속성 받아오기 (#281) * feat:api 업데이트 get User * feat: 라우터 기프티 받아오기 * feat: 뒤로가기 수정 * [온보딩] 온보딩 파이널 뷰 스타일 수정 (#285) * style: 온보딩 파이널 햄버거 추가 & 글자 위치 수정 * style: 투명도 제거 * feat: 스타트 페이지 원래대로 복귀 * [큐에이] 토너먼트 시작 화면 (#287) * chore: 이미지 추가 * style: 토너먼트 카드 스타일 2차 * style: 토너먼트 랭킹 헤더 * style: start 화면 배경 삽입 * fix: 빌드 에러 해결 * 움직이는거 수정 (#289) * refactor: type icon 수정 * refactor: footer 수정 * refactor: icon 적용 * refactor: detail view 수정 * refactor: 선물방 뷰 수정 * refactor: 시작 페이지 수정 * refactor: 마이페이지 * refactor: 로딩과 애니메이션 수정 * refactor: gift Room 수정 * fix: build에러 해결 * refactor: header 수정, 마이페이지 위치 값 수정 * fix: 모바일 움직임 수정 --------- Co-authored-by: Wang HoEun * feat: 네비게이션 수정 * style: 초대 받은 사람 뷰 스타일 수정 * fix: 오타 수정 * fix: 배경 이미지 교체 * fix: 로그인 에러 해결 * fix: 문구 삭제 * fix: 리턴 값 부여 * [리프레쉬 토큰] 리프레쉬 토큰 만료 시 재로그인 (#314) * [Fix] 불필요한 div 삭제 (#294) * [공통컴포넌트] 모달창 구현 (#80) * feat: 모달창 구현 * feat: modal 버튼 함수 프롭 전달 * style: 스타일 속성 순서 * style: 단위 변경 * [토너먼트] 토너먼트 플로우 화면 퍼블리싱 (#72) * feat: 토너먼트 공통 버튼 도입 * docs: 토너먼트 컨테이너 폴더변경 * style: 토너먼트 패딩 값 변경 * feat: 공통 컴포넌트 시작하기 버튼 구현 * feat: 시작하기 버튼 후 라운드 시작 로직 구현! * chore: 네이밍 오타 수정 * style: 스타일 코드 분리 * feat: btn_next - border 지우기 * style: theme 토너먼트 폰트 추가 * docs: 폴더 이동 * style: 토너먼트 카드 스타일 분리 * style: 토너먼트 카드 스타일 분리 * style: 스타일 속성 순서 * feat: 토너먼트 footer 컴포넌트 구현 * feat: 토너먼트 title 컴포넌트 구현 * style: 폴더 구조 이동 * chore: 아이콘 이미지 추가 * chore: 아이콘 추가 * feat: 토너먼트 불필요한 div 삭제 * feat: 더보기 아이콘 추가 링크 * style: 이전 버튼 패딩 값 조절 * feat: 새로고침 아이콘 추가 * feat: header 임시 높이 조정 * fix: 빌드 오류 아이콘 수정 * style: 가운데 정렬 * style: rem 폰트 변경 * [기능 구현] kakao login (#85) * chore: 이슈 템플릿 추가 * chore: 이슈 템플릿 수정 * feat: Login 페이지 생성 * style: style코드 mixin으로 변경 * [초기세팅] 초기세팅 main으로 합치기 (#49) * chore: 이슈 템플릿 추가 * add: 프로젝트 생성 * init: 의존성 모듈 설치 * docs: 풀리퀘 템플릿 추가 * feat: PR 시 임시배포 구현 * feat: 자동 배포 workflow 구현 * chore: 버전 수정 * chore: 오타 수정 * chore: 설명 주석 추가 * [초기세팅] eslint 설정 및 prettier 설정 (#14) * chore: eslint 설정 및 prettier 설정 * fix: node true 추가 * fix: 중복 singleQuote 설정 제거 --------- Co-authored-by: Wang HoEun * [초기세팅] GlobalStyle 작성 (#7) * add: styled-component 설치 * feat: meta 태그 수정 * feat: setScreenSize 유틸 함수 작성 * feat: GlobalStyle 작성 * feat: App.tsx 내 GlobalStyle과 GlobalEvent 구현 * chore: styled-reset 라이브러리 설치 * fix: reset 라이브러리 설치로 GlobalStyle 수정 * feat: vw관련 설정 추가 * [초기세팅] Formatting 파일 구조 및 라우팅 설정 (#8) * feat: 라우팅 대쉬보드 생성 * feat: 라우터 설정 * feat: app 파일 routerProvider 적용 * feat: 폴더구조 세팅 * chore: 라우터 패키지 추가 * chore: 라우터 패키지 추가 * [초기세팅] husky 설정 및 lint staged 설정 (#15) * chore: husky 설정 및 lint staged 설정 * feat: husky commitlint 설정 * merge change --------- Co-authored-by: Wang HoEun * [초기세팅] recoil 설치 및 파일 설정 (#17) * feat: recoil 설치 및 파일 설정 * feat: RecoilRoot 설정 * chore: react-router-dom 선언 인식 문제 위해 재 설치 --------- Co-authored-by: Wang HoEun * feat: react-query 설치 및 세팅 및 key 파일 생성 (#18) Co-authored-by: Wang HoEun * [초기세팅] svgr 설치 / open-graph (#16) * chore: svgr 설치 * chore: open graph 라이브러리 설치 * chore: vite svgr 세팅 및 custom 파일 생성 * style: yarn svgr 치니까 tsx 파일로 변동 완료. --------- Co-authored-by: Wang HoEun * [초기세팅] Github Actions 수정(Vercel 배포 연결, preview 수정) (#25) * [초기세팅] 자주 사용하는 속성들 mixin 설정 (#23) * feat: mixin 설정 공통적으로 많이 쓰일 수 있는 flexBox,inlineFlexBox,flexCenter 를 먼저 설정하였음. 추후에 디자인이 나오면 더 추가시킬 예정입니다(ex.애니메이션) * feat: mixin 불러오기 위한 theme 설정 * feat: Styles 컴포넌트 생성 * feat: App 컴포넌트를 Styles 감싸기 * docs: 리드미 작성 (#24) * 초기세팅/theme 설정 (#37) * feat: theme color 설정 * feat: theme font 설정 * style: colors & fonts에 뎁스 추가 * chore: SUIT font 파일 추가 * feat: font-face 추가 & import 문제 * fix: import 이슈 해결을 위한 중괄호 제거 * fix: 필요하지 않은 파일 및 코드 제거 * [초기세팅] 화면 사이즈 layout 분리 (#28) * feat: 대쉬보드 레이아웃 변경 및 사이즈 스타일 적용 * feat: app 리사이즈 useEffect 제거 * feat: useEffect 제거 후 스타일 고정 * feat: 레이아웃 커스텀 훅 구현 * feat: 라우터 폴더 구조 변경 * feat: layout 폴더 구조 변경 * feat: theme fonts, colors 구조 수정 (#43) * [초기세팅] 모바일 리사이징 레이아웃 적용 안되는 이슈 해결 (#45) * feat: 대쉬보드 레이아웃 변경 및 사이즈 스타일 적용 * feat: app 리사이즈 useEffect 제거 * feat: useEffect 제거 후 스타일 고정 * feat: 레이아웃 커스텀 훅 구현 * feat: 라우터 폴더 구조 변경 * feat: layout 폴더 구조 변경 * fix: 모바일 위드값 적용안되는 이슈 해결 * fix: 함수 호출 변경 * fix: global width값 제거 * docs: setscreensize 파일 삭제 * [초기세팅] PR 미리보기 액션 수정 (#39) * feat: 각 PR에 접근할 수 있도록 설정 추가 * feat: 불필요한 설정 제거 * chore: 빌드 에러 해결 * [초기세팅] svgr GUI 아이콘 등록 (#48) * feat: 대쉬보드 레이아웃 변경 및 사이즈 스타일 적용 * feat: app 리사이즈 useEffect 제거 * feat: useEffect 제거 후 스타일 고정 * feat: 레이아웃 커스텀 훅 구현 * feat: 라우터 폴더 구조 변경 * feat: layout 폴더 구조 변경 * fix: 모바일 위드값 적용안되는 이슈 해결 * fix: 함수 호출 변경 * fix: global width값 제거 * docs: setscreensize 파일 삭제 * docs: 아이콘 및 로고 추가 + svgr 변환 * chore: 빌드 에러 처리 --------- Co-authored-by: Wang Hoeun <38005874+hoeun0723@users.noreply.github.com> Co-authored-by: Wang HoEun Co-authored-by: 장정안 <126966681+ExceptAnyone@users.noreply.github.com> Co-authored-by: LEE KAYOUNG / KATIE <104339899+imeureka@users.noreply.github.com> * feat: query key 세팅 및 instance 생성 (type 수정 필요) * chore: axios 설치 * refactor: queryKeys 파일 삭제 * feat: react-query user login api 코드 작성 * feat: Login 로직 코드와 서버 연결 코드 작성 * fix: baseurl import 수정 및 code queryString 으로 구현 * style: 안 쓰는 코드 정리 및 로직 코드 정리 * fix: 안 쓰는 import문 삭제 * fix: 안쓰는 import 문 삭제 * fix: strict mode 지우기 * fix: method 변경 및 console.log 작성 * fix: method get으로 수정 * fix: router link 재설정 * fix: 라우터 주소 재 설정 * fix: strict mode 삭제 * feat: console 추가 * fix: useEffect 위치 수정 * fix: router 구조 * fix: router browserRouter로 수정 * fix: json vercel 파일 추가 * fix: Router 컴포넌트 수정 * fix: path 수정 * fix: 최신 router로 다시 변경 * fix: 데이터 타입 수정 * fix: local 저장 코드 잠시 주석 * fix: data Type 다시 수정 * fix: 안 쓰는 import 삭제 * feat: localstorage에 token 저장 * feat: localstorage 에 token 저장 * fix: console.log로 찍어보기 * fix: data type 구현 * fix: localstorage에 토큰 저장 * fix: 안쓰는 css 파일 삭제 --------- Co-authored-by: Jimin Yu <92876819+urjimyu@users.noreply.github.com> Co-authored-by: Wang HoEun Co-authored-by: 장정안 <126966681+ExceptAnyone@users.noreply.github.com> Co-authored-by: LEE KAYOUNG / KATIE <104339899+imeureka@users.noreply.github.com> * [토너먼트] 토너먼트 결과 화면 퍼블리싱 (#82) * feat: 토너먼트 컴포넌트 폴더 구조 * feat: 토너먼트 결과 화면 카드 컴포넌트 구현 * feat: 토너먼트 타이틀 컴포넌트 * feat: 토너먼트 결과 레이아웃 컴포넌트 * feat: 토너먼트 결과 footer 컴포넌트 * feat: 토너먼트 유저 현황 미니타이머 컴포넌트 구현 * feat: 토너먼트 footer 영역 구현 * feat: 공통 컴포넌트 수정 * style: 공통 버튼 수정 및 footer 색 변경 * docs: 폴더명 대문자 변경 * fix: 토너먼트 컨테이너 충동 해결 * fix: 빌드 오류 해결 * [토너먼트] 최종 순위 확인 뷰 퍼블리싱 (#86) * feat: 토너먼트 컴포넌트 폴더 구조 * feat: 토너먼트 결과 화면 카드 컴포넌트 구현 * feat: 토너먼트 타이틀 컴포넌트 * feat: 토너먼트 결과 레이아웃 컴포넌트 * feat: 토너먼트 결과 footer 컴포넌트 * feat: 토너먼트 유저 현황 미니타이머 컴포넌트 구현 * feat: 토너먼트 footer 영역 구현 * feat: 공통 컴포넌트 수정 * style: 공통 버튼 수정 및 footer 색 변경 * chore: 메달아이콘 추가 * feat: 토너먼트 랭킹 화면 타이틀 작업 * feat: 토너먼트 랭킹 순위 아이템 컴포넌트 구현 * feat: 토너먼트 랭킹 페이지 구현 * feat: price 공통 컴포넌트 구현 * style: 공통 priceTag 적용 * fix: 이미지 아이콘 오류 해결 * fix: 안쓰는 아이콘 제거 * fix: 폴더 구조 변경 import * [토너먼트] 대소문자 변경 파일 변경 (#95) * chore: 이슈 템플릿 추가 * chore: 이슈 템플릿 수정 * [초기세팅] 초기세팅 main으로 합치기 (#49) * chore: 이슈 템플릿 추가 * add: 프로젝트 생성 * init: 의존성 모듈 설치 * docs: 풀리퀘 템플릿 추가 * feat: PR 시 임시배포 구현 * feat: 자동 배포 workflow 구현 * chore: 버전 수정 * chore: 오타 수정 * chore: 설명 주석 추가 * [초기세팅] eslint 설정 및 prettier 설정 (#14) * chore: eslint 설정 및 prettier 설정 * fix: node true 추가 * fix: 중복 singleQuote 설정 제거 --------- Co-authored-by: Wang HoEun * [초기세팅] GlobalStyle 작성 (#7) * add: styled-component 설치 * feat: meta 태그 수정 * feat: setScreenSize 유틸 함수 작성 * feat: GlobalStyle 작성 * feat: App.tsx 내 GlobalStyle과 GlobalEvent 구현 * chore: styled-reset 라이브러리 설치 * fix: reset 라이브러리 설치로 GlobalStyle 수정 * feat: vw관련 설정 추가 * [초기세팅] Formatting 파일 구조 및 라우팅 설정 (#8) * feat: 라우팅 대쉬보드 생성 * feat: 라우터 설정 * feat: app 파일 routerProvider 적용 * feat: 폴더구조 세팅 * chore: 라우터 패키지 추가 * chore: 라우터 패키지 추가 * [초기세팅] husky 설정 및 lint staged 설정 (#15) * chore: husky 설정 및 lint staged 설정 * feat: husky commitlint 설정 * merge change --------- Co-authored-by: Wang HoEun * [초기세팅] recoil 설치 및 파일 설정 (#17) * feat: recoil 설치 및 파일 설정 * feat: RecoilRoot 설정 * chore: react-router-dom 선언 인식 문제 위해 재 설치 --------- Co-authored-by: Wang HoEun * feat: react-query 설치 및 세팅 및 key 파일 생성 (#18) Co-authored-by: Wang HoEun * [초기세팅] svgr 설치 / open-graph (#16) * chore: svgr 설치 * chore: open graph 라이브러리 설치 * chore: vite svgr 세팅 및 custom 파일 생성 * style: yarn svgr 치니까 tsx 파일로 변동 완료. --------- Co-authored-by: Wang HoEun * [초기세팅] Github Actions 수정(Vercel 배포 연결, preview 수정) (#25) * [초기세팅] 자주 사용하는 속성들 mixin 설정 (#23) * feat: mixin 설정 공통적으로 많이 쓰일 수 있는 flexBox,inlineFlexBox,flexCenter 를 먼저 설정하였음. 추후에 디자인이 나오면 더 추가시킬 예정입니다(ex.애니메이션) * feat: mixin 불러오기 위한 theme 설정 * feat: Styles 컴포넌트 생성 * feat: App 컴포넌트를 Styles 감싸기 * docs: 리드미 작성 (#24) * 초기세팅/theme 설정 (#37) * feat: theme color 설정 * feat: theme font 설정 * style: colors & fonts에 뎁스 추가 * chore: SUIT font 파일 추가 * feat: font-face 추가 & import 문제 * fix: import 이슈 해결을 위한 중괄호 제거 * fix: 필요하지 않은 파일 및 코드 제거 * [초기세팅] 화면 사이즈 layout 분리 (#28) * feat: 대쉬보드 레이아웃 변경 및 사이즈 스타일 적용 * feat: app 리사이즈 useEffect 제거 * feat: useEffect 제거 후 스타일 고정 * feat: 레이아웃 커스텀 훅 구현 * feat: 라우터 폴더 구조 변경 * feat: layout 폴더 구조 변경 * feat: theme fonts, colors 구조 수정 (#43) * [초기세팅] 모바일 리사이징 레이아웃 적용 안되는 이슈 해결 (#45) * feat: 대쉬보드 레이아웃 변경 및 사이즈 스타일 적용 * feat: app 리사이즈 useEffect 제거 * feat: useEffect 제거 후 스타일 고정 * feat: 레이아웃 커스텀 훅 구현 * feat: 라우터 폴더 구조 변경 * feat: layout 폴더 구조 변경 * fix: 모바일 위드값 적용안되는 이슈 해결 * fix: 함수 호출 변경 * fix: global width값 제거 * docs: setscreensize 파일 삭제 * [초기세팅] PR 미리보기 액션 수정 (#39) * feat: 각 PR에 접근할 수 있도록 설정 추가 * feat: 불필요한 설정 제거 * chore: 빌드 에러 해결 * [초기세팅] svgr GUI 아이콘 등록 (#48) * feat: 대쉬보드 레이아웃 변경 및 사이즈 스타일 적용 * feat: app 리사이즈 useEffect 제거 * feat: useEffect 제거 후 스타일 고정 * feat: 레이아웃 커스텀 훅 구현 * feat: 라우터 폴더 구조 변경 * feat: layout 폴더 구조 변경 * fix: 모바일 위드값 적용안되는 이슈 해결 * fix: 함수 호출 변경 * fix: global width값 제거 * docs: setscreensize 파일 삭제 * docs: 아이콘 및 로고 추가 + svgr 변환 * chore: 빌드 에러 처리 --------- Co-authored-by: Wang Hoeun <38005874+hoeun0723@users.noreply.github.com> Co-authored-by: Wang HoEun Co-authored-by: 장정안 <126966681+ExceptAnyone@users.noreply.github.com> Co-authored-by: LEE KAYOUNG / KATIE <104339899+imeureka@users.noreply.github.com> * fix: strict mode 지우기 * fix: method get으로 수정 * fix: router link 재설정 * fix: 라우터 주소 재 설정 * feat: console 추가 * fix: useEffect 위치 수정 * fix: router 구조 * fix: router browserRouter로 수정 * fix: json vercel 파일 추가 * fix: Router 컴포넌트 수정 * fix: path 수정 * fix: 최신 router로 다시 변경 * fix: 데이터 타입 수정 * fix: local 저장 코드 잠시 주석 * fix: data Type 다시 수정 * fix: 안 쓰는 import 삭제 * fix: 토너먼트 대소문자 변경 * fix: 대소문자 파일 변경 Tournament * fix: onBoarding 대소문자 변경 * fix: Onboarding -> OnBoarding 변경 * fix: onboardingSteps 로 변경 --------- Co-authored-by: Jimin Yu <92876819+urjimyu@users.noreply.github.com> Co-authored-by: Wang Hoeun <38005874+hoeun0723@users.noreply.github.com> Co-authored-by: Wang HoEun Co-authored-by: 장정안 <126966681+ExceptAnyone@users.noreply.github.com> * [선물 등록 페이지] 내가 등록한 선물 페이지 UI 구현 (#65) * feat: 임시로 선물 등록 테스트 페이지 추가 * feat: 선물 링크 등록 테스트 임시로 기능 구현 * feat: 내가 추가한 선물 페이지 UI 구현중 * feat: 라우터에 페이지 임시 추가 * style: 이미지 어셋 추가 * feat: 내가 추가한 선물 페이지 UI 구현 * feat: 선물 등록하기 뷰 구현 * feat: 내가 등록한 선물 뷰 UI 구현 * chore: 화살표 함수로 수정 * feat: 내가 등록한 선물 컴포넌트 분리 * chore: 빌드 에러 해결 * feat: 빌드 에러 해결 * feat: rem 단위로 수정 * [최신화] 기존 브랜치에서 새로운 브랜치로 코드 복붙 (#97) * fix: 디벨롭에서 새로운 브랜치를 파서 step05까지의 코드 복붙 * fix: step06까지 복붙 완료 * [선물홈] 선물홈 UI 구현 (#91) * feat: 선물 홈 라우터 연결 * feat: GiftHome 상단 컴포넌트 구현중 * feat: theme 수정 반영 * feat: 선물홈 상단 애니메이션 제외 UI 구현 * chore: countdown flip animation 라이브러리 설치 * feat: 선물홈 하단 '친구가 등록한 선물' UI 구현 * style: 선물홈 친구, 2030 공통 스타일 생성 * style: 전체 패딩 0으로 설정 * style: 선물홈 2030, 친구 부분 공통 스타일 구현 * feat: 선물홈 2030, 친구 UI 구현 * feat: haeder, footer 제거 * style: 타이머 폰트 추가 * style: svg 파일 추가 * feat: 카운트다운 카드 컴포넌트 분리 * fix: 빌드 에러 해결 * feat: 타이머 컴포넌트 생성 * feat: 아이콘 추가 * feat: 공통 스타일 분리 * feat: 컴포넌트 분리 * feat: 더미 데이터 추가 * fix: 빌드 에러 해결 * [선물 등록하기] 링크 등록 플로우 내가 등록한 선물 제외 UI 구현 완료 (#93) * feat: 높이 설정 추가 * feat: 공통 버튼 테두리 없애기 * feat: 다음 버튼 따로 구현 * feat: 입력창 뷰 구현 * feat: 링크 입력 화면 UI 구현 * feat: 다음 버튼 활성화 수정 * feat: 링크 있을 때 선물 등록 UI 구현 * feat: 링크 있을 때 선물 등록 UI 구현 * feat: 링크 없을 때 UI 구현 * feat: header, footer 제거 * feat: 직접 입력 화면 UI 구현 * feat: 링크 없이 입력 버튼 연결 * feat: 첫번째 링크 입력 화면 UI 수정 * feat: 폴더구조 정리 및 공통 컴포넌트 분리 * feat: 상단 선물 바 위치 조건 추가 * feat: 썸네일 컴포넌트 분리 * feat: 가격은 삭제 아이콘 안 뜨도록 수정 * feat: input padding 추가 * feat: 페이지 레이아웃 분리 * fix: 빌드 에러 해결 * [선물 홈, 선물 등록] 전반적인 뷰 수정 및 플로우 연결 (#100) * style: 불필요한 파일 제거 * feat: 선물홈 헤더 추가 * style: 오타 수정 및 커서 포인터 설정 * feat: 플로팅 버튼 구현 * feat: 헤더 및 버튼 구현 * feat: 페이지 연결 * style: 아이콘 추가 * style: 북마크 이미지 추가 * feat: 플로우 연결 * feat: 모달 추가 * chore: 빌드 에러 해결 위해서 불필요한 코드 추가 * feat: 라우터 중복 수정 * fix: 빌드 에러 해결중 * fix: 빌드 에러 해결 * fix: 빌드 에러 해결 * [마이페이지] 뷰 작업 + Card Component 제작 (#92) * chore: 이슈 템플릿 추가 * chore: 이슈 템플릿 수정 * [초기세팅] 초기세팅 main으로 합치기 (#49) * chore: 이슈 템플릿 추가 * add: 프로젝트 생성 * init: 의존성 모듈 설치 * docs: 풀리퀘 템플릿 추가 * feat: PR 시 임시배포 구현 * feat: 자동 배포 workflow 구현 * chore: 버전 수정 * chore: 오타 수정 * chore: 설명 주석 추가 * [초기세팅] eslint 설정 및 prettier 설정 (#14) * chore: eslint 설정 및 prettier 설정 * fix: node true 추가 * fix: 중복 singleQuote 설정 제거 --------- Co-authored-by: Wang HoEun * [초기세팅] GlobalStyle 작성 (#7) * add: styled-component 설치 * feat: meta 태그 수정 * feat: setScreenSize 유틸 함수 작성 * feat: GlobalStyle 작성 * feat: App.tsx 내 GlobalStyle과 GlobalEvent 구현 * chore: styled-reset 라이브러리 설치 * fix: reset 라이브러리 설치로 GlobalStyle 수정 * feat: vw관련 설정 추가 * [초기세팅] Formatting 파일 구조 및 라우팅 설정 (#8) * feat: 라우팅 대쉬보드 생성 * feat: 라우터 설정 * feat: app 파일 routerProvider 적용 * feat: 폴더구조 세팅 * chore: 라우터 패키지 추가 * chore: 라우터 패키지 추가 * [초기세팅] husky 설정 및 lint staged 설정 (#15) * chore: husky 설정 및 lint staged 설정 * feat: husky commitlint 설정 * merge change --------- Co-authored-by: Wang HoEun * [초기세팅] recoil 설치 및 파일 설정 (#17) * feat: recoil 설치 및 파일 설정 * feat: RecoilRoot 설정 * chore: react-router-dom 선언 인식 문제 위해 재 설치 --------- Co-authored-by: Wang HoEun * feat: react-query 설치 및 세팅 및 key 파일 생성 (#18) Co-authored-by: Wang HoEun * [초기세팅] svgr 설치 / open-graph (#16) * chore: svgr 설치 * chore: open graph 라이브러리 설치 * chore: vite svgr 세팅 및 custom 파일 생성 * style: yarn svgr 치니까 tsx 파일로 변동 완료. --------- Co-authored-by: Wang HoEun * [초기세팅] Github Actions 수정(Vercel 배포 연결, preview 수정) (#25) * [초기세팅] 자주 사용하는 속성들 mixin 설정 (#23) * feat: mixin 설정 공통적으로 많이 쓰일 수 있는 flexBox,inlineFlexBox,flexCenter 를 먼저 설정하였음. 추후에 디자인이 나오면 더 추가시킬 예정입니다(ex.애니메이션) * feat: mixin 불러오기 위한 theme 설정 * feat: Styles 컴포넌트 생성 * feat: App 컴포넌트를 Styles 감싸기 * docs: 리드미 작성 (#24) * 초기세팅/theme 설정 (#37) * feat: theme color 설정 * feat: theme font 설정 * style: colors & fonts에 뎁스 추가 * chore: SUIT font 파일 추가 * feat: font-face 추가 & import 문제 * fix: import 이슈 해결을 위한 중괄호 제거 * fix: 필요하지 않은 파일 및 코드 제거 * [초기세팅] 화면 사이즈 layout 분리 (#28) * feat: 대쉬보드 레이아웃 변경 및 사이즈 스타일 적용 * feat: app 리사이즈 useEffect 제거 * feat: useEffect 제거 후 스타일 고정 * feat: 레이아웃 커스텀 훅 구현 * feat: 라우터 폴더 구조 변경 * feat: layout 폴더 구조 변경 * feat: theme fonts, colors 구조 수정 (#43) * [초기세팅] 모바일 리사이징 레이아웃 적용 안되는 이슈 해결 (#45) * feat: 대쉬보드 레이아웃 변경 및 사이즈 스타일 적용 * feat: app 리사이즈 useEffect 제거 * feat: useEffect 제거 후 스타일 고정 * feat: 레이아웃 커스텀 훅 구현 * feat: 라우터 폴더 구조 변경 * feat: layout 폴더 구조 변경 * fix: 모바일 위드값 적용안되는 이슈 해결 * fix: 함수 호출 변경 * fix: global width값 제거 * docs: setscreensize 파일 삭제 * [초기세팅] PR 미리보기 액션 수정 (#39) * feat: 각 PR에 접근할 수 있도록 설정 추가 * feat: 불필요한 설정 제거 * chore: 빌드 에러 해결 * [초기세팅] svgr GUI 아이콘 등록 (#48) * feat: 대쉬보드 레이아웃 변경 및 사이즈 스타일 적용 * feat: app 리사이즈 useEffect 제거 * feat: useEffect 제거 후 스타일 고정 * feat: 레이아웃 커스텀 훅 구현 * feat: 라우터 폴더 구조 변경 * feat: layout 폴더 구조 변경 * fix: 모바일 위드값 적용안되는 이슈 해결 * fix: 함수 호출 변경 * fix: global width값 제거 * docs: setscreensize 파일 삭제 * docs: 아이콘 및 로고 추가 + svgr 변환 * chore: 빌드 에러 처리 --------- Co-authored-by: Wang Hoeun <38005874+hoeun0723@users.noreply.github.com> Co-authored-by: Wang HoEun Co-authored-by: 장정안 <126966681+ExceptAnyone@users.noreply.github.com> Co-authored-by: LEE KAYOUNG / KATIE <104339899+imeureka@users.noreply.github.com> * fix: strict mode 지우기 * fix: method get으로 수정 * fix: router link 재설정 * fix: 라우터 주소 재 설정 * feat: console 추가 * fix: useEffect 위치 수정 * fix: router 구조 * fix: router browserRouter로 수정 * fix: json vercel 파일 추가 * fix: Router 컴포넌트 수정 * fix: path 수정 * fix: 최신 router로 다시 변경 * fix: 데이터 타입 수정 * fix: local 저장 코드 잠시 주석 * fix: data Type 다시 수정 * fix: 안 쓰는 import 삭제 * feat: 마이페이지 생성 후 배경 이미지 불러오기 * feat: 마이페이지 유저 div 구현 * feat: 선물 방 뷰 없을때 페이지 구현 완료 * feat: 진행 중이지 않은 선물 방 div 태그 생성 * feat: header 라우터 기능 추가 * feat: 컴포넌트 어느정도 구현 완료 하지만 edit 부분 수정 필요 * fix: 버튼 사이즈 merge 후 custom 으로 넘기기 * fix: settings 위치 수정 * refactor: setting icon 위치 수정 * fix: tag 수정 * feat: 색상 변동 된거 적용 * style: type3 수정 및 margin 주기 * feat: 종료된 선물방 컴포넌트 구현 및 수정 페이지 구현 * feat: detail page router 적용 * fix: 안쓰는 import 문 삭제 --------- Co-authored-by: Jimin Yu <92876819+urjimyu@users.noreply.github.com> Co-authored-by: Wang HoEun Co-authored-by: 장정안 <126966681+ExceptAnyone@users.noreply.github.com> Co-authored-by: LEE KAYOUNG / KATIE <104339899+imeureka@users.noreply.github.com> * [선물 등록] 버튼 조건에 맞게 활성화, 광고 삭제 기능 구현 (#106) * feat: 버튼 비활성화 속성 추가 * feat: input 조건에 따른 버튼 활성화 수정 * fix: 스타일 props $ 추가 * feat: 광고 삭제 기능 구현 * feat: 아이콘 교체 * fix: 빌드 에러 해결 * [마이페이지] react-query 데이터 패칭 방식 예시 코드 작성 (#107) * style: Wrapper 컨벤션 맞추기 * feat: mypage 데이터 패칭 react query hooks 작성,아직 테스트 전 * feat: 임시 token 저장 과정 코드 작성 * fix: react-query 받아오는 코드 수정 , 추후 mypage 받아오는 부분 undefined 해결 필요 * feat: react-query api mypage에서 불러오기 * refactor: 폴더명 변경 * refactor: 안쓰는 import 문 삭제 및 navigate 코드 주석 * fix: 안쓰는 import 문 정리 --------- Co-authored-by: Wang HoEun * [토너먼트] 라운딩 로직 및 부전승 처리 (#111) * style: 인트로 시작 버튼 변경 * chore: 이미지 추가 * feat: 목업데이터 설정 * feat: 아이템 카드 적용 * feat: 토너먼트 랜덤 아이템 함수 * feat: 라우터 안쓰는 페이지 제거 * faet: 레이아웃 헤더 삭제 * feat: 데이터 개수 반영 * feat: 1라운드 로직 구현 * feat: 랜덤 세트 형성 로직 구현 + 훅 분리 * feat: 목업데이터 형성 * feat: 다음 버튼 구현 * feat: 불필요한 주석 제거 * feat: 선택되면 일단 선택 체크 성공 * feat: 라우터 변경 * feat: 토너먼트 인트로 컴포넌트 프롭 수정 * feat: 토너먼트 라운딩 로직 구현 * feat: 토너먼트 푸터, 타이틀 프롭 변경 * feat: 결과 제출 프롭 설정 * chore: 배경 이미지 추가 * chore: 배경 추가 * feat: 토너먼트 선택 아이템 저장 후 프롭 전달 * feat: 토너먼트 결과 화면 프롭 전달 받기 * feat: 헤더 삭제 * chore: 배경 이미지 설정 * feat: 토너먼트 부전승 처리 * chore: 토너먼트 플로우 컨테이너 주석처리 * chore: 빌드 오류 해결 * fix: 프롭 전달 삭제 빌드 오류 해결 * chore: 로직 의심 주석 추가 * [선물홈, 선물등록, 세부페이지] api 타입 및 hooks 파일 생성 (#114) * feat: 선물홈 메인 get 연결 * feat: api 관련 파일 생성 * feat: api types 파일 생성 * feat: GET hooks 생성 * feat: 선물홈 api 연결 * feat: api 관련 커스텀 훅 작성 및 타입… --- package.json | 1 + .../svg/ic_after_tournament_progress_line.svg | 6 + .../ic_before_tournament_progress_line.svg | 6 + public/svg/ic_nopoint.svg | 3 + public/svg/ic_onboarding_final.svg | 10 + public/svg/ic_point.svg | 3 + src/App.tsx | 14 + .../svg/IcAfterTournamentProgressLine.tsx | 10 + .../svg/IcBeforeTournamentProgressLine.tsx | 10 + src/assets/svg/IcNopoint.tsx | 7 + src/assets/svg/IcOnboardingFinal.tsx | 33 ++ src/assets/svg/IcPoint.tsx | 7 + src/assets/svg/index.ts | 5 + .../GiftAdd/AddGiftFooter/AddGiftFooter.tsx | 36 ++- .../AddGiftLayout/AddGiftWithLinkLayout.tsx | 16 + .../AddGiftWithoutLinkLayout.tsx | 16 + .../GiftAddFirstLinkLayout.tsx | 7 + .../common/LinkAddHeader/LinkAddHeader.tsx | 4 +- .../GiftAddPageLayout/GiftAddPageLayout.tsx | 8 +- .../CountDownTimer/CountDownTimer.tsx | 13 +- .../GiftHomeHeader/GiftHomeHeader.style.ts | 15 - .../GiftHomeHeader/GiftHomeHeader.tsx | 18 -- .../GiftHomeSummary/GiftHomeSummary.tsx | 5 +- .../OnBoardingSteps/Step01/Step01.style.ts | 1 + .../OnBoardingSteps/Step03/Step03.style.ts | 2 + .../OnBoardingSteps/Step03/Step03.tsx | 7 +- .../OnBoardingSteps/Step04/Step04.style.ts | 5 +- .../OnBoardingSteps/Step04/Step04.tsx | 12 +- .../OnBoardingSteps/Step04/TimePicker.tsx | 37 ++- .../Step05/SelectTimeOptions.tsx | 2 +- .../Step06/OnboardingFinalFooter.tsx | 55 ++++ .../Step06/OnboardingFinalHeader.style.ts | 10 + .../Step06/OnboardingFinalHeader.tsx | 22 +- .../OnBoardingSteps/Step06/Step06.style.ts | 165 +++++----- .../OnBoardingSteps/Step06/Step06.tsx | 169 +++++++---- .../common/Button/Radio/BtnRadio.style.ts | 6 +- .../common/Button/Radio/BtnRadio.tsx | 8 +- src/components/common/MiniTimer/MiniTimer.tsx | 24 +- .../common/Modal/DeleteModal.style.ts | 1 + src/components/common/Modal/DeleteModal.tsx | 5 +- .../common/Modal/DuplicateModal.style.ts | 37 +++ .../common/Modal/DuplicateModal.tsx | 24 ++ src/components/common/Modal/Modal.tsx | 5 + src/context/AddGift/AddGiftContext.tsx | 1 - .../DuplicateModal/DuplicateModalContext.tsx | 36 +++ src/context/GifteeName/GifteeNameContext.tsx | 37 +++ src/core/routes.ts | 4 + src/hooks/common/useHandleShare.tsx | 14 + src/hooks/gift/useHandleCountDownZero.tsx | 14 + src/hooks/onboarding/useFormatDate.tsx | 9 +- src/hooks/queries/gift/usePostGift.tsx | 22 +- src/hooks/useCopyClip.tsx | 13 +- src/pages/GiftAdd/GiftAddPage.tsx | 6 +- src/pages/GiftHome/GiftHome.tsx | 8 - src/pages/GiftHomeDetail/GiftHomeDetail.tsx | 11 +- .../GiftHomeDetail/GiftHomeDetail2030.tsx | 15 +- .../GiftHomeDetail/GiftHomeDetailFriends.tsx | 12 +- src/pages/Participants/ParticipantsView.tsx | 281 +++++++----------- src/router/Router.tsx | 14 +- src/style/toast.style.ts | 17 ++ src/types/gift/index.d.ts | 13 +- src/types/product/index.d.ts | 1 + src/types/room/index.d.ts | 5 +- yarn.lock | 12 + 64 files changed, 936 insertions(+), 459 deletions(-) create mode 100644 public/svg/ic_after_tournament_progress_line.svg create mode 100644 public/svg/ic_before_tournament_progress_line.svg create mode 100644 public/svg/ic_nopoint.svg create mode 100644 public/svg/ic_onboarding_final.svg create mode 100644 public/svg/ic_point.svg create mode 100644 src/assets/svg/IcAfterTournamentProgressLine.tsx create mode 100644 src/assets/svg/IcBeforeTournamentProgressLine.tsx create mode 100644 src/assets/svg/IcNopoint.tsx create mode 100644 src/assets/svg/IcOnboardingFinal.tsx create mode 100644 src/assets/svg/IcPoint.tsx delete mode 100644 src/components/GiftHome/GiftHomeHeader/GiftHomeHeader.style.ts delete mode 100644 src/components/GiftHome/GiftHomeHeader/GiftHomeHeader.tsx create mode 100644 src/components/OnBoardingSteps/Step06/OnboardingFinalFooter.tsx create mode 100644 src/components/OnBoardingSteps/Step06/OnboardingFinalHeader.style.ts create mode 100644 src/components/common/Modal/DuplicateModal.style.ts create mode 100644 src/components/common/Modal/DuplicateModal.tsx create mode 100644 src/context/DuplicateModal/DuplicateModalContext.tsx create mode 100644 src/context/GifteeName/GifteeNameContext.tsx create mode 100644 src/core/routes.ts create mode 100644 src/hooks/common/useHandleShare.tsx create mode 100644 src/hooks/gift/useHandleCountDownZero.tsx create mode 100644 src/style/toast.style.ts diff --git a/package.json b/package.json index 92fa7023..6cb6eec3 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "react-dom": "^18.2.0", "react-error-boundary": "^4.0.12", "react-router-dom": "^6.21.1", + "react-toastify": "^10.0.4", "styled-components": "^6.1.6", "styled-reset": "^4.5.1" }, diff --git a/public/svg/ic_after_tournament_progress_line.svg b/public/svg/ic_after_tournament_progress_line.svg new file mode 100644 index 00000000..de11da1d --- /dev/null +++ b/public/svg/ic_after_tournament_progress_line.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/svg/ic_before_tournament_progress_line.svg b/public/svg/ic_before_tournament_progress_line.svg new file mode 100644 index 00000000..697d1e77 --- /dev/null +++ b/public/svg/ic_before_tournament_progress_line.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/svg/ic_nopoint.svg b/public/svg/ic_nopoint.svg new file mode 100644 index 00000000..87ec6259 --- /dev/null +++ b/public/svg/ic_nopoint.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/svg/ic_onboarding_final.svg b/public/svg/ic_onboarding_final.svg new file mode 100644 index 00000000..a03fdbfd --- /dev/null +++ b/public/svg/ic_onboarding_final.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/svg/ic_point.svg b/public/svg/ic_point.svg new file mode 100644 index 00000000..9443a054 --- /dev/null +++ b/public/svg/ic_point.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/App.tsx b/src/App.tsx index aa2cc2fe..808d88c9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,6 +7,8 @@ import Loading from './pages/Loading/Loading'; import { Suspense } from 'react'; import { ErrorBoundary } from 'react-error-boundary'; import FallbackUI from './pages/FallbackUI/FallbackUI'; +import 'react-toastify/dist/ReactToastify.css'; +import { StyledToastContainer } from './style/toast.style'; function App() { const Wrapper = styled.div` @@ -24,6 +26,18 @@ function App() { }> + )} diff --git a/src/assets/svg/IcAfterTournamentProgressLine.tsx b/src/assets/svg/IcAfterTournamentProgressLine.tsx new file mode 100644 index 00000000..8ce861cc --- /dev/null +++ b/src/assets/svg/IcAfterTournamentProgressLine.tsx @@ -0,0 +1,10 @@ +import type { SVGProps } from 'react'; +const SvgIcAfterTournamentProgressLine = (props: SVGProps) => ( + + + + + + +); +export default SvgIcAfterTournamentProgressLine; diff --git a/src/assets/svg/IcBeforeTournamentProgressLine.tsx b/src/assets/svg/IcBeforeTournamentProgressLine.tsx new file mode 100644 index 00000000..64439c47 --- /dev/null +++ b/src/assets/svg/IcBeforeTournamentProgressLine.tsx @@ -0,0 +1,10 @@ +import type { SVGProps } from 'react'; +const SvgIcBeforeTournamentProgressLine = (props: SVGProps) => ( + + + + + + +); +export default SvgIcBeforeTournamentProgressLine; diff --git a/src/assets/svg/IcNopoint.tsx b/src/assets/svg/IcNopoint.tsx new file mode 100644 index 00000000..d101073a --- /dev/null +++ b/src/assets/svg/IcNopoint.tsx @@ -0,0 +1,7 @@ +import type { SVGProps } from 'react'; +const SvgIcNopoint = (props: SVGProps) => ( + + + +); +export default SvgIcNopoint; diff --git a/src/assets/svg/IcOnboardingFinal.tsx b/src/assets/svg/IcOnboardingFinal.tsx new file mode 100644 index 00000000..19caa8eb --- /dev/null +++ b/src/assets/svg/IcOnboardingFinal.tsx @@ -0,0 +1,33 @@ +import type { SVGProps } from 'react'; +const SvgIcOnboardingFinal = (props: SVGProps) => ( + + + + + + + + + + +); +export default SvgIcOnboardingFinal; diff --git a/src/assets/svg/IcPoint.tsx b/src/assets/svg/IcPoint.tsx new file mode 100644 index 00000000..47a131ae --- /dev/null +++ b/src/assets/svg/IcPoint.tsx @@ -0,0 +1,7 @@ +import type { SVGProps } from 'react'; +const SvgIcPoint = (props: SVGProps) => ( + + + +); +export default SvgIcPoint; diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index e7eb2e23..e3fb9706 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -80,6 +80,11 @@ export { default as Person4 } from './Person4'; export { default as SweetLogoGray } from './SweetLogoGray'; export { default as SweetLogoPink } from './SweetLogoPink'; export { default as TrophyNone } from './TrophyNone'; +export { default as IcNopoint } from './IcNopoint'; +export { default as IcPoint } from './IcPoint'; +export { default as IcOnboardingFinal } from './IcOnboardingFinal'; +export { default as IcAfterTournamentProgressLine } from './IcAfterTournamentProgressLine'; +export { default as IcBeforeTournamentProgressLine } from './IcBeforeTournamentProgressLine'; export { default as Vite } from './Vite'; export { default as IcShare } from './IcShare'; export { default as Ranking04 } from './Ranking04'; diff --git a/src/components/GiftAdd/AddGiftFooter/AddGiftFooter.tsx b/src/components/GiftAdd/AddGiftFooter/AddGiftFooter.tsx index e40a3007..5c797140 100644 --- a/src/components/GiftAdd/AddGiftFooter/AddGiftFooter.tsx +++ b/src/components/GiftAdd/AddGiftFooter/AddGiftFooter.tsx @@ -17,6 +17,7 @@ interface AddGiftFooterProps { updateAddGiftInfo: (newInfo: Partial) => void; fileName: string; setIsLoading: React.Dispatch>; + setIsModalOpen: React.Dispatch>; } const AddGiftFooter = ({ @@ -32,21 +33,38 @@ const AddGiftFooter = ({ fileName, updateAddGiftInfo, setIsLoading, + setIsModalOpen, }: AddGiftFooterProps) => { - const { mutation } = usePostGift(roomId, targetDate, setStep, updateAddGiftInfo, setIsLoading); + const { mutation } = usePostGift( + roomId, + targetDate, + setStep, + updateAddGiftInfo, + setIsLoading, + setIsModalOpen, + ); const { putImageUrlToS3 } = usePutImageUrlToS3(roomId); - const onClick = async () => { setIsLoading(true); const { imageUrlS3 } = await putImageUrlToS3({ fileName, file, roomId, setImageUrl }); if (isActivated) { - mutation.mutate({ - roomId: roomId, - name: name, - cost: cost, - imageUrl: imageUrlS3, - url: link, - }); + try { + await mutation.mutateAsync({ + roomId: roomId, + name: name, + cost: cost, + imageUrl: imageUrlS3, + url: link, + }); + } catch (error: any) { + console.error('Mutation error:', error.message); + if (error.message === 'Error: 중복된 선물 등록입니다.') { + console.log('CHECK'); + setIsModalOpen(true); + } + } finally { + setIsLoading(false); + } } }; diff --git a/src/components/GiftAdd/AddGiftLayout/AddGiftWithLinkLayout.tsx b/src/components/GiftAdd/AddGiftLayout/AddGiftWithLinkLayout.tsx index f5e16fbd..e9ab3bc3 100644 --- a/src/components/GiftAdd/AddGiftLayout/AddGiftWithLinkLayout.tsx +++ b/src/components/GiftAdd/AddGiftLayout/AddGiftWithLinkLayout.tsx @@ -9,6 +9,8 @@ import { OpenGraphResponseType } from '../../../types/etc'; import LinkAddHeader from '../AddGiftLink/common/LinkAddHeader/LinkAddHeader'; import { AddGiftInfo } from '../../../types/gift'; import useConvertURLtoFile from '../../../hooks/useConvertURLtoFile'; +import DuplicateModal from '../../common/Modal/DuplicateModal'; +import { useUpdateGifteeNameContext } from '../../../context/GifteeName/GifteeNameContext'; interface AddGiftWithLinkLayoutProps { link: string; @@ -21,6 +23,8 @@ interface AddGiftWithLinkLayoutProps { setModalStatus: React.Dispatch>; addGiftInfo: AddGiftInfo; setIsLoading: React.Dispatch>; + isModalOpen: boolean; + setIsModalOpen: React.Dispatch>; } const AddGiftWithLinkLayout = ({ @@ -34,6 +38,8 @@ const AddGiftWithLinkLayout = ({ setModalStatus, addGiftInfo, setIsLoading, + isModalOpen, + setIsModalOpen, }: AddGiftWithLinkLayoutProps) => { const [isActivated, setIsActivated] = useState( !!addGiftInfo.name && !!addGiftInfo.cost && !!addGiftInfo.imageUrl, @@ -46,6 +52,8 @@ const AddGiftWithLinkLayout = ({ const [, setIsImageUploaded] = useState(false); const [, setPreviewImage] = useState(null); + const { gifteeName } = useUpdateGifteeNameContext(); + const checkPriceNull = (price: number | null) => { if (price === null) { return 0; @@ -76,6 +84,12 @@ const AddGiftWithLinkLayout = ({ return ( + {isModalOpen && ( + setIsModalOpen(false)}> + 선물방에 이미 +
등록된 상품이에요 + + )} ); diff --git a/src/components/GiftAdd/AddGiftLayout/AddGiftWithoutLinkLayout.tsx b/src/components/GiftAdd/AddGiftLayout/AddGiftWithoutLinkLayout.tsx index bced5aee..26b66978 100644 --- a/src/components/GiftAdd/AddGiftLayout/AddGiftWithoutLinkLayout.tsx +++ b/src/components/GiftAdd/AddGiftLayout/AddGiftWithoutLinkLayout.tsx @@ -8,6 +8,8 @@ import Modal from '../../common/Modal/Modal'; import LinkAddHeader from '../AddGiftLink/common/LinkAddHeader/LinkAddHeader'; import { OpenGraphResponseType } from '../../../types/etc'; import { AddGiftInfo } from '../../../types/gift'; +import { useUpdateGifteeNameContext } from '../../../context/GifteeName/GifteeNameContext'; +import DuplicateModal from '../../common/Modal/DuplicateModal'; interface AddGiftWithLinkLayoutProps { roomId: number; @@ -21,6 +23,8 @@ interface AddGiftWithLinkLayoutProps { updateAddGiftInfo: (newInfo: Partial) => void; addGiftInfo: AddGiftInfo; setIsLoading: React.Dispatch>; + isDuplicateModalOpen: boolean; + setIsDuplicateModalOpen: React.Dispatch>; } // 직접 입력 화면 @@ -35,6 +39,8 @@ export const AddGiftWithoutLinkLayout = ({ modalStatus, addGiftInfo, setIsLoading, + isDuplicateModalOpen, + setIsDuplicateModalOpen, }: AddGiftWithLinkLayoutProps) => { const [isActivated, setIsActivated] = useState( !!addGiftInfo.name && !!addGiftInfo.cost && !!addGiftInfo.url && !!addGiftInfo.imageUrl, @@ -48,6 +54,8 @@ export const AddGiftWithoutLinkLayout = ({ const [, setPreviewImage] = useState(null); const [isModalOpen, setIsModalOpen] = useState(modalStatus); + const { gifteeName } = useUpdateGifteeNameContext(); + const checkPriceNull = (price: number | null) => { if (price === null) { return 0; @@ -71,6 +79,12 @@ export const AddGiftWithoutLinkLayout = ({ 불러올 수 없어요
)} + {isDuplicateModalOpen && ( + setIsDuplicateModalOpen(false)}> + 선물방에 이미 +
등록된 상품이에요 + + )} ); diff --git a/src/components/GiftAdd/AddGiftLink/GiftAddFirstLinkLayout/GiftAddFirstLinkLayout.tsx b/src/components/GiftAdd/AddGiftLink/GiftAddFirstLinkLayout/GiftAddFirstLinkLayout.tsx index a550c810..d3f7fc3c 100644 --- a/src/components/GiftAdd/AddGiftLink/GiftAddFirstLinkLayout/GiftAddFirstLinkLayout.tsx +++ b/src/components/GiftAdd/AddGiftLink/GiftAddFirstLinkLayout/GiftAddFirstLinkLayout.tsx @@ -8,6 +8,7 @@ import Title from '../../../common/title/Title'; import usePostOpenGraph from '../../../../hooks/queries/etc/usePostOpengraph'; import { OpenGraphResponseType } from '../../../../types/etc'; import { AddGiftInfo } from '../../../../types/gift'; +import { useUpdateGifteeNameContext } from '../../../../context/GifteeName/GifteeNameContext'; interface GiftAddFirstLinkLayoutProps { setStep: React.Dispatch>; @@ -20,6 +21,7 @@ interface GiftAddFirstLinkLayoutProps { setModalStatus: React.Dispatch>; updateAddGiftInfo: (newInfo: Partial) => void; addGiftInfo: AddGiftInfo; + // gifteeName: string; } const GiftAddFirstLinkLayout = ({ @@ -32,11 +34,15 @@ const GiftAddFirstLinkLayout = ({ setModalStatus, updateAddGiftInfo, addGiftInfo, + // gifteeName }: GiftAddFirstLinkLayoutProps) => { const [isActivated, setIsActivated] = useState(!!addGiftInfo.url); const [text, setText] = useState(addGiftInfo.url); const { mutation } = usePostOpenGraph({ body: { BaseURL: text } }); + const { gifteeName } = useUpdateGifteeNameContext(); + + const fetchOpenGraph = (BaseUrl: string) => { try { const response = mutation.mutate( @@ -78,6 +84,7 @@ const GiftAddFirstLinkLayout = ({ step={step} url={text} updateAddGiftInfo={updateAddGiftInfo} + gifteeName={gifteeName} /> diff --git a/src/components/GiftAdd/AddGiftLink/common/LinkAddHeader/LinkAddHeader.tsx b/src/components/GiftAdd/AddGiftLink/common/LinkAddHeader/LinkAddHeader.tsx index 272f2861..1053ad68 100644 --- a/src/components/GiftAdd/AddGiftLink/common/LinkAddHeader/LinkAddHeader.tsx +++ b/src/components/GiftAdd/AddGiftLink/common/LinkAddHeader/LinkAddHeader.tsx @@ -12,6 +12,7 @@ interface LinkAddHeaderProps { imageUrl?: string; url?: string; updateAddGiftInfo: (newInfo: Partial<AddGiftInfo>) => void; + gifteeName: string; } const LinkAddHeader = ({ @@ -23,6 +24,7 @@ const LinkAddHeader = ({ imageUrl, url, updateAddGiftInfo, + gifteeName }: LinkAddHeaderProps) => { const onClickBackBtn = () => { if (step === 1) { @@ -45,7 +47,7 @@ const LinkAddHeader = ({ cursor: 'pointer', }} /> - <MiniTimer targetDate={targetDate} /> + <MiniTimer targetDate={targetDate} giftee={gifteeName}/> </S.LinkAddHeaderWrapper> ); }; diff --git a/src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx b/src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx index bb234e3a..d20de60d 100644 --- a/src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx +++ b/src/components/GiftAdd/GiftAddPageLayout/GiftAddPageLayout.tsx @@ -21,12 +21,14 @@ interface GiftAddPageLayoutProps { const GiftAddPageLayout = ({ targetDate, roomId, setStep, setItemNum }: GiftAddPageLayoutProps) => { const roomIdNumber = parseInt(roomId); const { data } = useGetMyGift({ roomId: roomIdNumber }); - setItemNum(data.data.myGiftDtoList.length); + + const gifteeName = data.data.gifteeName; + setItemNum(data.data.myGiftsResponseDto.myGiftDtoList.length); const parsedRoomId = parseInt(roomId); const { mutation } = useDeleteMyGift(parsedRoomId); - const myGiftData = data.data.myGiftDtoList; + const myGiftData = data.data.myGiftsResponseDto.myGiftDtoList; const adPrice = '39,000'; const [isModalOpen, setIsModalOpen] = useState(false); @@ -59,7 +61,7 @@ const GiftAddPageLayout = ({ targetDate, roomId, setStep, setItemNum }: GiftAddP </DeleteModal> )} <GiftAddPageLayoutHeader title={'내가 등록한 선물'} /> - <MiniTimer targetDate={targetDate || ''} /> + <MiniTimer targetDate={targetDate || ''} giftee={gifteeName} /> <S.AddButtonsWrapper> {myGiftData.map((item, index) => ( <GiftAddButtonsWrapper diff --git a/src/components/GiftHome/CountDownTimer/CountDownTimer.tsx b/src/components/GiftHome/CountDownTimer/CountDownTimer.tsx index 63ca44cd..ec7e18cb 100644 --- a/src/components/GiftHome/CountDownTimer/CountDownTimer.tsx +++ b/src/components/GiftHome/CountDownTimer/CountDownTimer.tsx @@ -1,15 +1,24 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import * as S from './CountDownTimer.styled'; import { IcTimeColon } from '../../../assets/svg'; import CountDownCard from './ CountDownCard/CountDownCard'; import { useCountDown } from '../../../hooks/useCountDown'; +import useHandleCountDownZero from '../../../hooks/gift/useHandleCountDownZero'; interface CountdownTimerProps { targetDate: Date; + giftee: string; } -const CountdownTimer: React.FC<CountdownTimerProps> = ({ targetDate }) => { +const CountdownTimer: React.FC<CountdownTimerProps> = ({ targetDate, giftee }) => { const [days, hours, minutes, seconds] = useCountDown(targetDate.toISOString()); + const handleCountDownZero = useHandleCountDownZero(giftee); + useEffect(() => { + if (hours <= 0 && minutes <= 0 && seconds <= 0) { + handleCountDownZero(); + } + }, [hours, minutes, seconds, useHandleCountDownZero]); + return ( <S.TimerWrapper> {days > 0 ? ( diff --git a/src/components/GiftHome/GiftHomeHeader/GiftHomeHeader.style.ts b/src/components/GiftHome/GiftHomeHeader/GiftHomeHeader.style.ts deleted file mode 100644 index 051d8a24..00000000 --- a/src/components/GiftHome/GiftHomeHeader/GiftHomeHeader.style.ts +++ /dev/null @@ -1,15 +0,0 @@ -import styled from 'styled-components'; - -export const GiftHomeHeaderWrapper = styled.article` - position: fixed; - top: 0; - left: 0; - - width: 100%; - height: 5.6rem; - padding: 0 1.6rem 0 0.7rem; - margin-bottom: 0.4rem; - - ${({ theme }) => theme.mixin.flexBox({ align: 'center', justify: 'space-between' })}; - background-color: ${({ theme }) => theme.colors.white}; -`; diff --git a/src/components/GiftHome/GiftHomeHeader/GiftHomeHeader.tsx b/src/components/GiftHome/GiftHomeHeader/GiftHomeHeader.tsx deleted file mode 100644 index d8ff6f79..00000000 --- a/src/components/GiftHome/GiftHomeHeader/GiftHomeHeader.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { useNavigate } from 'react-router-dom'; -import { IcLeft, IcMenu } from '../../../assets/svg'; -import * as S from './GiftHomeHeader.style'; - -const GiftHomeHeader = () => { - const navigate = useNavigate(); - return ( - <S.GiftHomeHeaderWrapper> - <IcLeft - style={{ width: '3.6rem', height: '3.6rem', cursor: 'pointer' }} - onClick={() => navigate('/mypage')} - /> - <IcMenu style={{ width: '2.8rem', height: '2.8rem', cursor: 'pointer' }} /> - </S.GiftHomeHeaderWrapper> - ); -}; - -export default GiftHomeHeader; diff --git a/src/components/GiftHome/GiftHomeSummary/GiftHomeSummary.tsx b/src/components/GiftHome/GiftHomeSummary/GiftHomeSummary.tsx index 86e5095e..03f93cc3 100644 --- a/src/components/GiftHome/GiftHomeSummary/GiftHomeSummary.tsx +++ b/src/components/GiftHome/GiftHomeSummary/GiftHomeSummary.tsx @@ -2,7 +2,6 @@ import IcLink from '../../../assets/svg/IcLink'; import useClipboard from '../../../hooks/useCopyClip'; import { RoomInfoType } from '../../../types/room'; import CountDownTimer from '../CountDownTimer/CountDownTimer'; -// import GiftHomeHeader from '../GiftHomeHeader/GiftHomeHeader'; import * as S from './GiftHomeSummary.styled'; interface GiftHomeSummaryProps { @@ -21,13 +20,13 @@ export const GiftHomeSummary = ({ data }: GiftHomeSummaryProps) => { </S.GiftHomeSummaryTitle> <S.GiftHomeSummaryTitle>선물을 함께 준비해요</S.GiftHomeSummaryTitle> <S.CopyLinkBtnWrapper - onClick={() => handleCopyToClipboard(`${baseURL}/result/${data.invitationCode}`)} + onClick={() => handleCopyToClipboard(`${baseURL}result/${data.invitationCode}`)} > <IcLink style={{ width: '1.7rem', height: '1.7rem' }} /> <S.Caption02Text>초대 링크 복사</S.Caption02Text> </S.CopyLinkBtnWrapper> <S.Body09Text>선물 토너먼트까지</S.Body09Text> - <CountDownTimer targetDate={new Date(data.tournamentStartDate)} /> + <CountDownTimer targetDate={new Date(data.tournamentStartDate)} giftee={data.gifteeName}/> </S.GiftHomeSummaryWrapper> ); }; diff --git a/src/components/OnBoardingSteps/Step01/Step01.style.ts b/src/components/OnBoardingSteps/Step01/Step01.style.ts index 18e04150..8ebc3292 100644 --- a/src/components/OnBoardingSteps/Step01/Step01.style.ts +++ b/src/components/OnBoardingSteps/Step01/Step01.style.ts @@ -22,6 +22,7 @@ export const NameInputWrapper = styled.div<{ $hasContent: boolean; $maxLengthRea export const TextField = styled.div` display: flex; + flex: 1; `; export const IconField = styled.div` diff --git a/src/components/OnBoardingSteps/Step03/Step03.style.ts b/src/components/OnBoardingSteps/Step03/Step03.style.ts index 12a80b47..7d8a3278 100644 --- a/src/components/OnBoardingSteps/Step03/Step03.style.ts +++ b/src/components/OnBoardingSteps/Step03/Step03.style.ts @@ -39,6 +39,8 @@ export const Input = styled.input` color: ${({ theme }) => theme.colors.black}; ${({ theme }) => theme.fonts.body_06}; } + + caret-color: transparent; `; export const IconWrapper = styled.div` diff --git a/src/components/OnBoardingSteps/Step03/Step03.tsx b/src/components/OnBoardingSteps/Step03/Step03.tsx index 506df31a..b45846eb 100644 --- a/src/components/OnBoardingSteps/Step03/Step03.tsx +++ b/src/components/OnBoardingSteps/Step03/Step03.tsx @@ -25,7 +25,7 @@ const GiftDelivery = (props: GiftDeliveryProps) => { <br /> 전달하실 예정인가요? - + { onChange={(e) => e.preventDefault()} /> - + {isOpen && ( diff --git a/src/components/OnBoardingSteps/Step04/Step04.style.ts b/src/components/OnBoardingSteps/Step04/Step04.style.ts index ba78f39a..dbcaf63d 100644 --- a/src/components/OnBoardingSteps/Step04/Step04.style.ts +++ b/src/components/OnBoardingSteps/Step04/Step04.style.ts @@ -17,7 +17,7 @@ export const TextField = styled.div` display: flex; align-items: center; justify-content: center; - /* background-color:; */ + flex: 1; `; export const IconField = styled.div` @@ -35,11 +35,14 @@ export const Input = styled.input` border: none; outline: none; ${({ theme }) => theme.fonts.body_05}; + color: ${({ theme }) => theme.colors.black}; input::placeholder { color: ${({ theme }) => theme.colors.G_07}; ${({ theme }) => theme.fonts.body_05}; } + + caret-color: transparent; `; export const Container = styled.div<{ $hasContent: boolean }>` diff --git a/src/components/OnBoardingSteps/Step04/Step04.tsx b/src/components/OnBoardingSteps/Step04/Step04.tsx index 4aa7dbd9..be481832 100644 --- a/src/components/OnBoardingSteps/Step04/Step04.tsx +++ b/src/components/OnBoardingSteps/Step04/Step04.tsx @@ -17,7 +17,7 @@ const SetTournamentSchedule = (props: SetTournamentScheduleProps) => { const { onNext } = props; const { isOpen, disabledDays, openCalendar, handleDateSelect, onboardingInfo } = useTournamentScheduleCalendar(); - const { isTimerOpen, selectedTime, setSelectedTime, handleTimerSelect } = useTimerOpen(); + const { isTimerOpen, selectedTime, handleTimerSelect } = useTimerOpen(); const isActivated = !!onboardingInfo.tournamentStartDate && !!selectedTime; /**@see 시간의 상태 값을 뒤로가기 시 저장하여 보여줄 수 있지만 현재는 유저의 클릭을 캘린더 먼저로 의도하기 위한 조치를 진행하였습니다 */ @@ -40,7 +40,7 @@ const SetTournamentSchedule = (props: SetTournamentScheduleProps) => { - + { {/* 타이머 */} - - setSelectedTime(e.target.value)} - disabled - /> - handleTimerSelect(time)} /> diff --git a/src/components/OnBoardingSteps/Step04/TimePicker.tsx b/src/components/OnBoardingSteps/Step04/TimePicker.tsx index 54a137de..40b0819b 100644 --- a/src/components/OnBoardingSteps/Step04/TimePicker.tsx +++ b/src/components/OnBoardingSteps/Step04/TimePicker.tsx @@ -27,21 +27,30 @@ const TimePicker = ({ onSelect }: TimePickerProps) => { }; return ( - - handleTimeSelect(e.target.value)} - style={{ display: 'flex', opacity: 0 }} - /> - - + + + handleTimeSelect(e.target.value)} + style={{ display: 'flex', opacity: 0 }} + /> + + + ); }; diff --git a/src/components/OnBoardingSteps/Step05/SelectTimeOptions.tsx b/src/components/OnBoardingSteps/Step05/SelectTimeOptions.tsx index 939eef4c..bca3eee1 100644 --- a/src/components/OnBoardingSteps/Step05/SelectTimeOptions.tsx +++ b/src/components/OnBoardingSteps/Step05/SelectTimeOptions.tsx @@ -18,7 +18,7 @@ const SelectTimeOptions = (props: SelectTimeOptionsProps) => { void; + giftee?: string; +} +const OnboardingFinalFooter = (props: OnboardingFinalFooterProps) => { + const { onClick, giftee } = props; + // const { handleCopyToClipboard } = useClipboard(); + + return ( + + + // handleCopyToClipboard(`${PAGE.LOCAL_RESULT_PAGE}${invitationCode}`) + // handleCopyToClipboard(`${PAGE.DEPLOY_RESULT_PAGE}${invitationCode}`) + useHandleShare( + `${giftee}님을 위한 선물방이 개설됐어요`, + `${giftee}님을 위한 선물방이 개설됐어요`, + ) + } + > + 공유하기 + + + 입장하기 + + + ); +}; + +const OnboardingFinalFooterWrapper = styled.div` + display: flex; + justify-content: center; + + gap: 0.8rem; + height: 5.2rem; + bottom: 2rem; + margin-top: 3.2rem; +`; + +export default OnboardingFinalFooter; diff --git a/src/components/OnBoardingSteps/Step06/OnboardingFinalHeader.style.ts b/src/components/OnBoardingSteps/Step06/OnboardingFinalHeader.style.ts new file mode 100644 index 00000000..d7d2c59a --- /dev/null +++ b/src/components/OnBoardingSteps/Step06/OnboardingFinalHeader.style.ts @@ -0,0 +1,10 @@ +import styled from 'styled-components'; + +export const OnboardingFinalHeaderWrapper = styled.div` + ${({ theme: { mixin } }) => mixin.flexBox({ justify: 'flex-end', align: 'center' })}; + width: 100%; + height: 5.6rem; + padding: 0 1.8rem; + z-index: 999; + top: 0rem; +`; diff --git a/src/components/OnBoardingSteps/Step06/OnboardingFinalHeader.tsx b/src/components/OnBoardingSteps/Step06/OnboardingFinalHeader.tsx index 82488f84..46af3d6e 100644 --- a/src/components/OnBoardingSteps/Step06/OnboardingFinalHeader.tsx +++ b/src/components/OnBoardingSteps/Step06/OnboardingFinalHeader.tsx @@ -1,7 +1,25 @@ -import StartHeader from '../../../pages/Start/LogoHeader/LogoHeader'; +import { useNavigate } from 'react-router'; +import * as S from './OnboardingFinalHeader.style'; +import { IcHome, IcProfile } from '../../../assets/svg'; const OnboardingFinalHeader = () => { - return ; + const navigate = useNavigate(); + + const handleMyPageIcon = () => { + navigate(`/mypage`); + }; + + const handleSettingHomeIcon = () => { + navigate(`/`); + }; + + return ( + + + + + + ); }; export default OnboardingFinalHeader; diff --git a/src/components/OnBoardingSteps/Step06/Step06.style.ts b/src/components/OnBoardingSteps/Step06/Step06.style.ts index 31a7d955..1e28639c 100644 --- a/src/components/OnBoardingSteps/Step06/Step06.style.ts +++ b/src/components/OnBoardingSteps/Step06/Step06.style.ts @@ -1,108 +1,105 @@ import styled from 'styled-components'; export const OnboardingFinalWrapper = styled.div` - ${({ theme }) => theme.mixin.flexBox({ align: 'center', justify: 'center' })} + ${({ theme }) => theme.mixin.flexCenter({})} width: 100%; - /* border-bottom: 0.1rem solid ${({ theme }) => theme.colors.G_02}; */ - position: relative; - overflow: hidden; +`; + +export const IconWrapper = styled.div` + ${({ theme }) => theme.mixin.flexCenter({})} `; export const TitleWrapper = styled.div` - display: flex; - flex-direction: column; - margin-bottom: 8rem; + ${({ theme }) => theme.mixin.flexCenter({})} + margin-top: 1.6rem; `; -export const GradientImg = styled.div` - background-size: cover; - background-blend-mode: overlay; - /* 이렇게 height를 의도적으로 주는 방법밖에 없나... 하 */ - height: 36.5rem; - width: 100%; - position: relative; - &::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%); - z-index: 1; - } -`; - -export const TitleContainer = styled.div` - ${({ theme }) => theme.mixin.flexBox({ direction: 'column', align: 'flex-start' })} - position: absolute; - bottom: 0; - left: 0; - right: 0; - color: white; - z-index: 1; - gap: 1.6rem; - margin-left: 2rem; -`; - -export const InfoWrapper = styled.div` - ${({ theme }) => - theme.mixin.inlineFlexBox({ direction: 'column', align: 'center', justify: 'center' })}; +export const ParticipantsTitleWrapper = styled.div` + ${({ theme }) => theme.mixin.flexCenter({})} + margin-top: 0.4rem; +`; + +export const DetailWrapper = styled.div` + ${({ theme }) => theme.mixin.flexCenter({})} + margin-top: 3.2rem; gap: 1.2rem; - width: 100%; - height: 12.8rem; - margin-top: 2.8rem; `; -export const InfoDetailWrapper = styled.div` - ${({ theme }) => - theme.mixin.flexBox({ direction: 'row', align: 'center', justify: 'space-between' })}; - gap: 5rem; - width: 31.5rem; +export const SecondTitleWrapper = styled.div` + ${({ theme }) => theme.mixin.flexBox({ align: 'center', justify: 'center' })} +`; + +export const GifterNumberWrapper = styled.div` + ${({ theme }) => theme.mixin.flexCenter({})} + margin-top: 0.9rem; +`; + +export const GifterNumberText = styled.p` + color: ${({ theme }) => theme.colors.G_08}; + ${({ theme }) => theme.fonts.body_09}; +`; + +export const ProgressLineAndDetailContainer = styled.div` + ${({ theme }) => theme.mixin.flexCenter({ direction: 'row' })}; + gap: 1.2rem; +`; + +export const InfoContainer = styled.div` + ${({ theme }) => theme.mixin.flexBox({ align: 'center' })} + width: 27.9rem; + height: 6.1rem; + flex-shrink: 0; + border-radius: 1.2rem; + border: 1px solid ${({ theme }) => theme.colors.G_02}; + background: #fff; + gap: 2.3rem; +`; + +export const TournamentProceedWrapper = styled.div` + ${({ theme }) => theme.mixin.flexBox({ align: 'center' })} + width: 27.9rem; + height: 6.1rem; + flex-shrink: 0; + border-radius: 1.2rem; + border: 1px dashed ${({ theme }) => theme.colors.G_02}; + background: #fff; + gap: 2.3rem; `; -export const InfoTitle = styled.p` +export const InfoContainerPresent = styled.div` + ${({ theme }) => theme.mixin.flexBox({ align: 'center' })} + width: 27.9rem; + height: 6.1rem; + flex-shrink: 0; + border-radius: 1.2rem; + border: 1px solid ${({ theme }) => theme.colors.G_02}; + background: #fff; + gap: 4.6rem; +`; + +export const InfoContainerTitle = styled.p` color: ${({ theme }) => theme.colors.G_07}; ${({ theme }) => theme.fonts.body_10}; + margin-left: 2.4rem; `; -export const InfoDetail = styled.p` - color: ${({ theme }) => theme.colors.black}; - ${({ theme }) => theme.fonts.body_07}; -`; - -export const KakaoLinkCopyBtn = styled.div` - ${({ theme }) => - theme.mixin.flexCenter({ direction: 'row', align: 'center', justify: 'center' })}; - width: 16.3rem; - padding: 1.5rem 2.2rem 1.6rem 2.2rem; - gap: 1rem; - border-radius: 10rem; - border: none; - background: #fee500; +export const InfoContainerTitleWrapper = styled.div` + ${({ theme }) => theme.mixin.flexCenter({ direction: 'row' })} + gap: 2.3rem +`; + +export const InfoContainerDetail = styled.p` color: ${({ theme }) => theme.colors.black}; ${({ theme }) => theme.fonts.body_09}; - z-index: 1; `; export const BtnWrapper = styled.div` - ${({ theme }) => - theme.mixin.flexCenter({ direction: 'row', align: 'center', justify: 'center' })}; - color: ${({ theme }) => theme.colors.black}; - gap: 1.2rem; - width: 100%; - margin-top: 1.7rem; -`; - -export const LinkCopyBtn = styled.button` - ${({ theme }) => - theme.mixin.flexCenter({ direction: 'row', align: 'center', justify: 'center' })}; - width: 16.3rem; - padding: 1.5rem 2.2rem 1.6rem 2.2rem; - gap: 1rem; - border-radius: 10rem; - border: none; - background: ${({ theme }) => theme.colors.G_02}; - color: ${({ theme }) => theme.colors.black}; - ${({ theme }) => theme.fonts.body_09}; + margin-top: 3.2rem; +`; + +export const ImageUrlWrapper = styled.img` + width: 6.4rem; + height: 6.4rem; + border-radius: 5.3rem; + background-color: pink; `; diff --git a/src/components/OnBoardingSteps/Step06/Step06.tsx b/src/components/OnBoardingSteps/Step06/Step06.tsx index 000d4f2f..f398117f 100644 --- a/src/components/OnBoardingSteps/Step06/Step06.tsx +++ b/src/components/OnBoardingSteps/Step06/Step06.tsx @@ -1,28 +1,48 @@ import Title from '../../common/title/Title'; import * as S from './Step06.style'; -import { IcKakaoShare, IcLink } from '../../../assets/svg'; -import OnBoardingBtn from '../onboardingBtn/OnBoardingBtn'; +import { + IcAfterTournamentProgressLine, + IcBeforeTournamentProgressLine, + IcOnboardingFinal, +} from '../../../assets/svg'; import { useEffect } from 'react'; -import { useNavigate } from 'react-router-dom'; -import OnboardingFinalHeader from './OnboardingFinalHeader'; -import useClipboard from '../../../hooks/useCopyClip'; -import { useKakaoShare } from '../../../hooks/queries/onboarding/useKakaoShare'; import { useOnboardingContext } from '../../../context/Onboarding/OnboardingContext'; import useFormatDate from '../../../hooks/onboarding/useFormatDate'; +import OnboardingFinalFooter from './OnboardingFinalFooter'; +import { addHours, format } from 'date-fns'; +import { useNavigate } from 'react-router-dom'; +import OnboardingFinalHeader from './OnboardingFinalHeader'; interface OnboardingFinalProps { invitationCode: string; roomId: number; } +const DURATION_MAPPING = { + SIX_HOURS: 6, + TWELVE_HOURS: 12, + EIGHTEEN_HOURS: 18, + TWENTY_FOUR_HOURS: 24, +}; + const OnboardingFinal = (props: OnboardingFinalProps) => { const { invitationCode, roomId } = props; const { onboardingInfo } = useOnboardingContext(); - const { infoDetails } = useFormatDate(); + const { formatDuration, formatDate } = useFormatDate(); const navigate = useNavigate(); - const { handleCopyToClipboard } = useClipboard(); - const step = 6; + const navigateRoom = () => { + navigate(`/gift-home/${roomId}`); + }; + + const tournamentEndDate = addHours( + new Date(onboardingInfo.tournamentStartDate), + DURATION_MAPPING[onboardingInfo.tournamentDuration as keyof typeof DURATION_MAPPING] as number, + ); + + const formattedEndDate = format(tournamentEndDate, 'yyyy.MM.dd(EEE)'); + const isDeliveryBeforeEnd = + new Date(onboardingInfo.deliveryDate).getTime() < tournamentEndDate.getTime(); /** @see 카카오 공유하기를 위한 useEffect */ useEffect(() => { @@ -35,54 +55,89 @@ const OnboardingFinal = (props: OnboardingFinalProps) => { return ( <> - -
- - - - - - {`${onboardingInfo.gifteeName}님을 위한`} <br /> 선물 준비방이 개설됐어요 - - navigate(`/gift-home/${roomId}`)} - isActivated={true} - > - 입장 - - - - -
- - - {infoDetails.map((item, index) => ( - - {item.title} - {item.detail} - - ))} - - - - // TODO 추후 로컬 주소를 배포 주소로 변경 및 주소 상수처리 - // handleCopyToClipboard(`http://localhost:5173/result/${invitationCode}`) - handleCopyToClipboard(`http://sweetgift.kr/result/${invitationCode}`) - } - > - - 링크 복사 - - useKakaoShare(invitationCode, onboardingInfo.gifteeName)} - > - - 카카오톡 공유 - - +
+ +
+ + + + + {`${onboardingInfo.gifteeName}님을 위한`} + + + 선물 준비방이 개설됐어요 + +
+ + {isDeliveryBeforeEnd === true ? ( + + ) : ( + + )} + + + + 선물 등록 마감 + + {formatDate(onboardingInfo.tournamentStartDate)} + + + + + 토너먼트 진행 + + {formatDuration(onboardingInfo.tournamentDuration)} + + + + {/* isDeliveryBeforeEnd가 true인 경우와 false인 경우에 따라 렌더링하는 순서가 달라짐 */} + {isDeliveryBeforeEnd === true ? ( + <> + + 토너먼트 종료 + + {formatDate(formattedEndDate, false)} + + + + + 선물 전달 + + {formatDate(onboardingInfo.deliveryDate, false)} + + + + ) : ( + <> + + 선물 전달 + + {formatDate(onboardingInfo.deliveryDate, false)} + + + + + 토너먼트 종료 + + {formatDate(formattedEndDate, false)} + + + + )} + + + + +
); }; diff --git a/src/components/common/Button/Radio/BtnRadio.style.ts b/src/components/common/Button/Radio/BtnRadio.style.ts index 549e7e3e..a0521988 100644 --- a/src/components/common/Button/Radio/BtnRadio.style.ts +++ b/src/components/common/Button/Radio/BtnRadio.style.ts @@ -2,7 +2,7 @@ import { ButtonHTMLAttributes } from 'react'; import styled, { css } from 'styled-components'; type WrapperProps = ButtonHTMLAttributes & { - isSelected?: boolean; + $isSelected?: boolean; }; export const Wrapper = styled.button` @@ -23,8 +23,8 @@ export const Wrapper = styled.button` background-color: ${({ theme: { colors } }) => colors.white}; } - ${({ isSelected, theme: { colors } }) => - isSelected && + ${({ $isSelected, theme: { colors } }) => + $isSelected && css` /* 선택된 상태에서의 스타일 */ border: 1px solid ${colors.P_06}; diff --git a/src/components/common/Button/Radio/BtnRadio.tsx b/src/components/common/Button/Radio/BtnRadio.tsx index 63234f32..f5e58171 100644 --- a/src/components/common/Button/Radio/BtnRadio.tsx +++ b/src/components/common/Button/Radio/BtnRadio.tsx @@ -7,7 +7,7 @@ type BtnRadioProps = ButtonHTMLAttributes & { time: string; period: string; customStyle?: React.CSSProperties; - $isSelected?: boolean; + isSelected?: boolean; onTimeSelect?: (time: string) => void; setSelectedTime?: (time: string) => VoidFunction; $isAfterDelivery: boolean; @@ -22,7 +22,7 @@ const BtnRadio = ({ onTimeSelect, setSelectedTime, $isAfterDelivery, - $isSelected, + isSelected, }: BtnRadioProps) => { return ( - {$isSelected ? ( + {isSelected ? ( ) : ( diff --git a/src/components/common/MiniTimer/MiniTimer.tsx b/src/components/common/MiniTimer/MiniTimer.tsx index bacc695c..219bbdd5 100644 --- a/src/components/common/MiniTimer/MiniTimer.tsx +++ b/src/components/common/MiniTimer/MiniTimer.tsx @@ -1,23 +1,37 @@ +import { useEffect } from 'react'; import IcClock from '../../../assets/svg/IcClock'; import { useCountDown } from '../../../hooks/useCountDown'; import * as S from './MiniTimer.styled'; +import useHandleCountDownZero from '../../../hooks/gift/useHandleCountDownZero'; interface MiniTimerProps { targetDate: string; + giftee: string; } -const MiniTimer = ({ targetDate }: MiniTimerProps) => { +const MiniTimer = ({ targetDate, giftee }: MiniTimerProps) => { const [days, hours, minutes, seconds] = useCountDown(targetDate); - // 빌드 에러 해결 - console.log(days); + const handleCountDownZero = useHandleCountDownZero(giftee); + useEffect(() => { + if (hours <= 0 && minutes <= 0 && seconds <= 0) { + handleCountDownZero(); + } + }, [hours, minutes, seconds, useHandleCountDownZero]); + return ( - {hours.toString().padStart(2, '0')}:{minutes.toString().padStart(2, '0')}: - {seconds.toString().padStart(2, '0')} + {days > 0 ? ( + D - {days} + ) : ( + + {hours.toString().padStart(2, '0')}:{minutes.toString().padStart(2, '0')}: + {seconds.toString().padStart(2, '0')} + + )} ); diff --git a/src/components/common/Modal/DeleteModal.style.ts b/src/components/common/Modal/DeleteModal.style.ts index f8194f5f..5288bce8 100644 --- a/src/components/common/Modal/DeleteModal.style.ts +++ b/src/components/common/Modal/DeleteModal.style.ts @@ -12,6 +12,7 @@ export const Overlay = styled.div` export const DeleteModalWrapper = styled.div` display: flex; + justify-content: center; justify-content: flex-end; align-items: center; flex-direction: column; diff --git a/src/components/common/Modal/DeleteModal.tsx b/src/components/common/Modal/DeleteModal.tsx index dd391a6d..6e764e5e 100644 --- a/src/components/common/Modal/DeleteModal.tsx +++ b/src/components/common/Modal/DeleteModal.tsx @@ -15,7 +15,10 @@ const DeleteModal = ({ children, onClickDelete, onClickCancel, clickedItem }: De <> - + {children} theme.fonts.body_03}; +`; diff --git a/src/components/common/Modal/DuplicateModal.tsx b/src/components/common/Modal/DuplicateModal.tsx new file mode 100644 index 00000000..219397e1 --- /dev/null +++ b/src/components/common/Modal/DuplicateModal.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import * as S from './DuplicateModal.style'; +import BtnMedium from '../Button/Cta/medium/BtnMedium'; + +interface DuplicateModalProps { + children: React.ReactNode; + onConfirmClick?: () => void; +} + +const DuplicateModal = ({ children, onConfirmClick }: DuplicateModalProps) => { + return ( + <> + + + {children} + + 다시 등록하기 + + + + ); +}; + +export default DuplicateModal; diff --git a/src/components/common/Modal/Modal.tsx b/src/components/common/Modal/Modal.tsx index a91e87dd..17d407ac 100644 --- a/src/components/common/Modal/Modal.tsx +++ b/src/components/common/Modal/Modal.tsx @@ -1,6 +1,7 @@ import React from 'react'; import * as S from './Modal.style'; import BtnMedium from '../Button/Cta/medium/BtnMedium'; +import { IcCancel } from '../../../assets/svg'; interface ModalProps { children: React.ReactNode; @@ -12,6 +13,10 @@ const Modal = ({ children, onConfirmClick }: ModalProps) => { <> + {children} 확인 diff --git a/src/context/AddGift/AddGiftContext.tsx b/src/context/AddGift/AddGiftContext.tsx index dd176a9c..9853a908 100644 --- a/src/context/AddGift/AddGiftContext.tsx +++ b/src/context/AddGift/AddGiftContext.tsx @@ -5,7 +5,6 @@ interface AddGiftInfoContext { addGiftInfo: AddGiftInfo; updateAddGiftInfo: (newInfo: Partial) => void; } - const initialAddGiftInfo: AddGiftInfo = { name: '', cost: 0, diff --git a/src/context/DuplicateModal/DuplicateModalContext.tsx b/src/context/DuplicateModal/DuplicateModalContext.tsx new file mode 100644 index 00000000..771dce4d --- /dev/null +++ b/src/context/DuplicateModal/DuplicateModalContext.tsx @@ -0,0 +1,36 @@ +import { PropsWithChildren, createContext, useContext, useState } from 'react'; + +interface DuplicateModalContextType { + modalStatus: boolean; + openModal: () => void; + closeModal: () => void; +} +const initialContext: DuplicateModalContextType = { + modalStatus: false, + openModal: () => {}, + closeModal: () => {}, +}; + +const DuplicateModalContext = createContext(initialContext); + +export const useDuplicateModalContext = () => useContext(DuplicateModalContext); + +export const DuplicateModalProvider = ({ children }: PropsWithChildren) => { + const [modalStatus, setModalStatus] = useState(false); + + const openModal = () => { + console.log('open modal'); + setModalStatus(true); + }; + + const closeModal = () => { + console.log('close modal'); + setModalStatus(false); + }; + + return ( + + {children} + + ); +}; diff --git a/src/context/GifteeName/GifteeNameContext.tsx b/src/context/GifteeName/GifteeNameContext.tsx new file mode 100644 index 00000000..5dc5d58d --- /dev/null +++ b/src/context/GifteeName/GifteeNameContext.tsx @@ -0,0 +1,37 @@ +import { PropsWithChildren, createContext, useContext, useMemo, useState } from 'react'; + +interface GifteeNameContextInfo { + gifteeName: string; + updateGifteeName: (newInfo: string) => void; +} + +const GifteeNameContext = createContext({ + gifteeName: '', + updateGifteeName: () => {}, +}); + +export const useUpdateGifteeNameContext = () => useContext(GifteeNameContext); + +export const UpdateGifteeNameProvider = ({ children }: PropsWithChildren) => { + const [gifteeName, setGifteeName] = useState(''); + + const updateGifteeName = (newState: string) => { + setGifteeName(newState); + }; + + const UpdateGifteeNameContextValue = useMemo( + () => ({ + gifteeName, + updateGifteeName, + }), + [gifteeName], + ); + + return ( + + {children} + + ); +}; + +export default GifteeNameContext; diff --git a/src/core/routes.ts b/src/core/routes.ts new file mode 100644 index 00000000..d982b520 --- /dev/null +++ b/src/core/routes.ts @@ -0,0 +1,4 @@ +export const PAGE = Object.freeze({ + LOCAL_RESULT_PAGE: `http://localhost:5173/result/`, + DEPLOY_RESULT_PAGE: `http://sweetgift.kr/result/`, +}); diff --git a/src/hooks/common/useHandleShare.tsx b/src/hooks/common/useHandleShare.tsx new file mode 100644 index 00000000..1bcf7290 --- /dev/null +++ b/src/hooks/common/useHandleShare.tsx @@ -0,0 +1,14 @@ +export const useHandleShare = async (title: string, text: string) => { + try { + await navigator.share({ + title: title, + text: text, + url: window.location.href, + }); + } catch (error) { + console.error('Web Share API를 지원하지 않습니다.'); + } + return
; +}; + +export default useHandleShare; diff --git a/src/hooks/gift/useHandleCountDownZero.tsx b/src/hooks/gift/useHandleCountDownZero.tsx new file mode 100644 index 00000000..6a404205 --- /dev/null +++ b/src/hooks/gift/useHandleCountDownZero.tsx @@ -0,0 +1,14 @@ +import { useNavigate, useParams } from 'react-router-dom'; + +const useHandleCountDownZero = (giftee: string) => { + const navigate = useNavigate(); + const params = useParams(); + const roomId = params.roomId; + const handleCountDownZero = () => { + navigate(`/tournament/${giftee}/${roomId}`); + }; + + return handleCountDownZero; +}; + +export default useHandleCountDownZero; diff --git a/src/hooks/onboarding/useFormatDate.tsx b/src/hooks/onboarding/useFormatDate.tsx index feef7462..10bc067f 100644 --- a/src/hooks/onboarding/useFormatDate.tsx +++ b/src/hooks/onboarding/useFormatDate.tsx @@ -9,12 +9,12 @@ const useFormatDate = () => { const month = date.getMonth() + 1; const day = date.getDate(); const hours = date.getHours(); - const minutes = date.getMinutes(); + // const minutes = date.getMinutes(); if (includeTime) { - return `${year}.${month}.${day} (${getDayOfWeek(date)}) ${hours}시 ${minutes}분`; + return `${year}.${month}.${day}(${getDayOfWeek(date)}) ${hours}시`; } else { - return `${year}.${month}.${day} (${getDayOfWeek(date)})`; + return `${year}.${month}.${day}(${getDayOfWeek(date)})`; } }; @@ -53,6 +53,9 @@ const useFormatDate = () => { ]; return { infoDetails, + formatDate, + getDayOfWeek, + formatDuration, }; }; diff --git a/src/hooks/queries/gift/usePostGift.tsx b/src/hooks/queries/gift/usePostGift.tsx index ffe7eaa5..da7be360 100644 --- a/src/hooks/queries/gift/usePostGift.tsx +++ b/src/hooks/queries/gift/usePostGift.tsx @@ -4,9 +4,19 @@ import { AddGiftInfo, GiftPostRequestType } from '../../../types/gift'; import { useNavigate } from 'react-router-dom'; import { MY_GIFT_QUERY_KEY } from './useGetMyGift'; -export async function postNewGift(body: GiftPostRequestType) { - await post(`/gift`, body); -} +export const postNewGift = async (body: GiftPostRequestType) => { + try { + const response = await post(`/gift`, body); + console.log('response data', response.data); + return response.data; + } catch (error: any) { + console.log('확인확인', error.message); + if (error.message === '중복된 선물 등록입니다.') { + console.log('들어와~', error); + throw new Error(`${error}`); + } + } +}; export const usePostGift = ( roomId: number, @@ -14,6 +24,7 @@ export const usePostGift = ( setStep: React.Dispatch>, updateAddGiftInfo: (newInfo: Partial) => void, setIsLoading: React.Dispatch>, + setIsModalOpen: React.Dispatch>, ) => { const navigate = useNavigate(); @@ -31,6 +42,11 @@ export const usePostGift = ( }, onError: (error) => { console.log('선물 등록 에러!!', error.message); + if (error.message === 'Error: 중복된 선물 등록입니다.') { + console.log('잘 들어오고 있닝'); + setIsModalOpen(true); + return error; + } }, }); diff --git a/src/hooks/useCopyClip.tsx b/src/hooks/useCopyClip.tsx index b3bf4a5b..f87434c9 100644 --- a/src/hooks/useCopyClip.tsx +++ b/src/hooks/useCopyClip.tsx @@ -1,10 +1,21 @@ import { useCallback } from 'react'; +import { toast } from 'react-toastify'; const useClipboard = () => { const handleCopyToClipboard = useCallback(async (text: string) => { try { await navigator.clipboard.writeText(text); - alert('클립보드에 링크가 복사되었어요.'); + toast.info('링크 복사가 완료되었어요', { + position: 'bottom-center', + autoClose: 700, + hideProgressBar: true, + closeOnClick: false, + pauseOnHover: false, + draggable: false, + progress: undefined, + theme: 'colored', + icon: false, + }); } catch (err) { console.log(err); } diff --git a/src/pages/GiftAdd/GiftAddPage.tsx b/src/pages/GiftAdd/GiftAddPage.tsx index d1c2cf78..6734a85f 100644 --- a/src/pages/GiftAdd/GiftAddPage.tsx +++ b/src/pages/GiftAdd/GiftAddPage.tsx @@ -19,6 +19,7 @@ const GiftAddPage = () => { // case 2, 3 선물 등록 페이지 state들 const [openGraph, setOpenGraph] = useState({ title: '', image: '' }); const [modalStatus, setModalStatus] = useState(false); + const [duplicateModalStatus, setDuplicateModalStatus] = useState(false); const params = useParams(); const roomId = params.roomId; @@ -26,7 +27,6 @@ const GiftAddPage = () => { const roomIdNumber = parseInt(roomId || ''); const { addGiftInfo, updateAddGiftInfo } = useAddGiftContext(); - switch (step) { case 0: return ( @@ -71,6 +71,8 @@ const GiftAddPage = () => { addGiftInfo={addGiftInfo} updateAddGiftInfo={updateAddGiftInfo} setIsLoading={setIsLoading} + isModalOpen={duplicateModalStatus} + setIsModalOpen={setDuplicateModalStatus} /> ); @@ -90,6 +92,8 @@ const GiftAddPage = () => { openGraph={openGraph} updateAddGiftInfo={updateAddGiftInfo} setIsLoading={setIsLoading} + isDuplicateModalOpen={duplicateModalStatus} + setIsDuplicateModalOpen={setDuplicateModalStatus} /> ); } diff --git a/src/pages/GiftHome/GiftHome.tsx b/src/pages/GiftHome/GiftHome.tsx index c4ab8221..49b09f7c 100644 --- a/src/pages/GiftHome/GiftHome.tsx +++ b/src/pages/GiftHome/GiftHome.tsx @@ -1,23 +1,16 @@ import { useNavigate, useParams } from 'react-router-dom'; import GiftHome2030Gifts from '../../components/GiftHome/GiftHome2030Gifts/GiftHome2030Gifts'; import GiftHomeFriendsGifts from '../../components/GiftHome/GiftHomeFriendsGifts/GiftHomeFriendsGifts'; -import GiftHomeHeader from '../../components/GiftHome/GiftHomeHeader/GiftHomeHeader'; import GiftHomeSummary from '../../components/GiftHome/GiftHomeSummary/GiftHomeSummary'; import BtnFill from '../../components/common/Button/Cta/fill/BtnFill'; import * as S from './GiftHome.styled'; import useGetRoomInfo from '../../hooks/queries/room/useGetRoomInfo'; import GiftHomeMyGifts from './GiftHomeMyGifts/GiftHomeMyGifts'; -// import { useEffect } from 'react'; export default function GiftHome() { const params = useParams(); - // const location = useLocation(); - // const searchParams = new URLSearchParams(location.search); const roomId = params.roomId; const navigate = useNavigate(); - console.log('params', params); - // console.log('roomIdString', roomIdString); - // console.log('추출된 초대 코드', roomId); const { data } = useGetRoomInfo({ roomId: Number(roomId) }); const tournamentStartTime = data?.data.tournamentStartDate; @@ -28,7 +21,6 @@ export default function GiftHome() { return ( - {data?.data.roomMyGiftDtoList.length > 0 ? ( { - // const location = useLocation(); const params = useParams(); - console.log('params', params); - // const searchParams = new URLSearchParams(location.search); const roomId = params.roomId; - console.log('roomId', roomId); const targetDate = params.targetDate; const roomIdNumber = parseInt(roomId || ''); @@ -19,11 +15,8 @@ export const GiftHomeDetail = () => { return ( - - + + {data.data.hotProductDtoList.length > 0 ? ( data.data.hotProductDtoList.map((item, index) => ( diff --git a/src/pages/GiftHomeDetail/GiftHomeDetail2030.tsx b/src/pages/GiftHomeDetail/GiftHomeDetail2030.tsx index 3885db9b..226e8e71 100644 --- a/src/pages/GiftHomeDetail/GiftHomeDetail2030.tsx +++ b/src/pages/GiftHomeDetail/GiftHomeDetail2030.tsx @@ -6,14 +6,7 @@ import GiftHomePriceTag from '../../components/common/GiftHome/Price/GiftHomePri import GiftDetailHeader from '../../components/common/GiftDetail/GiftDetailHeader'; function GiftHomeDetail() { - // const location = useLocation(); - - // const searchParams = new URLSearchParams(location.search); - // const roomId = searchParams.get('roomId'); - // console.log('roomId', roomId); - // const targetDate = searchParams.get('targetTime'); const params = useParams(); - // console.log('params', params); const roomId = params.roomId; const targetDate = params.targetDate; @@ -22,12 +15,8 @@ function GiftHomeDetail() { return ( - - + + {data.data.hotProductDtoList.length > 0 ? ( data.data.hotProductDtoList.map((item, index) => ( diff --git a/src/pages/GiftHomeDetail/GiftHomeDetailFriends.tsx b/src/pages/GiftHomeDetail/GiftHomeDetailFriends.tsx index 4f7356f8..d797c1c4 100644 --- a/src/pages/GiftHomeDetail/GiftHomeDetailFriends.tsx +++ b/src/pages/GiftHomeDetail/GiftHomeDetailFriends.tsx @@ -6,9 +6,6 @@ import GiftHomePriceTag from '../../components/common/GiftHome/Price/GiftHomePri import GiftDetailHeader from '../../components/common/GiftDetail/GiftDetailHeader'; function GiftHomeDetailFriends() { - // const location = useLocation(); - - // const searchParams = new URLSearchParams(location.search); const params = useParams(); const roomId = params.roomId; const targetDate = params.targetDate; @@ -18,12 +15,11 @@ function GiftHomeDetailFriends() { return ( - + - {data.data.friendGiftDto.length > 0 ? ( data.data.friendGiftDto.map((item, index) => ( diff --git a/src/pages/Participants/ParticipantsView.tsx b/src/pages/Participants/ParticipantsView.tsx index 0448c734..5101b2ac 100644 --- a/src/pages/Participants/ParticipantsView.tsx +++ b/src/pages/Participants/ParticipantsView.tsx @@ -1,22 +1,28 @@ -import * as S from './ParticipantsView.style'; +import * as S from '../../components/OnBoardingSteps/Step06/Step06.style'; import { useEffect, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; -// import { IcKakoLarge } from '../../assets/svg'; -import OnboardingFinalHeader from '../../components/OnBoardingSteps/Step06/OnboardingFinalHeader'; import Title from '../../components/common/title/Title'; import useGetGifteeInfo from '../../hooks/queries/onboarding/useGetGifteeInfo'; -// import { kakaoURL } from '../../utils/login'; -import OnBoardingBtn from '../../components/OnBoardingSteps/onboardingBtn/OnBoardingBtn'; -// import { useKakaoShare } from '../../hooks/queries/onboarding/useKakaoShare'; -// import useClipboard from '../../hooks/useCopyClip'; +import { kakaoURL } from '../../utils/login'; import usePostParticipation from '../../hooks/queries/onboarding/usePostParticipation'; import btnKakao from '../../assets/img/btn_kakao.png'; +import { IcAfterTournamentProgressLine, IcBeforeTournamentProgressLine } from '../../assets/svg'; +import useFormatDate from '../../hooks/onboarding/useFormatDate'; +import { addHours, format } from 'date-fns'; +import OnboardingFinalFooter from '../../components/OnBoardingSteps/Step06/OnboardingFinalFooter'; +import OnboardingFinalHeader from '../../components/OnBoardingSteps/Step06/OnboardingFinalHeader'; +const DURATION_MAPPING = { + SIX_HOURS: 6, + TWELVE_HOURS: 12, + EIGHTEEN_HOURS: 18, + TWENTY_FOUR_HOURS: 24, +}; const ParticipantsView = () => { const { invitationCode } = useParams<{ invitationCode?: string }>(); const { data } = useGetGifteeInfo(invitationCode || null); const [isToken, setIsToken] = useState(); - // const { handleCopyToClipboard } = useClipboard(); + const { formatDuration, formatDate } = useFormatDate(); const { mutation } = usePostParticipation(); const navigate = useNavigate(); @@ -32,77 +38,23 @@ const ParticipantsView = () => { /**@todo 겹치는 부분이니 커스텀 훅 수정 */ - const formatDate = (dateString: string, includeTime: boolean = true) => { - const date = new Date(dateString); - const year = date.getFullYear(); - const month = date.getMonth() + 1; - const day = date.getDate(); - const hours = date.getHours(); - const minutes = date.getMinutes(); - - if (includeTime) { - return `${year}.${month}.${day} (${getDayOfWeek(date)}) ${hours}시 ${minutes}분`; - } else { - return `${year}.${month}.${day} (${getDayOfWeek(date)})`; - } - }; - - const getDayOfWeek = (date: Date) => { - const daysOfWeek = ['일', '월', '화', '수', '목', '금', '토']; - const dayOfWeekIndex = date.getDay(); - return daysOfWeek[dayOfWeekIndex]; - }; + const tournamentEndDate = addHours( + new Date(data.data.tournamentStartDate), + DURATION_MAPPING[data.data.tournamentDuration as keyof typeof DURATION_MAPPING] as number, + ); - const formatDuration = (durationType: string) => { - switch (durationType) { - case 'SIX_HOURS': - return '6시간'; - case 'TWELVE_HOURS': - return '12시간'; - case 'EIGHTEEN_HOURS': - return '18시간'; - case 'TWENTY_FOUR_HOURS': - return '24시간'; - default: - return ''; - } - }; + const formattedEndDate = format(tournamentEndDate, 'yyyy.MM.dd(EEE)'); - const infoDetails = [ - { title: '선물 받을 사람', detail: data.data.gifteeName }, - { - title: '선물 등록 마감', - detail: formatDate(data.data.tournamentStartDate, true), - }, - { - title: '토너먼트 진행 시간', - detail: formatDuration(data.data.tournamentDuration), - }, - { title: '선물 전달일', detail: formatDate(data.data.deliveryDate, false) }, - ]; - - /**@TODO 현재 token값의 유무에 따라 다른 뷰를 보여주는 로직인데, - * token의 값이 있든 없든 항상 토큰이 있는 값을 보여주고 있음. 처리 필요 */ + /**@see 선물 전달 일이 토너먼트 종료일보다 일찍일 때 */ + const isDeliveryBeforeEnd = + new Date(data.data.deliveryDate).getTime() < tournamentEndDate.getTime(); useEffect(() => { setIsToken(localStorage.getItem('EXIT_LOGIN_TOKEN') !== null); - // if (localStorage.getItem('EXIT_LOGIN_TOKEN') === null) { - // setIsToken(false); - // console.log('로컬스토리지 확인', localStorage.getItem('EXIT_LOGIN_TOKEN')); - // console.log('isTOken', isToken); - // console.log('if'); - // } else { - // console.log( - // 'else 로컬스토리지 확인(로컬스토리지 있어야함)', - // localStorage.getItem('EXIT_LOGIN_TOKEN'), - // ); - // setIsToken(true); - // console.log('isTOken', isToken); - // console.log('else'); - // } console.log('isTOken', isToken); - }, [isToken]); + console.log('isDeliveryBeforeEnd', isDeliveryBeforeEnd); + }, [isToken, isDeliveryBeforeEnd]); const handleClickRoom = async (body: string | null) => { console.log('입장 버튼 클릭! 그리고 초대 코드', invitationCode); @@ -129,103 +81,100 @@ const ParticipantsView = () => { return ( <> - -
- - {/* TODO s3에 업로드된 이미지로 변경 */} - - - - - {`${data.data.gifteeName}님을 위한`} - <br /> 선물 준비방이 개설됐어요 - - - {isToken === true ? ( - handleClickRoom(data.data.invitationCode)} - isActivated={true} - > - 입장 - +
+ +
+ + + + + {`${data.data.gifterNumber}명의 친구가`} + + + {`${data.data.gifteeName}님을 위한`} + + + 선물 준비방이 개설됐어요 + +
+ + {isDeliveryBeforeEnd === true ? ( + + ) : ( + + )} + + + + 선물 등록 마감 + + {formatDate(data.data.tournamentStartDate)} + + + + + 토너먼트 진행 + + {formatDuration(data.data.tournamentDuration)} + + + + {/* isDeliveryBeforeEnd가 true인 경우와 false인 경우에 따라 렌더링하는 순서가 달라짐 */} + {isDeliveryBeforeEnd === true ? ( + <> + + 토너먼트 종료 + + {formatDate(formattedEndDate, false)} + + + + + 선물 전달 + + {formatDate(data.data.deliveryDate, false)} + + + ) : ( - '' + <> + + 선물 전달 + + {formatDate(data.data.deliveryDate, false)} + + + + + 토너먼트 종료 + + {formatDate(formattedEndDate, false)} + + + )} - - -
- - - {infoDetails.map((item, index) => ( - - {item.title} - {item.detail} - - ))} - - {/* 수정된 부분 시작 */} - - - + + + + {isToken === true ? ( + handleClickRoom} + giftee={data.data.gifteeName} + /> + ) : ( + + window.location.replace(kakaoURL)} /> + + )} + +
); }; export default ParticipantsView; - -// <> -// {isToken === false ? ( -// window.location.replace(kakaoURL)} /> -// ) : ( -// <> -// -// // todo 추후 배포로 변경 -// handleCopyToClipboard( -// `http://sweetgift.vercel.app/result/${data.data.invitationCode}`, -// ) -// // handleCopyToClipboard(`http://localhost:5173/result/${data.data.invitationCode}`) -// } -// > -// -// 링크 복사 -// -// useKakaoShare(data.data.invitationCode, data.data.gifteeName)} -// > -// -// 카카오톡 공유 -// -// -// )} -// - -// <> -// {isToken === false ? ( -// window.location.replace(kakaoURL)} /> -// ) : ( -// <> -// -// // todo 추후 배포로 변경 -// handleCopyToClipboard( -// `http://sweetgift.vercel.app/result/${data.data.invitationCode}`, -// ) -// // handleCopyToClipboard(`http://localhost:5173/result/${data.data.invitationCode}`) -// } -// > -// -// 링크 복사 -// -// useKakaoShare(data.data.invitationCode, data.data.gifteeName)} -// > -// -// 카카오톡 공유 -// -// -// )} -// diff --git a/src/router/Router.tsx b/src/router/Router.tsx index 0a3f47f9..dd4b0253 100644 --- a/src/router/Router.tsx +++ b/src/router/Router.tsx @@ -22,6 +22,7 @@ import { OnboardingProvider } from '../context/Onboarding/OnboardingContext'; import ParticipantsView from '../pages/Participants/ParticipantsView'; import HomeMypageHeaderLayout from '../layouts/HomeMypageHeaderLayout'; import LeftIconHeaderLayout from '../layouts/LeftIconHeaderLayout'; +import { UpdateGifteeNameProvider } from '../context/GifteeName/GifteeNameContext'; const router = createBrowserRouter([ { @@ -35,6 +36,11 @@ const router = createBrowserRouter([ path: '/mypage', element: , }, + { + path: '/gift-home/:roomId', + element: , + }, + { path: '/error', element: , @@ -74,10 +80,6 @@ const router = createBrowserRouter([ path: '/detail-done', element: , }, - { - path: '/gift-home/:roomId', - element: , - }, { path: '/gift-detail-friends/:roomId/:targetDate', element: , @@ -102,7 +104,9 @@ const router = createBrowserRouter([ path: '/add-gift/:roomId/:targetTime', element: ( - + + + ), }, diff --git a/src/style/toast.style.ts b/src/style/toast.style.ts new file mode 100644 index 00000000..644b2722 --- /dev/null +++ b/src/style/toast.style.ts @@ -0,0 +1,17 @@ +import { ToastContainer } from 'react-toastify'; +import { styled } from 'styled-components'; + +export const StyledToastContainer = styled(ToastContainer)` + display: flex; + justify-content: center; + margin-bottom: 2.3rem; + .Toastify__toast { + width: 33.5rem; + height: 5.2rem; + text-align: center; + border-radius: 1.6rem; + background-color: rgba(255, 233, 241, 0.9); + color: ${({ theme }) => theme.colors.P_06}; + ${({ theme }) => theme.fonts.body_09}; + } +`; diff --git a/src/types/gift/index.d.ts b/src/types/gift/index.d.ts index b14a84fc..652113d4 100644 --- a/src/types/gift/index.d.ts +++ b/src/types/gift/index.d.ts @@ -6,6 +6,12 @@ export interface GiftPostRequestType { imageUrl: string; } +export interface GiftPostResponseType { + status: number; + success?: boolean; + message: string; +} + export interface GiftType { giftId: number; imageUrl: string; @@ -13,9 +19,14 @@ export interface GiftType { cost: number; } -export interface MyGiftsType { +export interface myGiftsResponseDtoType { myGiftDtoList: GiftType[]; } + +export interface MyGiftsType { + gifteeName: string; + myGiftsResponseDto: myGiftsResponseDtoType; +} export interface AddGiftInfo { name: name; cost: cost; diff --git a/src/types/product/index.d.ts b/src/types/product/index.d.ts index fd15791d..08347f1d 100644 --- a/src/types/product/index.d.ts +++ b/src/types/product/index.d.ts @@ -1,6 +1,7 @@ import { HotGiftsType } from '../room'; export interface HotProductsType { + gifteeName: string; tournamentStartDate: Date; hotProductDtoList: HotGiftsType[]; } diff --git a/src/types/room/index.d.ts b/src/types/room/index.d.ts index efdaaf60..bc0d7d3f 100644 --- a/src/types/room/index.d.ts +++ b/src/types/room/index.d.ts @@ -9,11 +9,12 @@ export interface RoomInfoType { } export interface FriendsGiftsInfoType { - tournamentStartDate: tournamentStartDateType; + roomInfoResponseDto: roomInfoResponseDtoType; friendGiftDto: friendGiftDtoType[]; } -export interface tournamentStartDateType { +export interface roomInfoResponseDtoType { + gifteeName: string; tournamentStartDate: Date; } diff --git a/yarn.lock b/yarn.lock index 41e215e8..4256d282 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2145,6 +2145,11 @@ clsx@^1.1.1: resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== +clsx@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb" + integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg== + color-convert@^1.9.0: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" @@ -4212,6 +4217,13 @@ react-router@6.21.1: dependencies: "@remix-run/router" "1.14.1" +react-toastify@^10.0.4: + version "10.0.4" + resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-10.0.4.tgz#6ecdbbf923a07fc45850e69b0566efc7bf733283" + integrity sha512-etR3RgueY8pe88SA67wLm8rJmL1h+CLqUGHuAoNsseW35oTGJEri6eBTyaXnFKNQ80v/eO10hBYLgz036XRGgA== + dependencies: + clsx "^2.1.0" + react@^18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"