+
+
+ 
+
+ ${this.calculateTimeDiff(
+ this.prop.date
+ )}
+
+ ${this.prop.description}
+ ${this.parseDate(this.prop.date)}
+
+ ${this.prop?.ownerName ?? "@코드잇"}
+${this.prop.email}
+
+
+ ${this.loginContent}
+ `;
+ }
+
+ render() {
+ const linkElem = document.createElement("link");
+ linkElem.setAttribute("rel", "stylesheet");
+ linkElem.setAttribute("href", "/components/gnb/gnt-component.css");
+ this.shadowRoot.appendChild(linkElem);
+
+ const gnbContainer = document.createElement("nav");
+ gnbContainer.classList.add("gnb-container");
+ this.gnbContainer = gnbContainer;
+
+ gnbContainer.innerHTML = this.template;
+ this.shadowRoot.appendChild(gnbContainer);
+ }
+}
+customElements.define("gnb-header", GnbComponent);
diff --git a/components/gnb/gnt-component.css b/components/gnb/gnt-component.css
new file mode 100644
index 0000000..6e52094
--- /dev/null
+++ b/components/gnb/gnt-component.css
@@ -0,0 +1,100 @@
+@import url("/static/css/global_style.css");
+
+nav {
+ background-color: var(--library-white-smoke);
+ justify-content: space-between;
+ display: flex;
+ max-width: 192rem;
+ margin: 0 auto;
+}
+
+main {
+ height: auto;
+ overflow: hidden;
+}
+
+nav {
+ align-items: center;
+ height: 9.4rem;
+ padding: 0 20rem;
+}
+
+nav .logo {
+ width: 13.3rem;
+ height: 2.4rem;
+}
+
+nav .login {
+ width: 12.8rem;
+ height: 5.3rem;
+ color: #f5f5f5;
+ background: linear-gradient(
+ 90.99deg,
+ var(--linkbrary-primary) 0.12%,
+ #6ae3fe 101.84%
+ );
+ border: 0;
+ border-radius: 0.8rem;
+ padding: 1.6rem 2rem;
+ font-weight: 600;
+ font-size: 1.8rem;
+}
+
+nav .profile-icon {
+ width: 2.8rem;
+ height: 2.8rem;
+ margin-right: 1rem;
+}
+
+.user-profile {
+ display: flex;
+ align-items: center;
+}
+
+.user-email {
+ display: inline-block;
+ vertical-align: middle;
+ margin: 0;
+ color: var(--library-dark-slate-gray);
+ font-size: 1.4rem;
+ line-height: 1.7rem;
+}
+@media screen and (max-width: 1199px) {
+ nav {
+ padding: 0;
+ gap: 53.8rem;
+ justify-content: center;
+ }
+}
+
+@media screen and (max-width: 863px) {
+ nav {
+ padding: 0 3.2rem;
+ gap: 0;
+ justify-content: space-between;
+ }
+}
+
+@media screen and (max-width: 767px) {
+ nav {
+ gap: 0;
+ justify-content: space-between;
+ }
+
+ nav .login {
+ width: 8rem;
+ height: 3.7rem;
+ padding: 1rem 1.6rem;
+ font-size: 1.4rem;
+ }
+ nav .add-link {
+ width: 20rem;
+ height: 3.7rem;
+ padding: 1rem 1.6rem;
+ font-size: 1.4rem;
+ }
+
+ .user-email {
+ display: none;
+ }
+}
diff --git a/components/searchBar/search-bar-component.css b/components/searchBar/search-bar-component.css
new file mode 100644
index 0000000..433c45f
--- /dev/null
+++ b/components/searchBar/search-bar-component.css
@@ -0,0 +1,30 @@
+@import url("/static/css/global_style.css");
+
+.search-wrap {
+ position: relative;
+}
+
+.search-bar-input {
+ max-width: 106rem;
+ width: 100%;
+ height: 5.4rem;
+ padding: 1.5rem 0rem 1.5rem 4.2rem;
+ margin: 4rem auto;
+ background: #f5f5f5;
+ border: none;
+ border-radius: 1rem;
+ outline: none;
+}
+
+.search-lens-icon {
+ position: absolute;
+ top: 50%;
+ transform: translate(0%, -50%);
+ left: 1.6rem;
+}
+
+@media screen and (max-width: 767px) {
+ .search-bar-input {
+ margin: 20px auto;
+ }
+}
diff --git a/components/searchBar/searchBarComponent.js b/components/searchBar/searchBarComponent.js
new file mode 100644
index 0000000..1fbfdc1
--- /dev/null
+++ b/components/searchBar/searchBarComponent.js
@@ -0,0 +1,57 @@
+class SearchBarComponent extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({ mode: "open" });
+ }
+
+ connectedCallback() {
+ this.render();
+ }
+
+ createLinkElem() {
+ const linkElem = document.createElement("link");
+ linkElem.setAttribute("rel", "stylesheet");
+ linkElem.setAttribute(
+ "href",
+ "/components/searchBar/search-bar-component.css"
+ );
+ return linkElem;
+ }
+
+ createSearchBarContainer() {
+ const searchBarContainer = document.createElement("div");
+ searchBarContainer.classList.add("search-wrap");
+ const logoImage = this.createLogoImage();
+ const searchBarInput = this.createSearchBarInput();
+
+ searchBarContainer.appendChild(logoImage);
+ searchBarContainer.appendChild(searchBarInput);
+
+ return searchBarContainer;
+ }
+
+ createLogoImage() {
+ const logoImage = document.createElement("img");
+ logoImage.classList.add("search-lens-icon");
+ logoImage.alt = "search-lens-icon";
+ logoImage.src = "/static/imgs/search-bar-lens-icon.svg";
+ return logoImage;
+ }
+
+ createSearchBarInput() {
+ const searchBarInput = document.createElement("input");
+ searchBarInput.classList.add("search-bar-input");
+ searchBarInput.placeholder = "원하는 링크를 검색해 보세요";
+ return searchBarInput;
+ }
+
+ render() {
+ const linkElem = this.createLinkElem();
+ const searchBarContainer = this.createSearchBarContainer();
+
+ this.shadowRoot.appendChild(linkElem);
+ this.shadowRoot.appendChild(searchBarContainer);
+ }
+}
+
+customElements.define("search-bar", SearchBarComponent);
diff --git a/components/star/starComponent.js b/components/star/starComponent.js
new file mode 100644
index 0000000..57517fe
--- /dev/null
+++ b/components/star/starComponent.js
@@ -0,0 +1,88 @@
+export class StarComponent extends HTMLElement {
+ #prop;
+ constructor() {
+ super();
+ this.attachShadow({ mode: "open" });
+ }
+
+ static get observedAttributes() {
+ return ["is_starred"];
+ }
+
+ connectedCallback() {
+ this.render();
+ }
+
+ attributeChangedCallback(name, oldValue, newValue) {
+ if (name === "is_starred" && oldValue !== newValue) {
+ this.prop = newValue === "true";
+ this.renderStarIcon();
+ }
+ }
+
+ get prop() {
+ return this.#prop;
+ }
+
+ set prop(newProp) {
+ //추후 즐겨찾기(=starred 여부)에 대한 데이터 주고받기 할 경우 추가
+ if (typeof newProp !== "boolean") {
+ console.warn("옳바르지 않은 형식의 데이터가 들어왔습니다.");
+ return;
+ }
+ this.#prop = newProp;
+ this.setAttribute("is_starred", this.prop);
+ }
+
+ renderStarIcon() {
+ const pathColor = this.shadowRoot.querySelector("path");
+ const fillOpacity = this.prop ? "1" : "0.2";
+ const fillColor = this.prop
+ ? "var(--linkbrary-primary)"
+ : "var(--linkbrary-black)";
+
+ pathColor.setAttribute("fill", fillColor);
+ pathColor.setAttribute("fill-opacity", fillOpacity);
+ }
+
+ get template() {
+ return `
+
+ `;
+ }
+
+ toggleStarredStatus(event) {
+ event.stopPropagation();
+ this.prop = !this.prop;
+ this.setAttribute("is_starred", this.prop);
+ }
+
+ render() {
+ // CSS
+ const linkElem = document.createElement("link");
+ linkElem.setAttribute("rel", "stylesheet");
+ linkElem.setAttribute("href", "/static/css/global_style.css");
+ this.shadowRoot.appendChild(linkElem);
+
+ const starIcon = document.createElement("template");
+ starIcon.innerHTML = this.template;
+ this.shadowRoot.appendChild(starIcon.content.cloneNode(true));
+
+ this.setAttribute("is_starred", this.prop);
+ this.addEventListener("click", this.toggleStarredStatus.bind(this));
+ }
+}
+customElements.define("star-icon", StarComponent);
diff --git a/forgot-password/index.html b/forgot-password/index.html
index b138f08..873120b 100644
--- a/forgot-password/index.html
+++ b/forgot-password/index.html
@@ -1,15 +1,11 @@
-
-
-
-
-
-