5. 카테고리, 작성 날짜

카테고리 별로 일기 표시, 작성한 날짜와 시간을 표시

※select, option 태그로 카테고리를 분류 (미분류, 일상, 공부, 여행, 게임)

※일기 작성 시 입력 칸 비어있고, 카테고리가 지정되어있지(미분류) 않을 시 경고문 출력

※각 일기마다 name(value)를 지정해서 카테고리를 분류

※일기를 작성한 날짜를 표시

※각 카테고리 버튼을 클릭 시 각 카테고리에 속한 일기만 보여줌

 

component

  -Input.JSX

  -Button.JSX

  -Textarea.JSX

  -DiaryWrite.JSX

  -DiaryBlock.JSX

  -Category.JSX

  -CategoryButton.JSX

module

  -Diary.JSX

css

  -Diary.css

  -Category.css

 

component - <Category.JSX> : select, option 태그로 카테고리를 분류

import React from 'react'

function Category({value, onChange}) {
  return (
    <div>
      <select className="categorySelect" value={value} onChange={onChange}>
        <option value="none">--------</option>
        <option value="routine">일상</option>
        <option value="study">공부</option>
        <option value="travel">여행</option>
        <option value="game">게임</option>
      </select>
    </div>
  )
}

export default Category

카테고리를 5가지(미분류, 일상, 공부, 여행, 게임)로 분류

 

component - <DiaryWrite.JSX> : 입력 칸 여부 확인, 각 일기마다 name(value) 지정

import React, {useState} from 'react'
import '../css/Diary.css'
import Input from './Input'
import Textarea from './Textarea'
import Button from './Button'
import Category from './Category'

function DiaryWrite({addDiary, categoryValue, changeCategory}) {
  const [diaryInput, setDiaryInput] = useState({
    title: '',
    content: ''
  })

  const changeInput = event => {
    setDiaryInput({
      ...diaryInput,
      [event.target.name]: event.target.value
    })
  }

  const submitDiary = event => {
    event.preventDefault()
    if ( //입력이 되어있지 안흘 경우 경고문 표시
      diaryInput.title === (null || undefined || '') ||
      diaryInput.content === (null || undefined || '')
    ) {
      alert('제대로 입력해주세요.')
    } else {
      addDiary(diaryInput.title, diaryInput.content)
      setDiaryInput({
        title: '',
        content: ''
      })
    }
  }

  return (
    <div className="writeDiv">
      <h1 className="writeMain">Today Diary</h1>
      <form>
        <div> //일기 작성 시 각각 name(value)을 지정해 줌
          <label>카테고리</label>
          <Category value={categoryValue} onChange={changeCategory} />
        </div>
        <div className="writeTitleDiv">
          <label>제목</label>
          <Input
            className={'writeTitleInput'}
            type={'text'}
            name={'title'}
            value={diaryInput.title}
            onChange={changeInput}
          />
        </div>
        <div className="writeContentDiv">
          <label>내용</label>
          <Textarea
            className={'writeContentTextarea'}
            name={'content'}
            value={diaryInput.content}
            onChange={changeInput}
          />
        </div>
        <Button
          className={'submitButton'}
          type={'submit'}
          name={'저장'}
          onClick={submitDiary}
        />
      </form>
    </div>
  )
}

export default DiaryWrite

각 일기마다 name 값을 지정

 

component - <DiaryBlock.JSX> : 작성 날짜 props 지정

import React, {useState} from 'react'
import '../css/Diary.css'
import Button from './Button'
import Textarea from './Textarea'

function DiaryBlock({title, content, id, name, date, deleteDiary, editDiary}) {
  const [editBool, setEditBool] = useState(true)
  const [editValue, setEditValue] = useState(content)

  const changeEditValue = event => {
    setEditValue(event.target.value)
  }

  const handleDelete = () => {
    deleteDiary(id)
  }

  const handleEdit = () => {
    if (editBool === true) {
      setEditBool(false)
    } else {
      setEditBool(true)
      editDiary(id, editValue)
    }
  }

  return (
    <div className="blockDiv" key={id} name={name}>
      <div className="blockTitleDiv">
        <h3 className="blockTitle">{title}</h3>
        <Button className={'deleteButton'} onClick={handleDelete} name={'삭제'} />
        <Button
          className={'editButton'}
          onClick={handleEdit}
          name={editBool ? '수정' : '적용'}
        />
      </div>
      <div className="blockDateDiv">
        <p>{date}</p> //작성 날짜 props 지정
      </div>
      <p>
        ---------------------------------------------------------------------------------------------
      </p>
      {editBool ? (
        <p>{content}</p>
      ) : (
        <Textarea
          className={'writeContentTextarea'}
          value={editValue}
          onChange={changeEditValue}
        />
      )}
    </div>
  )
}

export default DiaryBlock

작성한 연도, 월, 일, 시간 표시

 

component - <CategoryButton.JSX> : 각 카테고리 버튼을 클릭 시 각 카테고리에 속한 일기만 보여줌

import React from 'react'
import '../css/Category.css'
import Button from '../component/Button'

function CategoryButton({
  allDivDiaryBtn,
  routineDivDiaryBtn,
  studyDivDiaryBtn,
  travelDivDiaryBtn,
  gameDivDiaryBtn
}) {
  return (
    <div className="categoryButtonDiv">
      <Button className="categoryButton" name={'전체'} onClick={allDivDiaryBtn} />
      <Button className="categoryButton" name={'일상'} onClick={routineDivDiaryBtn} />
      <Button className="categoryButton" name={'공부'} onClick={studyDivDiaryBtn} />
      <Button className="categoryButton" name={'여행'} onClick={travelDivDiaryBtn} />
      <Button className="categoryButton" name={'게임'} onClick={gameDivDiaryBtn} />
    </div>
  )
}

export default CategoryButton

카테고리 분류 버튼

 

module - <Diary.JSX>

import React, {useEffect, useRef, useState} from 'react'
import DiaryWrite from '../component/DiaryWrite'
import DiaryBlock from '../component/DiaryBlock'
import CategoryButton from '../component/CatogoryButton'

function Diary() {
  const [diary, setDiary] = useState(JSON.parse(localStorage.getItem('Diary')) || [])
  const [categoryDiary, setCategoryDiary] = useState(diary) //각 카테고리 별로 보여줄 일기 목록
  const [categoryValue, setCategoryValue] = useState('none') //카테고리 종류 기본값을 미분류로 지정

  const diaryKey = useRef(parseInt(localStorage.getItem('DiaryKey')) || 0)

  const changeCategoryValue = event => { //select 카테고리 값 지정
    setCategoryValue(event.target.value)
  }

  const addDiary = (title, content) => {
    if (categoryValue === 'none') { //카테고리를 지정하지 않았을 시 경고창 출력
      alert('카테고리를 지정해주세요.')
    } else {
      const newDiary = {
        title,
        content,
        name: categoryValue,
        id: diaryKey.current,
        date: new Date().toLocaleString() //일기 작성 날짜
      }
      diaryKey.current += 1
      setDiary([newDiary, ...diary])
      setCategoryValue('none')
    }
  }

  const deleteDiary = id => {
    const remainDiary = diary.filter(remove => remove.id !== id)
    setDiary(remainDiary)
  }

  const editDiary = (id, editContent) => {
    setDiary(diary.map(edit => (edit.id === id ? {...edit, content: editContent} : edit)))
  }

  const allDivDiaryBtn = () => { //일기 전체 보여줌
    setCategoryDiary(diary)
  }

  const routineDivDiaryBtn = () => { //일상 카테고리 일기만 보여줌
    const routineDiary = diary.filter(divide => divide.name === 'routine')
    setCategoryDiary(routineDiary)
  }

  const studyDivDiaryBtn = () => { //공부 카테고리 일기만 보여줌
    const studyDiary = diary.filter(divide => divide.name === 'study')
    setCategoryDiary(studyDiary)
  }

  const travelDivDiaryBtn = () => { //여행 카테고리 일기만 보여줌
    const travelDiary = diary.filter(divide => divide.name === 'travel')
    setCategoryDiary(travelDiary)
  }

  const gameDivDiaryBtn = () => { //게임 카테고리 일기만 보여줌
    const gameDiary = diary.filter(divide => divide.name === 'game')
    setCategoryDiary(gameDiary)
  }

  useEffect(() => {
    localStorage.setItem('Diary', JSON.stringify(diary))
    localStorage.setItem('DiaryKey', parseInt(diaryKey.current))
    setCategoryDiary(diary) //분류된 카테고리를 새로고침 없이 즉시 보여줌
  }, [diary])

  return (
    <div>
      <div>
        <DiaryWrite
          addDiary={addDiary}
          categoryValue={categoryValue}
          changeCategory={changeCategoryValue}
        />
      </div>
      <div>
        <CategoryButton
          allDivDiaryBtn={allDivDiaryBtn}
          routineDivDiaryBtn={routineDivDiaryBtn}
          studyDivDiaryBtn={studyDivDiaryBtn}
          travelDivDiaryBtn={travelDivDiaryBtn}
          gameDivDiaryBtn={gameDivDiaryBtn}
        />
        {categoryDiary.map(diaryData => {
          return (
            <DiaryBlock
              key={diaryData.id}
              name={diaryData.name}
              date={diaryData.date}
              {...diaryData}
              deleteDiary={deleteDiary}
              editDiary={editDiary}
            />
          )
        })}
      </div>
    </div>
  )
}

export default Diary

 

일기 작성 시 입력 칸 비어있고, 카테고리가 지정되어있지(미분류) 않을 시 경고문 출력

 

각 카테고리 버튼을 클릭 시 각 카테고리에 속한 일기만 보여줌

 

Category.css

.categorySelect {
  width: 400px;
  height: 30px;
}

.categoryButtonDiv {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.categoryButton {
  margin-top: 10px;
  margin-right: 20px;
  padding: 5px 15px 5px 15px;
  background-color: white;
}