Skip to content

Commit

Permalink
Header.js solve conflict (#83)
Browse files Browse the repository at this point in the history
  • Loading branch information
HSjjs98 authored Jul 8, 2024
1 parent 24c3e49 commit 2ee7727
Showing 1 changed file with 18 additions and 9 deletions.
27 changes: 18 additions & 9 deletions src/components/Header/Header.js
Original file line number Diff line number Diff line change
@@ -1,30 +1,37 @@
import { logout } from '../API/AuthService.js';
import Avatar from '../Avatar/Avatar.js';
import Button from '../Button/Button.js';
import Container from '../Container.js';
import { storeInstance } from '../Store.js';
import './Header.css';

export default class Header extends Container {
constructor() {
super('.header-container');
// this.profileImage = user && user.profileImage;
// this.userName = user && user.name;
this.store = storeInstance;
this.Button = new Button({
variant: 'tertiary',
content: '로그아웃',
size: 'small',
});
}

async renderAvatar() {
if (!this.user) {
this.user = await this.store.getUser();
this.Avatar = new Avatar({
url: this.user.profileImage,
});
}

const $avatarContainer = document.querySelector('header .avatar-container');
$avatarContainer.innerHTML = this.Avatar.html();
}

render() {
this.$container.innerHTML = `
<div class="wrapper">
<div class="header-profile">
<img
class="header-profile-image"
src="${this.profileImage || 'https://api.dicebear.com/9.x/lorelei/svg?seed=Max&eyes=variant09'}"
alt="${this.userName || '김직원'}"
/>
</div>
<div class="avatar-container"></div>
<div class ='logout-btn-wrapper'>
${this.Button.html()}
</div>
@@ -33,5 +40,7 @@ export default class Header extends Container {
document
.querySelector('.logout-btn-wrapper button')
.addEventListener('click', logout);

this.renderAvatar();
}
}

0 comments on commit 2ee7727

Please sign in to comment.