Skip to content

Commit 99a7e54

Browse files
se030se030
authored
Feat/#300-K: 투표 블럭을 생성한 사람만 등록 가능하도록 수정
2 parents 8eea49e + 115ea95 commit 99a7e54

File tree

9 files changed

+83
-71
lines changed

9 files changed

+83
-71
lines changed

‎@wabinar/constants/socket-message.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,13 @@ export const MOM_EVENT = {
2323
};
2424

2525
export const BLOCK_EVENT = {
26-
INIT: 'init-block',
2726
LOAD_TYPE: 'load-type',
2827
UPDATE_TYPE: 'update-type',
28+
INIT_TEXT: 'init-text',
2929
INSERT_TEXT: 'insert-text',
3030
DELETE_TEXT: 'delete-text',
3131
UPDATE_TEXT: 'update-text',
32-
CREATE_VOTE: 'create-vote',
32+
REGISTER_VOTE: 'register-vote',
3333
UPDATE_VOTE: 'update-vote',
3434
END_VOTE: 'end-vote',
3535
FETCH_QUESTIONS: 'fetch-questions',

‎client/src/components/Block/TextBlock.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -112,15 +112,15 @@ function TextBlock({
112112
useEffect(() => {
113113
registerRef(blockRef);
114114

115-
socket.emit(BLOCK_EVENT.INIT, id);
115+
socket.emit(BLOCK_EVENT.INIT_TEXT, id);
116116

117-
ee.on(`${BLOCK_EVENT.INIT}-${id}`, onInitialize);
117+
ee.on(`${BLOCK_EVENT.INIT_TEXT}-${id}`, onInitialize);
118118
ee.on(`${BLOCK_EVENT.UPDATE_TEXT}-${id}`, onInitialize);
119119
ee.on(`${BLOCK_EVENT.INSERT_TEXT}-${id}`, onInsert);
120120
ee.on(`${BLOCK_EVENT.DELETE_TEXT}-${id}`, onDelete);
121121

122122
return () => {
123-
ee.off(`${BLOCK_EVENT.INIT}-${id}`, onInitialize);
123+
ee.off(`${BLOCK_EVENT.INIT_TEXT}-${id}`, onInitialize);
124124
ee.off(`${BLOCK_EVENT.UPDATE_TEXT}-${id}`, onInitialize);
125125
ee.off(`${BLOCK_EVENT.INSERT_TEXT}-${id}`, onInsert);
126126
ee.off(`${BLOCK_EVENT.DELETE_TEXT}-${id}`, onDelete);

‎client/src/components/Block/VoteBlock/VoteBlockTemplate.tsx‎

Lines changed: 61 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,9 @@ function VoteBlockTemplate({
3030
options,
3131
setOptions,
3232
}: VoteBlockProps) {
33-
const [isCreateMode, isRegisteredMode, isEndMode] = [
33+
const [isCreateMode, isRegisteringMode, isRegisteredMode, isEndMode] = [
3434
mode === VoteMode.CREATE,
35+
mode === VoteMode.REGISTERING,
3536
mode === VoteMode.REGISTERED,
3637
mode === VoteMode.END,
3738
];
@@ -67,7 +68,7 @@ function VoteBlockTemplate({
6768
setOptions(validOptions);
6869
setVoteMode(VoteMode.REGISTERED);
6970

70-
socket.emit(BLOCK_EVENT.CREATE_VOTE, id, validOptions);
71+
socket.emit(BLOCK_EVENT.REGISTER_VOTE, id, validOptions);
7172

7273
toast('투표 등록 완료 ^^', { type: 'info' });
7374
};
@@ -143,63 +144,70 @@ function VoteBlockTemplate({
143144

144145
return (
145146
<div className={style['vote-container']}>
146-
<h3 className={style.title}>투표</h3>
147+
<h3 className={style.title}>{'투표'}</h3>
147148
{(isRegisteredMode || isEndMode) && (
148149
<span className={style['participant-cnt']}>
149150
{participantCount}명 참여
150151
</span>
151152
)}
152-
153-
<ul>
154-
{options.map(({ id, text, count }, index) => (
155-
<li
156-
className={cx('option-item', {
157-
'selected-item':
158-
(isRegisteredMode || isEndMode) && id === selectedOptionId,
159-
})}
160-
key={id}
161-
onClick={() => onSelect(id)}
162-
>
163-
{isEndMode && (
164-
<div
165-
className={style['vote-result-bar']}
166-
style={{
167-
width: `${getPercent(count)}%`,
168-
backgroundColor: color.highlight100,
169-
}}
170-
></div>
171-
)}
172-
173-
<div className={style['box-fill']}>{index + 1}</div>
174-
<input
175-
type="text"
176-
className={cx('option-input', {
177-
selected: isRegisteredMode,
178-
})}
179-
placeholder="항목을 입력해주세요"
180-
onChange={onChange}
181-
data-id={id}
182-
readOnly={isRegisteredMode || isEndMode}
183-
defaultValue={text}
184-
/>
185-
{isCreateMode && (
186-
<Button
187-
icon={<BiX size="20" color="white" />}
188-
ariaLabel="항목 삭제"
189-
onClick={() => onDelete(id)}
190-
/>
191-
)}
192-
{isEndMode && (
193-
<div className={style['vote-result-text']}>
194-
{getVoteResultText(count)}
195-
</div>
196-
)}
197-
</li>
198-
))}
199-
</ul>
200-
153+
{
154+
<ul>
155+
{isCreateMode ? (
156+
<li className={style['option-item']}>
157+
<div className={style['box-fill']}>{'^^'}</div>
158+
<div>등록될 때까지 기다려주세요</div>
159+
</li>
160+
) : (
161+
options.map(({ id, text, count }, index) => (
162+
<li
163+
className={cx('option-item', {
164+
'selected-item':
165+
(isRegisteredMode || isEndMode) && id === selectedOptionId,
166+
})}
167+
key={id}
168+
onClick={() => onSelect(id)}
169+
>
170+
{isEndMode && (
171+
<div
172+
className={style['vote-result-bar']}
173+
style={{
174+
width: `${getPercent(count)}%`,
175+
backgroundColor: color.highlight100,
176+
}}
177+
></div>
178+
)}
179+
180+
<div className={style['box-fill']}>{index + 1}</div>
181+
<input
182+
type="text"
183+
className={cx('option-input', {
184+
selected: isRegisteredMode,
185+
})}
186+
placeholder="항목을 입력해주세요"
187+
onChange={onChange}
188+
data-id={id}
189+
readOnly={isRegisteredMode || isEndMode}
190+
defaultValue={text}
191+
/>
192+
{isRegisteringMode && (
193+
<Button
194+
icon={<BiX size="20" color="white" />}
195+
ariaLabel="항목 삭제"
196+
onClick={() => onDelete(id)}
197+
/>
198+
)}
199+
{isEndMode && (
200+
<div className={style['vote-result-text']}>
201+
{getVoteResultText(count)}
202+
</div>
203+
)}
204+
</li>
205+
))
206+
)}
207+
</ul>
208+
}
201209
<div className={style['vote-buttons']}>
202-
{isCreateMode && (
210+
{isRegisteringMode && (
203211
<>
204212
<Button onClick={onAdd} text="항목 추가" />
205213
<Button onClick={onRegister} text="투표 등록" />

‎client/src/components/Block/VoteBlock/index.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,20 @@ import VoteBlockTemplate from './VoteBlockTemplate';
88

99
interface VoteBlockProps {
1010
id: string;
11+
registerable: boolean;
1112
}
1213

13-
function VoteBlock({ id }: VoteBlockProps) {
14+
function VoteBlock({ id, registerable }: VoteBlockProps) {
1415
const { momSocket: socket } = useSocketContext();
1516

16-
const [voteMode, setVoteMode] = useState<VoteMode>(VoteMode.CREATE);
17+
const [voteMode, setVoteMode] = useState<VoteMode>(
18+
registerable ? VoteMode.REGISTERING : VoteMode.CREATE,
19+
);
1720
const initialOption: Option[] = [{ id: 1, text: '', count: 0 }];
1821
const [options, setOptions] = useState<Option[]>(initialOption);
1922

2023
useEffect(() => {
21-
socket.on(`${BLOCK_EVENT.CREATE_VOTE}-${id}`, (options) => {
24+
socket.on(`${BLOCK_EVENT.REGISTER_VOTE}-${id}`, (options) => {
2225
setVoteMode(VoteMode.REGISTERED as VoteMode);
2326
setOptions(options);
2427
});

‎client/src/components/Block/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ function Block({ id, index, onKeyDown, registerRef }: BlockProps) {
6565
/>
6666
);
6767
case BlockType.VOTE:
68-
return <VoteBlock id={id} />;
68+
return <VoteBlock id={id} registerable={localUpdateFlagRef.current} />;
6969
case BlockType.QUESTION:
7070
return <QuestionBlock id={id} />;
7171
default:

‎client/src/components/Mom/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -149,8 +149,8 @@ function Mom() {
149149
setBlocks(spreadCRDT());
150150
});
151151

152-
socket.on(BLOCK_EVENT.INIT, (id, crdt) => {
153-
ee.emit(`${BLOCK_EVENT.INIT}-${id}`, crdt);
152+
socket.on(BLOCK_EVENT.INIT_TEXT, (id, crdt) => {
153+
ee.emit(`${BLOCK_EVENT.INIT_TEXT}-${id}`, crdt);
154154
});
155155

156156
socket.on(BLOCK_EVENT.INSERT_TEXT, (id, op) => {
@@ -176,7 +176,7 @@ function Mom() {
176176
MOM_EVENT.UPDATED,
177177
MOM_EVENT.INSERT_BLOCK,
178178
MOM_EVENT.DELETE_BLOCK,
179-
BLOCK_EVENT.INIT,
179+
BLOCK_EVENT.INIT_TEXT,
180180
BLOCK_EVENT.INSERT_TEXT,
181181
BLOCK_EVENT.DELETE_TEXT,
182182
BLOCK_EVENT.UPDATE_TYPE,

‎client/src/constants/block.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export const BLOCKS_TYPE = [
3939

4040
export enum VoteMode {
4141
CREATE,
42+
REGISTERING,
4243
REGISTERED,
4344
END,
4445
}

‎server/socket/Mom/handleTextBlock.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ export default function handleTextBlock(
66
socket: Socket,
77
crdtManager: CrdtManager,
88
) {
9-
socket.on(BLOCK_EVENT.INIT, async (blockId) => {
9+
socket.on(BLOCK_EVENT.INIT_TEXT, async (blockId) => {
1010
const blockCrdt = await crdtManager.getBlockCRDT(blockId);
1111

12-
socket.emit(BLOCK_EVENT.INIT, blockId, blockCrdt.data);
12+
socket.emit(BLOCK_EVENT.INIT_TEXT, blockId, blockCrdt.data);
1313
});
1414

1515
socket.on(BLOCK_EVENT.INSERT_TEXT, async (blockId, op) => {
@@ -22,7 +22,7 @@ export default function handleTextBlock(
2222
} catch {
2323
const blockCrdt = await crdtManager.getBlockCRDT(blockId);
2424

25-
socket.emit(BLOCK_EVENT.INIT, blockId, blockCrdt.data);
25+
socket.emit(BLOCK_EVENT.INIT_TEXT, blockId, blockCrdt.data);
2626
}
2727
});
2828

@@ -36,7 +36,7 @@ export default function handleTextBlock(
3636
} catch {
3737
const blockCrdt = await crdtManager.getBlockCRDT(blockId);
3838

39-
socket.emit(BLOCK_EVENT.INIT, blockId, blockCrdt.data);
39+
socket.emit(BLOCK_EVENT.INIT_TEXT, blockId, blockCrdt.data);
4040
}
4141
});
4242

‎server/socket/Mom/handleVoteBlock.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@ export default function handleVoteBlock(
1212
namespace: string,
1313
socket: Socket,
1414
) {
15-
socket.on(BLOCK_EVENT.CREATE_VOTE, async (blockId, options: Option[]) => {
15+
socket.on(BLOCK_EVENT.REGISTER_VOTE, async (blockId, options: Option[]) => {
1616
const momId = socket.data.momId;
1717

1818
await createVote(blockId, options);
1919

20-
socket.to(momId).emit(`${BLOCK_EVENT.CREATE_VOTE}-${blockId}`, options);
20+
socket.to(momId).emit(`${BLOCK_EVENT.REGISTER_VOTE}-${blockId}`, options);
2121
});
2222

2323
socket.on(BLOCK_EVENT.UPDATE_VOTE, async (blockId, optionId, userId) => {

0 commit comments

Comments
 (0)