Skip to content

Commit

Permalink
Merge: dev -> main 2차 피드백 수정 및 README.md 수정 (#105)
Browse files Browse the repository at this point in the history
* Init : vite 및 eslint / prettier 초기 설정

* Chore : zustand, react-router-dom, tanstack(react-query), styled-components, axios 설치

* Chore: 디렉토리 구조 설정

* Init : vite 및 eslint / prettier 초기 설정

* Chore : zustand, react-router-dom, tanstack(react-query), styled-components, axios 설치

* Chore: 디렉토리 구조 설정

* Style: 전역 스타일 설정

- css reset을 위한 `styled-reset` 라이브러리 설치
- element 스타일 및 폰트 초기화

* Style: eslint 컴포넌트 화살표 함수 설정 추가 및 App.tsx 컴포넌트 변경

* Style: eslint 컴포넌트 화살표 함수 설정 추가 및 App.tsx 컴포넌트 변경

* Style: 반응형 단위 및 font-family 설정

* Style: 버튼 user-select 속성 추가

* Style: body 태그 font-size 속성 제거

* Feat: react-router 기본 설정 (#2)

* Feat: react-router 기본 설정

- App.tsx: Routes 설정 추가
- HomePage, DetailPage, NotFoundPage 초기 컴포넌트 추가

* Refactor: 파일 경로 별칭 제거

* Refactor: RouteManager 컴포넌트 분기, Page 컴포넌트 폴더 분리

* Rename: Router -> RouterManager 컴포넌트명 변경

* Feat: theme 데이터 추가 (#3)

* Feat: Theme데이터 추가

* Feat: ThemeProvider 최상단 App에 연결 설정 추가

* Chore: lodash 및 추가 라이브러리 설치 / eslint path alias 설정 추가

* Docs: Create pull_request_template.md (#4)

PR 템플릿 추가

* Docs: Create PULL_REQUEST_TEMPLATE.md 및 위치 이동

* Feat: useForm 커스텀 훅 기능 추가

- 모든 입력 Form에서 재사용 가능한 훅 기능 개발
- 기존 useInput 삭제( useForm으로 대체 가능)

* Feat: 도메인 타입 작성 (#5)

* Feat: 도메인 타입 작성

* Refactor: 도메인 타입 수정

Request, Response 폴더 추가
이름 및 파일에 type 포함으로 변경
선택 요소 ? 추가
Request 타입 이름 변경

* Rename: 파일이름, type이름 변경

- Notification > NotificationType
- Request&Response 이름에 Type 추가

* Chore: eslint props 스프레드 설정 및 타입 간 의존성 허용 설정 추가

* Feat: Icon 컴포넌트 (#7)

* Feat: Icon 컴포넌트

* Style: 스타일 컴포넌트 컨벤션에 맞게 수정

* Refactor: Icon 컴포넌트 수정사항

* Refactor: className 속성

* Feat: Common Modal 컴포넌트 구현 (#9)

* Feat: 기본적인 Modal 구조 생성

* Style: 배경과 모달 기본 디자인 구현

* Feat: Modal 스타일 관련 Props와 타입 추가 / 스타일 적용

* Style: Modal 컴포넌트 내 스타일 컴포넌트 스타일 수정 및 타입 수정

* Feat: 스타일 컴포넌트 HTML 기본 Props 타입 추가

* Rename: 스타일 컴포넌트 코드 style.ts 파일로 분리

* Refactor: handleModalBgClick -> handleModalClose 함수명 변경

* Feat: Input component (#10)

* Feat: Input 커스텀 컴포넌트 기능 구현

* Design: Input 커스텀 컴포넌트 스타일 구현

* Feat: Input 커스텀 컴포넌트 Props 타입 구현

* Rename: input 컴포넌트 파일명 소문자로 변경

- Style.ts -> style.ts
- Type.ts -> type.ts
- 누락된 Input 글자 색을 추가

* Style: StyledComponent 변수 네이밍 수정

- Styled 접두사를 Input 컴포넌트에서 추가

* Fix: 이름에 type 누락 수정 및 image type 수정 (#11)

* Feat: Button 컴포넌트 추가 (#8)

* Feat: Button 컴포넌트

* Refactor: 코드리뷰 피드백 반영

* Fix: onClick 콜백 타입 지정 오류 수정

* Comment: 주석 제거

* Fix: Modal 컴포넌트 PR 피드백 적용 (#12)

* handleModalClose: 이벤트 버블링 방지
* StyledModalWrapper: z-index 추가
* isOpen props 삭제 및 관련 로직 삭제

* Fix: 채워진 아이콘 관련 수정사항 (#14)

* Fix: 아이콘 컴포넌트에 theme 추가 (#15)

* Fix: 채워진 아이콘 관련 수정사항

* Fix: Icon에 theme 추가

* Feat: Theme 색상 추가 (#19)

* Feat: Theme 테마에 따른 background 색상 추가

* Feat: Theme 데이터 글자 굵기 속성 추가

* Fix: Icon 컴포넌트 outline관련 피드백 반영 (#21)

* Fix: 채워진 아이콘 관련 수정사항

* Fix: Icon에 theme 추가

* Fix: outline 피드백 반영

* Feat: Input 컴포넌트 에러 메세지 출력 기능 추가 (#20)

* Feat: Input 컴포넌트에 에러 메세지를 출력하는 기능 추가

* Fix: Input 스타일 컴포넌트 padding 인식 불가능한 버그 수정

* Design: Input 컴포넌트 에러 메세지 위치 label 오른쪽으로 이동

* Design: errorMessage Props 하나로 에러 디자인 처리

* Fix: App.tsx Input 테스트 기능 제거

* Feat: Icon 컴포넌트에 ref 추가 (#25)

* Fix: 채워진 아이콘 관련 수정사항

* Fix: Icon에 theme 추가

* Fix: outline 피드백 반영

* Feat: Icon 컴포넌트 ref 추가

* Fix: Icon 컴포넌트 ref 수정 (테스트 완료)

* Feat: className 대신 isFill prop으로 변경

* Comment: 주석 제거

* Feat: SearchBar 컴포넌트 (#18)

* Feat: SearchBar 초기 레이아웃

* Feat: 버튼 컴포넌트 사용

* Refactor: 검색 기능 중간 점검

* Feat: SearchBar

* Feat: SearchBar 컴포넌트

* Feat: props, iconProps, inputProps 추가

* Fix: Button 컴포넌트 ref, 클릭이벤트 props 수정 (#27)

* Feat: Avatar 컴포넌트 추가 (#17)

* Feat: Avatar 컴포넌트 추가

* Refactor: 코드리뷰 피드백 내용 반영

- 상위 컴포넌트로부터 ref 전달받아 할당
- border-radius 비율 조정
- src prop 렌더링 조건 변경
- ...props 분리 (wrapperProps, ...props)

* Feat: children 프롭 추가

* Feat: Input 컴포넌트 ref 속성 props 추가 (#26)

- ref 속성을 상위에서 사용할 수 있기에 내부 ref를 활용한 초기 focus 로직은 제거 했습니다.

* Feat: useClickAway 커스텀 훅 기능 개발 (#22)

* Feat: useClickAway 커스텀 훅 기능 개발

* Feat: barrel export 추가

* Refactor: Button 컴포넌트 코드리뷰 피드백 반영 (#28)

- hover 스타일링 prop
- 기본값 부여 로직 변경 ('default' -> 논리연산자)

* Feat: ReactQuery 기본 설정 (#23)

* Feat: PostCard 공용 컴포넌트 구현 (#16)

* Feat: PostCard 공용 컴포넌트 구현

* Feat: PostCard 컴포넌트 내 공용 컴포넌트 적용 및 타입 수정

* Style: PostCard 컴포넌트 스타일 수정

* 폰트 사이즈 props 스타일 추가
* 배경 색 theme에서 background로 적용
* StyledPostCardTitle 텍스트 overflow 스타일 적용

* Feat: 이미지 파일 object-fit css 속성 props 설정 구현

* Style: PostCard 내 요소 스타일 수정

* Button 컴포넌트 hover 색상 수정
* Icon 컴포넌트 인라인 style 구조 수정
* 세부 padding 및 공용 theme 수정 적용

* Comment: 필요 없는 주석 삭제

* Feat: ImageUpload 컴포넌트 구현 (#24)

* Feat: ImageUpload 구조 초기 구현

* Feat: ImageUpload 내부 이미지 업로드 로직 구현

* Style: ImageUpload 컴포넌트 내 스타일 컴포넌트 및 스타일 지정

* Feat: ImageUpload 컴포넌트 내 타입 지정

* Test: 이미지 업로드 임시 파일 저장

* Style: 가져오기 버튼 hover 색상 적용

* Feat: Alert 컴포넌트 구현 (#29)

* Feat: Alert 기본 틀 완성

* Refactor: App 테스트 코드 삭제

* Feat: confirm, cancle 버튼 커스텀화 및 핸들러 장착, style, type 파일 분리

* Refactor: ImageUpload Test 코드 제거

* Feat: 공용 API 함수 구현 (#13)

* Feat: useForm 커스텀 훅 기능 추가

- 모든 입력 Form에서 재사용 가능한 훅 기능 개발
- 기존 useInput 삭제( useForm으로 대체 가능)

* Feat: Channel, Like, Post, Setting, User API 구현

* Chore: eslint props 스프레드 설정 및 타입 간 의존성 허용 설정 추가

* Feat: Icon 컴포넌트 (#7)

* Feat: Icon 컴포넌트

* Style: 스타일 컴포넌트 컨벤션에 맞게 수정

* Refactor: Icon 컴포넌트 수정사항

* Refactor: className 속성

* Feat: Common Modal 컴포넌트 구현 (#9)

* Feat: 기본적인 Modal 구조 생성

* Style: 배경과 모달 기본 디자인 구현

* Feat: Modal 스타일 관련 Props와 타입 추가 / 스타일 적용

* Style: Modal 컴포넌트 내 스타일 컴포넌트 스타일 수정 및 타입 수정

* Feat: 스타일 컴포넌트 HTML 기본 Props 타입 추가

* Rename: 스타일 컴포넌트 코드 style.ts 파일로 분리

* Refactor: handleModalBgClick -> handleModalClose 함수명 변경

* Feat: Input component (#10)

* Feat: Input 커스텀 컴포넌트 기능 구현

* Design: Input 커스텀 컴포넌트 스타일 구현

* Feat: Input 커스텀 컴포넌트 Props 타입 구현

* Rename: input 컴포넌트 파일명 소문자로 변경

- Style.ts -> style.ts
- Type.ts -> type.ts
- 누락된 Input 글자 색을 추가

* Style: StyledComponent 변수 네이밍 수정

- Styled 접두사를 Input 컴포넌트에서 추가

* Fix: 이름에 type 누락 수정 및 image type 수정 (#11)

* Feat: api 함수 전체 기본 틀 완성, test 필요

* Fix: request params->body 수정

* Feat: 포스트 수정 Request Type 추가

* Feat: updatePost Request Type 설정

* Feat: axios 인스턴스 일반/인증 분리

* Fix: createPostRequestType - image 타입 null 삭제

* Refactor: formData 형식 변경

* Refactor: 테스트 코드 제거

* Fix: Constants - CHANNEL, SEARCH 값 수정

* Fix: 잘못된 엔드포인트, 인스턴스 수정

* Feat: 검색 api 함수 완성

* Refactor: Request type - image null 허용하도록 변경

* Refactor: getPostDetail 에서 누락된 리턴 타입 추가

* Comment: 완료한 todo 주석 제거

* Remove: ex.md 더미 파일 삭제

* Comment: interceptors 주석 상세하게 변경

* Refactor: 1차 PR 피드백 완료

* Feat: 에러 핸들링 함수 추가

---------

Co-authored-by: 지인혁 <[email protected]>
Co-authored-by: Cho-Ik-Jun <[email protected]>
Co-authored-by: Seung Min Lee <[email protected]>
Co-authored-by: 지인혁 <[email protected]>

* Feat: 다크모드 전역 상태 관리 기능 추가 (#34)

* Feat: DarkMode 전역 상태 관리 기능 추가

* Feat: DarkMode 전역 상태 타입 기능 추가

* Remove: Stores -> ex.md 파일 삭제

* Feat: Stores 디렉토리 리 익스포트 기능 추가

* Feat: 다크모드 상태에 따른 Theme 객체 적용

* Feat: 채널 생성 및 상수화 (#37)

* Fix: useForm onChange 이벤트 발생 시 해당 name 에러 초기화 (#40)

* Rename: src/Hooks/UseForm/Type.ts -> type.ts

* Feat: 로그인 페이지 레이아웃 (#36)

* Feat: 로고 이미지 추가

- 다크모드 로고 이미지 추가
- 라이트모드 로고 이미지 추가

* Feat: 로그인 페이지 뒤로가기 버튼 컴포넌트 추가

- 뒤로가기 버튼 컴포넌트 타입 추가
- 회원가입 페이지에서 재사용되어 공용 컴포넌트 디렉토리에 추가

* Feat: 로그인 페이지 로고 컴포넌트 추가

- 로고 컴포넌트 타입 추가
- 로고 컴포넌트 스타일 추가
- 로고 클릭 시 메인 페이지로 이동 기능 추가
- 회원가입 페이지에서 재사용되어 공용 컴포넌트 디렉토리에 추가

* Feat: 로그인 페이지 입력 폼 컴포넌트 추가

-  입력 폼 컴포넌트 타입 추가
-  입력 폼 컴포넌트 스타일 추가
-  입력 폼 이메일, 비밀번호 유효성 검사 UI 및 기능 추가

* Feat: 로그인 페이지 회원가입 이동 버튼 컴포넌트 추가

* Feat: 로그인 페이지 기본 레이아웃 및 스타일 추가

* Feat: 로그인 페이지 Router페이지 리스트에 추가

* Feat: 이메일 유효성 검사 유틸 함수 기능 추가

- 회원가입 및 내 정보 수정에서 공용으로 사용될 것 같아 유틸 함수로 분리

* Design: 로그인 페이지 반응형 디자인

* Design: 반응형 뒤로가기 버튼 left, top 위치 수정

* Comment: Components/Login/LoginForm/style.ts 주석 제거

* Fix: Theme 객체 반응형 모바일 기준 단위 수정

* Design: 뒤로가기 버튼 스타일 변경

- !important 제거하고 상위 컴포넌트에서 클래스로 제어
- 뒤로가기 버튼 인라인 스타일 제거

* Feat: Badge 컴포넌트 구현 (#30)

* Feat: Badge 컴포넌트 구현 및 Avatar 컴포넌트 수정

* Fix: 단위 비율 수정 및 JSDoc 작성

* Fix: 테스트코드 제거

* Feat: DropDown 컴포넌트 구현 (#31)

* Feat: DropDown 컴포넌트 구현

* Design: 스타일 변수 바인딩 및 스타일링

* Feat: label 구현

* Fix: 단위 수정 및 JSDoc 프롭 설명 추가

* Design: CSS 스타일 단위 수정

* Feat: Spinner 컴포넌트 구현 (#35)

* Feat: Spinner 컴포넌트 구현

* Comment: JSDoc 프롭 설명 추가

* Refactor: 코드리뷰 피드백 반영

- map 함수를 통한 Div 태그 반복 축약
- rotate 키프레임 디렉토리 분리

* Comment: JSDoc 프롭 설명 수정

* Feat: Skeleton 컴포넌트 구현 (#38)

* Feat: Skeleton 컴포넌트 구현

* Comment: JSDoc 프롭 설명 추가

* Refactor: 키프레임 디렉토리 분리

* Refactor: Paragraph 사이즈 커스텀 및 JSDoc 수정

* Feat: 세션스토리지 커스텀 훅 기능 추가 (#41)

* Fix: Modal 컴포넌트 wrapper 너비 및 높이 수정 (#42)

* Feat: 로그인 기능 개발 (#45)

* Fix: 세션스토리지 JSON 파싱 기능 수정

* Design: 다크모드 스타일 적용

* Feat: 로그인 기능 개발

* Feat: 사용자 전역 상태 관리 기능 개발

* Fix: useForm 커스텀 훅 타입 제너릭으로 수정

* Feat: 인증된 상태로 로그인 페이지 진입 시 유저 상태 초기화 버그 수정

* Feat: HomePage(메인페이지) 레이아웃 및 기본 기능 구현 (#44)

* Feat: HomePage 전체 기초 레이아웃 및 카테고리 사이드 네비 구현

* Header 컴포넌트 위치 아래에 기초 레이아웃 구현
* 카테고리 사이드 네비 레이아웃 및 데이터 패칭 구현

* Feat: Channel 상수 객체 인덱스 시그니처 타입 추가

* Feat: Channel 카테고리 버튼 hover 및 선택 시 배경 색 변경 로직 구현

* Design: Channel List 레이아웃 크기 및 여백 스타일 수정

* Feat: 유저 목록 리스트 네비바 구현 및 레이아웃

* Feat: 유저 목록 검색 기능 구현

* Feat: MainPage PostCard List 구현

* Fix: SerachBar 컴포넌트 이벤트 핸들러 함수 선택 속성으로 변경

* onChangehandler, onSubmithandler

* Comment: 레아아웃 및 함수 관련 주석 추가

* Feat: UserCard 공용 컴포넌트 구현 (#43)

* Feat: UserCard 공용 컴포넌트 구현

* Design: UserCard 컴포넌트 hover 시 배경색 적용

* Feat: UserCard mode props 추가 및 follow 버튼 추가 구현

* mode props로 chat, follow, alarm 등 상황에 맞게 UI 변경
* follow 버튼 추가

* Comment: 함수 및 컴포넌트 내 요소 주석 추가

* Feat: ImageCard 컴포넌트 (#39)

* Feat: 중간 저장

* Feat: ImageCard 컴포넌트

* Feat: Icon 크기 조정 가능하게

* Feat: theme 컬러 제외

* Feat: Icon 크기 조절

* Fix: Modal 컴포넌트 렌더링 포탈 및 props 일부 수정 (#49)

* createPortal로 body 최하위 자식 요소로 렌더링되도록 수정
* onChangeOpen 선택 props 으로 변경
* borderRadius props 단위 rem으로 변경
* JSDoc 추가

* Feat: Alert 컴포넌트 메세지 크기 props 추가 (#50)

* Feat: Modal 다크모드 props 추가 (#51)

* Fix: fixLoginForm (#52)

* Design: 로그인 폼 텍스트 정렬 왼쪽으로 수정

* Fix: 입력 폼 받을때 마다 유효성 검사하게 수정

* Comment: useForm 30줄 주석 제거

* Refactor: DropDown 컴포넌트 리팩토링 (#53)

Refactor: isShow 프롭을 전달하여 display를 통한 조건부 출력 구현

* Feat: 회원가입 페이지 (#46)

* Feat: 회원가입 페이지 레이아웃

* Rename: 디렉토리명 수정

* Feat: 회원가입 API 바인딩

* Feat: 폼 미입력 시 제출버튼 비활성화

* Refactor: react-query를 활용한 API 통신 로직 개선 및 코드리뷰 피드백 반영

* Fix: 유효성 검사 수정

* Fix: icon 클래스 추가 (#54)

* Fix: icon 클래스 추가

* Fix: className 기본값 변경

* Feat: 전체 사용자 목록 조회 (#48)

* Design: UserList 레이아웃

* Feat: 사용자 리스트 아이템 컴포넌트

- 사용자 아이템 영역 클릭 시 해당 유저 페이지로 이동
- 접속 중 사용자는 접속 중 뱃지 UI 표시

* Feat: 사용자 리스트 컴포넌트

- 사용자 리스트 목록 데이터를 UI로 표현
- 맨 마지막 리스트 데이터에 옵저버로 관찰 후 intersection되면 추가적인 유저 목록을 로드
- 현재 접속 중 사용자 확인은 onLineUser리스트 목록에 현재 id 값이 있다면 온라인 유저로 판단

* Feat: 유저 관리 컴포넌트

- offset, limit 상태 관리
- offset, limit에 따른 전체 사용자 목록을 가져오는 useQuery 훅
- 현재 접속 중 사용자 목록을 가져오는 useQuery 훅 (2초마다 refetch)

* Feat: queryKey 상수로 관리

* Refactor: 유저 관리 기능 컴포넌트로 분리

- 기존 메인 페이지 로직을 컴포넌트로 분리하여 리팩토링

* Refactor: 유저 관리 기능 컴포넌트로 분리

- 기존 메인 페이지 로직을 컴포넌트로 분리하여 리팩토링

* Chore: react-intersection-observer 라이브러리 설치

* Fix: 실시간 사용자 목록 최상위로 이동

* Fix: 유저 리스트 아이템 클릭 시 이동 url 수정

* Feat: 스켈레톤 UI 기능 주석으로 임시 추가

* Feat: 유저 목록 컴포넌트 반응형 디자인 기능 개발

- 1024px 이하 기준으로 display: none

* Refactor: src/Components/UserManger 47 라인 주석 제거

* Feat: Header 컴포넌트 (#32)

* Feat: Header 초기

* Feat: Header 초기 레이아웃

* Feat: nav 아래 선 추가

* Style: header todo 작성

* Feat: 페이지 이동, 모달 열기

- RouterManger 수정(BrowserRouter App.tsx로 빼기)
- directmessage 페이지, 모달 추가
- 페이지 이동 및 모달 열기 기능 추가

* Feat: HeaderTab으로 분리

* Feat: HeaderUser 분리

* Comment: console.log 삭제

* Feat: BrowserRouter 위치 main.tsx로 이동

* Feat: 코드리뷰 피드백 반영

- HeaderLogo 분리
- map의 key값 변경
- isUser > isAuthUser
- 중복 코드 삭제, 오타 수정

* Feat: HeaderTab 스타일 부여 수정

- 기존 방식에서 styled-component 내에서로 수정

* Feat: PR리뷰 반영

- 섹션 나누는 border 삭제
- StyledContainer로 통일

* Feat: Header 피드백 디자인 변경 반영

* Feat: 중간 저장

* Style: 코드 포맷 변경

* Feat: Header 컴포넌트

* Feat: 선택시 아래 밑줄로 수정

* Feat: Header z-index 수정

* Feat: 로그인/회원가입 페이지일시 헤더 안보이게

* Feat: dropdown 바깥 클릭시 off

- useClickAway 사용

* Feat: tab 상태관리 init

* Feat: 로그인/회원가입시 헤더 없음 수정

* Feat: 로그인 로그아웃

* Feat: 인증, 로그아웃 처리 수정

* Feat: dropdown 중간 저장

* Feat: 사용자 react-query로 변경, 현재 page에 따라 tab 가져오기

* Fix: tabLocation 타입 지정

* Refactor: isFill 삼항 연산자 제거

* Comment: 주석 추가

* Feat: Dropdown 수정

* Fix: 로그아웃 시 setTab(home)추가

* Feat: 새로고침해도 페이지 유지 로직 수정

* Feat: 사용자 인증 확인 로직 변경

* Feat: url 존재하는 요소 페이지로 변경

* Feat: tab 관리 로직 zustand로 변경

* Feat: setTab(prev) 누락된 거 추가

* Feat: 코드 리뷰 반영

* �Feat: 다이렉트 메세지 페이지 (#47)

* Design: SearchBar fixed 속성 제거

* Feat: Message 관련 react-query 커스텀 훅 생성

* Feat: 로그인 id 더미데이터 생성, 추후에 연동 예정

* Feat: DirectMessagePage 라우터 설정

* Fix: UserType 오타 수정

* Feat: 다이렉트 메시지 페이지 레이아웃, 기본 기능, 데이터 바인딩 구현

* Refactor: 메세지 보낼 때 앞 뒤 공백 제거 기능 추가

* Refactor: Test 코드 진행, 분리 구간 주석 추가

* Chore: lodash, dayjs 설치

* Design: 버튼 컴포넌트 disable 커서 스타일 변경

* Refactor: 스켈레톤 컴포넌트 속성 확장

* Refactor: App 테스트 코드 삭제

* Refactor: Alert 컴포넌트 message 타입 확장

* Feat: UserCard 라디오 모드 추가, 채팅 모드 리팩토링

* Remove: 더미데이터 삭제

* Refactor: 로그인 테스트 코드 삭제

* Comment: 알림 API 함수 필요한 정보 주석 추가

* Feat: 메세지 react-query 커스텀 훅 예외처리 및 유저 검색 기능 추가

* Feat: dayjs 관련 유틸 함수 구현

* Feat: 다이렉트 메세지 페이지에서 사용될 스켈레톤 UI 구현

* Feat: 다이렉트 메세지 페이지 기능 추가 및 리팩토링

Feat: 읽음 처리 기능 추가
Feat: 메세지 전송 시 상대방에게 알림 보내는 로직 추가
Refactor: UserItem -> UserCard으로 변경
Refactor: 메세지 옆에 한국시간으로 표기
Feat: 새로운 날짜가 될 때마다 채팅방에 날짜 표기
Feat: 스켈레톤 및 에러 핸들링 추가
Refactor: store연결 후 더미데이터 삭제

* Fix: conflict 해결 과정 중 누락한 코드 수정

* Feat: Theme 모드 세션스토리지 저장 (#57)

* Feat: Theme 모드 스토리지 키 상수 기능

* Feat: 다크모드 전역 상태 스토리지 저장 기능 개발

* Feat: 메인 페이지 포스트 무한 스크롤 구현 (#58)

* Design: 카테고리 좌측 네비 반응형 디자인 추가

* 태블릿(max-width: 768px) 크기 이하일 경우 숨기기

* Feat: 초기 렌더링 시 사용자 인증 여부 확인 추가

* Feat: 메인 페이지에서 로그인 안했을 경우 confirm 창 추가 및 채널 생성 버튼 수정

* 관리자 계정이 아니면 채널 생성 버튼 안 보임

* Feat: 다른 채널 선택 시 포스트 초기화 및 빈 포스트 영역 구현

* Feat: 포스트 무한 스크롤 구현

* Refactor: postCard 리스트 불필요한 조건부 렌더링 삭제

* Fix: 포스트 리스트 api 호출 결과 체크 조건 로직 수정

* Refactor: 유저 목록에서 관리자 제외하는 로직 유틸 함수로 분리

* Feat: 알림 목록 조회 (#56)

* Fix: 스켈레톤 컴포넌트 ...props 타입 받을 수 있게 수정

* Feat: 스켈레톤 리스트 컴포넌트 기능 구현

* Fix: ValidateLoginProps import 시 export로 받도록 수정

* Feat: 알림 카테고리 아이템 컴포넌트 기능 개발

* Feat: 알림 카테고리 리스트 컴포넌트 기능 개발

* Feat: 알림 헤더 컴포넌트 기능 개발

- 닫기 아이콘 클릭 시 사용하는 곳에서 callback 함수를 전달

* Feat: 알림 아이템 컴포넌트 기능 개발

- 해당 알림 클릭 시 해당 알림 타입에 맞게 해당 url로 이동

* Feat: 알림 리스트 컴포넌트 기능 개발

* Feat: 사용자 디폴트 이미지 상수 기능 추가

* Feat: 쿼리 키 notificationList 상수 추가

* Feat: 생성 날, 현재 날 차이로 일, 시간을 구하는 유틸 함수 기능 개발

* Remove: 유틸 디렉토리 ex.md 파일 삭제

* Feat: 알림 목록 데이터 가공 기능 개발

- 알림 목록을 받아 현재 카테고리 상태에 맞는 데이터를 가공
- 카테고리 상태에 가공된 데이터를 기준으로 보여줄 텍스트 메세지, 알림 타입, 알림 타입 id 프로퍼티를 추가하여 데이터를 가공

* Feat: 알림 모달 컴포넌트 및 기능 개발

- 알림 목록 데이터 패칭
- 카테고리 리스트 선택 기능
- 알림 목록 데이터 가공해서 List  컴포넌트에 전달
- 스켈레톤 UI 기능 추가

* Fix: 사용자 이미지 coverImage에서 image 프로퍼티로 수정

* Refactor: 사용자 기본 이미지 변수명 변경

* Design: 알림 메세지 모달 창 스타일 수정

- 알림 아이템 텍스트 벗어나면 ... 표시
- 알림 z-index 9로 수정

* Style: 타입 오타 수정

- src/Components/NotificationModal/CategoryList/type/ts   setCategory: (categorY: CategoryType) => void; ->   setCategory: (category: CategoryType) => void;

* Fix: Header 가려지는 이슈 해결 (#60)

+ 헤더 아래 border 추가

* Feat: 포스트 상세 페이지 모달 및 파생 모달 레이아웃 기본 동작 구현 (#55)

* Feat: DetailPage 모달 컴포넌트 기본 중첩 라우팅 기본 구조 구현

* Fix: Modal 컴포넌트 내 onChangeOpen props 선택 속성으로 변경

* Fix: Modal 컴포넌트 내 onChangeOpen props 선택 속성으로 변경

* Merge branch 'feature/postDetailModal' of https://github.com/prgrms-fe-devcourse/FEDC5_STYLED_sehee into feature/postDetailModal

* Feat: PostCard 컴포넌트 추가 click 이벤트 선택 props 추가

* Feat: HomePage -> DetailPage 중첩 라우팅 구현

* Feat: PostDetailModal 기본 구조 구현

* Comment: PostDetailModal 관련 함수 주석 추가

* Feat: 이미지 영역 및 Author 정보 영역 구현

* Feat: 포스트 추가 동작 postDotModal 구현

* Feat: postDetail 내용 영역 및 좋아요, 댓글, 1대1 채팅 버튼 레이아웃 구현

* Feat: 댓글 입력 창 및 버튼 클릭 이벤트 동작 일부 추가

* Comment: PostDetailPage 및 파생 모달 관련 주석 추가

* Fix: 디폴트 이미지 임시 지정

* Feat: 점 세개 모달 내 버튼 조건부 렌더링 및 팔로우 변경 버튼 동작 구현

* Fix: 아바타 찌그러지는 현상 해결

* Fix: 코드 리뷰 피드백 수정

* 날짜 변환해서 표시
* 좋아요 한 사람 id에서 fullName으로 변경
* fetch 함수들 react-query로 마이그레이션
* 댓글 없을 경우 댓글 제목 삭제
* 기본 프로필 이미지 추가

* Feat: 채널 생성 모달 및 api 로직 구현 및 일부 수정사항 변경 (#61)

* Feat: 채널 생성 모달 중첩 라우팅 및 기본 동작 구현

* Feat: 채널 생성 api 로직 추가 및 생성 폼 구현

* Design: 카테고리 버튼 리스트 스크롤 구현

* Fix: 중첩 라우팅 적용 안되는 문제 해결

* Refactor: 중첩 라우팅 중복 코드 ModalRouter로 분리

* Comment: 필요 없는 주석 삭제

* Fix: Merge 병합 시 누락된 코드 수정

* Fix: 채널 생성 버튼 핸들러 함수 재연결

* Feat: 사용자 상세 페이지 레이아웃 및 api 연동 (#59)

* Feat: 프로필 페이지 초기 레이아웃 설정

* Feat: 프로필 레이아웃

* Feat: Image 카드 레이아웃

* Feat: map으로 변경 + 더미데이터로 테스트

* Style: 코드 포맷 변경

ProfilePost, ProfileInfo로 분리

* Style: 분리 파일 생성

* Feat: 중간 저장

* Feat: 프로필 페이지 api 연동

* Style: 다른 사용자/나 자신 간격 똑같게

* Feat: error 핸들러 변경

* Feat: 변수 이름 변경, 이름 수정 icon 추가

* Feat: 좋아요한 포스트 로직 개선

* Feat: 기본 이미지 설정

* Refactor: ImageCard 아이콘 색 고정

* Feat: darkmode 반영

* Feat: 이미지 클 시 overflow: hidden 추가

* Feat: 메인 페이지 및 상세 페이지 좋아요 기능 구현 및 세부 추가 수정사항 수정 (#66)

* Refactor: 기존 api 로직들 react-query로 변경 및 무한 스크롤 로직 변경

* Fix: 무한 스크롤 쿼리 초기화 및 포스트 상세 페이지 이동 이슈 해결

* Feat: 좋아요 기능 구현

* �Refactor: 다이렉트 메세지 페이지 반응형 UI 적용 및 리팩토링 (#62)

* Feat: UserCard header 모드 추가

* Feat: DM Header 클릭 시 해당 유저 상세 페이지로 이동, 기존Header -> UserCard로 변경

* Refactor: 검색 타이핑 하는 동안 스켈레톤UI 적용

* Design: 메세지 보낼 때마다 진동하는 애니메이션 추가

* Refactor: 스켈레톤 UI 더 길게 수정

* Feat: Input 옆 전송 버튼 추가, 반응형 UI 구현

- 태블릿 이하 크기일 때는 ConversationList와 MessageList 중 하나만 보이도록 구현
- Icon hover시 UI 개선

* Refactor: MessageModal 반응형 크기 조절

* Fix: 스크롤 안 내려가던 현상 해결

* Refactor: UserCard style 개선, bounce 애니메이션 분리

* Fix: 모바일 환경에서 모달에서 메세지 목록으로 안 넘어가던 현상 해결

* Refactor: �receiver 전역 상태 추가 (#68)

* Feat: UserCard header 모드 추가

* Feat: DM Header 클릭 시 해당 유저 상세 페이지로 이동, 기존Header -> UserCard로 변경

* Refactor: 검색 타이핑 하는 동안 스켈레톤UI 적용

* Design: 메세지 보낼 때마다 진동하는 애니메이션 추가

* Refactor: 스켈레톤 UI 더 길게 수정

* Feat: Input 옆 전송 버튼 추가, 반응형 UI 구현

- 태블릿 이하 크기일 때는 ConversationList와 MessageList 중 하나만 보이도록 구현
- Icon hover시 UI 개선

* Refactor: MessageModal 반응형 크기 조절

* Fix: 스크롤 안 내려가던 현상 해결

* Refactor: UserCard style 개선, bounce 애니메이션 분리

* Fix: 모바일 환경에서 모달에서 메세지 목록으로 안 넘어가던 현상 해결

* Refactor: receiver 전역 상태 관리로 변경, 메세지 모달에서 타이핑 시 스켈레톤 유지하도록 변경

* Feat: 사용자 검색 기능 개발 (#63)

* Fix: 사용자 기본 이미지 상수화

* Fix: 사용자 이미지 프로퍼티 수정

- coverImage -> image

* Fix: 유저 리스트 중복 키 문제 해결

* Feat: 사용자 목록 중 인증 된 사용자 표시 기능 개발

* Fix: 사용자 목록 리스트 버그 수정

- key 중복 버그 수정
- 무한 스크롤 시 스크롤 위치 최 상단으로 이동하는 버그 수정

* Fix: SearchBar 컴포넌트 inputProps 타입 수정

* Comment: LoginForm 컴포넌트 주석 제거

* Feat: 사용자 검색 쿼리 키 추가

* Feat: UseForm useCallback으로 렌더링 최적화

* Remove: UserSearchForm 디렉토리 삭제

* Feat: 사용자 검색 유효성 검사 함수 기능 개발

* Feat: 사용자 검색 기능 개발

* Design: 사용자 리스트  호버 색상 변경

* Feat: 비밀번호 변경 기능 (#65)

* Feat: 비밀번호 변경 기능

* Feat: styled-component 적용, 성공 시 alert

* Refactor: 안쓰는 message 삭제

* Feat: 포스트 및 유저 검색 기능 (#67)

* Feat: SearchModal 컴포넌트 설계

* Feat: 컴포넌트 Props 설정 및 타입 지정

* Design: 대략적인 컴포넌트 스타일링

* Feat: SearchBar 구현 및 입력 query 전달

* Feat: 컴포넌트 구현

* Feat: react-query를 이용한 검색 로직 구현

* Refactor: 코드리뷰 피드백 반영

- 공백 입력 시 예외 처리
- 예외 발생 시 State 초기화
- createdAt 시간 형식 KST로 변환
- Avatar 컴포넌트 src 속성 및 기본값 수정

* Feat: 포스트 작성/수정 모달 구현 (#64)

* feature: createPostModal 컴포넌트 설계

* Feat: 컴포넌트 Props 설정 및 타입 지정

* Feat: 이미지 업로드 기능

* Feat: 드롭다운, 공유하기 버튼, 유저 프로필 구현

* Feat: textarea 세부 컴포넌트 구현

* Feat: react-query를 통한 포스트 작성 요청 로직 구현

* Feat: 폼 입력 예외처리 구현

* Rename: 컴포넌트 확장에 따른 디렉토리 수정 (CreatePost -> AddOrEditPost)

* Feat: 게시글 수정 라우팅 시 title 초기화

* Feat: 게시글 수정 라우팅 시 channel (드롭다운) 초기화

* Feat: 게시글 수정 쿼리 요청 구현

* Feat: 메인페이지, 포스트 상세 페이지에서 팔로우 동작 api 연결 및 관련 커스텀 훅 생성 (#69)

* Feat: follow, like 관련 api useMutation 커스텀 훅 생성

* Feat: 메인페이지, 포스트 상세 페이지에서 팔로우 동작 api 연결

* Feat: 댓글 기능 api 연결 및 유저 페이지 이동 구현 (#70)

* Feat: follow, like 관련 api useMutation 커스텀 훅 생성

* Feat: 메인페이지, 포스트 상세 페이지에서 팔로우 동작 api 연결

* Fix: Like useMutate 훅 check auth 리패치 코드 추가

* Fix: handleClickLike 함수 버그 수정

* Feat: DotModal 낸 handleEditPost 포스트 수정 페이지 이동 구현

* Fix: 포스트 수정 날짜 오류로 생성 날짜로 표시 변경

* Feat: 댓글 작성 및 삭제 기능 api 연결과 아이디, 아바타 클릭 시 유저 페이지로 이동 구현

* Fix: 한글 두 번 댓글 달리는 문제 해결

* Design: 아이콘 드래그 방지 스타일 적용

* Feat: 알림 관련 useMutation 훅 구현

* Feat: 좋아요, 팔로우 알림 구현

* Feat: 포스트 상세 페이지 좋아요, 팔로우 알림 구현

* Feat: 포스트 상세 페이지 댓글 알림 구현

* Fix: dev 병합 시 중복 코드 수정

* Feat: 알림 읽기 기능 개발 (#71)

* Feat: 알림 읽음 처리 기능 개발

* Feat: 모달 보여주는 기능 추가

* Design: 알림 모달 위치 스타일

* Design: 알림 아이템 호버 색상 변경

* Fix: 알림 필터 테스트 코드 되돌리기

* Refactor: 알림 모달 창 리팩토링

* Feat: 알림 갯수 필터링 함수 기능 개발

* Feat: 알림 읽음 처리 기능 개발

* Refactor: 알림 모달 컴포넌트 리팩토링

* Refactor: ModalButton 컴포넌트 리팩토링

* Fix: 메세지 읽음 처리 되도록 수정

* 임시 커밋

* Rename: 시간 차이 계산하는 유틸함수 삭제

* Fix: 시간 차이 계산하는 로직 초, 분 단위까지 수정

* Fix: 알림 아이콘에만 알림 뱃지 기능되도록 수정

* Fix: 메세지 알림까지 기능 추가하도록 수정

* Fix: 알림 갯수 1개 이상 부터 보이도록 수정

* Fix: 알림 없을 시 0 텍스트 뜨는 버그 수정

* Design: 알림 뱃지  텍스트 흰색으로 수정

* Fix: 팔로우 알람 텍스트 수정

* Fix: 팔로우 반환 타입 수정

* Fix: 팔로우 취소, 댓글 삭제 시 알림에서 제거 필터링 기능 수정

* Fix: 알림 색상 변경

* Fix: 브라우저가 선택됐을 때 리패치 하도록 수정

* Fix: 메세지 알림 클릭 시 해당 유저 메세지 유저 상태 갱신

* Feat: 다크 모드 기능 버튼 구현 (#75)

* Fix: 유저 리스트 더 불러올 때 왼쪽 밀리는 현상 수정

* Fix: 사용자 자기 자신일 경우 아래 테두리 표시

* Feat: 다크모드 기능 버튼 구현

* Fix: dev 브랜치로 머지 시 중복 코드 삭제

* Fix: MessageReceiver 모듈 경로 수정 (#76)

* Feat: 포스트 삭제 기능 api 연결 구현 및 useMutate 훅 생성 (#74)

* Feat: follow, like 관련 api useMutation 커스텀 훅 생성

* Feat: 메인페이지, 포스트 상세 페이지에서 팔로우 동작 api 연결

* Fix: Like useMutate 훅 check auth 리패치 코드 추가

* Fix: handleClickLike 함수 버그 수정

* Feat: DotModal 낸 handleEditPost 포스트 수정 페이지 이동 구현

* Fix: 포스트 수정 날짜 오류로 생성 날짜로 표시 변경

* Feat: 댓글 작성 및 삭제 기능 api 연결과 아이디, 아바타 클릭 시 유저 페이지로 이동 구현

* Fix: 한글 두 번 댓글 달리는 문제 해결

* Design: 아이콘 드래그 방지 스타일 적용

* Feat: 알림 관련 useMutation 훅 구현

* Feat: 좋아요, 팔로우 알림 구현

* Feat: 포스트 상세 페이지 좋아요, 팔로우 알림 구현

* Feat: 포스트 상세 페이지 댓글 알림 구현

* Fix: dev 병합 시 중복 코드 수정

* Feat: 포스트 삭제 관련 useMutate 훅 useDeletePost 구현

* Feat: 포스트 삭제 기능 api 연결 구현

* Fix: dev 병합 시 중복 코드 수정

* Feat: checkAuth 관련 useCheckAuth mutation 훅 구현

* Feat: 자기 자신 게시물일 경우 팔로우 버튼 안 보이게 구현

* Feat: 포스트 삭제 확인 Alert 모달 창 추가

* Fix: 댓글 알림 URL 경로 변경 및 commnet 타입 변경 (#78)

* Fix: 댓글 포스트 타입 변경

* Fix: 댓글 알림 클릭 시 이동 URL 경로 변경

* Fix: 댓글 알림 포스트 ID 파싱 데이터 수정

* Fix: 댓글 알림 2줄까지 보이도록 수정

* Feat: 전역 메타 태그 설정

* Feat: 팔로우 모달 구현 (#72)

* Feat: Follow Modal 기본 레이아웃 구현

* Feat: FollowInfo 타입 변경

* Feat: 본인일 경우 팔로우 버튼이 뜨지 않도록 변경

* Refactor: 다이렉트 메세지 함수명 변경

* Refactor: UserCard 줄어들어도 찌그러지지 않도록 변경

* Refactor: 무한 API 호출 임시 변경

* Feat: 팔로우 모달 완성

- 팔로워, 팔로우 클릭시 팔로우 모달 열림
- 팔로우 API 연동 완료
- 유저 클릭 시 해당 유저의 상세 페이지로 이동
- 유저 검색 기능 추가, 디바운싱 적용
- 반응형 추가

* Refactor: 타이핑 로딩 상태 별도 분리

* Feat: 팔로우시 알림 보내도록 추가 구현

* Feat: checkAuth react-query 커스텀 훅 생성

* Feat: getUser react-query 커스텀 훅 생성

* Feat: 디바운스 검색 커스텀 훅 분리

* Feat: useResize 커스텀 훅 분리

* Refactor: 코드 리뷰 개선 사항 반영

- Follow Modal 정렬 이름 순으로 변경
- 겹치는 로직 커스텀 훅으로 분리

* Refactor: isLoading 되돌려놓기

* Refactor: 주석제거, 변수명 변경

* Fix: User Card 이름 및 아바타 클릭 오류 및 다이렉트 메시지 버그 수정 (#79)

* Feat: 프로필 이미지 변경, 사용자 이름 변경 기능 (#73)

* Feat: 프로필 페이지 링크 연결

* Feat: 프로필 이미지 변경

* Feat: 이름 변경 기능 init

* Feat: 프로필 페이지 무한루프 해결

* Fix: 무한 호출 수정

* Style: 변수이름 변경

* Feat: 이름 변경 기능

* Feat: 메시지 receiver 세팅

* Feat: 팔로우/팔로잉 상태에 따라 버튼 다르게

* Fix: 회원가입 헤더 보이는 오류 해결

* Feat: 팔로잉 버튼 색 추가

* Style: 코드 정리

* Feat: 팔로우/팔로잉 기능

* Feat: likebyid 중복 코드 제거

* Feat: 좋아한 포스트 목록..

* Fix: 무한 호출

* Feat: 스켈레톤 코드 추가

되는건지모르겟는

* Feat: 이름 0글자일 경우 버튼 disabled

* Feat: 변경실패시 alert

* Feat: 모달 뒷배경 프로필로되게

* Style: 충돌해결

* Feat: 메인 페이지와 상세페이지 스켈레톤 UI 추가 (#80)

* Fix: UserCard 이벤트 버블링 방지

* Feat: 메인페이지 PostCard 스켈레톤 UI 구현

* Feat: 상세페이지 스켈레톤 UI 구현

* Fix: refetch 관련 수정사항 반영 (#81)

* Feat: 프로필 페이지 링크 연결

* Feat: 프로필 이미지 변경

* Feat: 이름 변경 기능 init

* Feat: 프로필 페이지 무한루프 해결

* Fix: 무한 호출 수정

* Style: 변수이름 변경

* Feat: 이름 변경 기능

* Feat: 메시지 receiver 세팅

* Feat: 팔로우/팔로잉 상태에 따라 버튼 다르게

* Fix: 회원가입 헤더 보이는 오류 해결

* Feat: 팔로잉 버튼 색 추가

* Style: 코드 정리

* Feat: 팔로우/팔로잉 기능

* Feat: likebyid 중복 코드 제거

* Feat: 좋아한 포스트 목록..

* Fix: 무한 호출

* Feat: 스켈레톤 코드 추가

되는건지모르겟는

* Feat: 이름 0글자일 경우 버튼 disabled

* Feat: 변경실패시 alert

* Feat: 모달 뒷배경 프로필로되게

* Style: 충돌해결

* Feat: refetch hook으로 변경

* Fix: refetch 변경 및 profilePage useEffect 제거

* Fix: follow 버튼 이벤트 버블링 오류 재수정

* Design: 헤더 및 메인페이지 스타일 개선 (#77)

* Design: 색상표 추가 및 테마 변수 할당

* Design: 모든 style.ts 파일 'buttonClickHover' -> 'buttonHoverBackground' 변경

* Design: 스크롤바 전역 스타일링

* Design: Header 컴포넌트 스타일 리팩토링

- 로고 변경
- 중앙구분선 추가, 뷰포트 축소 시 우선적으로 줄어듦
- 버튼 Hover, Focus 효과 변경
- 세부적인 배치, 패딩 조절

* Design: 메인페이지 카테고리 스타일 리팩토링

- 폰트 에셋 재설정
- 카테고리 호버, 선택 효과 수정
- 기타 배치, 패딩 조절

* Design: 메인페이지 PostCard 컴포넌트 스타일 리팩토링

* Design: 메인페이지 UserManager 컴포넌트 스타일 리팩토링

* Design: 로그인, 회원가입 페이지 스타일 리팩토링

* Design: 다이렉트메시지 페이지 디자인 리팩토링

* Design: 유저 상세페이지 스타일 리팩토링

* Design: 헤더 및 메인페이지 다크모드 개선

* Design: 모달 스타일 리팩토링

* Fix: 헤더 유저 버튼 드롭다운 수정

* Fix: 수정한 드롭다운 링크 이동되지 않는 문제 수정

* Design: 모달 스타일 리팩토링

* Design: 포스트 상세페이지 스타일 리팩토링

* Refactor: �다이렉트 메세지 리액트 쿼리 커스텀 훅 분리 및 읽기 기능 추가 (#82)

* Refactor: 검색, 메세지 읽기 커스텀 훅 분리

* Feat: 다른 페이지에서 디엠 페이지로 넘어갈 때, receiver가 존재하면 알림도 읽도록 기능 추가

* Refactor: 안 쓰이는 코드 제거

* Refactor: 유저 상세 페이지에서 디엠 페이지 넘어갈 때 알림 읽음 추가

* Fix: vercel 배포 전 오류 메시지 해결

* Chore: Vercel 루트 경로 파일 생성

* Chore: Vercel 예외 경로 라우팅 추가

* Chore: vercel.json 파일 경로 변경

* Chore: vercel.json 추가 수정

* Chore: github 배포 자동화 빌드 파일 추가

* Chore: Create main.yml (#83)

* Chore: main.yml @main으로 수정

* Fix: 로그인 페이지 뒤로가기 버튼 2번 클릭 시 이동하는 버그 수정 (#84)

* Design: 다크 모드 버튼 왼쪽으로 이동 (#85)

* Design: 다크 모드 버튼 왼쪽으로 이동

* Design: 태블릿 기준 다크 모드 버튼 사라지도록 반응형 작업

* Design: 포지션 fixed로 변경

* Fix: 알림 기능 수정 (#88)

* Fix: 인증된 사용자 알림 무시하도록 수정

* Fix: 알림 모달 창 외부 영역 클릭 시 언 마운트 되도록 수정

* Feat: 슬라이드 애니메이션 기능 변수 개발

* Design: 알림 모달 반응형 디자인

* Design: 알림 반응형 테두리 radius 제거

* Fix: 알림 읽고 난 후 알림 리스트 키 캐싱 초기화

* Design: 알림 카테고리 리스트 반응형 gap 넓이 추가

* Design: 메인 페이지 및 상세 페이지 반응형 디자인 수정 (#90)

* Design: 메인 페이지 스켈레톤 UI 변경

* Design: 메인 페이지 반응형 디자인 추가

* Feat: 현재 채널 ID 전역 상태 관리 store 생성 및 세션 스토리지 연동

* Feat: 로고 클릭 시 카테고리 초기화

* Fix: 알림 모달 열 때 기존 페이지 배경 유지

* Design: 포스트 상세 페이지 및 모달 창 반응형 디자인 수정

* Design: 포스트 상세 페이지 반응형 스크롤 및 댓글 삭제 버튼 수정

* Design: transition 추가 수정

* Feat: 모바일 환경 반응형 헤더 구현 (#87)

* Fix: 헤더 버튼 selectedDot 위치 문제 해결

* Feat: 헤더 반응형 로직 구현

* Feat: 검색창 컴포넌트 반응형 개선

* Feat: 모바일 환경 헤더 다크모드 버튼 추가

---------

Co-authored-by: Cho-Ik-Jun <[email protected]>

* Fix: 유저 관리 리스트 스켈레톤 적용안되는 문제 해결 (#92)

* Fix: 사용하지 않는 변수 선언 제거 후 vercel 재배포

* Design: 알림 카테고리 간격 수정  및 z-index 제거 (#93)

* Fix: 포스트 작성, 수정 관련 이슈들 (#86)

* fix: 에러 수정

- 포스트 수정 시 원본 이미지가 보이지 않는 문제
- 포스트 작성, 수정 시 채널 포스트 리스트 refetch

* Feat: 포스트 수정, 삭제 중 이탈 시 Alert 표시

* Fix: 게시글 수정 시 포스트가 복제되는 문제

* Refactor: 코드리뷰 피드백 반영

* Refactor: 유저 프로필 페이지 반응형, 스켈레톤 추가 및 모달 오류 해결 (#89)

* Fix: 모달 위치 fixed로 변경, 스크롤 방지

* Feat: link 태그에서 navigate로 변경

* Fix: 모달 두개 열리는 오류

* Feat: 모달 스크롤 막기 (postDetailModal)

* Style: 모달 스크롤 방지 postDetailModal > Modal

* Feat: 프로필 skeleton 추가

* Design: 프로필 반응형 디자인

* Design: grid 반응형 설정

* Feat: 로그아웃시 스토어 삭제

* Feat: 최근에 누른 좋아요가 먼저 오게

* Design: profileInfo 반응형 tablet기준으로

* �Refactor: 다이렉트 메세지 페이지 QA 수정사항 반영 (#91)

* Refactor: UserCard 글자 색상 수정 및 주석 삭제

* Fix: UserCard 클릭 시 가끔 씹히던 현상 해결

* Feat: 본인 헤더에도 스켈레톤 적용

* Refactor: isClickedUserCard 전역 상태로 관리

* Refactor: 메세지 관련 react-query 커스텀 훅 refetchInterval 설정 및 리팩토링

* Refactor: 코드 정리 및 배포 전 QA 수정사항 반영

- isFetchedAfterMount 옵션 이용하여 처음에만 스켈레톤 길게 적용, 이후 짧게 적용
- 실시간 대화가 가능하도록 refetchInterval 적용
- 채팅방이 켜져있고 message가 refetch되어 변경되는 경우 알림을 읽도록 적용
- 글쓰기 버튼 hover시 배경 생기는 현상 삭제
- isClickedUserCard 전역 스토어로 분리
- 그 외 자식에게 넘겨준 Props들 전역 스토어에서 바로 사용하는 방식으로 변경

* Refactor: 코드 리뷰 반영

* Design: 모바일 카테고리 드롭다운 구현 (#94)

* Refactor: getChannel API 함수 내부에서 채널 이름이 한글인 경우 인코딩 작업 추가 (#96)

* Feat: 비회원이 회원전용 기능에 접근 시 로그인 페이지로 유도하는 Alert 추가 (#95)

* fix: 에러 수정

- 포스트 수정 시 원본 이미지가 보이지 않는 문제
- 포스트 작성, 수정 시 채널 포스트 리스트 refetch

* Feat: 포스트 수정, 삭제 중 이탈 시 Alert 표시

* Fix: 게시글 수정 시 포스트가 복제되는 문제

* Feat: 비회원 Alert 메세지 상수 저장

* Refactor: Alert 컴포넌트 onChangeOpen 선택 속성 변경, 메세지 가운데 정렬

* Refactor: 재사용을 위한 알림 타입 분리

* Feat: 비회원이 글 작성, 팔로우, 좋아요, 댓글, 디엠 기능 클릭 시 로그인 페이지로 유도하는 Alert(confirm모드) 추가

* Fix: 비회원으로 글 작성 시도할 때 Tab 이전 위치로 돌아가도록 설정

* Refactor: Alert 기본 메세지 글자 크기 증가, useResize 추가하여 내부에서 자체적으로 디폴트 값 scale하도록 변경

---------

Co-authored-by: Jaewoong Hwang <[email protected]>

* Fix: 팔로우 모달, 다이렉트 메세지 모달 타이핑 시 스켈레톤 자연스럽게 유지 (#97)

* Refactor: UserCard 글자 색상 수정 및 주석 삭제

* Fix: UserCard 클릭 시 가끔 씹히던 현상 해결

* Feat: 본인 헤더에도 스켈레톤 적용

* Refactor: isClickedUserCard 전역 상태로 관리

* Refactor: 메세지 관련 react-query 커스텀 훅 refetchInterval 설정 및 리팩토링

* Refactor: 코드 정리 및 배포 전 QA 수정사항 반영

- isFetchedAfterMount 옵션 이용하여 처음에만 스켈레톤 길게 적용, 이후 짧게 적용
- 실시간 대화가 가능하도록 refetchInterval 적용
- 채팅방이 켜져있고 message가 refetch되어 변경되는 경우 알림을 읽도록 적용
- 글쓰기 버튼 hover시 배경 생기는 현상 삭제
- isClickedUserCard 전역 스토어로 분리
- 그 외 자식에게 넘겨준 Props들 전역 스토어에서 바로 사용하는 방식으로 변경

* Feat: useIsTyping 커스텀 훅 분리

* Refactor: 기존에 타자치던 도중에 끊기던 스켈레톤을 자연스럽게 변경, 메세지 모달에서 유저 검색 시 Admin 안나오도록 필터 추가

* Feat: 로그아웃 시 MessageReceiver 관련 스토어 전부 날리기

* Fix: 비로그인 시 다크모드 적용되지 않는 문제 (#98)

* Fix: 팔로우모달 흰 점 제거 (#99)

* Chore: dev에서 main으로 main.yml 변경

* Fix: 다크모드 적용 안된 부분 추가, 댓글 작성 안되던 현상 해결

* Fix: singup 경로 오탈자 수정

* Design: 검색 버튼 hover 색상 transparent로 변경

* Fix: 팔로우 취소 기능 버그 수정 및 모바일에서 팔로우 버튼 hover 색상 수정

* Fix: 포스트 추가 모달에서 Channel 드롭다운 매핑 문제 해결 (#101)

* Fix: 팔로우 연타 시 중복으로 들어가던 현상 debounce로 해결 (#103)

* Fix: 다이렉트 메세지 페이지 누락된 라우터 설정

* Docs: README.md 파일 작성 (#104)

* Docs: README 파일 초안 작성

* Docs: README.md 로고 이미지 변경

---------

Co-authored-by: 지인혁 <[email protected]>
Co-authored-by: Seung Min Lee <[email protected]>
Co-authored-by: Jaewoong Hwang <[email protected]>
Co-authored-by: Jaewoong Hwang <[email protected]>
Co-authored-by: 지인혁 <[email protected]>
Co-authored-by: kim-hyunjoo <[email protected]>
Co-authored-by: kim-hyunjoo <[email protected]>
  • Loading branch information
8 people authored Jan 17, 2024
1 parent e374d0f commit c0124d5
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 24 deletions.
69 changes: 48 additions & 21 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,30 +1,57 @@
# React + TypeScript + Vite
# Team STYLED

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
![styledd](https://github.com/prgrms-fe-devcourse/FEDC5_STYLED_sehee/assets/87266785/bb921f95-e8d4-49e0-919f-4cb9e6901a30)

Currently, two official plugins are available:
## [STYLED](https://styled-rho.vercel.app/)

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
패션에 관심이 많은 사람들은 주로 인스타그램에서 본인의 ootd를 공유합니다. 실제로 `#ootd`를 검색해보면 정말 많은 게시물이 존재하는데, 아예 ootd를 공유하는 계정을 따로 생성하여 ootd만 공유하는 사람들도 많습니다.

## Expanding the ESLint configuration
그러나 기존 SNS의 경우 여러 사용자들이 다양한 주제를 공유하는 플랫폼이기 때문에 다른 사람의 ootd를 보기 위해서는 태그 검색이 필요합니다. 또한 `#ootd`의 경우 현재 기준 게시물이 약 4.3억개인데, 이는 한국 뿐만 아니라 전세계 사용자들이 사용하고 있기 때문입니다. 그래서 한국인들은 주로 `#오오티디`라는 한글 태그를 붙여서 공유를 하고 있습니다.

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
이처럼 기존 서비스에서의 ootd 공유 과정에서는 불필요한 과정들이 많기 때문에, ootd만을 찾아가고 소통하는 과정이 다소 불편합니다. 그렇기 때문에 패션에만 관심이 있는 사람들끼리 공유할 수 있는, ootd만을 공유할 수 있는 플랫폼이 필요하다고 생각했습니다.

- Configure the top-level `parserOptions` property like this:
이렇듯, Styled는 자신의 ootd를 공유하며 소통하고자하는 사람들의 니즈를 충족하고자 기획된, OOTD만을 위한 패션 특화 소셜 네트워크 서비스입니다.

```js
export default {
// other rules...
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
}
## 👨‍👨‍👦‍👦 팀원 소개

| <img src="https://avatars.githubusercontent.com/u/70748442?v=4" width="150"> | <img src="https://avatars.githubusercontent.com/u/87266785?v=4" width="150"> | <img src="https://avatars.githubusercontent.com/u/95916813?v=4" width="150"> | <img src="https://avatars.githubusercontent.com/u/74231194?v=4" width="150"> | <img src="https://avatars.githubusercontent.com/u/78135416?v=4" width="150"> |
| :--------------------------------------------------------------------------: | :--------------------------------------------------------------------------: | :--------------------------------------------------------------------------: | :--------------------------------------------------------------------------: | :--------------------------------------------------------------------------: |
| [조익준](https://github.com/harry7435) | [지인혁](https://github.com/wldlsgur) | [황재웅](https://github.com/w00ngja) | [이승민](https://github.com/miloul) | [김현주](https://github.com/kim-hyunjoo) |

## 🌈 실행 화면

![STYLED-Chrome-2024-01-17-14-47-39](https://github.com/prgrms-fe-devcourse/FEDC5_STYLED_sehee/assets/87266785/21e82786-2776-4433-bb86-0276bb1de8a4)

## 🚀 실행 방법

```sh
git clone https://github.com/prgrms-fe-devcourse/FEDC5_STYLED_sehee
npm install
npm run dev
```

## 🧷 환경 변수 목록

```sh
VITE_API_END_POINT =
```

- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
## 👀 Dependencies

| Name | Version | Link |
| :-------------------------: | :-------: | :-------------------------------------------------------: |
| Node.js | 20.10.0 | https://nodejs.org/en |
| npm | 10.2.3 | - |
| react-query | ^5.15.0 | https://www.npmjs.com/package/react-query |
| lodash | ^4.17.21 | https://www.npmjs.com/package/lodash |
| axios | ^1.6.3 | https://www.npmjs.com/package/axios |
| dayjs | ^1.11.10 | https://www.npmjs.com/package/dayjs |
| react | ^18.2.0 | https://www.npmjs.com/package/react |
| react-dom | ^18.2.0 | https://www.npmjs.com/package/react-dom |
| react-intersection-observer | ^9.5.3 | https://www.npmjs.com/package/react-intersection-observer |
| react-router-dom | ^6.21.1 | https://www.npmjs.com/package/react-router-dom |
| styled-components | ^6.1.3 | https://www.npmjs.com/package/styled-components |
| styled-reset | ^4.5.1 | https://www.npmjs.com/package/styled-reset |
| zustand | ^4.4.7 | https://www.npmjs.com/package/zustand |
| @types/lodash | ^4.14.202 | https://www.npmjs.com/package/@types/lodash |
| @types/styled-components | ^5.1.34 | https://www.npmjs.com/package/@types/styled-components |
5 changes: 4 additions & 1 deletion src/Components/FollowModal/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
/* eslint-disable no-underscore-dangle */
import { useCallback, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { debounce } from 'lodash';
import Input from '../Base/Input';
import Modal from '../Common/Modal';
import UserCard from '../Common/UserCard';
Expand Down Expand Up @@ -123,6 +124,8 @@ const FollowModal = ({
await fetchFollowData();
};

const debouncedHandleFollow = debounce(handleFollow, 300);

const handleClickUser = (userId: string) => {
navigator(`/profile/${userId}`);
onChangeOpen(false);
Expand Down Expand Up @@ -172,7 +175,7 @@ const FollowModal = ({
isFollow={isFollowing(user)}
isButtonShow={isButtonShow(user._id)}
onClick={() => handleClickUser(user._id)}
onClickFollowBtn={() => handleFollow(user)}
onClickFollowBtn={() => debouncedHandleFollow(user)}
/>
))
)}
Expand Down
7 changes: 5 additions & 2 deletions src/Components/Profile/ProfileInfo/UserProfileInfo/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { useNavigate, useParams } from 'react-router-dom';
import { useTheme } from 'styled-components';
import { useState } from 'react';
import { debounce } from 'lodash';
import Button from '@/Components/Base/Button';
import { StyledButtonContainer, StyledName } from '../style';
import { NameProps } from './type';
Expand Down Expand Up @@ -54,6 +55,8 @@ const UserProfileInfo = ({ name, user, isFollowing }: NameProps) => {
userDataRefetch();
};

const debouncedHandleFollow = debounce(handleFollow, 300);

const handleDirectMessage = () => {
if (Object.keys(authUser).length === 0) {
setErrorMode('MESSAGE');
Expand All @@ -78,7 +81,7 @@ const UserProfileInfo = ({ name, user, isFollowing }: NameProps) => {
borderRadius="1rem"
backgroundColor={colors.read}
style={{ marginRight: '1rem', marginTop: '.5rem' }}
onClick={handleFollow}
onClick={debouncedHandleFollow}
>
팔로잉
</Button>
Expand All @@ -95,7 +98,7 @@ const UserProfileInfo = ({ name, user, isFollowing }: NameProps) => {
marginTop: '.5rem',
border: `1px solid ${colors.text}`,
}}
onClick={handleFollow}
onClick={debouncedHandleFollow}
>
팔로우
</Button>
Expand Down
4 changes: 4 additions & 0 deletions src/Routes/Router.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,10 @@ const RouterManager = () => {
path="*"
element={<ModalRouter />}
/>
<Route
path="modal-detail/:postId"
element={<DetailPage />}
/>
</Route>
<Route
path="/*"
Expand Down

0 comments on commit c0124d5

Please sign in to comment.