프로그래머스 고양이 사진 검색 사이트

gyim1345-cat/a.css

@@ -0,0 +1,123 @@
+@font-face {
+  font-family: "Goyang";
+  src: url("fonts/Goyang.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body * {
+  font-family: Goyang;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+#App {
+  margin: 1.5em auto;
+  max-width: 1200px;
+  column-gap: 1.5em;
+}
+
+.SearchResult {
+  margin-top: 10px;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(250px, 1fr));
+  grid-gap: 10px;
+}
+
+.SearchResult img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.SearchResult .item {
+  background-color: #eee;
+  display: inline-block;
+  margin: 0 0 1em;
+  width: 100%;
+}
+
+.SearchInput {
+  width: 100%;
+  font-size: 40px;
+  padding: 10px 15px;
+}
+
+.ImageInfo {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  -moz-transition: opacity 0.7s linear;
+  -o-transition: opacity 0.7s linear;
+  -webkit-transition: opacity 0.7s linear;
+  transition: opacity 0.7s linear;
+}
+
+.fadein {
+  -webkit-animation: fadein 0.7s linear forwards;
+  animation: fadein 0.7s linear forwards;
+}
+
+@-webkit-keyframes fadein {
+0% { opacity: 0; }
+100%  { opacity: 1; }
+}
+
+@keyframes fadein {
+0% { opacity: 0; }
+100%  { opacity: 1; }
+}
+
+.fader.fadedOut {
+  opacity: 0;
+}
+
+
+.ImageInfo .title {
+  display: flex;
+  justify-content: space-between;
+}
+
+.ImageInfo .title,
+.ImageInfo .description {
+  padding: 5px;
+}
+
+.ImageInfo .content-wrapper {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  border: 1px solid #eee;
+  border-radius: 5px;
+}
+
+.ImageInfo .content-wrapper img {
+  width: 100%;
+}
+
+@media screen and (max-width: 768px) {
+.content-wrapper {
+    width: 100%
+  }
+}
+/* dark mode 처리
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000;
+    color: white;
+  }
+}
+*?

gyim1345-cat/a.md

@@ -0,0 +1,39 @@
+## HTML, CSS 관련
+- [ ] 현재 HTML 코드가 전체적으로 \<div\> 로만 이루어져 있습니다. 이 마크업을 시맨틱한 방법으로 변경해야 합니다.
+- [ ] 유저가 사용하는 디바이스의 가로 길이에 따라 검색결과의 row 당 column 갯수를 적절히 변경해주어야 합니다.
+  - 992px 이하: 3개
+  - 768px 이하: 2개
+  - 576px 이하: 1개
+- [ ] 다크 모드(Dark mode)를 지원하도록 CSS를 수정해야 합니다.
+  - CSS 파일 내의 다크 모드 관련 주석을 제거한 뒤 구현합니다.
+  - 모든 글자 색상은 #FFFFFF , 배경 색상은 #000000 로 한정합니다.
+  - 기본적으로는 OS의 다크모드의 활성화 여부를 기반으로 동작하게 하되, 유저가 테마를 토글링 할 수 있도록 좌측 상단에 해당 기능을 토글하는 체크박스를 만듭니다.
+## 이미지 상세 보기 모달 관련
+- [x] 디바이스 가로 길이가 768px 이하인 경우, 모달의 가로 길이를 디바이스 가로 길이만큼 늘려야 합니다.
+- [x] `필수` 이미지를 검색한 후 결과로 주어진 이미지를 클릭하면 모달이 뜨는데, 모달 영역 밖을 누르거나 / 키보드의 ESC 키를 누르거나 / 모달 우측의 닫기(x) 버튼을 누르면 닫히도록 수정해야 합니다.
+- [x] 모달에서 고양이의 성격, 태생 정보를 렌더링합니다. 해당 정보는 /cats/:id 를 통해 불러와야 합니다.
+- [x] `추가` 모달 열고 닫기에 fade in/out을 적용해 주세요.
+## 검색 페이지 관련
+- [x] 페이지 진입 시 포커스가 input 에 가도록 처리하고, 키워드를 입력한 상태에서 input 을 클릭할 시에는 기존에 입력되어 있던 키워드가 삭제되도록 만들어야 합니다.
+- [x] `필수` 데이터를 불러오는 중일 때, 현재 데이터를 불러오는 중임을 유저에게 알리는 UI를 추가해야 합니다.
+- [x] `필수` 검색 결과가 없는 경우, 유저가 불편함을 느끼지 않도록 UI적인 적절한 처리가 필요합니다.
+- [ ] 최근 검색한 키워드를 SearchInput 아래에 표시되도록 만들고, 해당 영역에 표시된 특정 키워드를 누르면 그 키워드로 검색이 일어나도록 만듭니다. 단, 가장 최근에 검색한 5개의 키워드만 노출되도록 합니다.
+- [ ] 페이지를 새로고침해도 마지막 검색 결과 화면이 유지되도록 처리합니다.
+- [x] `필수` SearchInput 옆에 버튼을 하나 배치하고, 이 버튼을 클릭할 시 /api/cats/random50 을 호출하여 화면에 뿌리는 기능을 추가합니다. 버튼의 이름은 마음대로 정합니다.
+- [ ] lazy load 개념을 이용하여, 이미지가 화면에 보여야 할 시점에 load 되도록 처리해야 합니다.
+- [x] `추가` 검색 결과 각 아이템에 마우스 오버시 고양이 이름을 노출합니다.
+## 스크롤 페이징 구현
+- [ ] 검색 결과 화면에서 유저가 브라우저 스크롤 바를 끝까지 이동시켰을 경우, 그 다음 페이지를 로딩하도록 만들어야 합니다.
+- [ ] 랜덤 고양이 배너 섹션 추가
+  - 현재 검색 결과 목록 위에 배너 형태의 랜덤 고양이 섹션을 추가합니다.
+  - 앱이 구동될 때 `/api/cats/random50` api를 요청하여 받는 결과를 별도의 섹션에 노출합니다.
+  - 검색 결과가 많더라도 화면에 5개만 노출하며 각 이미지는 좌, 우 슬라이드 이동 버튼을 갖습니다.
+  - 좌, 우 버튼을 클릭하면, 현재 노출된 이미지는 사라지고 이전 또는 다음 이미지를 보여줍니다.(트렌지션은 선택)
+## 코드 구조 관련
+- [ ] ES6 module 형태로 코드를 변경합니다.
+  - webpack , parcel 과 같은 번들러를 사용하지 말아주세요.
+  - 해당 코드 실행을 위해서는 http-server 모듈을(로컬 서버를 띄우는 다른 모듈도 사용 가능) 통해 index.html 을 띄워야 합니다.
+- [] API fetch 코드를 async , await 문을 이용하여 수정해주세요. 해당 코드들은 에러가 났을 경우를 대비해서 적절히 처리가 되어있어야 합니다.
+- [] `필수` API 의 status code 에 따라 에러 메시지를 분리하여 작성해야 합니다.
+- [ ] SearchResult 에 각 아이템을 클릭하는 이벤트를 Event Delegation 기법을 이용해 수정해주세요.
+- [ ] 컴포넌트 내부의 함수들이나 Util 함수들을 작게 잘 나누어주세요.

gyim1345-cat/api.js

@@ -0,0 +1,37 @@
+const API_ENDPOINT =
+  "https://oivhcpn8r9.execute-api.ap-northeast-2.amazonaws.com/dev";
+
+const api = {
+  fetchCats: async (keyword) => {
+    try {
+      const result = await fetch(`${API_ENDPOINT}/api/cats/search?q=${keyword}`);
+      return result.json();
+    } catch (e) {
+      console.log(e);
+      alert(e);
+
+    }
+  },
+
+  fetchRandom: async() => {
+    try {
+      const result = await fetch(`${API_ENDPOINT}/api/cats/random50`)
+      return result.json();
+    } catch (e) {
+      console.log(e);
+      alert(e);
+    }
+  },
+
+  getInfo: async(id) => {
+    try {
+      console.log(id, "id")
+      const result = await fetch(`${API_ENDPOINT}/api/cats/${id}`)
+      console.log("result id info", result);
+      return result.json();
+    } catch (e) {
+      console.log(e);
+      alert(e);
+    }
+  }
+};

gyim1345-cat/app.js

@@ -0,0 +1,76 @@
+class App {
+  $target = null;
+  data = [];
+
+  constructor($target) {
+    this.$target = $target;
+
+    this.searchInput = new SearchInput({
+      $target,
+      onSearch: keyword => {
+        api.fetchCats(keyword).then(({ data }) => {
+          this.renderOutputs(data);
+        });
+      },
+
+      onRandom: keyword => {
+        api.fetchRandom(keyword).then(({ data }) => {
+          this.renderOutputs(data);
+        });
+      }
+
+    });
+
+    this.searchResult = new SearchResult({
+      $target,
+      initialData: this.data,
+      onClick: image => {
+        api.getInfo(image.id).then(({ data }) => {
+          this.imageInfo.setState({
+            visible: true,
+            image: {...image, ...data},
+          });
+        })
+      }
+    });
+
+    this.imageInfo = new ImageInfo({
+      $target,
+      data: {
+        visible: false,
+        image: null
+      }
+    });
+  }
+
+
+  renderOutputs(data) {
+    this.data = [];
+    this.removeLoad();
+    this.setState(data)
+    if(!data[0]){
+      this.addEmpty();
+    }
+  }
+
+  removeLoad() {
+    const load = document.getElementById("loading");
+    if(load) {
+      load.remove();
+    }
+  }
+
+  addEmpty() {
+    const node = document.createElement("div");
+    node.setAttribute("id", "empty");
+    const textnode = document.createTextNode("empty");
+    node.appendChild(textnode);
+    const app = document.getElementById("App").appendChild(node);
+  }
+
+  setState(nextData) {
+    console.log(this);
+    this.data = nextData;
+    this.searchResult.setState(nextData);
+  }
+}

gyim1345-cat/imageInfo.js

@@ -0,0 +1,90 @@
+class ImageInfo {
+  $imageInfo = null;
+  data = null;
+
+  constructor({ $target, data, getInfo }) {
+    const $imageInfo = document.createElement("div");
+    $imageInfo.className = "ImageInfo";
+    this.$imageInfo = $imageInfo;
+    $target.appendChild($imageInfo);
+    const overlay = document.createElement("section");
+    this.data = data;
+
+    this.render();
+  }
+
+  closeModal(event) {
+    event.stopPropagation();
+
+    event.target.parentNode.parentNode.parentNode.classList.add("fader");
+    event.target.parentNode.parentNode.parentNode.classList.add("fadedOut");
+
+    setTimeout(() => {
+      event.target.parentNode.parentNode.parentNode.style.display = 'none'
+      event.target.parentNode.parentNode.parentNode.classList.remove("fadedOut");
+    }, (500));
+  }
+
+  close(event) {
+    event.stopPropagation();
+
+    event.target.classList.add("fader");
+    event.target.classList.add("fadedOut");
+
+    setTimeout(() => {
+      event.target.style.display = 'none'
+      event.target.classList.remove("fadedOut");
+
+    }, (500));
+  }
+
+  closea(event) {
+    event.stopPropagation();
+  }
+
+  addEvent() {
+    const close = this.$imageInfo.getElementsByClassName('close')[0];
+    const ImageInfo = document.getElementsByClassName('ImageInfo')[0];
+    const contentWrapper = document.getElementsByClassName('content-wrapper')[0];
+
+    close.addEventListener("click", this.closeModal);
+    ImageInfo.addEventListener("click", this.close);
+    contentWrapper.addEventListener("click", this.closea);
+
+    setTimeout(() => {
+      this.$imageInfo.classList.remove("fadein");
+      this.$imageInfo.classList.remove("fader");
+    }, (500));
+  }
+
+  setState(nextData) {
+    this.data = nextData;
+    this.render();
+    this.addEvent();
+  }
+
+
+  render() {
+    if (this.data.visible) {
+      const { name, url, temperament, origin } = this.data.image;
+      this.$imageInfo.innerHTML = `
+      <div class="content-wrapper">
+          <div class="title">
+          <span>${name}</span>
+          <div class="close"">x</div>
+          </div>
+          <img src="${url}" alt="${name}"/>        
+          <div class="description">
+          <div>성격: ${temperament}</div>
+          <div>태생: ${origin}</div>
+          </div>
+          </div>`;
+
+          this.$imageInfo.style.display = "block";
+        } else {
+          this.$imageInfo.style.display = "none";
+        }
+        this.$imageInfo.classList.add("fadein");
+
+  }
+}