BDA Reading - Frontend

실행 경로 : npm start로 실행됨.

Book Review 브랜치(윤지) - 0210

변경 사항

1. BookReview / Story 폴더 안에 'Pages'폴더, 'Story'폴더, 'Post' 폴더 만듦
   

2. BookReview.js
   📌 역할:
   ① 모든 컴포넌트를 관리하는 페이지
   ② StorySection과 PostSection을 관리하며, localStorage를 통해 데이터 저장 및 불러오기
   ③ 책 스토리(StorySection)와 독서기록장(PostSection)으로 구성
   📌 기능:
   ① 책 스토리는 **책에 대한 간단한 생각(짧은 리뷰)**을 공유
   ② 독서기록장은 책을 읽고 느낀 점을 길고 자세하게 기록할 수 있음
   ③ localStorage를 활용하여 페이지 새로고침 후에도 데이터 유지
   ④ 삭제 기능을 지원하여 개별 항목 제거 가능
   

3. Story 폴더(BookReview / Story / Story): 책에 대한 짧은 생각을 공유하는 공간
   

   ① StoryItem.js
   - 개별 책 스토리 항목을 표시하는 컴포넌트
   - 책 제목 + 짧은 리뷰 + 삭제 버튼 포함
   ② StorySection.js
   - 사용자가 책 제목 + 짧은 리뷰를 입력할 수 있는 입력창 제공
   - 입력 후 "공유" 버튼을 클릭하면 localStorage에 저장
   - 스토리 목록을 불러와 화면에 표시
   - 삭제 버튼을 눌러 개별 스토리를 삭제 가능
   

4. Post 폴더(BookReview / Story / Post): 책을 읽고 긴 리뷰를 작성하는 공간
   ① PostItem.js
   - 개별 독서 기록 항목을 카드 뉴스 형태로 표시하는 컴포넌트
   - 긴 글은 앞부분만 보이고 "더 보기" 버튼 클릭 시 전체 내용 표시
   - 삭제 버튼 포함
   ② PostSection.js
   - 사용자가 "독서 기록 추가" 버튼을 클릭하면 /write 페이지로 이동 - 저장된 독서 기록을 PostItem을 이용하여 카드 형태로 표시 - 삭제 버튼을 눌러 개별 독서 기록을 삭제 가능

5. Pages 폴더(BookReview / Story / Pages): 독서 기록 추가 페이지
   ① WritePost.js
   - 독서 기록을 새롭게 추가하는 페이지
   - 책 제목 + 긴 리뷰 입력 후 "저장" 버튼 클릭 시, localStorage에 저장 후 /BookReview로 이동
   

현재 폴더 구조

BookReviewApp
│── src
│ ├── BookReview - Story # 메인 폴더
│ │ ├── story # 책 스토리 관련 컴포넌트
│ │ │ ├── StorySection.js
│ │ │ ├── StorySection.css
│ │ ├── post # 독서 기록 관련 컴포넌트
│ │ │ ├── PostSection.js
│ │ │ ├── PostSection.css
│ │ │ ├── PostItem.js
│ │ ├── Pages # 페이지별 컴포넌트
│ │ │ ├── WritePost.js
│ │ ├── BookReview.js # 전체 관리하는 메인 컴포넌트
│ │ ├── BookReview.css
│ ├── App.js # 라우팅을 관리하는 파일
│ ├── index.js # 리액트 엔트리 파일
│── public
│── package.json
│── README.md

이제 해야하는 것

1. 스토리에 책 제목끼리 자동으로 묶기
2. 전반적 css 좀 더 깔끔하게 구현
3. 더보기 눌렀을때 아예 새창에서 독서기록장 깔끔하게 뜨도록(예쁘게) 구현

Book Review 브랜치(윤지) - 0218

변경사항

1. BookReview 페이지
   

• 짧은 생각 공유 글자수 제한(20자 못넘어가도록)
  
• 책 제목이나 생각 입력 안했을때 alert뜨도록
  

2. 로그인 화면 구현
   

• 로그인 성공했을때 홈화면으로 감
  
• 로그인 성공했을때 브라우저가 로그인이라는 것을 감지해서 저장할까요? 팝업 띄우도록
  

Book Review 브랜치(윤지) - 0304

###변경사항

1. BookReview 페이지
   

• css 수정(delete 버튼 위치 수정, story-section과 post-section 사이 공간 수정하며 css 수정)