From 5eeac1eb93b2021f1417cd3daf1dee0ff46a506a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EA=B7=9C=ED=98=B8=20=28Choi=20Gyu=20Ho=29?= <68717963+gyuhoBest@users.noreply.github.com> Date: Wed, 30 Aug 2023 18:02:06 +0900 Subject: [PATCH] =?UTF-8?q?:bug:=20Fix:=20GoogleOAuthProvider=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Chore/ci-cd (#2) CI/CD 구축 1. .github/workflows/* => github action 2. scripts/* => EC2 shell script (Code Deploy hook) 3. appSpec.yml => CodeDeploy 동작 정의 4. ecosystem.config.js => pm2 configure 파일 * Chore: Testing 및 CodeDeploy 동작 변경 * Chore: github action job Name 추가 * Chore/pm2 (#4) * Chore: 변경사항 발생 시, pm2 자동 리로드 * Chore: pm2 cluster모드로 변경 * 📦 Chore: 프로젝트 초기 세팅 eslint - type import 구분을 위한 consistent-type-imoprts 설치 및 적용 package.json - next lint --fix 구문 추가 사용하지 않는 파일 삭제 - global.css - Home.moudle.css 프로젝트에 필요한 폴더 구조 생성 및 sample 파일 추가 _app.tsx에 react-query 초기 설정 eslint rule no-unused-vars 제거에서 적용으로 변경 후 sample.ts 수정 git hook 운영체제 간 이슈로 인해 husky 수정 참조: (typicode/husky#1177) * Docs: README 초안 작성 (#1) * Docs: README 초안 작성 * Chore: 브랜치를 최신 상태로 업데이트 * Docs: README 수정 * Docs: README 커밋 컨벤션 git imoji 및 폴더 구조 추가 * Docs: 배포링크 추가 및 코드 컨벤션 수정 * :memo: Docs: 배포링크 수정 (http프로토콜 명시) * Chore/ec2 pm2 및 Code Deploy 설정 변경 (#9) * :package: Chore: pm2 설정 변경 테스트 * :package: Chore: github action의 target branch 원상복구 * :recycle: Refactor: children의 type을 React.ReactNode로 변경 PropsWithChildren의 경우 children이 undefined도 가능하여 확실히 하고자 명시적으로 변경했습니다. * :lipstick: Design: 공통 레이아웃 구현(common폴더) * :lipstick: Design: palette 색상 추가 * :lipstick: Design: Header에 style 적용 * :truck: Rename: contests폴더명을 hackathons로 변경 * ✨ Feat: 공통 hr 컴포넌트 생성 공통 hr 컴포넌트 스타일링 및 생성 * 💄 Design: 랜딩페이지 프로젝트, 스터디 캐러셀 구현 (#14) * :lipstick: Design: 프로젝트 / 스터디 캐러셀 구현 * :lipstick: Design: 레이아웃에 Hr태그 추가 * :sparkles: Feat: TopScroll 버튼 구현 * :package: Docs: Swiper 버전 다운그레이드 Swiper 버전 10의 type이 typescript 4.9.5와 맞지 않아서 에러가 발생합니다. * :lipstick: Design: 프로젝트 분류 태그를 button에서 span으로 변경 * :white_check_mark: Test: TopScrollBtn 테스팅 추가 * :recycle: Refactor: Carousel 공통화 방식 변경 캐러셀 모양에 따라서 horizontal과 vertical로 나누던 것을 섹션에 따라 나누려고 합니다. - MainBanner - Hackathons - Projects - Recommendation * :lipstick: Design: ProjectCarousel 디자인 수정 * :package: Chore: @emotion/jest 설치 * :sparkles: Feat: RecommendationCarousel 구현 * 💄 Design: 전체 공통 BackgroundColor 설정 디자인 가이드에 따라 BackgroundColor 적용 * :art: Style: next.cofig.js 세미콜론 누락 세미콜론 추가 * 💄 Design: 해커톤 목록 페이지 레이아웃 구현 HackathonPage : 해커톤 목록 페이지 - 추천 section - 구분선 - 목록 section 순으로 분리 후 pages/hackathons/[id]에 바인딩 - 추천 section - 캐러셀 미적용 상태 (구현 예정) - 목록 section - select arrow button 커스텀 스타일 적용 - 길이 9의 임의 배열 생성 후 해커톤 카드 grid로 레이아웃 구현 /public : public 폴더 - Mocking을 위한 더미 이미지 2 개 추가 공통 컴포넌트 ScrabButton - 공통 컴포넌트 스크랩 버튼 구현 - svg 최적화 회의 후 결정 HackathonPageCard - 해커톤 목록 페이지에 사용되는 해커톤 카드 구현 - 테스트용 더미 데이터 삽입 MainPageCard - 홈페이지에 사용되는 해커톤 카드 구현 - 테스트용 더미 데이터 삽입 - gird-areas로 내부 레이아웃 구현 * :lipstick: Design: Carousel width 및 padding 수정 * :lipstick: Design: palette, breakPoints를 GlobalStyles에서 분리 GlobalStyles의 파일명을 resetCss로 변경 * :lipstick: Design: palette에 추가된 색상들을 *.styles.ts에 적용 * :package: Chore: pm2 명령어 수정 * :white_check_mark: Test: 테스팅 코드 컬러코드 변경 * :package: Chore: bundleAnalyzer 및 svg사용을 위한 세팅 * 🚚 Rename: common내 폴더 구조 통일 * ✨ Feat: 해커톤 추천 카드 캐러셀 적용 해커톤 페이지 추천 영역 캐러셀 적용 - Swiper 사용하여 페이지네이션 적용 - 활성화된 페이지네이션 bullet animation 개선 필요 * ✨ Feat: 해커톤 추천 페이지네이션 적용 해커톤 페이지 추천 영역 페이지네이션 swiper의 pagination 기능 사용하여 적용 - ::after를 사용하여 active bullet 커스텀 CSS 적용 해커톤 상세 페이지 파일만 생성 * 🐛 Fix: 해커톤 추천 캐러셀 pagination을 위한 css 파일 수정 pagination 기능을 사용하면서 navigation css를 불러오고 있어서 첫 렌더링 때 페이지네이션이 화면에 보이지 않던 오류 발생 navigation -> pagination으로 수정하여 오류 해결 * 💄 Design: 해커톤 상세 페이지 레이아웃 구현 해커톤 상세 페이지 요약, 원문, 댓글로 섹션 생성 후 구분 요약 부분 퍼블리싱 공통 컴포넌트 ScrabButton 아이콘 그림자로 인한 위치 불안정을 padding 값으로 고정 * :sparkles: Feat: ProjectsPage의 SkillSelector구현 (#31) * :sparkles: Feat: Skills 배열 상수로 추가 id => 서버에 전달할 값 skill => 프론트에서 ui로 사용할 값 img => svg * :sparkles: Feat: projectsPage의 SkillSelector 구현 * :lipstick: Design: SkillFilter의 SelectedSkill들의 padding을 축소 기존 패딩 사용시, 이름이 긴 skill들을 넣으면 영역을 벗어남 * :lipstick: Design: SkillFilter padding 및 borderRadius 수정 * ":sparkles: Feat: SearchInput(검색창) 구현 SKillFilter 및 resetStyles의 css속성을 SearchInput에 맞게 변경 * :recycle: Refactor: Input관련 이벤트를 다루는 state들을 custom hook으로 분리 및 테스팅 작성 * :white_check_mark: Test: SearchForm의 자식 컴포넌트들에 대한 기능 테스트 추가 * :white_check_mark: Test: SearchForm의 자식 컴포넌트들의 조건부 스타일링에 대한 테스팅 추가(누락된 테스트) * :lipstick: Design: 로고 아이콘 새로운 사이즈의 svg로 교체 * :lipstick: Design: 프로젝트 Carousel Card의 box-shadow 수정 * :lipstick: Design: RecommendationCard의 Box-Shadow 및 Carousel 기능 수정 * :lipstick: Design: SkillFilter, SkillButton 디자인 수정 SkillFilter => 버튼들 간격 조정 SkillButton => check상태면, border눈에 안보이게 수정 * :sparkles: Feat: MainBanner 구현 * :sparkles: Feat: MainBanner를 vertical Carousel로 변경 * :lipstick: Design: RecommendationCard의 hover사이즈 축소 * :lipstick: Design: BannerImage를 픽셀 수 4배(좌우 2배) 올린 것으로 교체 * :recycle: Refactor: ArrowSVG를 width, color, rotate deg에 따라 재사용하도록 컴포넌트로 분리 * 💄 Design: 기획 변경에 따라 원본 보기 버튼 삭제 원본 보기 버튼 element 및 스타일 삭제 원본 보기 버튼 역할을 대신할 출처에 `우선` contest korea 링크 삽입 * 💄 Design: 해커톤 상세 페이지 해커톤 원문 스타일링 원문(Original) 섹션 레이아웃 및 스타일링 XSS 공격 방지용 isormophic-dompurify(SSR + CSR) 설치 및 적용 * ✅ Test: 해커톤 원본 섹션 렌더링 테스트 추가 테스트에 필요한 `TextEncoder`, `TextDecoder` jest setup에 추가 컴포넌트 렌더링 테스트 작성 * 🐛 Fix: svg 경로 수정 svg 경로 수정 및 쓸모없는 조건 삭제 * :bug: Fix: 자동 배포 시, 업데이트 된 js번들을 찾지 못하는 문제 해결 (#38) * :package: Chore: nextjs 배포 테스트-1 * :lipstick: Design: MainBanner의 `차곡`의 색깔 black으로 변경 배포 버전에 적용이 잘 되는지 테스트 하기 위한 목적 * :bug: Fix: 배포 시, 수동으로 pm2를 재시작 하지 않는 이상 새롭게 빌드된 js번들을 찾지 못하는 문제 해결 * 💄 Design: 해커톤 상세 댓글 생성창 구현 하위 엘리먼트를 포함한 댓글 생성창 `focus` 및 `blur`를 `requestAnimationFrame`으로 조절 댓글 생성창 `hover` 및 `focus` 동적 스타일링 구현 * 💄 Design: 해커톤 상세 페이지 댓글 섹션 구현 해커톤 상세 페이지 댓글 생성 및 댓글 조회 레이아웃 구현, 스타일링 적용 말풍선 이미지 chat.svg 추가 더미 댓글 데이터 추가 (삭제 예정) * 📦 Chore: msw 초기 설정 msw 설치 및 초기 보일러플레이팅 작성 mocking data ssr 바인딩 테스트 axois client의 백엔드 api server endpoint 변경 해커톤 목록 및 아이템 타입 작성 * :lipstick: Design: ProjectList Grid레이아웃 추가 * :sparkles: Feat: 페이지 넘버링 하는 유틸 함수 추가 * :lipstick: Design: 페이지네이션 버튼 및 페이지 넘버 조작 기능 구현 * :package: Chore: react-query devtools 설치 * :package: Chore: ReactQuery테스팅을 위한 customRender함수 작성 * :bug: Fix: 빌드 에러로 인한 500에러 수정 (#43) - initmocks() 호출 방식 이전으로 복구 - EC2 내에서 node_modules, .next 폴더 삭제 후 재빌드 * 💄 Design: 마이 페이지 레이아웃 구현 및 스타일링 (#44) 마이 페이지 유저 프로필, 기술 스택, 스크랩 각각 3 개 섹션으로 나누어 레이아웃 구현 해커톤 카드 디자인 가이드에 따라 스타일 변경 palette, breakPoints, skills 타입 작성 skills svg 기존 타입`SvgGraphicsElement`이 next/image에 맞지 않아서 `StaticImageData` 타입으로 변경 * :memo: Docs: README 업데이트(기술 스택 추가) * :sparkles: Feat: msw 관련 에러 대응을 위해서 500 커스텀(임시) * :recycle: type 및 interface 이름을 코드 컨벤션에 맞게 수정 * :lipstick: Design: Header의 position을 fixed로 변경 * :lipstick: Design: ProjectDetailPage 레이아웃 및 스타일링 * ✨ Feat: Common Modal 구현 공통 스타일을 가진 Modal을 `createPortal`로 구현 및 스타일링 `Portal`이 열릴 위치 생성 (_document.tsx) Modal 제어를 위한 useModal Hook 구현 닫기 버튼 svg 파일 추가 마이페이지 디자인 변경에 따른 스타일 수정 IDE 내에서 직관적인 타입 확인을 위한 breakPoints와 palette의 `interface`를 `type alias`로 타입 네이밍 방식 변경 * 💄 Design: 회원가입 과정 스타일링 회원가입 과정에 퍼널 패턴 적용하여 `소셜 로그인` > `이름 설정` > `스킬 선택` > `완료` 순으로 구현 마이 페이지 스킬 선택과 회원가입의 스킬 선택이 겹쳐 공통 컴포넌트로 빼서 중복 제거 소셜 로그인 구글과 카카오 png 추가 차곡 로고 svg 커스텀을 위한 logoSVGComponent 생성 * :memo: Docs: README 업데이트 - 배포링크 도메인네임으로 수정 * :sparkles: Feat: 렌더링 관려 에러 핸들링을 위한 ErrorBoundary 추가 * :sparkles: Feat: 랜딩페이지 스터디/프로젝트 인기순/최신순 Top3 API연동 * :bug: Fix: ProjectCard의 type변경으로 인한 사이드 이펙트 에러 수정 * :sparkles: Feat: ProjectPage studies, projects api 연동 (#51) Component 및 Hook 수정 1. useStudiesQuery, useProjectsQuery 2. useHandlePageNumber 3. PaginationButton 버그 수정 - 기술 선택, purpose(project or study), 검색어 입력시 pageNumber가 초기화되지 않는 문제 오타 수정 - TPaginationData 타입명 오타 수정 * :recycle: Refactor: Pagination 설계 변경 - useHandlePageNumber 삭제 * :sparkles: Feat: OAuth 구현 (카카오, 구글) - 구글 토큰 받아오기 - 카카오 토큰 받아오기 * :rocket: Deploy: Github Action에서 build할 때, 환경변수 추가 * :lipstick: Design: Loading Component에 스피너 구현 * :lipstick: Design: ProjectCard 댓글, 작성자 프로필 이미지 삭제 - 보류 * :sparkles: Feat: 스터디/프로젝트 상테 페이지 API 연동 * :lipstick: Design: Header 패딩 축소 * :bug: Fix: GoogleOAuthProvider 위치 변경 --------- Co-authored-by: aggie97 <4ggie1997@gmail.com> --- .github/workflows/Deploy.yml | 3 ++- src/components/common/layout/index.tsx | 7 +++++-- src/pages/_app.tsx | 9 +++------ 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/.github/workflows/Deploy.yml b/.github/workflows/Deploy.yml index d5a9e21..f827a2d 100644 --- a/.github/workflows/Deploy.yml +++ b/.github/workflows/Deploy.yml @@ -34,7 +34,8 @@ jobs: env: NEXT_PUBLIC_KAKAO_CLIENT_ID: ${{ secrets.NEXT_PUBLIC_KAKAO_CLIENT_ID }} NEXT_PUBLIC_KAKAO_REST_API_KEY: ${{ secrets.NEXT_PUBLIC_KAKAO_REST_API_KEY }} - GOOGLE_CLIENT_ID: ${{ secrets.GOOGLE_CLIENT_ID }} + NEXT_PUBLIC_GOOGLE_CLIENT_ID: ${{ secrets.GOOGLE_CLIENT_ID }} + - name: Make zip file run: zip -qq -r ./chagok.zip . -x "node_modules/*" diff --git a/src/components/common/layout/index.tsx b/src/components/common/layout/index.tsx index 514d8d7..a7876c5 100644 --- a/src/components/common/layout/index.tsx +++ b/src/components/common/layout/index.tsx @@ -1,3 +1,4 @@ +import { GoogleOAuthProvider } from "@react-oauth/google"; import type { FC } from "react"; import Body from "./body"; @@ -10,11 +11,13 @@ type LayoutProps = { const Layout: FC = ({ children }) => { return ( - <> +
{children}