forked from Moonhokyun/Frontro_Project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathyour_profile.html
177 lines (163 loc) · 7.92 KB
/
your_profile.html
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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>은희네문방구</title>
<link rel="stylesheet" href="./style/reset.css">
<link rel="stylesheet" href="./style/your_profile.css">
<link rel="shortcut icon" href="./src/favicon.ico">
</head>
<body>
<!-- 페이지 설명: 홈 화면에 표시되는 게시물을 클릭했을때 나오는 페이지 -->
<main>
<h1 class="ir">
<!--
필요한 JS 처리:
필요한 html 요소(이름) fetch를 이용해서 받아온 데이터를 추가해서 넣어주기
-->
<span>oo</span>님의 프로필 페이지 입니다.
</h1>
<!-- 모듈화될 수 있는 부분: header 자체. 뒤로가기 버튼, 햄버거 버튼도 별도로 가능 -->
<header class="top-bar">
<!-- 뒤로가기 버튼 -->
<button type="button" class="button-noneBackground button-back"><img src="./src/png/icon-arrow-left.png"
alt="뒤로가기 버튼"></button>
<!-- 햄버거 버튼 -->
<button type="button" class="button-noneBackground button-more"><img src="./src/png/icon-more-vertical.png"
alt="더보기 버튼"></button>
</header>
<!-- profile-info -->
<article class="cont_profile">
<!--
필요한 JS 처리:
- 필요한 html 요소(이름) fetch를 이용해서 받아온 데이터를 추가해서 넣어주기
-->
<h2 class="ir"><span>oo</span>님의 프로필 정보</h2>
<!--
여기도 js로 처리해야할까? js로 받아와야할 것들이 뭐가 있을까?
필요한 JS 처리:
- 이미지 등록여부를 통해서 기본 이미지를 보여줄 지 안보여줄 지 처리 필요
- 팔로워, 팔로잉 숫자도 JS로 받아와야 함
-->
<div class="header_profile">
<!-- followers & followings -->
<p class="followings_profile">
<span class="number_followings">0</span>followings
</p>
<p class="followers_profile">
<span class="number_followers">0</span>followers
</p>
<!-- <p class="profile_followers">
<span class="followers_number">128</span>followers
</p> -->
<img src="./src/svg/basic-profile-img.svg" alt="" onerror="this.src='/src/png/Ellipse 6.png';">
</div>
<p class="name_profile"></p>
<p class="account_profile"></p>
<p class="explain_profile"></p>
<div class="footer_profile">
<!--
필요한 JS 처리:
- 필요한 html 요소(alt값 채워주기: 00님과 채팅 시작하기, 00님의 프로필 공유하기) fetch를 이용해서 받아온 데이터를 추가해서 넣어주기
- 클릭에 따라서 버튼 이미지 변경
-->
<button type="button" class="button-noneBackground button-message">
<img src="./src/png/icon-message-circle.png" alt="">
</button>
<!-- 경서님 것으로 대체 -->
<button type="button" class="S-button Sbutton-font">팔로우</button>
<button type="button" class="button-noneBackground button-share">
<img src="./src/png/icon-share.png" alt="">
</button>
</div>
</article>
<!-- on-sale-->
<article class="cont_on-sale">
<div class="item-wrapper_on-sale">
<h2 class="tit_on-sale">판매 중인 상품</h2>
<!--
필요한 JS 처리:
필요한 html 요소 fetch를 이용해서 받아온 데이터를 추가해서 넣어주기
-->
<ul class="ul_on-sale"></ul>
</div>
</article>
<!-- content-->
<article class="cont_contents">
<h2 class="ir">게시물 정보</h2>
<div class="cont_view-style">
<!-- 리스트형 콘텐츠 보여주기 -->
<button type="button" class="button-noneBackground on"><img src="./src/png/icon-post-list-on.png"
alt=""></button>
<!-- 사진형 콘텐츠 보여주기 -->
<button type="button" class="button-noneBackground off"><img src="./src/png/icon-post-album-off.png"
alt=""></button>
</div>
<article class="cont_user-contents">
<h3 class="ir">게시물 상세정보</h3>
<ul class="ul_user-contents"></ul>
<ul class="ul-picture_user-contents"></ul>
</article>
</article>
<!-- 모듈화될 수 있는 부분: 화면 공통 네비게이션 -->
<!-- 경서님 코드 -->
<footer class="footer">
<ul class="icon-item-list">
<li class="item-footer"><img src="./src/svg/icon-home-fill.svg">홈</li>
<li class="item-footer"><img src="./src/svg/icon-message-circle.svg">채팅</li>
<li class="item-footer third"><img src="./src/svg/icon-edit.svg" class="icon-add">게시물 작성</li>
<li class="item-footer"><img src="./src/svg/icon-user.svg">프로필</li>
</ul>
</footer>
<!-- p tag는 가상요소로 처리 -->
<!-- <nav class="tap-menu">
<button class="tap-menu-home">
<img src="/src/svg/icon-home-fill.svg" alt="홈으로 가기" class="home-icon">
</button>
<button class="tap-menu-chat">
<img src="/src/svg/icon-message-circle.svg" alt="채팅으로 가기" class="chat-icon">
</button>
<button class="tap-menu-upload">
<img src="/src/svg/icon-edit.svg" alt="게시물 작성하기" class="upload-icon">
</button>
<button class="tap-menu-user">
<img src="/src/svg/icon-user.svg" alt="프로필로 가기" class="user-icon">
</button>
</nav> -->
<!-- 업 모달창 -->
<div class="background_up-modal">
</div>
<div class="up-modal">
<!-- 가상요소로 작은 이미지('ㅡ') 표현 -->
<ul class="cont_modal-item">
<li class="item-modal">설정 및 개인정보</li>
<li class="item-modal">로그아웃</li>
</ul>
</div>
</div>
<div class="up-modal content">
<!-- 가상요소로 작은 이미지('ㅡ') 표현 -->
<ul class="cont_modal-item">
<li class="item-modal">신고하기</li>
</ul>
</div>
<!-- 팝업 모달창 -->
<div class="background_popup-modal">
</div>
<div class="popup-modal">
<p class="notice_popup">로그아웃</p>
<button class="cancel-button_popup">취소</button><button class="action-button_popup">로그아웃</button>
</div>
</div>
<div class="popup-modal content">
<p class="notice_popup">게시글을 신고하시겠어요?</p>
<button class="cancel-button_popup">취소</button><button class="action-button_popup">신고</button>
</div>
</main>
<!-- html을 다 로딩하고 렌더링 할 경우 defer를 사용-->
<!-- defer를 사용했을 때 생길 수 있는 이슈 https://velog.io/@yeonnex/Uncaught-TypeError-Cannot-read-property-addEventListener-of-null -->
<script defer src="./js/your_profile.js"></script>
</body>
</html>