- π νλ‘μ νΈ μκ°
- ππ» νμ μκ°
- π λ°°ν¬ λ§ν¬
- π λμμΈ λ§ν¬
- π κΈ°λ₯ λͺ©λ‘ λͺ μΈ
- πΏ μ€μΉ λ° μ€ν λ°©λ²
- π οΈ κΈ°μ μ€ν
- π² νλ‘μ νΈ κ΅¬μ‘°
- πͺ νλ‘μ νΈ νκ³ λ§ν¬
- μ£Όμ : νλ‘μ νΈ
- κΈ°κ° : 22.02.10 ~ 22.02.12
κΉμμ’ | μ λ€λΉ | μ΅μμ | μ΄μ‘ν |
νμ₯ | νμ | νμ | νμ |
νΌκ·Έλ§ λμμΈ λ°λ‘κ°κΈ°
- λ‘κ·ΈμΈ μΈμ¦μ κ³ λ €ν λΌμ°ν° μ€κ³
- page: λ‘κ·ΈμΈ, μ±ν λ°©
- λ°©μ λͺ©, λ€λ‘κ°κΈ° μμ΄μ½, λ보기 μμ΄μ½
- μ¬μ©μ μ΄λ¦ λ° νλ‘ν μ¬μ§ λ±λ‘μ΄ κ°λ₯ν νμ΄μ§
- μ¬μ©μ μ΄λ¦ , νλ‘ν μ¬μ§ λ―Έμ λ ₯μ λ‘κ·ΈμΈ λΆκ° ( μλ΄ ν μ€νΈ )
- μ¬μ©μ μ΄λ¦ , νλ‘ν μ¬μ§ μμ κ°λ₯
- λ©μμ§λ μ΄λ¦ μμ λ¬Έμ μΆλ ₯ -(μ‘ν)
- λ©μμ§ λ΄μ©λ°μ€ ( νλ‘ν μ¬μ§, μ΄λ¦, λ μ§ ) - (μ‘ν)
- λ©μμ§ λ΅μ₯, μμ λ²νΌ - (λ€λΉ)
- λ©μμ§ λ΄μ©μ λ§μ°μ€λ₯Ό μ¬λ¦¬κ±°λ λλ μ λ μ€λ₯Έμͺ½μ λ΅μ₯, μμ λ²νΌ λμ°κΈ°
- λ©μμ§ μμ λ²νΌμ λλ μ λ λͺ¨λ¬ μ°½ λμ°κ³ λ°μ΄ν° μ λ¬
- μμ λͺ¨λ¬ μ°½ - (λ€λΉ)
- μμ λ©μμ§ νμ κΈ°λ₯
- μμ λ©μμ§μμ 10κΈμκΉμ§λ§ νμ
- κΈμ λ€μ β...β μΆκ°
- κΈμ μμ λ©μμ§λ₯Ό μ λ ₯νλ©΄ ν΄λΉ κΈμ μ λ§νΌ μλ₯΄λ Util(sliceMessage)
- μμ λ©μμ§ νμ κΈ°λ₯
- λ©μμ§ λ μ§ (yyyy-mm-dd hh:MM:ss) - (μμ’ , μ‘ν)
- 리λ λ μ μ΅μ λ©μΈμ§κ° 보μ΄λλ‘ μ€μ νκΈ°. - (μμ’
)
- 쑰건 1: λ‘κ·ΈμΈ μ μ κ° μλ‘μ΄ λ©μΈμ§λ₯Ό μ μ‘νλ€.
- 쑰건 2: λ‘κ·ΈμΈ μ μ κ° μ±ν λ°©μ μ μ₯νλ€.
- λν λͺ©λ‘μ 미리 3λͺ μ΄ 5건μ λ©μμ§λ₯Ό μ£Όκ³ λ°λ λ΄μ©μ΄ μΆλ ₯(μ‘ν)
- κ³Όκ±°λΆν° μ΅μ μμΌλ‘ μ λ ¬(μ‘ν)
- μ λ ₯ μ°½κ³Ό λ³κ°λ‘ λν λͺ©λ‘λ§ μ€ν¬λ‘€ κ°λ₯(μμ’ )
- Enterν€ μ λ ₯ μ λ©μΈμ§ μ μ‘, Shift+Enterν€ μ λ ₯ μ μ€ λ°κΏ
- λ©μΈμ§ λ°μ€μ κ° μ
λ ₯ μ μ μ‘ λ²νΌμ μ¦μ νμ±ν
- 컨ν μΈ λ₯Ό μ λ ₯νμ§ μμΌλ©΄ μ μ‘ λΆκ°. ( μλ΄ ν μ€νΈ )
- μ λ ₯λμ λ©ν° λΌμΈμΌλ‘ μ λ ₯, λ©μμ§ μΆλ ₯ μ μ€ λ°κΏλ κ°μ΄ μΆλ ₯
- λ΅μ₯μ ν΄λ¦ μ "μ¬μ©μ μ΄λ¦\n" + "λ©μμ§ λ΄μ©\n" + "(νμ )\n" λ¬Έμκ° μ λ ₯ μ°½μ μλμΌλ‘ μ½μ
Auth(νΌμ³λ³΄κΈ°)
- Auth: λ‘κ·ΈμΈ μ μ μ μ 보λ₯Ό λ΄μ μν
interface Auth {
userId: number | null;
userName: string | null;
avatarURL: string;
}
Users(νΌμ³λ³΄κΈ°)
- Users: μ±ν λ°©μ μ°Έμ¬ν μ μ μ 보λ₯Ό λ΄μ μν
interface User {
userId: number;
userName: string;
avatarURL: string;
}
type UserS = User[];
Messages(νΌμ³λ³΄κΈ°)
- messages: μ±ν λ°©μμ λνν λ©μΈμ§λ₯Ό λ΄μ μν
interface Message {
id: number;
createAt: number;
userId: number;
message: string;
}
type Messages = Message[];
- μ€λ³΅λ λ°μ΄ν° κ΄λ¦¬λ₯Ό μ΅μνν λͺ¨λΈ νμμΌλ‘ μμ±
- μ₯μ : λ°μ΄ν° μμ κΈ°λ₯μμ κ΄λ¦¬κ° μλΉν νΈν¨, λ¨μ : λ°μ΄ν° μ¬μ©μκ° κ°κ³΅ν΄μΌνλ μκ³ κ° νμ
μ μ λ°μ΄ν°(νΌμ³λ³΄κΈ°)
// users
const users = [
{
userId: 1,
userName: 'μμ',
avatarURL: `${process.env.REACT_APP_ASSET_PATH}/defaultUserImg.png`,
},
{
userId: 2,
userName: 'μ‘ν',
avatarURL: `${process.env.REACT_APP_ASSET_PATH}/defaultUserImg.png`,
},
{
userId: 3,
userName: 'λΉλ€',
avatarURL: `${process.env.REACT_APP_ASSET_PATH}/defaultUserImg.png`,
},
];
λ©μΈμ§ λ°μ΄ν°(νΌμ³λ³΄κΈ°)
// messages
const messages = [
{
id: 1000,
createAt: 1644492766000,
userId: 1,
message: 'μλ
~',
},
{
id: 1001,
createAt: 1644492996000,
userId: 2,
message: 'μ μμμΌ~',
},
{
id: 1002,
createAt: 1644494116000,
userId: 3,
message: 'μ κΈμ§!',
},
{
id: 1003,
createAt: 1644494000000,
userId: 1,
message: 'λλ¬΄ν΄ γ
γ
',
},
{
id: 1004,
createAt: 1644620008989,
userId: 3,
message: 'π',
},
];
Project Clone
$ git clone https://github.com/wantedPreOnboarding/19_04th_messenger
Project Setup
$ yarn install
Project Start For Development
$ yarn start
src
βββ components
β βββ ChatList
β βββ DelModal
β βββ DelReplyBtn
β βββ Header
β βββ InputBox
β βββ NoticeToast
β βββ Portal
βββ data
βββ hooks
βββ pages
β βββ ChatRoom
β βββ Login
βββ router
βββ store
β βββ slices
βββ styles
βββ types
βββ utils