샵라이브 과제 - 사진첩 기능 구현📓

React, JavaScript, CSS

📒 프로젝트 개요

과제 설명

샵라이브 과제

모든 문제를 완벽하게 풀지 못하셔도 됩니다.
최대한 비슷하게 구현하도록 노력하되, 할 수 있는데까지 하시면 됩니다.
상황에 따라 다른 해결책을 제안해 주셔도 됩니다.

문제 1.

주어진 데이터를 이용하여, 반응형 웹을 구성하세요

반응형 break point는 -
1. Desktop (1025px ~)
2. Tablet (480px ~ 1024px)
3. Mobile ( ~ 480px)

데스크탑 (1024px ~ ) 사이즈에서는 아래 스크린샷과 같은 형태로 보이면 됩니다.

Tablet (480px ~ 1024px) 사이즈에서는 아래 스크린샷과 같은 형태로 보이면 됩니다.

Mobile (~ 480px) 사이즈에서는 아래 스크린샷과 같은 형태로 보이면 됩니다.

문제 2.

아이템 - '추가' 기능을 구현합니다.

주어진 인풋에 title, likeCount, imageUrl 을 입력한 후 '추가'버튼을 클릭하면, 아이템이 추가되면 됩니다.
아이템을 새로 생성할 때, "id" 와 "createdAt"은, 추가되는 시점의 TIMESTAMP 값을 자동으로 지정합니다.

문제 3.

아이템 - '제거' 기능을 구현합니다.

각 아이템마다 표시되는 '제거'버튼을 클릭하면, 해당 아이템을 제거하시면 됩니다.

문제 4.

데이터를 LocalStorage 에 저장하여, 항상 최신상태를 유지합니다.

페이지를 새로고침하여도 데이터는 유지되야 합니다.

문제 5.

아이템 - '수정' 기능을 구현합니다.

각 아이템마다 표시되는 '수정'버튼을 클릭하면, 해당 아이템을 수정할 수 있는 기능을 구현하세요.

수정하는 UI/UX 는 자유롭게 구성하시면 됩니다

아이템을 수정하는 중에 '취소' 와 '저장' 기능을 제공하면 좋겠습니다.

문제 6.

검색기능을 구현하세요.

주어진 검색 input 에 검색어를 입력하고 '검색' 버튼을 클릭하면, 제목에 해당 키워드를 포함한 아이템만 목록에 표시합니다.

검색을 취소하고 전체목록을 표시하도록 돌아가는 기능도 구현해 주세요.

Bonus 문제 7.

검색결과를 더 멋지게 표현해 봅시다.

검색결과 화면에서 '검색어'가 입력된 부분만 스타일을 변경하여 Highlight 되도록 해봅시다.

ex - '두산' 이라고 검색어를 입력했을 때,

"동해물과 백두산이 마르고 닳도록..."

⏳ 개발 기간

2022/09/22 ~ 2022/09/29

📷 프로젝트 시연

github-page 보러가기

sample data

  1)
  title:
  시간의 바깥
  서로를 닮아 기울어진 삶
  소원을 담아 차오르는 달 하려다 만
  괄호 속의 말 이제야 음 음 음

  likeCount: 6789

  imageUrl: https://velog.velcdn.com/images/syoungee/post/219b2cf0-fac7-4a42-91ef-6c468202b169/image.JPG

  2)
  title:
  너랑 나
  눈 깜박하면 어른이 될 거에요
  날 알아보겠죠 그댄 기억하겠죠
  그래 기묘했던 아이(아이)
  손 틈새로 비치는 네 모습(아!이!유!) 참 좋다

  likeCount: 29345

  imageUrl: https://velog.velcdn.com/images/syoungee/post/efed142c-9657-4e18-b538-10c21451d6dd/image.JPG

  3)
  title:
  Eight
  우리는 오렌지 태양 아래
  그림자 없이 함께 춤을 춰
  정해진 이별 따위는 없어
  아름다웠던 그 기억에서 만나 Forever young

  likeCount: 1004

  imageUrl: https://velog.velcdn.com/images/syoungee/post/1a42d86e-97c0-4298-b493-93d7bcee8f86/image.JPG

default.mp4

mobile.MP4

🔑 구현 기능

✔️ 7가지 기능 구현 완료

1. 반응형 웹 구성 (1025px~, 480px~1024px, ~480px)
2. 아이템 추가 기능 구현(id와 createdAt은 TIMESTAMP값으로 자동 지정)
3. 아이템 제거 기능 구현
4. 아이템 데이터 LocalStorage저장(새로 고침 시 데이터 유지)
5. 아이템 수정 기능 구현(수정 페이지 자유롭게 구현, 취소, 저장 기능 제공)
6. 검색 기능 구현
7. 검색 기능 구현 - Highlight 기능 추가

syoungee/shoplive-frontend-task-1