Skip to content

Commit d640193

Browse files
spearStrspearStr
committed
Merge branch 'prod-fe' of https://github.com/boostcampwm-2024/web22-LiBoo into prod-fe
2 parents f54be8e + 84f2f68 commit d640193

File tree

15 files changed

+139
-55
lines changed

15 files changed

+139
-55
lines changed

‎.github/workflows/prod-fe-docker.yml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ name: Build and Push Docker Image
33
on:
44
push:
55
branches:
6-
- prod-fe
6+
- test-prod-fe
77

88
jobs:
99
build:
@@ -51,6 +51,6 @@ jobs:
5151
mkdir -p ~/.ssh
5252
echo "$SSH_PEM_KEY" > ~/.ssh/SSH_PEM_KEY.pem
5353
chmod 600 ~/.ssh/SSH_PEM_KEY.pem
54-
ssh -p $SSH_PORT -i ~/.ssh/SSH_PEM_KEY.pem -o StrictHostKeyChecking=no [email protected] 'cd prod && bash prod_fe.sh'
54+
ssh -p $SSH_PORT -i ~/.ssh/SSH_PEM_KEY.pem -o StrictHostKeyChecking=no $SSH_USERNAME@test.liboo.kr 'cd prod && bash prod_fe.sh'
5555
5656

‎docker-compose.yaml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ services:
1414
- "1935:1935"
1515
- "3000:3000"
1616
volumes:
17-
- /etc/letsencrypt/live/liboo.kr:/etc/letsencrypt/live/liboo.kr:ro
18-
- /etc/letsencrypt/archive/liboo.kr:/etc/letsencrypt/archive/liboo.kr:ro
17+
- /etc/letsencrypt/live/test.liboo.kr:/etc/letsencrypt/live/test.liboo.kr:ro
18+
- /etc/letsencrypt/archive/test.liboo.kr:/etc/letsencrypt/archive/test.liboo.kr:ro
1919
- /etc/nginx/ssl/dhparams.pem:/etc/nginx/ssl/dhparams.pem:ro
2020

2121
networks:

‎fe.build.yaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ services:
66
build:
77
context: nginx
88
dockerfile: dockerfile
9-
image: liboost/nginx:latest
9+
image: liboost/test-nginx:latest
1010
ports:
1111
- "80:80"
1212
- "443:443"

‎frontend/src/apis/fetchChatRule.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { AxiosResponse } from 'axios';
2+
import { fetchInstance } from '.';
3+
4+
export type ChatRuleResponse = {
5+
notice: string;
6+
channelName: string;
7+
};
8+
9+
export const fetchChatRule = async ({ sessionKey }: { sessionKey: string }): Promise<ChatRuleResponse> => {
10+
const response: AxiosResponse<ChatRuleResponse> = await fetchInstance().get('/streams/notice', {
11+
params: {
12+
sessionKey
13+
}
14+
});
15+
16+
return response.data;
17+
};

‎frontend/src/apis/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { QueryClient, DefaultOptions } from '@tanstack/react-query';
22
import axios from 'axios';
33

4-
export const BASE_URL = 'https://liboo.kr';
4+
export const BASE_URL = 'https://test.liboo.kr';
55
export const RTMP_PORT = '1935';
66
export const RTMP_HTTP_PORT = '8000';
77
export const API_PORT = '3000';

‎frontend/src/apis/queries/chat/useFetchChatRule.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { useQuery } from '@tanstack/react-query';
2+
import { ChatRuleResponse, fetchChatRule } from '@apis/fetchChatRule';
3+
4+
export const useFetchChatRule = ({ sessionKey }: { sessionKey: string }) => {
5+
return useQuery<ChatRuleResponse, Error>({
6+
queryKey: ['chatRule'],
7+
queryFn: () => fetchChatRule({ sessionKey }),
8+
refetchOnWindowFocus: false
9+
});
10+
};

‎frontend/src/components/chat/ChatList.tsx

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const ChatItemWrapper = memo(
1818
if (chat.msgType === CHATTING_TYPES.QUESTION) {
1919
return (
2020
<ChatItem>
21-
<QuestionCard type="client" question={chat} />
21+
<QuestionCard type="client" question={chat} onNicknameClick={handleNicknameClick} />
2222
</ChatItem>
2323
);
2424
} else if (chat.msgType === CHATTING_TYPES.NOTICE) {
@@ -43,12 +43,8 @@ const ChatItemWrapper = memo(
4343
return (
4444
<ChatItem>
4545
<NormalChat $isHost={chat.owner === 'host'} $pointColor={chat.owner === 'host' ? '#0ADD91' : chat.color}>
46-
{chat.owner === 'me' ? (
47-
<span className="text_point">🧀</span>
48-
) : chat.owner === 'host' ? (
49-
<StyledIcon as={HostIconGreen} />
50-
) : null}
51-
<span className="text_point" onClick={handleNicknameClick}>
46+
<span className="text_point user_name" onClick={handleNicknameClick}>
47+
{chat.owner === 'me' ? '🧀' : chat.owner === 'host' ? <StyledIcon as={HostIconGreen} /> : null}
5248
{chat.nickname}
5349
</span>
5450
<span className="chat_message">{chat.msg}</span>
@@ -171,6 +167,15 @@ const NormalChat = styled.div<{ $isHost: boolean; $pointColor: string }>`
171167
line-height: 1.5;
172168
}
173169
170+
.user_name {
171+
cursor: pointer;
172+
padding: 2px;
173+
border-radius: 5px;
174+
&:hover {
175+
background-color: #393939;
176+
}
177+
}
178+
174179
overflow-wrap: break-word;
175180
word-break: break-word;
176181
`;

‎frontend/src/components/chat/ChatQuestionSection.tsx

Lines changed: 38 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { memo, useState, useCallback } from 'react';
22
import styled from 'styled-components';
33
import QuestionCard from './QuestionCard';
4-
import { MessageReceiveData, MessageSendData } from '@type/chat';
4+
import { MessageReceiveData, MessageSendData, UserInfoData } from '@type/chat';
55
import { CHATTING_SOCKET_SEND_EVENT } from '@constants/chat';
66
import { getStoredId } from '@utils/id';
77
import { UserType } from '@type/user';
8+
import { useChat } from '@contexts/chatContext';
89

910
export interface ChatQuestionSectionProps {
1011
questions: MessageReceiveData[];
@@ -38,6 +39,18 @@ const ChatQuestionSection = ({ questions, worker, userType, roomId }: ChatQuesti
3839
[worker, roomId, userId]
3940
);
4041

42+
const { dispatch } = useChat();
43+
44+
const onNicknameClick = useCallback(
45+
(data: UserInfoData) => {
46+
dispatch({
47+
type: 'SET_SELECTED_USER',
48+
payload: data
49+
});
50+
},
51+
[dispatch]
52+
);
53+
4154
return (
4255
<SectionWrapper>
4356
<SectionContainer>
@@ -51,18 +64,32 @@ const ChatQuestionSection = ({ questions, worker, userType, roomId }: ChatQuesti
5164
question={questions[0]}
5265
handleQuestionDone={handleQuestionDone}
5366
ellipsis={!expanded}
67+
onNicknameClick={() =>
68+
onNicknameClick({
69+
nickname: questions[0].nickname,
70+
socketId: questions[0].socketId,
71+
entryTime: questions[0].entryTime,
72+
owner: questions[0].owner
73+
})
74+
}
5475
/>
5576
{expanded &&
56-
questions
57-
.slice(1)
58-
.map((question) => (
59-
<QuestionCard
60-
key={question.questionId}
61-
type={userType}
62-
question={question}
63-
handleQuestionDone={handleQuestionDone}
64-
/>
65-
))}
77+
questions.slice(1).map((question) => (
78+
<QuestionCard
79+
key={question.questionId}
80+
type={userType}
81+
question={question}
82+
handleQuestionDone={handleQuestionDone}
83+
onNicknameClick={() =>
84+
onNicknameClick({
85+
nickname: question.nickname,
86+
socketId: question.socketId,
87+
entryTime: question.entryTime,
88+
owner: question.owner
89+
})
90+
}
91+
/>
92+
))}
6693
<SwipeBtn onClick={toggleSection} />
6794
</>
6895
)}

‎frontend/src/components/chat/ChatRoomLayout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const ChatRoomLayout = ({ userType, roomId }: ChatRoomLayoutProps) => {
4949

5050
{state.isNoticePopupOpen && (
5151
<PopupWrapper>
52-
<NoticeCard />
52+
<NoticeCard sessionKey={roomId} />
5353
</PopupWrapper>
5454
)}
5555

‎frontend/src/components/chat/NoticeCard.tsx

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
import styled from 'styled-components';
22
import CloseIcon from '@assets/icons/close.svg';
3-
import { useContext } from 'react';
3+
import { memo, useCallback, useContext } from 'react';
44
import { ChatContext } from 'src/contexts/chatContext';
5+
import { useFetchChatRule } from '@apis/queries/chat/useFetchChatRule';
56

6-
export const NoticeCard = () => {
7+
export const NoticeCard = ({ sessionKey }: { sessionKey: string }) => {
78
const { dispatch } = useContext(ChatContext);
89

9-
const toggleSettings = () => {
10+
const toggleSettings = useCallback(() => {
1011
dispatch({ type: 'TOGGLE_ANNOUNCEMENT_POPUP' });
11-
};
12+
}, [dispatch]);
13+
14+
const { data: noticeInfo } = useFetchChatRule({ sessionKey });
1215

1316
return (
1417
<NoticeCardContainer>
@@ -17,28 +20,22 @@ export const NoticeCard = () => {
1720
<NoticeCardProfile></NoticeCardProfile>
1821
<NoticeCardArea>
1922
<div className="text_info">
20-
<span className="text_point">네이버 부스트 캠프</span>
23+
<span className="text_point">{noticeInfo?.channelName}</span>
2124
<span>님의</span>
2225
</div>
23-
<div className="text_strong">컨퍼런스 공지 📢</div>
26+
<div className="text_strong">채팅 규칙 📢</div>
2427
</NoticeCardArea>
2528
</NoticeCardWrapper>
2629
<CloseBtn onClick={toggleSettings}>
2730
<StyledCloseIcon />
2831
</CloseBtn>
2932
</NoticeCardHeader>
3033

31-
<NoticeMessage>
32-
- 질문은 질문 채팅으로 부탁드립니다
33-
<br /> - 컨퍼런스 보러와주셔서 감사합니다
34-
<br /> - 컨퍼런스 보러와주셔서 감사합니다
35-
<br /> - 컨퍼런스 보러와주셔서 감사합니다
36-
<br /> - 컨퍼런스 보러와주셔서 감사합니다
37-
</NoticeMessage>
34+
<NoticeMessage>{noticeInfo?.notice}</NoticeMessage>
3835
</NoticeCardContainer>
3936
);
4037
};
41-
export default NoticeCard;
38+
export default memo(NoticeCard);
4239

4340
const NoticeCardContainer = styled.div`
4441
display: flex;
@@ -113,5 +110,7 @@ const NoticeMessage = styled.p`
113110
margin-top: 10px;
114111
max-height: 170px;
115112
overflow-y: auto;
116-
${({ theme }) => theme.tokenTypographys['display-bold14']}
113+
${({ theme }) => theme.tokenTypographys['display-bold14']};
114+
white-space: pre-line;
115+
word-break: keep-all;
117116
`;

0 commit comments

Comments
 (0)