๊ธฐ๋ถ์ํ๋ฅผ ํ์ํ ์ ์๋ ๊ฐ๋จํ ์ผ๊ธฐ
๐ [๋ฐ๋ก๊ฐ๊ธฐ]https://emotion-diary-project.netlify.app/
๊ทธ ์ธ ์ถ๊ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
- "use-local-storage-state": "17",
src
โฃ assets // svg ์ ์ฅ
โฃ hooks
โฃ routes // ํ์ด์ง๋ค
โฃ util // modal ํ์ด์ง
โฃ styles // ์ ์ญ style
routes
โฃ DiaryEditor
โ โฃ diaryEditor.module.scss
โ โ index.tsx
โฃ DiaryList
โ โฃ DiaryItem
โ โ โฃ ItemDetail
โ โ โ โฃ index.tsx
โ โ โ โ itemDetail.module.scss
โ โ โฃ diaryItem.module.scss
โ โ โ index.tsx
โ โฃ diaryList.module.scss
โ โ index.tsx
โฃ _shared
โ โฃ Footer.tsx
โ โ footer.module.scss
โฃ index.tsx
โ routes.module.scss
์์ฑ | ์ญ์ | ์์ |
---|---|---|
๋ค์ด์ด๋ฆฌ ๋ฆฌ์คํธ์ ์ฌ๋ผ๊ฐ ๋ด์ฉ๋ค์ ์ ๋ ๊ณณ์ ๋๋ค. ์ ๋ชฉ, ์ผ๊ธฐ ๋ด์ฉ, ๊ธฐ๋ถ, ์์ฑ ์๊ฐ์ ํฌํจํฉ๋๋ค. ์์ฑ์๋ ์ ๋ด์ฉ์ ์์ฑํ๊ณ ๋ ๋ค์ ๋ฒํผ์ ํด๋ฆญํ๋ฉด, ๋ฐ์ดํฐ๊ฐ ๋ก์ปฌ์คํ ๋ฆฌ์ง์ ์ ์ฅ๋ฉ๋๋ค. ์์ฑ์์ ์ผ๊ธฐ ๋ด์ฉ์ ๋น ๋ด์ฉ์ผ๋ก ์์ฑํ ์ ์๊ฒ ํ์ต๋๋ค. ์ผ๊ธฐ ๋ด์ฉ์ 200์ ์ด๋ด๋ก ์์ฑํ ์ ์๊ฒ ์ง์ ํ์์ต๋๋ค.
๋ค์ด์ด๋ฆฌ ๋ฆฌ์คํธ๋ ๋ค์ด์ด๋ฆฌ ์๋ํฐ์์ ์ ์ฅ๋ ๋ฐ์ดํฐ๋ฅผ ๋ก์ปฌ์คํ ๋ฆฌ์ง์์ ๊ฐ์ ธ์ ๋ค์ด์ด๋ฆฌ ์์ดํ ์ผ๋ก ์ ๋ฌํด์ค๋๋ค.
๋ค์ด์ด๋ฆฌ ์์ดํ ์ ๋ค์ด์ด๋ฆฌ ๋ฆฌ์คํธ์์ ๋์ด์จ ์ ๋ณด๋ฅผ ๋ฐ์ ํ ์ผ๊ธฐ์ ๋ด์ฉ์ ๋ณด์ฌ์ฃผ๋ ์ปดํฌ๋ํธ์ ๋๋ค. Link ํ๊ทธ๋ฅผ ์ด์ฉํ์ฌ ๋ค์ด์ด๋ฆฌ ์์ธํ์ด์ง๋ก ๋์ด๊ฐ ์ ์๋๋ก ํ์์ต๋๋ค.
๋ค์ด์ด๋ฆฌ ์์ดํ ๋ค์ ํด๋ฆญํ๋ฉด ์ผ๊ธฐ ๋ด์ฉ์ ์์ธํ๊ฒ ๋ณผ ์ ์๋ ํ์ด์ง๋ก ์ด๋์ด ๋ฉ๋๋ค. ๋ค์ด์ด๋ฆฌ ์์ธํ์ด์ง์๋ ์ญ์ /์์ ๊ธฐ๋ฅ์ด ์์ต๋๋ค. ์ญ์ ๋ฒํผ์ ํด๋ฆญํ์์ ๊ฒฝ์ฐ, ๋ชจ๋ฌ์ ์ด์ฉํด์ ์ญ์ ๋ฅผ ํ ๊ฒ์ธ์ง ํ๋ฒ ๋ ํ์ธํ๋๋ก ํ์์ต๋๋ค. ์์ ๋ฒํผ์ ํด๋ฆญํ์์ ๊ฒฝ์ฐ textareaํ๊ทธ๋ก ๋ค์ ๋์ฒด๊ฐ ๋๊ณ , textarea ํ๊ทธ ์์๋ ์ด์ ์ ์ผ๋ ์ผ๊ธฐ ๋ด์ฉ์ด ๋ณด์ด๋๋ก ํ์์ต๋๋ค. ์์ ์ ์๋ฃํ๋ฉด ์์ ๋ ๋ด์ฉ์ด ํ๋ฉด์ ๋ณด์ฌ์ง๋๋ก ํ์์ต๋๋ค.
- id ๋๋ฒ๋ง
- ๋ก์ปฌ์คํ ๋ฆฌ์ง์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๊ณ ๋ค์ ๊บผ๋ด์ค๋ ๋ฐฉ์์ผ๋ก ๊ตฌํํ์๋๋ฐ, ์์๋ก ๋ง๋ id๊ฐ ์๋ก๊ณ ์นจ ๋์ ๋ ๋ค์ 0 ๋ถํฐ ์์ํ๋ ๊ฒฝ์ฐ๊ฐ ์์ด ์ญ์ ๋ฒํผ์ ํด๋ฆญํ์ ๋ targetId์ id๊ฐ ๋ง์ง์์ ์ญ์ ๊ฐ ๋์ง ์๋ ์ค๋ฅ๊ฐ ์์์ต๋๋ค. ์ด์ id๋ฅผ ์ง์ ํ๋ ๋ฐฉ์์ ์ผํญ์ฐ์ฐ์๋ก ๊ตฌํํ์๊ณ , ์๋ก๊ณ ์นจ์ ํ๊ณ ๋ ๋ค์์๋ ์์ด๋๊ฐ ๋ง์ง๋ง์ ์๋ ๊ฐ์ฅ ํฐ id + 1์ธ ๋ก์ง์ ๋ฐ๋ผ๊ฐ๊ฒ ๋์์ต๋๋ค.
- ์์ ๊ธฐ๋ฅ ๊ตฌํ
- ํด๋น ์์ธํ์ด์ง์ data๋ฅผ ๋ก์ปฌ์คํ ๋ฆฌ์ง์์ ๋ฐ๋ก ๋ฐ์ ๊ตฌ์กฐ ๋ถํด ํ ๋น์ผ๋ก ๊ฐ๊ฐ์ value๋ฅผ ํ ๋น ํ๋๋ฐ, ๋๊ธฐ์ ์ผ๋ก ์ฒ๋ฆฌ๊ฐ ๋์ง ์์, useLayoutEffect๋ฅผ ์ด์ฉํ์์ต๋๋ค.
- ๋ฆฌํํ ๋ง ๊พธ์คํ ์งํ
- ๊ธฐ๋ถ ํต๊ณ ๋ง๋ค๊ธฐ
- ๋ฐ์ํ ์ถ๊ฐํ๊ธฐ