Skip to content

Commit aace72c

Browse files
tech-kms-jaketech-kms-jake
committed
feat: 파비콘, 타이틀 적용
1 parent 2116420 commit aace72c

File tree

7 files changed

+379
-379
lines changed

7 files changed

+379
-379
lines changed

‎public/favicon.ico‎

-167 KB
Binary file not shown.

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="ko">
33
<head>
44
<meta charset="utf-8" />
5-
<title>Tung</title>
5+
<title>뇌이싱</title>
66
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
88
<meta name="theme-color" content="#000000" />

‎src/pages/mypage/MyPage.js‎

Lines changed: 26 additions & 204 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useState } from 'react';
22
import useConfirm from '../../hooks/useConfirm';
33
import { useNavigate } from 'react-router-dom';
44
import { Trophy, BarChart3 } from 'lucide-react';
5+
import styles from './mypage.module.scss'
56

67
const userStats = {
78
nickname: '빵야빵야',
@@ -48,192 +49,25 @@ const MyPage = () => {
4849
});
4950
};
5051

51-
const containerStyle = {
52-
minHeight: '100vh',
53-
backgroundColor: 'white',
54-
color: '#111827',
55-
position: 'relative',
56-
};
57-
58-
const backgroundPatternStyle = {
59-
position: 'fixed',
60-
top: 0,
61-
left: 0,
62-
right: 0,
63-
bottom: 0,
64-
opacity: 0.1,
65-
backgroundImage: `
66-
linear-gradient(45deg, transparent 40%, rgba(0,0,0,0.05) 50%, transparent 60%),
67-
linear-gradient(-45deg, transparent 40%, rgba(0,0,0,0.05) 50%, transparent 60%)
68-
`,
69-
backgroundSize: '20px 20px',
70-
zIndex: -1,
71-
};
72-
73-
const mainStyle = {
74-
position: 'relative',
75-
maxWidth: '1200px',
76-
margin: '0 auto',
77-
padding: '2rem 1rem',
78-
};
79-
80-
const cardStyle = {
81-
maxWidth: '1024px',
82-
margin: '0 auto',
83-
background: 'linear-gradient(135deg, #f9fafb 0%, white 50%, #f9fafb 100%)',
84-
border: '2px solid rgba(220, 38, 38, 0.3)',
85-
borderRadius: '0.5rem',
86-
boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
87-
};
88-
89-
const headerStyle = {
90-
background: 'linear-gradient(90deg, #dc2626 0%, #b91c1c 50%, #000000 100%)',
91-
borderBottom: '1px solid rgba(220, 38, 38, 0.3)',
92-
borderTopLeftRadius: '0.5rem',
93-
borderTopRightRadius: '0.5rem',
94-
padding: '1.5rem',
95-
display: 'flex',
96-
alignItems: 'center',
97-
gap: '0.75rem',
98-
};
99-
100-
const headerTextStyle = {
101-
color: 'white',
102-
fontSize: '1.25rem',
103-
fontWeight: '900',
104-
letterSpacing: '0.1em',
105-
textTransform: 'uppercase',
106-
};
107-
108-
const formStyle = {
109-
padding: '2rem',
110-
};
111-
112-
const sectionStyle = {
113-
marginBottom: '1.5rem',
114-
};
115-
116-
const inputRowStyle = {
117-
display: 'flex',
118-
alignItems: 'center',
119-
gap: '1rem',
120-
marginBottom: '1.5rem',
121-
};
122-
123-
const labelStyle = {
124-
fontWeight: 'bold',
125-
color: '#111827',
126-
width: '80px',
127-
flexShrink: 0,
128-
};
129-
130-
const inputStyle = {
131-
flex: '1',
132-
maxWidth: '300px',
133-
padding: '0.5rem 1rem',
134-
border: '1px solid linear-gradient(145deg, #ff1e1e, #e10600)',
135-
borderRadius: '0.25rem',
136-
outline: 'none',
137-
transition: 'border-color 0.2s',
138-
};
139-
140-
const buttonStyle = {
141-
padding: '0.5rem 1rem',
142-
background: 'linear-gradient(145deg, #ff1e1e, #e10600)',
143-
color: 'white',
144-
fontWeight: '600',
145-
borderRadius: '0.25rem',
146-
border: 'none',
147-
cursor: 'pointer',
148-
transition: 'background-color 0.2s',
149-
};
150-
151-
const statsCardStyle = {
152-
background: 'linear-gradient(135deg, #f9fafb 0%, white 50%, #f9fafb 100%)',
153-
border: '1px solid rgba(220, 38, 38, 0.2)',
154-
borderRadius: '0.5rem',
155-
padding: '1.5rem',
156-
marginBottom: '1.5rem',
157-
};
158-
159-
const statsHeaderStyle = {
160-
display: 'flex',
161-
alignItems: 'center',
162-
gap: '0.75rem',
163-
marginBottom: '1rem',
164-
};
165-
166-
const statsRowStyle = {
167-
display: 'flex',
168-
alignItems: 'center',
169-
gap: '1rem',
170-
marginBottom: '1rem',
171-
};
172-
173-
const buttonGroupStyle = {
174-
display: 'flex',
175-
justifyContent: 'center',
176-
gap: '1rem',
177-
paddingTop: '1.5rem',
178-
};
179-
180-
const saveButtonStyle = {
181-
padding: '0.75rem 1.5rem',
182-
border: '2px solid #dc2626',
183-
color: '#dc2626',
184-
backgroundColor: 'transparent',
185-
fontWeight: 'bold',
186-
borderRadius: '0.25rem',
187-
cursor: 'pointer',
188-
transition: 'all 0.2s',
189-
};
190-
191-
const deleteButtonStyle = {
192-
padding: '0.75rem 1.5rem',
193-
background: 'linear-gradient(145deg, #ff1e1e, #e10600)', // 그라디언트 적용!
194-
color: 'white',
195-
fontWeight: 'bold',
196-
borderRadius: '0.25rem',
197-
border: 'none',
198-
cursor: 'pointer',
199-
transition: 'background-color 0.2s',
200-
};
201-
202-
const rankBadgeStyle = {
203-
background: 'linear-gradient(145deg, #ff1e1e, #e10600)', // 그라디언트 적용!
204-
color: 'white',
205-
fontWeight: 'bold',
206-
padding: '0.25rem 0.75rem',
207-
borderRadius: '0.25rem',
208-
};
209-
210-
const scoreStyle = {
211-
color: '#dc2626',
212-
fontWeight: '900',
213-
fontSize: '1.25rem',
214-
};
215-
21652
return (
217-
<div style={containerStyle}>
218-
<div style={backgroundPatternStyle}></div>
219-
220-
<main style={mainStyle}>
221-
<div style={cardStyle}>
222-
<div style={headerStyle}>
53+
<div className={styles.container}>
54+
<div className={styles.backgroundPattern}></div>
55+
<main className={styles.main}>
56+
<div className={styles.card}>
57+
<div className={styles.cardHeader}>
22358
<Trophy size={24} color='#fbbf24' />
224-
<span style={headerTextStyle}>프로필 정보</span>
59+
<span className={styles.headerText}>프로필 정보</span>
22560
</div>
226-
227-
<div style={formStyle}>
61+
<div className={styles.form}>
22862
<form>
22963
{/* 닉네임 섹션 */}
230-
<div style={inputRowStyle}>
231-
<label style={labelStyle}>닉네임</label>
64+
<div className={styles.inputRow}>
65+
<label className={styles.label}>닉네임</label>
23266
<input
23367
type='text'
23468
value={nickname}
23569
onChange={(e) => setNickname(e.target.value)}
236-
style={inputStyle}
70+
className={styles.input}
23771
onFocus={(e) => (e.target.style.borderColor = '#dc2626')}
23872
onBlur={(e) =>
23973
(e.target.style.borderColor = 'rgba(220, 38, 38, 0.5)')
@@ -242,7 +76,7 @@ const MyPage = () => {
24276
<button
24377
type='button'
24478
onClick={handleDuplicateCheck}
245-
style={buttonStyle}
79+
className={styles.button}
24680
onMouseOver={(e) =>
24781
(e.target.style.backgroundColor = '#b91c1c')
24882
}
@@ -255,50 +89,38 @@ const MyPage = () => {
25589
</div>
25690

25791
{/* 게임 통계 섹션 */}
258-
<div style={statsCardStyle}>
259-
<div style={statsHeaderStyle}>
92+
<div className={styles.statsCard}>
93+
<div className={styles.statsHeader}>
26094
<BarChart3 size={20} color='#dc2626' />
261-
<span
262-
style={{
263-
fontWeight: '900',
264-
color: '#111827',
265-
textTransform: 'uppercase',
266-
letterSpacing: '0.1em',
267-
}}
268-
>
269-
게임 통계
270-
</span>
95+
<span>게임 통계</span>
27196
</div>
272-
27397
<div>
274-
<div style={statsRowStyle}>
275-
<label style={labelStyle}>전적</label>
98+
<div className={styles.statsRow}>
99+
<label className={styles.label}>전적</label>
276100
<span style={{ color: '#374151', fontWeight: '600' }}>
277101
{userStats.totalGames}전 {userStats.wins}승{' '}
278102
{userStats.losses}패
279103
</span>
280104
</div>
281-
282-
<div style={statsRowStyle}>
283-
<label style={labelStyle}>점수</label>
284-
<span style={scoreStyle}>{userStats.score}점</span>
105+
<div className={styles.statsRow}>
106+
<label className={styles.label}>점수</label>
107+
<span className={styles.score}>{userStats.score}점</span>
285108
</div>
286-
287-
<div style={statsRowStyle}>
288-
<label style={labelStyle}>현재 랭킹</label>
289-
<span style={rankBadgeStyle}>
109+
<div className={styles.statsRow}>
110+
<label className={styles.label}>현재 랭킹</label>
111+
<span className={styles.rankBadge}>
290112
{userStats.currentRank}위
291113
</span>
292114
</div>
293115
</div>
294116
</div>
295117

296118
{/* 버튼 영역 */}
297-
<div style={buttonGroupStyle}>
119+
<div className={styles.buttonGroup}>
298120
<button
299121
type='button'
300122
onClick={handleSaveClick}
301-
style={saveButtonStyle}
123+
className={styles.saveButton}
302124
onMouseOver={(e) => {
303125
e.target.style.backgroundColor = '#dc2626';
304126
e.target.style.color = 'white';
@@ -313,7 +135,7 @@ const MyPage = () => {
313135
<button
314136
type='button'
315137
onClick={handleExitClick}
316-
style={deleteButtonStyle}
138+
className={styles.deleteButton}
317139
onMouseOver={(e) =>
318140
(e.target.style.backgroundColor = '#b91c1c')
319141
}

0 commit comments

Comments
 (0)