Skip to content

Commit 6d93dc9

Browse files
LeeCh0129LeeCh0129
authored
Merge pull request #90 from codeit-maso/feature/chan
🎨 style: HeaderService 레이아웃 및 반응형 디자인 개선
2 parents 26beab2 + 94638d9 commit 6d93dc9

File tree

5 files changed

+216
-95
lines changed

5 files changed

+216
-95
lines changed

‎src/components/UserProfileSelector/UserProfileSelector.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export default function UserProfileSelector({
5252
/>
5353
<input
5454
type="file"
55-
accept="image/"
55+
accept="image/*"
5656
onChange={handleUpload}
5757
ref={fileInput}
5858
style={{ display: 'none' }}

‎src/components/recipient/HeaderService/HeaderService.jsx‎

Lines changed: 100 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export default function HeaderService({ recipient }) {
1111
const [showAllEmojisDropdown, setShowAllEmojisDropdown] = useState(false);
1212
const emojiPickerRef = useRef(null);
1313
const emojiMoreRef = useRef(null);
14+
const [isLargeScreen, setIsLargeScreen] = useState(true);
1415

1516
const commonEmojis = [
1617
'😆',
@@ -97,6 +98,18 @@ export default function HeaderService({ recipient }) {
9798
.sort((a, b) => b.count - a.count)
9899
.slice(0, 3);
99100

101+
useEffect(() => {
102+
const checkScreenSize = () => {
103+
setIsLargeScreen(window.innerWidth > 975);
104+
};
105+
106+
checkScreenSize();
107+
108+
window.addEventListener('resize', checkScreenSize);
109+
110+
return () => window.removeEventListener('resize', checkScreenSize);
111+
}, []);
112+
100113
return (
101114
<div className={styles['header-service']}>
102115
<div className={styles['header-service__container']}>
@@ -131,93 +144,98 @@ export default function HeaderService({ recipient }) {
131144

132145
<div className={styles['header-service__divider--left']}></div>
133146
<div className={styles['header-service__actions']}>
134-
<div className={styles['header-service__emojis']}>
135-
{topReactions.length > 0 ? (
136-
topReactions.map((reaction) => (
137-
<div
138-
key={reaction.id}
139-
className={styles['header-service__emoji-item']}
140-
onClick={() => handleAddReaction(reaction.emoji)}
141-
>
142-
{reaction.emoji} {reaction.count}
143-
</div>
144-
))
145-
) : (
146-
<span>아직 리액션이 없어요</span>
147-
)}
148-
</div>
149-
<div
150-
className={styles['header-service__emoji-more-container']}
151-
ref={emojiMoreRef}
152-
>
153-
<button
154-
className={styles['header-service__emoji-more']}
155-
onClick={toggleAllEmojisDropdown}
147+
<div className={styles['header-service__emojis-left-group']}>
148+
<div className={styles['header-service__emojis']}>
149+
{topReactions.length > 0 ? (
150+
topReactions.map((reaction) => (
151+
<div
152+
key={reaction.id}
153+
className={styles['header-service__emoji-item']}
154+
onClick={() => handleAddReaction(reaction.emoji)}
155+
>
156+
{reaction.emoji} {reaction.count}
157+
</div>
158+
))
159+
) : (
160+
<span>아직 리액션이 없어요</span>
161+
)}
162+
</div>
163+
<div
164+
className={styles['header-service__emoji-more-container']}
165+
ref={emojiMoreRef}
156166
>
157-
<img
158-
src={chevronDown}
159-
alt="이모지 더보기"
160-
style={{
161-
transform: showAllEmojisDropdown
162-
? 'rotate(180deg)'
163-
: 'rotate(0deg)',
164-
}}
165-
/>
166-
</button>
167-
{showAllEmojisDropdown && (
168-
<div className={styles['header-service__emoji-dropdown']}>
169-
<div
170-
className={styles['header-service__emoji-dropdown-grid']}
171-
>
172-
{reactions.length > 0 ? (
173-
[...reactions]
174-
.sort((a, b) => b.count - a.count)
175-
.slice(0, 8)
176-
.map((reaction) => (
177-
<div
178-
key={reaction.id}
179-
className={
180-
styles['header-service__emoji-dropdown-item']
181-
}
182-
onClick={() => handleAddReaction(reaction.emoji)}
183-
>
184-
{reaction.emoji} {reaction.count}
185-
</div>
186-
))
187-
) : (
188-
<span>아직 리액션이 없어요</span>
189-
)}
167+
<button
168+
className={styles['header-service__emoji-more']}
169+
onClick={toggleAllEmojisDropdown}
170+
>
171+
<img
172+
src={chevronDown}
173+
alt="이모지 더보기"
174+
style={{
175+
transform: showAllEmojisDropdown
176+
? 'rotate(180deg)'
177+
: 'rotate(0deg)',
178+
}}
179+
/>
180+
</button>
181+
{showAllEmojisDropdown && (
182+
<div className={styles['header-service__emoji-dropdown']}>
183+
<div
184+
className={styles['header-service__emoji-dropdown-grid']}
185+
>
186+
{reactions.length > 0 ? (
187+
[...reactions]
188+
.sort((a, b) => b.count - a.count)
189+
.slice(0, isLargeScreen ? 8 : 6)
190+
.map((reaction) => (
191+
<div
192+
key={reaction.id}
193+
className={
194+
styles['header-service__emoji-dropdown-item']
195+
}
196+
onClick={() => handleAddReaction(reaction.emoji)}
197+
>
198+
{reaction.emoji} {reaction.count}
199+
</div>
200+
))
201+
) : (
202+
<span>아직 리액션이 없어요</span>
203+
)}
204+
</div>
190205
</div>
191-
</div>
192-
)}
206+
)}
207+
</div>
193208
</div>
194-
<div
195-
className={styles['header-service__emoji-picker-container']}
196-
ref={emojiPickerRef}
197-
>
198-
<button
199-
className={styles['header-service__add-button']}
200-
onClick={() => setShowEmojiPicker(!showEmojiPicker)}
209+
210+
<div className={styles['header-service__emojis-right-group']}>
211+
<div
212+
className={styles['header-service__emoji-picker-container']}
213+
ref={emojiPickerRef}
201214
>
202-
<img src={emojiAdd} alt="이모지 추가" />
203-
추가
204-
</button>
205-
{showEmojiPicker && (
206-
<div className={styles['header-service__emoji-picker']}>
207-
{commonEmojis.map((emoji, index) => (
208-
<button
209-
key={index}
210-
className={styles['header-service__emoji-picker-item']}
211-
onClick={() => handleAddReaction(emoji)}
212-
>
213-
{emoji}
214-
</button>
215-
))}
216-
</div>
217-
)}
215+
<button
216+
className={styles['header-service__add-button']}
217+
onClick={() => setShowEmojiPicker(!showEmojiPicker)}
218+
>
219+
<img src={emojiAdd} alt="이모지 추가" />
220+
<span>추가</span>
221+
</button>
222+
{showEmojiPicker && (
223+
<div className={styles['header-service__emoji-picker']}>
224+
{commonEmojis.map((emoji, index) => (
225+
<button
226+
key={index}
227+
className={styles['header-service__emoji-picker-item']}
228+
onClick={() => handleAddReaction(emoji)}
229+
>
230+
{emoji}
231+
</button>
232+
))}
233+
</div>
234+
)}
235+
</div>
236+
<div className={styles['header-service__divider--right']}></div>
237+
<ShareButton recipient={recipient} />
218238
</div>
219-
<div className={styles['header-service__divider--right']}></div>
220-
<ShareButton recipient={recipient} />
221239
</div>
222240
</div>
223241
</div>

0 commit comments

Comments
 (0)