[4주차] 김승완 미션 제출합니다.

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

craco.config.js

@@ -0,0 +1,14 @@
+const { CracoAliasPlugin } = require('react-app-alias');
+
+module.exports = {
+  plugins: [
+    {
+      plugin: CracoAliasPlugin,
+      options: {
+        source: 'tsconfig',
+        baseUrl: './src',
+        tsConfigPath: './tsconfig.paths.json',
+      },
+    },
+  ],
+};

layout.md

@@ -0,0 +1,19 @@
+# 문서 목적
+
+> 본 문서는 전체적인 웹 페이지의 레이아웃에 대한 이해를 돕고자 작성되었습니다.
+
+## 상단 고정
+
+1. ChatHead => 채팅방 페이지. 내부에 `IphoneStatusBar` 컴포넌트가 위치하며 고정적으로 47px의 높이를 가짐. 그 다음에 `ChatHeadNav` 컴포넌트가 위치함(이건 flex-grow를 다 먹어버림)
+
+## 하단 고정
+
+1. 매번 나타나는 것은 `HomeIndicator`임. 이는 부모 컴포넌트인 main이 relative에 맞춰 `position: absolute` 속성을 가지며 그 위에 와야하는 것들은 기존의 문서 흐름에 고대로 있기에 `HomeIndicator` 높이 만큼의 padding-bottom 속성을 부여받는다.
+2. `HomeIndicator`위에 바로 오는 것은 Input이 될 수도 있고 tab Bar가 될 수도 있다. 따라서 이때에는 유도리있게 1의 논리를 적용하여 padding-bottom을 적극 활용한다(홈 인디케이터 바는 계속 고정적으로 있으니까).
+
+## 중앙에 위치하는 컨텐츠
+
+1. 일단 main 부모 컴포넌트의 문서 흐름에 맞추어 생각해보았을 때 `flex-grow: 1`로서 본인이 남은 칸을 모두 먹어버리고 `overflow-y: scroll` 속성을 통해 넘치면 스크롤 될 수 있게 만든다.
+2. 나머지 속성들은 margin을 계산해서 넣어준다.
+
+##

make.md

@@ -0,0 +1,62 @@
+# 구현을 해야할 기능
+
+- 사용자가 input에 focus를 하면 전체의 너비가 줄어들어야 함
+- 기본적으로 모바일 뷰를 기준으로 하기에 전체 너비를 375px, 높이를 812로 제한하고 시작하면 됨
+- 기존의 사용자를 토글하면 사용자가 바뀌고 채팅이 뒤바뀌어서 보여야 함. => me와 other 속성 2개를 선언함
+- 기존의 메시지가 많아지면 자연스럽게 스크롤이 되어야 함 => `overflow : scroll` 속성을 통해서 해결
+- 디자인 시스템: 자주 사용되는 디자인 속성을 변수와 같은 시스템으로 구현해야 함
+- 더블 클릭하면 하트 감정 표시가 보여질 수 있어야 함 => 나중에 디자이너 분께서 단순 하트가 아닌 따봉, 웃는 사람의 얼굴 등을 보여주는 기능을 요구할 수도 있음
+- 추가적으로 본인의 메시지에는 더블 클릭을 하더라도 하트가 적용이 되면 안됨 -> 더블 클릭을 어떻게 인지할 것인가? 애초에 dom 속성 중에서 `domDoubleClick` 속성이 존재함
+- 하트를 구현해야 함 -> 하트가 붙어야 하는지 아닌지를 boolean 타입의 상태로 선언해(typescript), 조건부 렌더링을 진행 => 꼭 상태로 선언할 필요는 없음 어차피 localStorage, json 파일을 모두 사용할 것이므로 그냥 객체의 속성에 boolean 필드를 삽입하는 방식으 택하기
+- Typescript 적용
+- 사용자가 아직 아무것도 입력하지 않았을 경우 메시지 전송 버튼은 비활성화 되어 있어야 함 --> **상태**를 통해 UI를 다르게 렌더링 해주어야 함
+- 하단 input에서 + 버튼을 누르면 + 가 이미지, 음성 이미지로 변환될 필요가 있음 input 박스 영역은 `flex - grow : 1` 속성을 부여하여 남는 부분을 모두 차지하도록 함
+- 사용자가 제시한 날짜에 따라서 날짜 표시가 있고, 그 다음에 메시지들이 진행되어야 함.
+- 카카오톡, 라인과 다르게 왼쪽 오른쪽으로 상대방과의 메시지가 엇갈려서 나타나는 것이 아니라, 왼쪽에 항상 몰려있는 구조임. 메시지의 길이에 따라서 메시지 박스 높이가 조절이 되도록 `height: 속성은 auto` 를 부여하는 것이 좋음. 아니면 `fit-content` 속성도 나쁘지 않음
+- homeIndicator는 채팅 입력 박스가 올라오더라도 아래에 고정되어 있어야 함
+
+### 나누면 좋을만한 파일
+
+- 기본적으로 styled-components 모듈을 사용할 것이기 때문에 정민님꼐서 Iphone, Images, TabBar, Gloabl, FriendPage, ProfilePage, ChatroomPage 등으로 나눠놓은 컴포넌트를 따로 파일로 분리하고 export하면 이를 import하여 객체 지향형 느낌으로 사용
+
+### 디자인 시스템
+
+- 자주 사용되는 색상들을 변수로 활용하고 여기에는 동일한 색상이더라도 opacity의 개념이 도입될 수도 있음
+- styled-components나, styled-system 모듈은 디자인 시스템을 구축할 수 있게 도와준다 using ThemeProvider나 후자의 utility first 클래스명을 이용!
+
+### 컴포넌트 분리의 기준
+
+- 일단 figma에서 제시한 컴포넌트들을 최대한 복사 + 붙여넣기 식으로 활용하고, 추후에 활용을 할 떄 제대로 적용이 안된 것들은 다시 `styled()` 함수를 이용하여 다시 스타일링 진행
+- 그냥 단순 이미지를 렌더링해주는 컴포넌트를 imageComponent 라는 디렉터리에 한 파일로 그냥 싸악 적용해주고 끝낸다. 나중에 이를 활용하는 헤더 등의 컴포넌트에서 이들을 받아서 사용한다
+- 매 화면에 고정적으로 등장하는 iphone Status Bar(시간, 와이파이, 배터리를 가지고 있는 헤더)와 homeIndicator는 따로 fixed 컴포넌트로 만들어두고 매번 활용하는 구조. 가장 위에는 `iphoneStatusBar`, 가장 아래에는 `homeIndicator(z-index를 높게 설정)`가 위치하는 구조 => 같은 div의 자식 컴포넌트로 위치시키기
+- 해당 컴포넌트가 상황에 따라서 위치나 크기 등이 가변적인지 아닌지에 따라서 `header`, `AppMain`, `footer`로 나뉘어야 함
+
+### 정민님 figma 기본 구조
+
+- 기본적으로 항상 많이 쓰이는 것들은 fixed, 유동적으로 구성되는 요소들은 scroll이라고 표현하심
+- input box에 포커싱이 되면 위의 고정 헤더들은 가만히 있고, 나머지 전체 요소들의 높이가 자연스럽게 줄어들어야 한다
+
+### 사용자 시나리오
+
+1. 전체 탭 바를 통해 이동할 수 있는 구간은 3군데임 : 친구 & 메시지 & 내 프로필
+2. 친구와의 메시지 탭을 누르면 바로 메시지 url로 넘어감 : `message/{친구명}`의 주소로 처리됨
+3. <- arrow를 통해서 이전의 `/message` 주소로 리디렉션됨.
+
+### 해결 포인트(trouble shooting)
+
+1. input 박스 옆에 웃는 아이코은 span 태그 내부에 input과 이모지를 flex item으로 구성하며 해당 길이는 따라서 조정해줘야 함 => 아예 컨테이너를 만들어서 그 안에 input 요소를 넣고 이모지는 absolute 속성으로서 해결함
+2. focused가 된 상태에서 제출 버튼을 누르면 폼이 제출 되는 것이 아니라 그냥 입력해제가 되어버림. onBlur가 먼저 트리거 됨 => `handleToggleIsInputBoxFocused` 함수의 내부 조건부 로직으로 바꿔줌
+3. 처음에 로컬스토리지에 접근했는데 없다면 상태를 로컬 스토리지에 넣어줘야하고 이미 있다면 상태를 그걸로 적용해줘야 됨 => 해결 `useEffect` 훅 내에서 분기로 처리함
+4. useNumber는 일단 처음은 1로 설정되고 내 메시지는 노란색으로, 상대방은 초록색으로 보인다. => 해결
+5. 사용자가 메시지를 입력하면 기존 상태 2개(data와 date 2개)를 바꾸고 이를 로컬 스토리지에도 반영해야한다 => 해결
+6. 메시지를 보내면 바로 스크롤되어 내려옴. useRef를 이용해서 scrollTop 속성을 scrollHeight로 바꿔서 아래로 내리면 되는데, chatBody와 chatInput은 형제 속성이라서 함께 건드리기 어려움 => 전역 상태로 관리
+7. 더블 클릭하면 하트가 생겨야 하는데, 남의 것에만 할 수 있어야 한다 => 해결
+8. 여러 사용자들을 구분할 수 있어야 함. 일단 "나는" 김정민임. 따라서 userMode는 당연히 처음에 1로 들어가는 것이 맞긴함. 로컬 스토리지에 저장할 데이터를 `chatMessageData_{유저id숫자}`, `chatMessageDateArray_{유저 id 숫자}` 방식으로 해결하자
+9. 클릭해서 들어가는 방식 말고, url path를 직접 쳐서 들어가는 경우는 클릭해서 간 것이 아니기에 tab bar 속성이 제대로 동작하지 않는다는 문제가 발생 => onclick 속성으로 하면 안됨 : `useEffect()` 훅을 따로 사용하지 않고 그냥 `useLocation()` 훅으로 받은 path를 검사해서 상태를 변경해주었음
+
+### 각 페이지 별 기능
+
+1. `/friends` : 그냥 친구가 누가 있는지를 보여주기만 하면됨 일단은. (단순 UI) => 일단 애플리케이션이 켜지면 바로 들어갈 수 있게 url path를 `/`로 설정하기
+2. `/messagess` : 채팅 목록들을 보여주고, 가장 마지막 데이터에 해당하는 사람과 메시지를 보여줄 필요가 있음
+3. `/message/{특정 user id}` : 해당 내용에 해당하는 사람꺼를 보여줌. 나중에 `useParams()` 훅을 이용하여 진행할 수 있음
+4. `/profile` : 본인의 프로필을 조회할 수 있음(단순 UI)