Skip to content

Commit

Permalink
🐛 Fix: GoogleOAuthProvider 위치 변경
Browse files Browse the repository at this point in the history
* 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: 배포링크 추가 및 코드 컨벤션 수정

* 📝 Docs: 배포링크 수정 (http프로토콜 명시)

* Chore/ec2 pm2 및 Code Deploy 설정 변경 (#9)

* 📦 Chore: pm2 설정 변경 테스트

* 📦 Chore: github action의 target branch 원상복구

* ♻️ Refactor: children의 type을 React.ReactNode로 변경

PropsWithChildren의 경우 children이 undefined도 가능하여 확실히 하고자
명시적으로 변경했습니다.

* 💄 Design: 공통 레이아웃 구현(common폴더)

* 💄 Design: palette 색상 추가

* 💄 Design: Header에 style 적용

* 🚚 Rename: contests폴더명을 hackathons로 변경

* ✨ Feat: 공통 hr 컴포넌트 생성

공통 hr 컴포넌트 스타일링 및 생성

* 💄 Design: 랜딩페이지 프로젝트, 스터디 캐러셀 구현 (#14)

* 💄 Design: 프로젝트 / 스터디 캐러셀 구현

* 💄 Design: 레이아웃에 Hr태그 추가

* ✨ Feat: TopScroll 버튼 구현

* 📦 Docs: Swiper 버전 다운그레이드

Swiper 버전 10의 type이 typescript 4.9.5와 맞지 않아서 에러가 발생합니다.

* 💄 Design: 프로젝트 분류 태그를 button에서 span으로 변경

* ✅ Test: TopScrollBtn 테스팅 추가

* ♻️ Refactor: Carousel 공통화 방식 변경

캐러셀 모양에 따라서 horizontal과 vertical로 나누던 것을
섹션에 따라 나누려고 합니다.
- MainBanner
- Hackathons
- Projects
- Recommendation

* 💄 Design: ProjectCarousel 디자인 수정

* 📦 Chore: @emotion/jest 설치

* ✨ Feat: RecommendationCarousel 구현

* 💄 Design: 전체 공통 BackgroundColor 설정

디자인 가이드에 따라 BackgroundColor 적용

* 🎨 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로 내부 레이아웃 구현

* 💄 Design: Carousel width 및 padding 수정

* 💄 Design: palette, breakPoints를 GlobalStyles에서 분리

GlobalStyles의 파일명을 resetCss로 변경

* 💄 Design: palette에 추가된 색상들을 *.styles.ts에 적용

* 📦 Chore: pm2 명령어 수정

* ✅ Test: 테스팅 코드 컬러코드 변경

* 📦 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 값으로 고정

* ✨ Feat: ProjectsPage의 SkillSelector구현 (#31)

* ✨ Feat: Skills 배열 상수로 추가

id => 서버에 전달할 값
skill => 프론트에서 ui로 사용할 값
img => svg

* ✨ Feat: projectsPage의 SkillSelector 구현

* 💄 Design: SkillFilter의 SelectedSkill들의 padding을 축소

기존 패딩 사용시, 이름이 긴 skill들을 넣으면 영역을 벗어남

* 💄 Design: SkillFilter padding 및 borderRadius 수정

* "✨ Feat: SearchInput(검색창) 구현

SKillFilter 및 resetStyles의 css속성을 SearchInput에 맞게 변경

* ♻️ Refactor: Input관련 이벤트를 다루는 state들을 custom hook으로 분리 및 테스팅 작성

* ✅ Test: SearchForm의 자식 컴포넌트들에 대한 기능 테스트 추가

* ✅ Test: SearchForm의 자식 컴포넌트들의 조건부 스타일링에 대한 테스팅 추가(누락된 테스트)

* 💄 Design: 로고 아이콘 새로운 사이즈의 svg로 교체

* 💄 Design: 프로젝트 Carousel Card의 box-shadow 수정

* 💄 Design: RecommendationCard의 Box-Shadow 및 Carousel 기능 수정

* 💄 Design: SkillFilter, SkillButton 디자인 수정

SkillFilter => 버튼들 간격 조정
SkillButton => check상태면, border눈에 안보이게 수정

* ✨ Feat: MainBanner 구현

* ✨ Feat: MainBanner를 vertical Carousel로 변경

* 💄 Design: RecommendationCard의 hover사이즈 축소

* 💄 Design: BannerImage를 픽셀 수 4배(좌우 2배) 올린 것으로 교체

* ♻️ 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 경로 수정 및 쓸모없는 조건 삭제

* 🐛 Fix: 자동 배포 시, 업데이트 된 js번들을 찾지 못하는 문제 해결 (#38)

* 📦 Chore: nextjs 배포 테스트-1

* 💄 Design: MainBanner의 `차곡`의 색깔 black으로 변경

배포 버전에 적용이 잘 되는지 테스트 하기 위한 목적

* 🐛 Fix: 배포 시, 수동으로 pm2를 재시작 하지 않는 이상 새롭게 빌드된 js번들을 찾지 못하는 문제 해결

* 💄 Design: 해커톤 상세 댓글 생성창 구현

하위 엘리먼트를 포함한 댓글 생성창 `focus` 및 `blur`를 `requestAnimationFrame`으로 조절

댓글 생성창 `hover` 및 `focus` 동적 스타일링 구현

* 💄 Design: 해커톤 상세 페이지 댓글 섹션 구현

해커톤 상세 페이지 댓글 생성 및 댓글 조회 레이아웃 구현, 스타일링 적용
말풍선 이미지 chat.svg 추가
더미 댓글 데이터 추가 (삭제 예정)

* 📦 Chore: msw 초기 설정

msw 설치 및 초기 보일러플레이팅 작성
mocking data ssr 바인딩 테스트
axois client의 백엔드 api server endpoint 변경
해커톤 목록 및 아이템 타입 작성

* 💄 Design: ProjectList Grid레이아웃 추가

* ✨ Feat: 페이지 넘버링 하는 유틸 함수 추가

* 💄 Design: 페이지네이션 버튼 및 페이지 넘버 조작 기능 구현

* 📦 Chore: react-query devtools 설치

* 📦 Chore: ReactQuery테스팅을 위한 customRender함수 작성

* 🐛 Fix: 빌드 에러로 인한 500에러 수정 (#43)

- initmocks() 호출 방식 이전으로 복구
- EC2 내에서 node_modules, .next 폴더 삭제 후 재빌드

* 💄 Design: 마이 페이지 레이아웃 구현 및 스타일링 (#44)

마이 페이지 유저 프로필, 기술 스택, 스크랩 각각 3 개 섹션으로 나누어 레이아웃 구현

해커톤 카드 디자인 가이드에 따라 스타일 변경

palette, breakPoints, skills 타입 작성

skills svg 기존 타입`SvgGraphicsElement`이 next/image에 맞지 않아서
`StaticImageData` 타입으로 변경

* 📝 Docs: README 업데이트(기술 스택 추가)

* ✨ Feat: msw 관련 에러 대응을 위해서 500 커스텀(임시)

* ♻️ type 및 interface 이름을 코드 컨벤션에 맞게 수정

* 💄 Design: Header의 position을 fixed로 변경

* 💄 Design: ProjectDetailPage 레이아웃 및 스타일링

* ✨ Feat: Common Modal 구현

공통 스타일을 가진 Modal을 `createPortal`로 구현 및 스타일링
`Portal`이 열릴 위치 생성 (_document.tsx)
Modal 제어를 위한 useModal Hook 구현
닫기 버튼 svg 파일 추가

마이페이지 디자인 변경에 따른 스타일 수정
IDE 내에서 직관적인 타입 확인을 위한 breakPoints와 palette의 `interface`를 `type alias`로 타입 네이밍 방식 변경

* 💄 Design: 회원가입 과정 스타일링

회원가입 과정에 퍼널 패턴 적용하여 `소셜 로그인` > `이름 설정` > `스킬 선택` > `완료` 순으로 구현
마이 페이지 스킬 선택과 회원가입의 스킬 선택이 겹쳐 공통 컴포넌트로 빼서 중복 제거

소셜 로그인 구글과 카카오 png 추가
차곡 로고 svg 커스텀을 위한 logoSVGComponent 생성

* 📝 Docs: README 업데이트 - 배포링크 도메인네임으로 수정

* ✨ Feat: 렌더링 관려 에러 핸들링을 위한 ErrorBoundary 추가

* ✨ Feat: 랜딩페이지 스터디/프로젝트 인기순/최신순 Top3 API연동

* 🐛 Fix: ProjectCard의 type변경으로 인한 사이드 이펙트 에러 수정

* ✨ Feat: ProjectPage studies, projects api 연동 (#51)

Component 및 Hook 수정
1. useStudiesQuery, useProjectsQuery
2. useHandlePageNumber
3. PaginationButton

버그 수정
- 기술 선택, purpose(project or study),  검색어 입력시 pageNumber가 초기화되지 않는 문제

오타 수정
- TPaginationData 타입명 오타 수정

* ♻️ Refactor: Pagination 설계 변경 - useHandlePageNumber 삭제

* ✨ Feat: OAuth 구현 (카카오, 구글)

- 구글 토큰 받아오기
- 카카오 토큰 받아오기

* 🚀 Deploy: Github Action에서 build할 때, 환경변수 추가

* 💄 Design: Loading Component에 스피너 구현

* 💄 Design: ProjectCard 댓글, 작성자 프로필 이미지 삭제 - 보류

* ✨ Feat: 스터디/프로젝트 상테 페이지 API 연동

* 💄 Design: Header 패딩 축소

* 🐛 Fix: GoogleOAuthProvider 위치 변경

---------

Co-authored-by: aggie97 <4ggie1997@gmail.com>
  • Loading branch information
cgh96 and aggie97 committed Aug 30, 2023
1 parent 58484eb commit 5eeac1e
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 9 deletions.
3 changes: 2 additions & 1 deletion .github/workflows/Deploy.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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/*"
Expand Down
7 changes: 5 additions & 2 deletions src/components/common/layout/index.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { GoogleOAuthProvider } from "@react-oauth/google";
import type { FC } from "react";

import Body from "./body";
Expand All @@ -10,11 +11,13 @@ type LayoutProps = {

const Layout: FC<LayoutProps> = ({ children }) => {
return (
<>
<GoogleOAuthProvider
clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID as string}
>
<Header />
<Body>{children}</Body>
<Footer />
</>
</GoogleOAuthProvider>
);
};

Expand Down
9 changes: 3 additions & 6 deletions src/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { Global } from "@emotion/react";
import { GoogleOAuthProvider } from "@react-oauth/google";
import {
Hydrate,
QueryClient,
Expand Down Expand Up @@ -46,11 +45,9 @@ export default function App({ Component, pageProps }: AppProps) {
<Hydrate state={pageProps.dehydratedState}>
<Global styles={resetStyles} />
<ErrorBoundary>
<GoogleOAuthProvider clientId="217895273558-dab38q8mu6cod8fv0t6p7hotlgg67fj3.apps.googleusercontent.com">
<Layout>
<Component {...pageProps} />
</Layout>
</GoogleOAuthProvider>
<Layout>
<Component {...pageProps} />
</Layout>
<Script
src="https://t1.kakaocdn.net/kakao_js_sdk/2.3.0/kakao.min.js"
integrity="sha384-70k0rrouSYPWJt7q9rSTKpiTfX6USlMYjZUtr1Du+9o4cGvhPAWxngdtVZDdErlh"
Expand Down

0 comments on commit 5eeac1e

Please sign in to comment.