[FE] feat: 채널 생성 구현 #73

zelkovaria · 2025-02-23T08:58:10Z

이슈번호

Closes [FE] feat - 길드 카테고리 영역 및 설정 구현 #63

요약(개요)

길드의 카테고리 및 채널 정보 조회, 채널 생성 기능을 구현합니다

작업 내용

길드 카테고리 조회
채널 생성 모달 구현 및 api 연결
공통컴포넌트 toggle 구현

집중해서 리뷰해야 하는 부분

기타 전달 사항 및 참고 자료(선택)

공통 컴포넌트로 쓰일 toggle 컴포넌트를 만들어놨어요! 해당 컴포넌트에 예시 및 prop 설명을 함께 뒀어요!

2025-02-23.5.56.40.mov

chysis

카테고리, 채널 생성 구현하느라 고생하셨어요! 주로 스타일 관련해서 사소한 코멘트 남겼는데, 당장은 반영하지 않아도 되는 것들이긴 합니다...
버그가 있는데, 그 부분은 지금 수정이 필요할 것 같아요!

chysis · 2025-02-23T09:32:08Z

src/frontend/src/components/guild/CreateChannelModal/index.tsx

+  const handleChannelNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newName = event.target.value;
+
+    if (newName.length !== 0) setChannelName(newName);
+  };


length가 0이 아니어야 한다는 조건 때문에 채널 이름을 완전히 지울 수 없는 버그를 발견했습니다!

버그 제보 감사합니다!! 생각치 못했던 부분이었네요 🫠 버튼 활성화 여부도 함께 포함해서 수정해둘게요!

chysis · 2025-02-23T09:34:21Z

src/frontend/src/components/guild/CreateChannelModal/styles.ts

+  background-color: ${({ theme, $isSelectedType }) =>
+    $isSelectedType ? theme.colors.dark[350] : theme.colors.dark[600]};
+
+  svg {
+    color: ${({ theme }) => theme.colors.dark[400]};
+  }
+
+  span {
+    color: ${({ theme }) => theme.colors.dark[400]};
+  }
+
+  &:hover {
+    cursor: pointer;
+    background-color: ${({ theme }) => theme.colors.dark[350]};
+  }


사소하지만, 선택되거나 호버했을 때 배경 색상을 조금 더 어둡게 하는 것은 어떨까요? 폰트 색상과 큰 차이가 없어서 읽는 데 영향을 줄 수 있다고 생각해요!

혹은 폰트 색상을 더 밝게 하는 것도 방법이 될 것 같아요 :)

좋은 것 같아요!
이전에는 밝은 감이 있는 것 같아요 ㅎㅎ

와 같은 색상을 아래처럼 수정해놨어요!

UI가 더 예뻐졌네요!! 👍

chysis · 2025-02-23T09:35:53Z

src/frontend/src/pages/FriendsPage/components/CreateCategoryModal/index.tsx

+  const handleCategoryNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newName = event.target.value;
+
+    if (newName.length !== 0) setCategoryName(newName);
+  };


이 부분도 categoryName이 완전히 지워지지 않는 버그를 발견했습니다!

channel이랑 함께 반영해둘게요 :)

chysis · 2025-02-23T09:41:08Z

src/frontend/src/components/guild/CategoriesList/styles.ts

+export const CategoryName = styled.div`
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+
+  svg {
+    color: ${({ theme }) => theme.colors.dark[300]};
+  }
+`;


align-items: center 속성이 필요할 것 같습니다 :)

매의 눈 👍🏻 반영해둘게용!

chysis · 2025-02-23T09:42:51Z

src/frontend/src/components/guild/CategoriesList/index.tsx

+              <S.Channels key={channel.channelId}>
+                <BodyRegularText>{channel.name}</BodyRegularText>
+              </S.Channels>


채널 타입에 따라 channel.name 앞에 맞는 아이콘을 넣으면 좋겠어요! 당장 반영하지 않아도 괜찮습니다.

다음과 같이 반영해놨어요! 👍🏻

chysis · 2025-02-23T09:46:17Z

src/frontend/src/components/guild/CategoriesList/styles.ts

+export const Channels = styled.div`
+  display: flex;
+`;


사소하지만, channel의 경우 padding-left로 indent를 주면 가독성이 더 좋아질 것 같아요!

사소함이 굉장히 큰 변화네요 ✨ 덕분에 가독성이 훨씬 나아진 것 같아요!

chysis · 2025-02-23T09:49:14Z

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

+  isOn: boolean;
+  onToggle: () => void;
+}
+const Toggle = ({ isOn, onToggle }: ToggleProps) => {


애니메이션 동작까지 좋아요 👍
컴포넌트 이름을 ToggleButton으로 두는 것은 어떤가요?

Toggle, ToggleSwitch, ToggleButton 등 다양하게 불리는 것 같은데 전 Toggle이 깔끔해보여서 요건 그대로 유지해둘게요! 의견 감사합니당 :)

chysis · 2025-02-23T09:52:28Z

src/frontend/src/components/guild/CategoriesList/styles.ts

+export const Channels = styled.div`
+  display: flex;
+`;


cursor: pointer도 주면 좋을 것 같습니다 :)

chysis

코멘트 적극적으로 반영해주셔서 감사해요 ㅎㅎ
한 가지 버그가 더 발견돼서 다시 제보드립니다!! 확인 부탁드려요

chysis · 2025-02-23T15:14:43Z

src/frontend/src/components/guild/CreateChannelModal/styles.ts

+export const CreateButton = styled.button<{ $disabled: boolean }>`
+  width: 11rem;
+  height: 4rem;
+  border-radius: 0.8rem;
+
+  color: ${({ theme }) => theme.colors.white};
+
+  background-color: ${({ theme, $disabled }) => ($disabled ? theme.colors.dark[400] : theme.colors.blue)};
+`;


disabled가 버튼의 기본 속성을 활용하는 게 아니라서, $disabled가 true인 경우에는 click 동작을 막아야 할 것 같아요. 지금은 이름 없는 카테고리나 채널이 만들어질 수 있네요...!

(pointer-events?)

뜨헉 버튼 속성을 위한 disabled 추가할게요! 😅 추가로 cursor도 not-allowed 처리해둘게요 ㅎㅎ

disabled, $disabled를 모두 사용해도 스타일 prop으로 구분돼서 크게 어색하진 않네요!

chysis

수정 사항 확인했어요! 고생하셨습니다 😊

zelkovaria added 14 commits February 23, 2025 11:05

[FE] feat: Toggle 컴포넌트 구현 (#63)

50c5701

[FE] feat: 카테고리 생성 모달 UI 구현 (#63)

de0140c

[FE] feat: 길드 설정 dropdown에 카테고리 생성 모달 연결 (#63)

92ae760

[FE] feat: 카테고리 생성 api 함수 및 type 구현 (#63)

0aa54a5

[FE] feat: 카테고리 생성 api 연결 (#63)

3164671

[FE] refactor: CategoryDataResult type 개선 (#63)

e6afd25

[FE] feat: 단일 길드의 category list 조회 구현 (#63)

bfdeb53

[FE] feat: 카테고리별 채널 리스트 조회 구현 (#63)

482a126

[FE] feat: theme dark 계열 색상 추가 (#63)

0465167

[FE] feat: channel 생성 api 함수 구현 (#63)

96a33a6

[FE] feat: 채널 생성 클릭시 모달 열림 (#63)

888cb33

[FE] feat: 채널 생성 모달 UI 구현 (#63)

7679dfc

[FE] feat: 채널 생성 api 연결 (#63)

4b00e81

[FE] fix: 채널 생성 활성화 색상 변수 수정 (#63)

0dd4407

zelkovaria self-assigned this Feb 23, 2025

zelkovaria requested review from bianbbc87, chysis, onegood07 and toychip as code owners February 23, 2025 08:58

[FE] fix: 카테고리, 채널 공개값이 false로만 가던 오류 수정 (#63)

865b70d

chysis reviewed Feb 23, 2025

View reviewed changes

zelkovaria added 6 commits February 23, 2025 23:37

[FE] fix: 채널, 카테고리 이름이 지워지지 않는 오류 수정 (#63)

e3aafb7

[FE] refactor: dark 색상 추가 및 채널 생성 모달 css 변경 (#63)

15d27a1

[FE] refactor: CategoryName css 수정 (#63)

8d56b89

[FE] refactor: Channels에 cursor:pointer 추가 (#63)

b48986b

[FE] refactor: Channels에 indent 추가 (#63)

1d2824a

[FE] 채널 타입에 따른 icon 추가 (#63)

6208ae0

chysis reviewed Feb 23, 2025

View reviewed changes

[FE] fix: 생성버튼 비활성화를 위한 disabled 속성 추가 (#63)

c61fd77

chysis approved these changes Feb 23, 2025

View reviewed changes

zelkovaria merged commit 2cfa574 into main Feb 23, 2025
12 checks passed

zelkovaria added feat feat Frontend Frontend 혜인 labels Feb 23, 2025

[FE] feat: 채널 생성 구현 #73

[FE] feat: 채널 생성 구현 #73

Uh oh!

Conversation

zelkovaria commented Feb 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

이슈번호

요약(개요)

작업 내용

집중해서 리뷰해야 하는 부분

기타 전달 사항 및 참고 자료(선택)

Uh oh!

chysis left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chysis left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chysis left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

zelkovaria commented Feb 23, 2025 •

edited

Loading