[DEV] 메인 페이지 구현 #12
[DEV] 메인 페이지 구현 #12
Conversation
submit 버튼을 누르면 자동으로 리렌더링 되도록 수정
안전성 유지를 위해 useState에 Emotion, Weather type을 명시하도록 수정
ye-one222
requested review from
yugenius0213,
chae1xxlos,
gomx3,
heejung0 and
katie424
as code owners
| const emotions: Emotion[] = ['bad', 'soso', 'good', 'great', 'awesome'] | ||
| const weathers: Weather[] = ['sunny', 'cloud', 'rain', 'snow'] | ||
|
|
||
| export const DIARYKEY = 'diary-storage' |
There was a problem hiding this comment.
이런 것은 constants 폴더에 따로 관리해주면 좋을 것 같아요!
| } | ||
|
|
||
| const DiaryStorage = () => { | ||
| const storedData: Diary[] = JSON.parse(localStorage.getItem(DIARYKEY)!) || [] |
There was a problem hiding this comment.
localSotrage를 사용해서 일기를 저장하고 불러오는 것도 좋지만, 구현되어 있는 useContext hook을 사용해서 전역으로 관리해보는 것도 추천드립니다~
| const [contents, setContents] = useState('') | ||
| const [selectedEmotion, setSelectedEmotion] = useState<Emotion | undefined>() | ||
| const [selectedWeather, setSelectedWeather] = useState<Weather | undefined>() | ||
| const [isValid, setValid] = useState(false) |
There was a problem hiding this comment.
변수 작명을 정말 깔끔하고 가독성있게 잘 하시는 것 같아요
정말 부럽습니다 ..
| setSelectedEmotion(emotion as Emotion) | ||
| } | ||
| const handleWeatherClick = (weather: string) => { | ||
| setSelectedWeather(weather as Weather) |
There was a problem hiding this comment.
type관리 너무 좋아요.. 이것까지 챙기다니.. 배워갑니다
| diary: Diary | ||
| } | ||
|
|
||
| export const DiaryCard: React.FC<DiaryProps> = ({ diary }) => { |
There was a problem hiding this comment.
카드만 따로 잘 분리하신 것 같아요 👍👍
| } | ||
|
|
||
| return ( | ||
| <Link to={`detail/${diary.id}`} key={diary.id}> |
There was a problem hiding this comment.
Link태그에 key값을 두신 이유가 궁금해요
| awesome: '😎', | ||
| } | ||
| return <span>{icons[emotion]}</span> | ||
| } |
There was a problem hiding this comment.
컴포넌트로도 만들 수가 있군요!
이모티콘들을 상수 폴더에 저장해서 그냥 EmotionIcon[diary.emotion]으로 접근하는 것도 좋을 것 같은 의견입니다!
|
|
||
| .blue-btn { | ||
| @apply p-1 rounded-lg text-sm border border-transparent bg-blue-100 text-blue-600 hover:border-blue-600 | ||
| } |
| }, [title, contents, selectedEmotion, selectedWeather]) | ||
|
|
||
| return ( | ||
| <form id="write-form" className="flex-col gap-4 p-4 rounded-lg bg-white border border-gray-100 h-2/3"> |
There was a problem hiding this comment.
<form>태그를 쓰는 게 좋겠군요! 참고하겠습니다
|
|
||
| .blue-btn { | ||
| @apply p-1 rounded-lg text-sm border border-transparent bg-blue-100 text-blue-600 hover:border-blue-600 | ||
| } |
| import { createContext, useContext, useState } from 'react' | ||
| import { Diary } from '../interface/diary' | ||
|
|
||
| const DiaryValueContext = createContext<Diary[] | undefined>(undefined) |
There was a problem hiding this comment.
DiaryValueContext와 DiaryUpdateContext로 데이터를 읽고 업데이트하는 역할을 분리해서 사용하신 덕분에 더 직관적이고 확장 가능한 구조를 만든 것 같습니다!
상태 관리 라이브러리를 사용하지 않고도 전역 상태를 관리할 수 있는 좋은 방법인거 같습니다😄
| import DiaryEmotionPage from '../app/emotions/[emotion]/page' | ||
|
|
||
| export type DiaryRouterPath = '/' | `/detail/${string}` | '/emotions' | `/emotions/${string}` | ||
| const diaryRouter = createBrowserRouter([ |
There was a problem hiding this comment.
리액트 라우터를 이용해 라우팅을 구성하고, 각 경로에 맞는 컴포넌트를 매핑한 부분도 정말 배울 점이 많았습니다!
Summary
메인 페이지 구현을 완료하였습니다.
Description
코드 리뷰는 무엇이든지 언제나 환영입니다!!😊