FE/ref.txt at main · real-project1110/FE · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
assets  => img / svg

components
- 폴더 첫이름은 대문자 안에는 index.jsx / styles.jsx
- styles jsx에는 index.jsx의 스타일 컴포넌트
-

src
  - apis
    - instance => axios 인스턴스
    - query => react-query에 사용되는 apis

  - assets
    - img => img들을 모아 놓는 폴더
    - svg => svg들을 모아 놓는 폴더

  - components
    - Elements => 재사용 가능한 input button 등을 모아 놓는 폴더
    - Layout => Home / workspace에서 사용하는 사이드바 헤더를 모아 놓는 폴더

  - pages
    - page들을 모아 놓는 폴더

  - shared
    - Atoms  => recoil의 atom을 모아놓는 폴더
    - Cookie => Cookie 관련 코드
    - Router => Router 관련 코드
    - Styles => GlobalStyle / custom style을 모아놓는 폴더

  - utils
    - util 함수들을 모아 놓는 폴더


urls

로그인
- /

회원가입
- /signup

메인 페이지
- /main

팀 스페이스 생성 페이지
- /group

팀 스페이스 (달력)
- /group/:id

팀 스페이스 공지게시판
- /group/:id/notice
(상세페이지 추후)

팀 스페이스 자유게시판
- /group/:id/free
(상세페이지 추후)

팀 스페이스 채팅 (userId)
- /chats/:id


(현진) url = https://hyunjin9603.shop/
(정현) url = https://wjdgusgg.shop/
(정현2) url = https://rlawjdgus.shop:4010/
(동희) url = http://13.209.98.174/
(동희2) url = https://d09a-106-101-129-44.jp.ngrok.io/


[] 내가 속한 채팅룸이 아니면 이전 페이지로 이동 (Group 조회에 roomIds가 있다. )

[o] 그룹 이미지 이름 변경 기능 생성 (모달)
[o] 12/4 초록불 위치변경
~[o] 12/4 채팅 리버스 인피니티 스크롤 (일정 스크롤 height이 올라갔을 때는 채팅이 오더라도 내려가면 안된다.)
[o] 12/4 읽지 않은 채팅 메시지 갯수 ui
[o] 상태 아이콘 svg로 변경 => png로 변경 (webp 고려해야함)
[o] 12/4 header height:60px 검색바 제거

[o] 12/5 로그인 부분 첫입장시 초록색 테두리 문제 해결
[o] 12/5 회원가입 할 때 버튼 hover 애니메이션
[o] 시간 함수 만들어서 적용 ~분전 / 2020년 2월 2일 등

[o] 12/6 메인페이지 변경
[o] 12/6 알림 혹은 모달이 나올 때 배경 트렌지션 및 모달 애니메이션

[] 12/6 초대 ui 수정
[] 메뉴에서 기본 프로필 편집 / 그룹 프로필 편집 나오게
[] 이미지 추가 이이콘
[] 랜딩페이지
[] 이미지 확대
[] 이메일 필수 입력


// 채팅창 올렸을 때 즉, 채팅창에 데이터가 추가 되었을 때 스크롤 안내려가게 ?
- 내가 보냈을 때는 내려가야한다.
- 스크롤 밑에서 300px 이하일 경우에는 채팅 데이터가 추가 되었을 때 스크롤이 내려가야한다.


1. SEO 최적화
2. 구글 아날리틱스 설치
3. react helmet
4. ci/cd


안되는 이유
1. 데이터가 들어오기 전에 scrollHeight를 구해버리기 때문에 이전값과 차이가 없음.
   그렇기 때문에 데이터가 다 들어오고 나서 연산을 시작해야함.

2. useEffect로 했을 때는 chats(state)을 의존성 배열 안에 넣어야하는데 chats을 넣게 되면 채팅을 보내거나
   채팅을 받을 때도 scroll에 대한 이벤트가 실행됨

3. chatsData(query)를 useEffect의 의존성 배열에 넣게 되면 chats으로 가기도 전에 실행이 되버려 1번과 마찬가지.

4. 새로운 데이터가 chats(state)에 도착했을 때에 대한 로직이 필요.
   - 예외 사항
   1) 내가 보낸 채팅 혹은 소켓으로 전달받은 채팅에 대해서는 작동하면 안됨.
   2) chats에 useEffect를 작동시키면 매번 실행될 것이기 때문에 새로운 방법이 필요.


    const current = scrollRef?.current;
        if (current) {
          setTimeout(() => {
            current.scrollTop(
              scrollRef?.current.getScrollHeight() - values.scrollHeight
            );
          }, 100);
        }