prgrms-web-devcourse / team-jjinsa-hyperlink-fe

찐사핑의 최종 프로젝트 FE repo

hyperlink

세상의 모든 정보를 한눈에! 하이퍼링크.

관심 분야에 대한 트렌디하고 신뢰성 있는 최신, 인기 정보를 한눈에 찾아 볼 수 있는 서비스

🪄 배포 주소

세상의 모든 정보를 한눈에 보러가기

🧑🏻‍💻 팀원 소개

FE

팀장	팀원	팀원	팀원
변건오	김은아	류건열	최은지

BE

백엔드

페이지 소개

메인 (스크롤 전)

메인 (스크롤 후)

구독 피드

크리에이터

오늘의 하이퍼링크

어드민 페이지

검색

회원 가입

⬆️ Back to Top

하이퍼링크 노션

🗒 팀 노션

🗓 프론트 노션

🖊 기획

🎨 와이어 프레임

🔨 기능 명세서

⬆️ Back to Top

하이퍼링크 기술 스택

언어
라이브러리
스타일링
상태관리
목 서버
컴포넌트 관리
패키지 매니저
포맷팅
배포
협업툴

⬆️ Back to Top

How to run in local

1. yarn
2. env setting
3. yarn dev

⬆️ Back to Top

team-jjinsa-hyperlink-fe's Issues

헤더 UI 구현

📕 작업 설명

네비게이션을 제외한 헤더 UI를 구현합니다.

📖 진행 사항

• 로그인 상태에 따른 헤더 UI 구현
• 라우팅 설정

input 컴포넌트 구현 및 storybook 연동

📕 작업 설명

input 컴포넌트를 구현하고 storybook을 연동합니다.

📖 진행 사항

• input 컴포넌트 구현
• storybook 연동

내 정보 페이지 이미지 파일 추가 기능

📕 작업 설명

내 정보 페이지 이미지 파일 추가 기능

📖 진행 사항

• input type=file 을 이용해 이미지를 로드한다
• preview를 보여준다

content 카드 전체에 URL 설정

📕 작업 설명

content 카드 전체에 URL 설정

📖 진행 사항

• content 카드 전체에 URL 설정
• 각 아이콘마다 link이동 방지 & 클릭 이벤트 추가

recoil, react-query 설정

📕 작업 설명

App.tsx에 recoil과 react-query 설정을 작업합니다.

📖 진행 사항

• recoil 설정
• react-query 설정

스피너 컴포넌트 구현 및 storybook 연동

📕 작업 설명

스피너 컴포넌트를 구현하고 storybook과 연동합니다.

📖 진행 사항

• 스피너 컴포넌트 구현
• storybook 연동

크리에이터, 아티클 카드 UI 구현

📕 작업 설명

크리에이터, 아티클 카드 UI 구현

📖 진행 사항

• 크리에이터 UI 구현
• 아티클 UI 구현

axios instance 생성

📕 작업 설명

axios instance, interceptor 생성 및 추가

📖 진행 사항

• axios instance
• axios interceptor

dropdown 컴포넌트 구현 및 storybook 연동

📕 작업 설명

dropdown 컴포넌트를 구현하고 storybook을 연동합니다.

📖 진행 사항

• dropdown 컴포넌트 구현
• storybook 연동

React-query, suspense 관련 에러 해결

📕 작업 설명

React-query, suspense 관련 에러 해결

📖 진행 사항

• React-query, suspense 관련 에러 해결

유저 드롭다운 구현

📕 작업 설명

북마크/히스토리 페이지, 내 정보 페이지, 로그아웃을 위한 유저 드롭다운을 구현합니다.

📖 진행 사항

• 유저 드롭다운 구현
• 유저 정보 msw 연동

vanilla extract css 정의

📕 작업 설명

global, media 등 사전 정의

📖 진행 사항

• global css 정의
• media 정의
• color, theme 정의
• token 정의
• variants 정의

divider 컴포넌트 구현 및 storybook 연동

📕 작업 설명

divider 컴포넌트를 구현하고 storybook과 연동합니다.

📖 진행 사항

• divider 컴포넌트 구현
• storybook 연동

배너 애니메이션 컴포넌트 구현

📕 작업 설명

배너, 로그인 모달에 삽입될 로고 애니메이션을 구현합니다.

📖 진행 사항

• 도트로 점찍기
• 로그인 모달 적용

slider 컴포넌트 구현 및 storybook 연동

📕 작업 설명

slider 컴포넌트(carousel)를 구현하고 storybook을 연동합니다.

📖 진행 사항

• slider 컴포넌트 구현
• storybook 연동

헤딩 컴포넌트 구현 및 storybook 연동

📕 작업 설명

헤딩 컴포넌트를 구현하고 storybook에 연동합니다.

📖 진행 사항

• 헤딩 컴포넌트 h1 ~ h6 정의
• storybook 연동

텍스트 컴포넌트 구현 및 storybook 연동

📕 작업 설명

텍스트 컴포넌트 구현 및 storybook과 연동합니다.

📖 진행 사항

• 텍스트 컴포넌트 구현
• storybook 연동

variants 종류 별 분할

📕 작업 설명

styles/variants.css.ts를 종류 별로 분할합니다.

📖 진행 사항

• 분할
• 적용

card list 구현 및 msw 연동

📕 작업 설명

card list 구현, msw 연동하기

📖 진행 사항

• cardlist 구현
• msw 더미 데이터 연동

이미지, 아바타 공통 컴포넌트 구현

📕 작업 설명

아바타 공통 컴포넌트 구현하기

📖 진행 사항

• 이미지 컴포넌트 구현
• 아바타 컴포넌트 구현
• 이미지 컴포넌트 스토리북 구현
• 아바타 컴포넌트 스토리북 구현

로그인 버튼 연동

📕 작업 설명

로그인 버튼을 연동합니다.

📖 진행 사항

• 로그인 모달 정의
• 로그인 모달 visible atom 정의
• 연동

로그인 ui 구현

📕 작업 설명

로그인 ui를 구현합니다.

📖 진행 사항

• 로그인 모달 ui 구현
• 기본 정보 입력 페이지 ui 구현
  • 1단계: 기본 정보
  • 2단계: 직군/경력
  • 3단계: 관심 카테고리

아이콘 공통 컴포넌트 구현

📕 작업 설명

font awesome 용 아이콘 공통 컴포넌트 구현

📖 진행 사항

• type 정의
• icon type, name, size 정의
• 스토리북 작성

버튼 컴포넌트 구현

📕 작업 설명

공통 버튼 컴포넌트 구현

📖 진행 사항

• type 정의
• 스타일 정의
• 스토리북 작성

뱃지 컴포넌트 구현 및 storybook 연동

📕 작업 설명

뱃지 컴포넌트 구현

📖 진행 사항

• 뱃지 컴포넌트 타입 지정, style 지정, 컴포넌트 구현
• storybook 연동

card 컴포넌트 구현 및 storybook 연동

📕 작업 설명

card 컴포넌트 구현 및 storybook 연동

📖 진행 사항

• 포스트 카드 컴포넌트 구현
• 크리에이터 카드 컴포넌트까지 확장하기

modal 컴포넌트 구현 및 storybook 연동

📕 작업 설명

modal 컴포넌트 구현 및 storybook 연동

📖 진행 사항

• modal type, style props 지정 및 구현
• storybook 연동
• children 확인

검색 페이지 cardlist UI 적용

📕 작업 설명

검색 페이지 UI 변경

📖 진행 사항

• cardlist UI 적용

회원 가입 정보 입력 페이지 애니메이션

📕 작업 설명

회원 가입 정보 입력 페이지에 애니메이션을 추가합니다.

📖 진행 사항

• 다음 버튼: 오른쪽에서 왼쪽
• 이전 버튼: 왼쪽에서 오른쪽

추천 회사 배너 애니메이션 기능 구현

📕 작업 설명

article card 컴포넌트 안에 추천 회사 배너 애니메이션 기능 구현

📖 진행 사항

• 애니메이션 추가

검색 결과 페이지 구현

📕 작업 설명

검색 결과 페이지를 마저 구현합니다...

📖 진행 사항

• 검색 결과 페이지 구현

404 페이지 구현

📕 작업 설명

404 페이지 구현

📖 진행 사항

• 404 페이지 구현

기존 article 카드 content 카드로 변경 및 types/contents.ts 적용

📕 작업 설명

기존 article 카드 content 카드로 변경 및 types/contents.ts 적용

📖 진행 사항

• article card -> content 카드
• types/contents.ts 적용

husky + lint-staged 설정

auth api 연동

📕 작업 설명

auth api를 연동합니다.

📖 진행 사항

• google oauth api 연동
• 로그인 api 연동
• 회원가입 api 연동
• 로그아웃 api 연동
• silent refresh api 연동

홈 페이지 스크롤 전 화면 구현

📕 작업 설명

홈 페이지 스크롤 전 화면의 레이아웃, 애니메이션을 구현합니다.

📖 진행 사항

• 레이아웃 구현
• 애니메이션 구현(스크롤)

네비게이션 UI 구현

📕 작업 설명

네비게이션 UI를 구현합니다.

📖 진행 사항

• 네비게이션 UI 구현

카드 리스트 무한 스크롤 구현

📕 작업 설명

무한 스크롤 구현...

📖 진행 사항

• tanstack query의 infinite queries 사용

storybook에 global css 적용

📕 작업 설명

storybook에 global css 적용 (font, 10px to 1rem 적용 안됨)

📖 진행 사항

• storybook에 global css 적용

signup 컴포넌트 파일명 대문자 시작으로 변경

📕 작업 설명

signup 컴포넌트 폴더 속 파일명을 대문자 시작으로 변경합니다.

📖 진행 사항

• 변경
• 소문자 파일 제거

콘텐츠 검색 기능 구현

📕 작업 설명

콘텐츠 검색 기능을 구현합니다.

📖 진행 사항

• 완성된 api msw로 콘텐츠 검색 기능 구현
• Card 공통 컴포넌트로 검색된 콘텐츠 랜더링

axios 환경 설정

📕 작업 설명

axios 환경을 설정합니다.

📖 진행 사항

• axios 환경 설정

모달 창 디자인 수정

📕 작업 설명

모달 창 디자인 수정

📖 진행 사항

• 디자인 수정
• center, icon 합치기

test

내 정보 페이지 구현

📕 작업 설명

내 정보 페이지 구현

📖 진행 사항

• 내 정보 페이지 마크업
• msw 연동

홈 페이지 스크롤 전 화면 배너 초기 사이징

📕 작업 설명

홈 페이지 스크롤 전 화면의 배너의 초기 사이즈를 조절합니다.

📖 진행 사항

• 사이즈 조절

auth msw 연동

📕 작업 설명

로그인, 회원 가입, 로그아웃 로직을 msw와 연동합니다.

📖 진행 사항

• google oauth msw 연동
• 로그인 msw 연동
• 회원 가입 msw 연동
• 로그아웃 msw 연동
• silent refresh msw 연동

favicon 변경

📕 작업 설명

favicon Logo 추가

📖 진행 사항

• favicon 변경
  

tab 컴포넌트 구현 및 storybook 연동

📕 작업 설명

tab 컴포넌트를 구현하고 storybook을 연동합니다.

📖 진행 사항

• tab 컴포넌트 구현
• storybook 연동

카운트다운 시간 버그 해결

📕 작업 설명

카운트다운 시간 버그를 해결합니다.

📖 진행 사항

• 카운트다운 시간 버그를 해결합니다.