오늘도 프로젝트 진행을 하면서 하루를 보냈다.
거의 마지막 작업 중이라 많은 코드를 작성하지 않았지만, 디테일한 부분 수정 및 추가를 하였다.
하지만 바닐라 js 코딩이라 구현하는데 상당히 오랜 시간이 걸렸다.
내가 구현한 기능은 내가 작성한 게시글들 만 마이페이지에서 보이게 하는 기능을 구현하였다.
간단한 기능인 거 같지만 코드가 상당히 길고 복잡해서 생각보다 고생하면서 작업하였다.
그중에서 도 아랫부분이 복잡해서 오래 걸렸지만 팀원의 도움으로 해결할 수 있었다.
window.onload = async function getIndex_API(){
let User_payload = JSON.parse(localStorage.getItem('payload'))
if (User_payload === undefined || User_payload === null){
location.href=`${frontEndBaseUrl}/users/login.html`;
} else {
// 잔체 게시글 조회
feed_list = await getIndexFeedList()
//회원정보 상세 조회
profile_list = await getUserDetailInfo()
// 나의 게시글 출력 반복문 부분
my_feed_wrap = document.getElementsByClassName('myfeed_list_box')[0];
feed_list.forEach(feed =>{
//태그 출력 반복문
tag_list = [];
feed.tags.forEach(tag => {
tag = `#${tag}`
tag_list.push(tag)
})
if(tag_list.length == 0){
tag_list = []
} else if(tag_list.length == 1){
tag_list = tag_list
} else if(tag_list.length == 2){
tag_list = `${tag_list[0]} ${tag_list[1]}`
} else if(tag_list.length == 3){
tag_list = `${tag_list[0]} ${tag_list[1]} ${tag_list[2]}`
} else if(tag_list.length == 4){
tag_list = `${tag_list[0]} ${tag_list[1]} ${tag_list[2]} ${tag_list[3]}`
} else {
tag_list = `${tag_list[0]} ${tag_list[1]} ${tag_list[2]} ${tag_list[3]} ${tag_list[4]}`
}
if(feed.user_id == User_payload.user_id)
my_feed_wrap.innerHTML+=`<div class="sub_feed_box vertical_alignment">
<div class="sub_feed_image_box">
<img class="feed_image" src="${backEndBaseUrl}${feed.image}" onclick="location.href='${frontEndBaseUrl}/communities/detail.html?id=${feed.pk}'"/>
</div>
<div class="sub_feed_info_box">
<div class="info_top_section horizontal_alignment">
<div class="sub_nickname" onclick="location.href='/products/closet/?user_id=${feed.user_id}'">${feed.user}</div>
<div class="sub_like">${feed.like_count}</div>
</div>
<div class="info_middle_section">
<div class="sub_content">${feed.content}</div>
</div>
<div class="info_bottom_section horizontal_alignment">
<div class="sub_tags">${tag_list}</div>
<div class="sub_created_at">${timeForToday(feed.updated_at)}</div>
</div>
</div>
</div>
`
})
'TIL(Daily) > ETC' 카테고리의 다른 글
Thu/22/Dec/22- 최종 프로젝트 16 (0) | 2022.12.23 |
---|---|
Wed/21/Dec/22- 최종 프로젝트 15 (0) | 2022.12.21 |
Mon/19/Dec/22- 최종 프로젝트 13 (0) | 2022.12.19 |
Wed/15/Dec/22 -최종프로젝트-10 (0) | 2022.12.14 |
Tue/13/Dec/22 -최종프로젝트-9 (0) | 2022.12.14 |
댓글