[최민경] Sprint10 #268

mxkxx1011 · 2024-07-19T15:34:42Z

요구사항

기본

상품 등록 페이지 주소는 “/addboard” 입니다.
게시판 이미지는 최대 한개 업로드가 가능합니다.
각 input의 placeholder 값을 정확히 입력해주세요.
이미지를 제외하고 input 에 모든 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.

주요 변경사항

스크린샷

멘토에게

하다가 궁금한 부분에 대해서 주석 달아놨습니다!
셀프 코드 리뷰를 통해 질문 이어가겠습니다.

반응형 css로 개수 변하게 함

lhc0506 · 2024-07-23T10:55:39Z

components/CommentForm.tsx

+};
+
+function CommentForm() {
+  const [isFilled, setIsFilled] = useState<boolean>(false);


Suggested change

const [isFilled, setIsFilled] = useState<boolean>(false);

const [isFilled, setIsFilled] = useState(false);

state의 타입이 원시타입이고 기본값이 들어간다면 타입은 생략이 가능합니다!
단, 이부분은 사람마다 취향이있는것같아요!

disabled처리를 위해서 isFilled를 구현해주셨어요!👍
그런데 꼭 state와 effect로 처리를 해야할까요?!

commentValue자체가 state라서 상태가 변하니

state나 effect 없이
const isFilled = commentValue.content.trim() !== '';
를해줘도 commentValue가 바뀔때마다 isFilled값은 바뀔 것 같아요!

lhc0506 · 2024-07-23T11:04:08Z

components/CommentForm.tsx

+    setCommentValue((prevValue) => ({
+      ...prevValue,
+      [name]: value,
+    }));


setState((prev) =>)를 사용하면 이전 값을 가지고서 잘 사용이 가능해요!
그래서 작성해주신 코드를 사용하면 객체를 override하게 되어 유용하게 사용된답니다.
그런데 지금은 속성도 하나 입력필드도 하나여서
setCommentValue({ content: e.target.value });
만으로도 가능할 것 같아요!

lhc0506 · 2024-07-23T11:19:47Z

components/Kebab.tsx

+      <Image
+        src='/images/ic_kebab.svg'
+        alt='kebab'
+        height={24}
+        width={24}
+        onClick={handleKebabToggle}
+      />


Suggested change

<Image

src='/images/ic_kebab.svg'

alt='kebab'

height={24}

width={24}

onClick={handleKebabToggle}

/>

<button onClick={handleKebabToggle}>

<Image

src='/images/ic_kebab.svg'

alt='메뉴 열기'

height={24}

width={24}

/>

</button>

이렇게 버튼요소 감싸 주는것이 접근성 측면에서 조금 좋습니다!

lhc0506 · 2024-07-23T11:21:58Z

components/Kebab.tsx

+import { useState } from 'react';
+import { Dropdown } from './Dropdown';
+
+function Kebab() {


케밥 컴포넌트를 따로 만들어서 안에서 드롭다운까지 잘 만들어주셨어요!

그런데 한가지 아쉬운점은 지금 현재 이컴포넌트는 '수정', '삭제' 만 가능한 케밥이에요. 만약 다른 선택지들이 와야한다면 복붙을 해서 따로 만들어줘야하죠!
이부분을 공통화를 한번 해보시는 것 을 추천드립니다!

또 여유가 되신다면 외부클릭시 닫히는 로직도 추가해보세요!

lhc0506 · 2024-07-23T11:24:02Z

components/board/Board.tsx

+import Kebab from '../Kebab';
+
+function Board({ article }: TArticle) {
+  const { id, title, content, image, writer, likeCount, createdAt, updatedAt } =


사용되지 않는 변수들이 있네요!

lhc0506 · 2024-07-23T11:53:12Z

pages/addboard.tsx

+  // 여기에서 <HTMLInputElement> 와 <HTMLTextAreaElement> 이 부분만 다른데 <T> 이런식으로 할 방법은 없을까요..?!!
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    handleChange(name, value);
+  };
+
+  const handleInputTextAreaChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    handleChange(name, value);
+  };


한다면

Suggested change

// 여기에서 <HTMLInputElement> 와 <HTMLTextAreaElement> 이 부분만 다른데 <T> 이런식으로 할 방법은 없을까요..?!!

const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {

const { name, value } = e.target;

handleChange(name, value);

};

const handleInputTextAreaChange = (e: ChangeEvent<HTMLTextAreaElement>) => {

const { name, value } = e.target;

handleChange(name, value);

};

const handleInputChange = <T extends HTMLInputElement | HTMLTextAreaElement>(

e: ChangeEvent<T>

) => {

const { name, value } = e.target;

handleChange(name, value);

};

이렇게도 가능할 것 같습니다!

혹은 event를 argument로 받지않고 name과 value를 받게하고 onChange에서 직접 익명함수로 호출할 수도 있겠구요!

생각해보니 굳이 제네릭을 사용하지않고 HTMLInputElement | HTMLTextAreaElement로만 끝내도 여기서는 무방하구요!

lhc0506 · 2024-07-23T11:54:03Z

pages/addboard.tsx

+
+  return (
+    <main className={styles.main}>
+      <form>


form을 만든 만큼 submit을 사용해보시면 어떨까요?!

lhc0506 · 2024-07-23T12:00:55Z

pages/boards.tsx

+export async function getStaticProps() {
+  const res = await axios.get(`/articles?page=1&pageSize=3&orderBy=like`);
+  const articles = res.data.list;
+
+  return {
+    props: {
+      articles,
+    },
+  };
+}


정적 데이터를 잘 불러와주셨어요!

여기서 생각을 해봐야할것이, getStaticProps는 어느시점의 데이터를 가져오는가 입니다. 이와 비교해서 getServerSideProps는 언제 가져올까요?

베스트게시글이 좋아요 순이라면 실시간으로 바뀌어야할것같은데, 지난주 베스트 게시글이라면 그럴 필요는 또 없는거죠!

때에 따라서 어떤것을 사용해야할지 잘 고민해보시면 좋을 것 같습니다!

추가적으로 api error 처리에 대해서도 고민해보시면 좋을 것같아요👍

lhc0506 · 2024-07-23T12:01:47Z

utils/checkJosa.tsx

재미있는 발상입니다👏

lhc0506 · 2024-07-23T12:04:32Z

utils/elapsedTime.tsx

util함수를 잘 만들어주셨어요.
그런데 매직넘버가 조금 아쉽네요.
상수화를 시켜주면 더 간결하고 유지보수하기 좋을 것같아요!

const SECONDS_IN_MINUTE = 60; const SECONDS_IN_HOUR = SECONDS_IN_MINUTE * 60; const SECONDS_IN_DAY = SECONDS_IN_HOUR * 24; const SECONDS_IN_WEEK = SECONDS_IN_DAY * 7; const SECONDS_IN_MONTH = SECONDS_IN_DAY * 30; const SECONDS_IN_YEAR = SECONDS_IN_DAY * 365;

mxkxx1011 added 4 commits July 19, 2024 18:01

style: 폰트 스타일 수정

fd20f5e

feat: input 컴포넌트 생성

02dac3c

feat: addboard 페이지 기능 구현

b1ddb31

feat: /board/id 라우팅

8237db6

mxkxx1011 changed the base branch from main to Next-최민경 July 19, 2024 15:34

feat: 버튼에 라우팅핸들러 추가

343b753

mxkxx1011 requested a review from lhc0506 July 19, 2024 15:35

mxkxx1011 added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 죄송합니다.. labels Jul 19, 2024

mxkxx1011 added 7 commits July 20, 2024 15:25

refactor: best 게시글 getStaticProps 방식으로 변경

9f1bd9f

반응형 css로 개수 변하게 함

feat: 게시글 컴포넌트 구현

4616cf0

feat: 댓글 form 컴포넌트 구현

e744a1e

feat: 댓글, 댓글리스트 컴포넌트 구현

e572c0d

feat: [id] 페이지 구현

17d26d3

feat: kebab 컴포넌트 추가

4da62e2

feat: 댓글 state 추가

6173358

mxkxx1011 removed the 미완성🫠 죄송합니다.. label Jul 21, 2024

lhc0506 reviewed Jul 23, 2024

View reviewed changes

mxkxx1011 added 2 commits July 23, 2024 23:17

chore: react-hook-form 라이브러리 설치

9b0f0ca

chore: svgr/webpack 설치

ac02574

lhc0506 merged commit 7a18b61 into codeit-bootcamp-frontend:Next-최민경 Jul 25, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[최민경] Sprint10 #268

[최민경] Sprint10 #268

mxkxx1011 commented Jul 19, 2024 •

edited

Loading

lhc0506 Jul 23, 2024

lhc0506 Jul 23, 2024

lhc0506 Jul 23, 2024

lhc0506 Jul 23, 2024

lhc0506 Jul 23, 2024

lhc0506 Jul 23, 2024

lhc0506 Jul 23, 2024

lhc0506 Jul 23, 2024

lhc0506 Jul 23, 2024

lhc0506 Jul 23, 2024

lhc0506 Jul 23, 2024

lhc0506 Jul 23, 2024

lhc0506 Jul 23, 2024

lhc0506 Jul 23, 2024

	const [isFilled, setIsFilled] = useState<boolean>(false);
	const [isFilled, setIsFilled] = useState(false);

[최민경] Sprint10 #268

[최민경] Sprint10 #268

Conversation

mxkxx1011 commented Jul 19, 2024 • edited Loading

요구사항

기본

주요 변경사항

스크린샷

멘토에게

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mxkxx1011 commented Jul 19, 2024 •

edited

Loading