디스커션 제출 페이지 구현 (issue #432) #475

chosim-dvlpr · 2024-09-15T10:38:23Z

구현 요약

디스커션 제출 페이지를 구현했습니다.

hashTagButton에 variant를 추가했습니다. 기본값은 primary, 기타 타입은 danger가 있어요.
HashTagList 컴포넌트가 자주 쓰이는 것 같아 공통 컴포넌트로 분리했습니다. 이 공통 컴포넌트는 미션과 해시태그를 선택하는 데 사용하게 되는데, HashTag라는 네이밍은 범용적이지 않아 Tag로 바꾸었습니다.
미션 리스트와 풀이 리스트에서 TagList (HashTagList) 컴포넌트를 사용하고 있는데, 공통 컴포넌트로 분리하는 과정에서 selectedHashTag의 타입 변화가 있었습니다.
- selectedHashTag가 원래는 string이었지만, id와 name을 키값으로 갖는 객체로 바꾸었습니다.
- id를 갖는 객체로 바꾼 이유는, TagList 컴포넌트 내부에서 isSelected를 판별할 때 name이 아닌 id값으로 isSelected를 판별하기 위함입니다. string 비교보다는 id 비교가 좀 더 정확할 것 같아요!

연관 이슈

close 디스커션 작성 페이지 구현 #432

참고

코드 리뷰에 RCA 룰을 적용할 시 참고해주세요.

헤더	설명
R (Request Changes)	적극적으로 반영을 고려해주세요
C (Comment)	웬만하면 반영해주세요
A (Approve)	반영해도 좋고, 넘어가도 좋습니다. 사소한 의견입니다.

…tion 삼항연산값 변경

- Hash 네이밍 제거 - 외부에서 tags 타입 주입받도록 변경 - 다중 선택 가능한 TagMultipleList 추가

- variant 추가 - TagMultipleList 경로를 components/common 으로 이동

- string 타입에서 객체 타입으로 변경 - TagList 컴포넌트의 클릭이벤트 수정 - 디스커션 제출 페이지 태그 디자인 수정

Parkhanyoung

전반적으로 잘 짜주신 것 같아 몇가지 사소한 코멘트만 남겨보았습니다 ㅎㅎ 반영하실 부분만 선택적으로 반영하고 다시 요청주시면 머지해드릴게요!

Parkhanyoung · 2024-09-19T06:18:09Z

frontend/src/apis/discussionAPI.ts

+import { PATH } from './paths';
+
+export const getDiscussions = async (mission = 'all', hashTag = 'all'): Promise<Discussion[]> => {
+  const { data } = await develupAPIClient.get<{ data: Discussion[] }>(`${PATH.discussions}`, {


Suggested change

const { data } = await develupAPIClient.get<{ data: Discussion[] }>(`${PATH.discussions}`, {

const { data } = await develupAPIClient.get<{ data: Discussion[] }>(PATH.discussions, {

Parkhanyoung · 2024-09-19T06:18:21Z

frontend/src/apis/discussionAPI.ts

+  hashTagIds: number[];
+}): Promise<Discussion> => {
+  const { data } = await develupAPIClient.post<{ data: Discussion }>(
+    `${PATH.submitDiscussion}`,


Suggested change

`${PATH.submitDiscussion}`,

PATH.submitDiscussion,

Parkhanyoung · 2024-09-19T06:18:46Z

frontend/src/components/DiscussionSubmit/DiscussionTitle.tsx

+        width="xlarge"
+        danger={danger}
+        dangerMessage={ERROR_MESSAGE.invalid_title}
+        placeholder={'글 제목을 입력해주세요'}


Suggested change

placeholder={'글 제목을 입력해주세요'}

placeholder='글 제목을 입력해주세요'

Parkhanyoung · 2024-09-19T06:20:16Z

frontend/src/components/DiscussionSubmit/index.tsx

+  const { data: allHashTags } = useHashTags();
+  const { data: allMissions } = useMissions();
+  const [selectedHashTags, setSelectedHashTags] = useState<HashTag[]>([]);
+  const [selectedMissions, setSelectedMissions] = useState({ id: 0, title: '' });


초기값으로 { id: 0, title: ''}을 넣어주신 의도가 궁금합니다~!

이름에 s가 붙어있는데 복수 형태가 아닌 것 같습니다! 혹시 다른 의도가 있으실까요?

오 확인해주셔서 감사해요!! 초깃값으로 id: 0을 넣은 이유는 미션 번호가 1부터 시작되어 0이라는 값이 없기도 하고, id값이 1 이상인 경우만 optional하게 post api의 payload로 서버에 전송할 수 있도록 하기 위함입니다!

라이언이 구두로 말씀해주셨던 것처럼 선택된 값이 없을 때 null로 할당되는 것이 더 적합할 것 같아 커밋에 추가했습니다~!

Parkhanyoung · 2024-09-19T06:24:59Z

frontend/src/hooks/useSubmitDiscussionMutation.ts

+    queryFn: postDiscussionSubmit,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['all'] }); // TODO: all, 필터링까지 캐시 무효화 잘 되는지 확인 필요 @프룬
+      navigate(`${ROUTES.discussions}`);


Suggested change

navigate(`${ROUTES.discussions}`);

navigate(ROUTES.discussions);

Parkhanyoung · 2024-09-19T06:25:12Z

frontend/src/index.tsx

@@ -189,6 +190,16 @@ const routes = [
      </App>
    ),
  },
+  {
+    path: `${ROUTES.submitDiscussion}`,


Suggested change

path: `${ROUTES.submitDiscussion}`,

path: ROUTES.submitDiscussion,

Parkhanyoung · 2024-09-19T06:36:20Z

frontend/src/components/common/TagList/index.tsx

+            key={tag.id}
+            isSelected={isSelected}
+            onClick={() =>
+              setSelectedTag(isSelected ? ({ id: 0, [keyName]: HASHTAGS.all } as T) : tag)


{ id: 0, [keyName]: HASHTAGS.all } <--요 객체가 어떤 의미인지 여기 코드만 보고는 이해가 잘 되지 않을 수 있을 것 같아요! 전체 선택하는 방법을 { id: 0, [keyName]: HASHTAGS.all }로 설정하는 방식이 아닌 다른 방식(ex. 비어있을 때는 전체 선택으로 간주)으로 바꿔도 좋을 것 같아요! 혹은 props로 setSelectedTag 대신 toggleSelectedTag와 같은 함수를 받아도 좋을 것 같아요 ㅎㅎ

1안

Suggested change

setSelectedTag(isSelected ? ({ id: 0, [keyName]: HASHTAGS.all } as T) : tag)

setSelectedTag(isSelected ? null : tag)

2안

Suggested change

setSelectedTag(isSelected ? ({ id: 0, [keyName]: HASHTAGS.all } as T) : tag)

toggleSelectedTag();

Parkhanyoung · 2024-09-19T06:37:32Z

frontend/src/types/index.ts

+  title: string;
+  mission: string;
+  hashTags: HashTag[];
+  member: Omit<UserInfo, 'description'>;


역시 프룬 디테일하시군요 ㅎㅎ 짱입니다 👍🏻👍🏻

Parkhanyoung · 2024-09-19T06:39:55Z

frontend/src/components/common/TagButton/TagButton.styled.ts

+  $variant: TagButtonVariant;
+}
+
+const getColorStyles = (variant: TagButtonVariant, isSelected: boolean, theme: DefaultTheme) => {


와 ~ 복잡한 로직인데 너무 깔끔하게 잘 짜주셨네요 👍🏻

into feat/#432

chosim-dvlpr added 🎨 프론트엔드 프론트엔드 관련 이슈 ⚒️ 기능 작업해야하는 기능 labels Sep 15, 2024

chosim-dvlpr requested a review from Parkhanyoung September 15, 2024 10:38

chosim-dvlpr self-assigned this Sep 15, 2024

chosim-dvlpr force-pushed the feat/#432 branch 2 times, most recently from bb7d78a to 11b9fca Compare September 19, 2024 05:03

chosim-dvlpr added 10 commits September 19, 2024 14:04

feat: DiscussionSubmitPage 경로 추가 및 페이지 생성

1bdc293

refactor: useDescription의 description 타입을 string으로 수정, isValidDescrip…

e0192d2

…tion 삼항연산값 변경

feat: discussion 제출 API 추가

4d59e9b

feat: useSubmitDiscussionMutation 추가

f703064

feat: useDiscussionTitle 추가

b1bc026

feat: useSubmitDiscussion 추가

e9d45f5

feat: Discussion Submit 페이지 구현

13b5661

refactor: HashTagList, HashTagButton 리팩터링 및 MultipleSelect List 추가

5f3617b

- Hash 네이밍 제거 - 외부에서 tags 타입 주입받도록 변경 - 다중 선택 가능한 TagMultipleList 추가

refactor: TagButton 색상 variant 추가

b01fa8c

- variant 추가 - TagMultipleList 경로를 components/common 으로 이동

fix: 미션리스트, 풀이리스트 selectedHashTag 타입 수정

c46cbec

- string 타입에서 객체 타입으로 변경 - TagList 컴포넌트의 클릭이벤트 수정 - 디스커션 제출 페이지 태그 디자인 수정

chosim-dvlpr force-pushed the feat/#432 branch from 11b9fca to c46cbec Compare September 19, 2024 05:05

chosim-dvlpr temporarily deployed to dev September 19, 2024 05:05 — with GitHub Actions Inactive

chosim-dvlpr temporarily deployed to dev September 19, 2024 05:06 — with GitHub Actions Inactive

Parkhanyoung approved these changes Sep 19, 2024

View reviewed changes

Parkhanyoung mentioned this pull request Sep 19, 2024

디스커션 댓글 기능 구현 (issue #418) #478

Merged

2 tasks

chosim-dvlpr added 5 commits September 19, 2024 15:55

refactor: getDiscussion api path, discussionTitle의 Input 컴포넌트 입력 방식 수정

0cd6d18

fix: 디스커션 제출 시 전송되는 데이터 missionId값을 optional로 지정

9c84fbf

refactor: selectedMissions 변수명을 단수로 변경

d616919

refactor: route string 표현 방식 수정

ba1e7f7

refactor: TagList에서 사용되는 selectedTag 기본값에 null 타입 추가

99dc21e

chosim-dvlpr temporarily deployed to dev September 19, 2024 07:52 — with GitHub Actions Inactive

chosim-dvlpr temporarily deployed to dev September 19, 2024 07:53 — with GitHub Actions Inactive

Merge branch 'dev' of https://github.com/woowacourse-teams/2024-devel-up

658267d

into feat/#432

chosim-dvlpr merged commit 2106dab into dev Sep 19, 2024
6 checks passed

chosim-dvlpr deleted the feat/#432 branch September 19, 2024 12:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

디스커션 제출 페이지 구현 (issue #432) #475

디스커션 제출 페이지 구현 (issue #432) #475

chosim-dvlpr commented Sep 15, 2024

Parkhanyoung left a comment

Parkhanyoung Sep 19, 2024

Parkhanyoung Sep 19, 2024

Parkhanyoung Sep 19, 2024

Parkhanyoung Sep 19, 2024

Parkhanyoung Sep 19, 2024

chosim-dvlpr Sep 19, 2024

chosim-dvlpr Sep 19, 2024

Parkhanyoung Sep 19, 2024

Parkhanyoung Sep 19, 2024

Parkhanyoung Sep 19, 2024

Parkhanyoung Sep 19, 2024

Parkhanyoung Sep 19, 2024

	const { data } = await develupAPIClient.get<{ data: Discussion[] }>(`${PATH.discussions}`, {
	const { data } = await develupAPIClient.get<{ data: Discussion[] }>(PATH.discussions, {

	placeholder={'글 제목을 입력해주세요'}
	placeholder='글 제목을 입력해주세요'

	navigate(`${ROUTES.discussions}`);
	navigate(ROUTES.discussions);

	path: `${ROUTES.submitDiscussion}`,
	path: ROUTES.submitDiscussion,

	setSelectedTag(isSelected ? ({ id: 0, [keyName]: HASHTAGS.all } as T) : tag)
	setSelectedTag(isSelected ? null : tag)

	setSelectedTag(isSelected ? ({ id: 0, [keyName]: HASHTAGS.all } as T) : tag)
	toggleSelectedTag();

디스커션 제출 페이지 구현 (issue #432) #475

디스커션 제출 페이지 구현 (issue #432) #475

Conversation

chosim-dvlpr commented Sep 15, 2024

구현 요약

연관 이슈

참고

Parkhanyoung left a 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