-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsigunup.html
More file actions
397 lines (373 loc) · 22 KB
/
Copy pathsigunup.html
File metadata and controls
397 lines (373 loc) · 22 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="favicon.ico" sizes="any" />
<title>회원가입 - 맛길</title>
<meta name="description" content="맛길 회원가입 페이지" />
<meta name="robots" content="noindex, nofollow" />
<meta name="theme-color" content="#e85d4a" />
<link rel="canonical" href="https://eggtart-365.github.io/Matgil/sigunup.html" />
<meta property="og:site_name" content="맛길" />
<meta property="og:locale" content="ko_KR" />
<meta property="og:type" content="website" />
<meta property="og:title" content="회원가입 - 맛길" />
<meta property="og:description" content="맛길 회원가입하고 맛집 탐색을 시작하세요." />
<meta property="og:url" content="https://eggtart-365.github.io/Matgil/sigunup.html" />
<meta property="og:image" content="https://eggtart-365.github.io/Matgil/assets/img/og-image.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="회원가입 - 맛길" />
<meta name="twitter:description" content="맛길 회원가입하고 맛집 탐색을 시작하세요." />
<meta name="twitter:image" content="https://eggtart-365.github.io/Matgil/assets/img/og-image.png" />
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
<!-- JSDelivr 를 통해 Pretendard 폰트 추가 (JSDelivr는 오픈소스를 위해 운영되는 CDN(Content Delivery Network) 서비스) -->
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/signup.css" />
</head>
<body>
<header class="site-header">
<div class="header-inner">
<div class="header-left">
<a href="index.html" class="logo">
<img
src="assets/img/Logo.svg"
alt=""
class="logo-icon"
width="28"
height="28"
/>
맛길
</a>
<!-- 로고: 클릭 시 메인 페이지로 이동 -->
<nav class="nav">
<a href="index.html">홈</a>
<a href="event.html">이벤트</a>
<a href="about.html">소개</a>
</nav>
</div>
<div class="header-right">
<div class="search-bar">
<input class="search-input" type="text" placeholder="검색어를 입력해주세요" />
<button class="search-button" type="button">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>
</button>
</div>
<a href="login.html" class="btn-login">로그인</a>
</div>
</div>
</header>
<!-- 페이지 본문 시작 -->
<h1 id="title">회원가입</h1> <!-- h1 태그: 페이지 최상위 제목 -->
<form id="signup-form" novalidate>
<div id="form"> <!-- 전체 폼을 감싸는 컨테이너 -->
<div id="form-info"> <!-- 필수입력사항 안내 영역 -->
<span class="required">*</span> <!-- 필수입력사항 아이콘 (빨간색 별표) -->
<span>필수입력사항</span> <!-- 필수입력사항 안내 텍스트 -->
</div>
<div id="option-rows"> <!-- 입력 항목 목록 컨테이너 -->
<!-- 아이디 입력 행 -->
<div class="option-row"> <!-- 하나의 입력 항목 행 -->
<div class="option-row-name"> <!-- 항목 이름 영역 -->
<label class="option-row-name-label">아이디</label> <!-- 항목 이름 레이블 -->
<span class="required">*</span> <!-- 필수 항목 표시 -->
</div>
<div class="option-row-input"> <!-- 입력 필드 영역 -->
<!-- text 형식의 input 필드 사용하여 ID 입력 -->
<input id="signup-id" class="option-row-input-field" type="text" placeholder="아이디를 입력해주세요"/> <!-- 아이디 텍스트 입력 필드 -->
</div>
<div class="option-row-input-button"> <!-- 버튼 영역 (아이디는 버튼 없음) -->
</div>
<p class="field-error" id="signup-id-error" aria-live="polite"></p>
</div>
<!-- 비밀번호 입력 행 -->
<div class="option-row">
<div class="option-row-name">
<label class="option-row-name-label">비밀번호</label>
<span class="required">*</span>
</div>
<div class="option-row-input">
<!-- password 형식의 input 필드 사용하여 비밀번호 블라인드 처리 -->
<input id="signup-password" class="option-row-input-field" type="password" placeholder="비밀번호를 입력해주세요"/> <!-- 비밀번호 입력 필드 (입력값 *로 숨김) -->
</div>
<div class="option-row-input-button"></div> <!-- 버튼 영역 (비밀번호는 버튼 없음) -->
<p class="field-error" id="signup-password-error" aria-live="polite"></p>
</div>
<!-- 비밀번호 확인 입력 행 -->
<div class="option-row">
<div class="option-row-name">
<label class="option-row-name-label">비밀번호 확인</label>
<span class="required">*</span>
</div>
<div class="option-row-input">
<!-- 위 내용과 동일 -->
<input id="signup-password-confirm" class="option-row-input-field" type="password" placeholder="비밀번호를 한번 더 입력해주세요"/> <!-- 비밀번호 재입력 필드 -->
</div>
<div class="option-row-input-button"></div>
<p class="field-error" id="signup-password-confirm-error" aria-live="polite"></p>
</div>
<!-- 이름 입력 행 -->
<div class="option-row">
<div class="option-row-name">
<label class="option-row-name-label">이름</label>
<span class="required">*</span>
</div>
<div class="option-row-input">
<!-- text 형식의 input 필드 사용하여 이름 입력 -->
<input id="signup-name" class="option-row-input-field" type="text" placeholder="이름을 입력해주세요"/> <!-- 이름 텍스트 입력 필드 -->
</div>
<div class="option-row-input-button"></div>
<p class="field-error" id="signup-name-error" aria-live="polite"></p>
</div>
<!-- 이메일 입력 행 -->
<div class="option-row">
<div class="option-row-name">
<label class="option-row-name-label">이메일</label>
<span class="required">*</span>
</div>
<div id="email-container"> <!-- 이메일 입력 전체 컨테이너 -->
<div id="email-input"> <!-- 이메일 아이디 + @ + 도메인 래퍼 -->
<!-- 마켓컬리 사이트가 이메일 ID + 도메인 형식을 사용해 text로 이메일 ID 입력 -->
<input id="email-input-field" type="text" placeholder="예: marketkurly"/> <!-- 이메일 아이디 입력 필드 -->
<span style="font-size: 14px; color: #333; padding: 0px 4px;">@</span> <!-- @ 구분자 텍스트 -->
<div id="email-service-container"> <!-- 도메인 선택 영역 -->
<button id="email-service-select-button" type="button">선택하기</button> <!-- 도메인 드롭다운 선택 버튼 -->
<input id="email-domain-field" type="text" placeholder="직접 입력"/> <!-- 도메인 직접 입력 필드 (기본 숨김) -->
<button id="email-service-direct-input-button" type="button"> <!-- 드롭다운 토글 버튼 -->
<span style="font-size: 12px; color: #444;">▼</span> <!-- 드롭다운 화살표 아이콘 -->
</button>
<ul id="email-service-dropdown"> <!-- 이메일 서비스 드롭다운 목록 -->
<li data-value="naver.com">naver.com</li> <!-- 네이버 도메인 선택 항목 -->
<li data-value="gmail.com">gmail.com</li> <!-- 구글 도메인 선택 항목 -->
<li data-value="hanmail.net">hanmail.net</li> <!-- 한메일 도메인 선택 항목 -->
<li data-value="kakao.com">kakao.com</li> <!-- 카카오 도메인 선택 항목 -->
<li data-value="daum.net">daum.net</li> <!-- 다음 도메인 선택 항목 -->
<li data-value="hotmail.com">hotmail.com</li> <!-- 핫메일 도메인 선택 항목 -->
<li data-value="yahoo.co.kr">yahoo.co.kr</li> <!-- 야후 도메인 선택 항목 -->
<li data-value="direct" class="direct">직접 입력</li> <!-- 직접 입력 선택 항목 -->
</ul>
</div>
</div>
<p class="field-error" id="signup-email-error" aria-live="polite"></p>
</div>
<div class="option-row-input-button"></div>
</div>
<!-- 휴대폰 입력 행 -->
<div class="option-row">
<div class="option-row-name">
<label class="option-row-name-label">휴대폰</label>
<span class="required">*</span>
</div>
<div class="option-row-input">
<!-- tel 형식의 input 필드 사용하여 휴대폰 번호 입력 -->
<input id="signup-phone" class="option-row-input-field" type="tel" placeholder="숫자만 입력해주세요"/> <!-- 전화번호 입력 필드 -->
</div>
<div class="option-row-input-button">
<button id="verify-button" type="button" disabled> <!-- 인증번호 받기 버튼 (disabled: 기본 비활성화) -->
<span style="font-size: 14px; font-weight: 500;">인증번호 받기</span> <!-- 버튼 텍스트 -->
</button>
</div>
<p class="field-error" id="signup-phone-error" aria-live="polite"></p>
</div>
<!-- 주소 입력 행 -->
<div class="option-row">
<div class="option-row-name">
<label class="option-row-name-label">주소</label>
<span class="required">*</span>
</div>
<div id="address-container"> <!-- 주소 입력 컨테이너 -->
<!-- 주소 검색은 기능 없이 버튼만 UI적 요소로 배치 -->
<button id="address-search-button" type="button"> <!-- 주소 검색 버튼 -->
<img /> <!-- 주소 검색 아이콘 이미지 (src 미지정) -->
<span style="font-size: 14px; font-weight: 500;">주소 검색</span> <!-- 버튼 텍스트 -->
</button>
<input type="hidden" id="address-value" />
<p id="address-selected-text"></p>
<span id="address-search-info">배송지에 따라 상품 정보가 달라질 수 있습니다.</span> <!-- 주소 안내 텍스트 -->
<p class="field-error" id="signup-address-error" aria-live="polite"></p>
</div>
<div class="option-row-input-button"></div>
</div>
<!-- 성별 선택 행 -->
<div class="option-row">
<div class="option-row-name">
<label class="option-row-name-label">성별</label> <!-- 성별 항목 레이블 (필수 아님) -->
</div>
<div id="gender-container"> <!-- 성별 라디오 버튼 묶음 -->
<!-- radio 형식의 input 필드 사용하여 성별 선택, 같은 name 속성 값을 가지게 해 하나만 선택 가능하게 함 -->
<label class="gender-option-label"> <!-- 남자 선택 레이블 -->
<input class="radio-input" type="radio" name="gender" value="MALE"/> <!-- 남자 라디오 버튼 -->
<span class="gender-option-label-text">남자</span> <!-- 남자 선택지 텍스트 -->
</label>
<label class="gender-option-label"> <!-- 여자 선택 레이블 -->
<input class="radio-input" type="radio" name="gender" value="FEMALE"/> <!-- 여자 라디오 버튼 -->
<span class="gender-option-label-text">여자</span> <!-- 여자 선택지 텍스트 -->
</label>
<label class="gender-option-label"> <!-- 선택안함 레이블 -->
<input class="radio-input" type="radio" name="gender" value="NONE"/> <!-- 선택안함 라디오 버튼 -->
<span class="gender-option-label-text">선택안함</span> <!-- 선택안함 텍스트 -->
</label>
</div>
<div class="option-row-input-button"></div>
</div>
<!-- 생년월일 입력 행 -->
<div class="option-row">
<div class="option-row-name">
<label class="option-row-name-label">생년월일</label> <!-- 생년월일 항목 레이블 (필수 아님) -->
</div>
<div id="birthday-container"> <!-- 생년월일 입력 컨테이너 -->
<!-- text 형식의 input 필드 사용하여 생년월일 입력, 년/월/일 각자 기입 받음 -->
<div class="birthday-input"> <!-- 연도 입력 영역 -->
<input id="birthday-year" class="birthday-input-field" type="text" placeholder="YYYY" maxlength="4"/> <!-- 연도(4자리) 입력 필드 -->
</div>
<span class="birthday-input-separator">/</span> <!-- 연/월 구분자 -->
<div class="birthday-input"> <!-- 월 입력 영역 -->
<input id="birthday-month" class="birthday-input-field" type="text" placeholder="MM" maxlength="2"/> <!-- 월(2자리) 입력 필드 -->
</div>
<span class="birthday-input-separator">/</span> <!-- 월/일 구분자 -->
<div class="birthday-input"> <!-- 일 입력 영역 -->
<input id="birthday-day" class="birthday-input-field" type="text" placeholder="DD" maxlength="2"/> <!-- 일(2자리) 입력 필드 -->
</div>
</div>
<div class="option-row-input-button"></div>
<p class="field-error" id="signup-birthday-error" aria-live="polite"></p>
</div>
<!-- 추가입력 사항 행 -->
<div class="option-row">
<div class="option-row-name">
<label class="option-row-name-label">추가입력 사항</label> <!-- 추가입력 항목 레이블 (필수 아님) -->
</div>
<div>
<label class="additional-option-label"> <!-- 추가입력 선택 레이블 -->
<!-- 라디오 버튼 클릭 시 해당 옵션 행이 표시되도록 함 -->
<input class="radio-input" type="radio" name="additional" value="recommend"/> <!-- 친구초대 추천인 라디오 버튼 -->
<span class="additional-option-label-text">친구초대 추천인 아이디</span> <!-- 추천인 선택지 텍스트 -->
</label>
</div>
</div>
<!-- 추천인 아이디 입력 행 (기본 숨김, 라디오 선택 시 표시) -->
<div class="option-row additional-option-row">
<div class="option-row-name">
<label class="option-row-name-label"></label> <!-- 빈 레이블 (이름 영역 폭 유지용) -->
</div>
<div class="option-row-input">
<input id="signup-recommend-id" class="option-row-input-field" type="text" placeholder="추천인 아이디 입력"/> <!-- 추천인 아이디 텍스트 입력 필드 -->
</div>
<div class="option-row-input-button">
<button id="additional-option-button" type="button">아이디 확인</button> <!-- 추천인 아이디 확인 버튼 -->
</div>
<p class="field-error" id="signup-recommend-id-error" aria-live="polite"></p>
</div>
<!-- 추천인 안내 문구 행 (기본 숨김) -->
<div class="option-row additional-option-row">
<div class="option-row-name">
<label class="option-row-name-label"></label>
</div>
<div id="additional-option-description"> <!-- 추천인 설명 텍스트 영역 -->
<ul id="additional-option-description-list"> <!-- 추천인 안내 목록 -->
<li>- 가입 후 7일 이내 첫 주문 배송완료 시, 친구초대 적립금이 지급됩니다.</li> <!-- 적립금 지급 조건 안내 -->
<li>- ID 입력시, 대소문자 및 띄어쓰기에 유의 부탁드립니다.</li> <!-- 입력 유의사항 안내 -->
<li>- 가입 이후는 수정이 불가능합니다.</li> <!-- 수정 불가 안내 -->
</ul>
</div>
<div class="option-row-input-button"></div>
</div>
</div>
<div id="spacer"></div> <!-- 입력 항목과 약관 영역 사이 구분선 -->
<!-- 이용약관 동의 영역 -->
<div id="agreement-rows">
<div id="agreement-container"> <!-- 이용약관 항목 컨테이너 -->
<div id="agreement-title"> <!-- 이용약관 항목 이름 영역 -->
<label class="option-row-name-label">이용약관동의</label> <!-- 이용약관동의 레이블 -->
<span class="required">*</span> <!-- 필수 항목 표시 -->
</div>
<div id="agreement-content"> <!-- 이용약관 체크박스 목록 영역 -->
<!-- 전체 동의 항목 -->
<div id="agreement-item-main"> <!-- 전체 동의 영역 -->
<label id="agreement-item-main-label"> <!-- 전체 동의 체크박스 레이블 -->
<!-- checkbox 형식의 input 필드 사용하여 전체 동의 체크박스 -->
<!-- JavaScript로 전체 동의 체크박스 클릭 시 하위 체크박스 모두 체크되도록 함 -->
<input id="agreement-item-main-checkbox" class="checkbox-input" type="checkbox" name="agreement" value="agree"/> <!-- 전체 동의 체크박스 -->
<span>전체 동의합니다.</span> <!-- 전체 동의 텍스트 -->
</label>
<p id="agreement-item-main-description">선택항목에 동의하지 않은 경우도 회원가입 및 일반적인 서비스를 이용할 수 있습니다.</p> <!-- 전체 동의 설명 문구 -->
</div>
<!-- 이용약관 동의 항목 (필수) -->
<div class="agreement-item"> <!-- 개별 약관 항목 행 -->
<div class="agreement-item-content"> <!-- 체크박스 + 레이블 묶음 -->
<label class="agreement-item-content-label"> <!-- 이용약관 동의 레이블 -->
<input class="checkbox-input" type="checkbox" name="agreement" value="agree"/> <!-- 이용약관 동의 체크박스 -->
<span>이용약관 동의</span> <!-- 항목 텍스트 -->
</label>
<span class="agreement-item-content-required">(필수)</span> <!-- 필수 여부 표시 -->
</div>
<!-- a 태그 사용하여 약관보기 하이퍼링크 추가 -->
<a class="agreement-item-content-link" href="#">약관보기 ></a> <!-- 약관 상세 보기 링크 -->
</div>
<!-- 개인정보 수집·이용 동의 항목 (필수) -->
<div class="agreement-item">
<div class="agreement-item-content">
<label class="agreement-item-content-label">
<input class="checkbox-input" type="checkbox" name="agreement" value="agree"/> <!-- 개인정보 수집·이용 동의 체크박스 -->
<span>개인정보 수집∙이용 동의</span>
</label>
<span class="agreement-item-content-required">(필수)</span>
</div>
<a class="agreement-item-content-link" href="#">약관보기 ></a>
</div>
<!-- 마케팅 광고 활용 동의 항목 (선택) -->
<div class="agreement-item">
<div class="agreement-item-content">
<label class="agreement-item-content-label">
<input class="checkbox-input" type="checkbox" name="agreement" value="agree"/> <!-- 마케팅 광고 활용 동의 체크박스 -->
<span>마케팅 광고 활용을 위한 수집 및 이용 동의</span>
</label>
<span class="agreement-item-content-required">(선택)</span>
</div>
<a class="agreement-item-content-link" href="#">약관보기 ></a>
</div>
<!-- 혜택/정보 수신 동의 항목 (선택, SMS·이메일 하위 선택 포함) -->
<div id="agreement-item-additional"> <!-- 수신 동의 + 채널 선택 묶음 -->
<div class="agreement-item-content">
<label class="agreement-item-content-label">
<input class="checkbox-input" type="checkbox" name="agreement" value="agree"/> <!-- 혜택/정보 수신 동의 체크박스 -->
<span>무료배송, 할인쿠폰 등 혜택/정보 수신 동의</span>
</label>
<span class="agreement-item-content-required">(선택)</span>
</div>
<div id="agreement-item-additional-content"> <!-- 수신 채널 선택 영역 -->
<label class="additional-option-label"> <!-- SMS 수신 동의 레이블 -->
<input class="checkbox-input" type="checkbox" name="agreement" value="agree"/> <!-- SMS 수신 동의 체크박스 -->
<span>SMS</span>
</label>
<label class="additional-option-label"> <!-- 이메일 수신 동의 레이블 -->
<input class="checkbox-input" type="checkbox" name="agreement" value="agree"/> <!-- 이메일 수신 동의 체크박스 -->
<span>이메일</span>
</label>
</div>
</div>
<!-- 만 14세 이상 확인 항목 (필수) -->
<div class="agreement-item">
<div class="agreement-item-content">
<label class="agreement-item-content-label">
<input class="checkbox-input" type="checkbox" name="agreement" value="agree"/> <!-- 만 14세 이상 확인 체크박스 -->
<span>본인은 만 14세 이상입니다.</span>
</label>
<span class="agreement-item-content-required">(필수)</span>
</div>
</div>
</div>
</div>
<p class="field-error" id="signup-agreement-error" aria-live="polite"></p>
</div>
<div id="button-container"> <!-- 제출 버튼 컨테이너 -->
<!-- submit 형식의 button 사용하여 가입하기 버튼 추가 -->
<button type="submit" id="submit-button">가입하기</button> <!-- 폼 제출 (회원가입) 버튼 -->
</div>
</div>
</form>
<script src="js/signup.js"></script>
</body>
</html>