chat main component (after #4 merged) #6

jiyong1 · 2021-12-07T06:47:10Z

개요

chat main component와 필요한 이외의 common 컴포넌트도 작성하였습니다.

이슈 번호

closes Telbby main (프로젝트 정보) 컴포넌트 마크업 #5

변경사항

x 버튼과 뒤로 가기 버튼 컴포넌트를 작성하였습니다.
프로젝트 이름과 설명 그리고 피드백을 볼 수 있는 메인 컴포넌트를 작성완료 하였습니다.

특이사항

좀 더 효율적인 방안이 있다면 아낌없이 지적해주세요.. 고민을 많이 해봤지만 일단 토의하면서 개선하는게 나을 것 같습니다.
swc, storybook 설정 및 feedback list 컴포넌트 추가 #4 이 merge가 완료된 후에 이 PR을 merge 해야 합니다.
Storybook

…to feature/#5

swc, storybook 설정 및 feedback list 컴포넌트 추가

…에 따른 수정

pumpkiinbell

수고하셨습니다~~

pumpkiinbell · 2021-12-30T17:55:50Z

src/components/Main/style.ts

+export const mainInfoStyle = css`
+  /* padding: 0 1.5rem; */
+`;


이 부분 지워도 되지 않을까요..!?

앗 지우겠습니다 ㅎㅎ..

pumpkiinbell · 2021-12-30T17:59:05Z

src/components/Main/style.ts

+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;


webkit 속성을 사용하신 이유가 궁금하네요 :)

음.. 라인수를 제한시키려면 저렇게 해야한다고 해서욥.. ㅎㅎ

표준이 아니다보니 엣지나 파폭은 안먹힐것 같아서요 ㅠㅠ
라인수 제한을 꼭 해야 하는 걸까용??

pumpkiinbell · 2021-12-30T17:59:49Z

src/components/common/BackBtn/index.tsx

+        <path
+          d="M75 10 L 25 50 L 75 90"
+          css={[{ stroke: color }, backPathDefaultStyle]}
+        />


오 path 태그로 구현하셨군요... 대박

pumpkiinbell · 2021-12-30T18:01:26Z

src/components/common/ExitBtn/index.tsx

+  color: string;
+}
+
+const Exit: FC<ButtonProps> = ({ width, height, color }) => {


피그마에 있는 svg, png 파일이 아닌 이렇게 직접 구현하신 이유가 궁금합니다!?

한번 해보고 싶었습니다.. 간단한 path니깐요 ㅋㅋㅋㅋ

pumpkiinbell · 2021-12-30T18:03:45Z

src/styles/emotion.d.ts

-    colorPrimary: string;
-    colorPrimaryDark: string;
-    colorPrimaryLight: string;
-    colorSub: string;
-    colorSubLight: string;
-    colorBg: string;
-    colorWhite: string;
-    colorGray1: string;
-    colorGray2: string;
-    colorGray3: string;
-    colorIndigo: string;
-    colorBrown: string;
-    colorSuccess: string;
-    colorError: string;
-
-    fontBasic: string;
-    fontCoding: string;
-    fontCodingBold: string;


기존에 있는 타입을 지우고 인덱스 시그니처를 사용하신 이유가 있을까요??
이전과 달리 Theme가 너무 큰 범위의 프로퍼티 타입을 가지게 되는것 아닐까요?

이건 이전에 수정할 때 상황에 따라 theme이 달라지도록 하려다보니 일단 바꿨습니다..

Seogeurim

혹시 지난 PR dev merge 후 변경사항이 아직 남아있는 것 같은데, rebase 한 번만 해주실 수 있을까요?!!

Seogeurim

dev rebase는 확인해보니 되어있는데 이전 swc 관련 변경사항들이 보이는 것 같네요!! 무슨 문제일까용? 👀
확실히 storybook 보니까 PR 리뷰 하면서 스스로 테스트해본걸 storybook 통해서 쉽게쉽게 볼 수 있어서 정말 좋네요 !!! ㅎㅎㅎ
지난 회의 시간에 컴포넌트 분리 기준에 대해 말씀해주신게 왜 고민이 되었는지 이해가 되네요!!!
몇가지 코멘트 남겨보았습니닷 👍🏻

Seogeurim · 2022-01-08T05:17:22Z

src/App.tsx

+  // @TODO: primary 정보를 가져와 어떤 theme을 전달할지 결정해야 합니다.
+  const isPrimary = true;
+  return (
+    <BrowserRouter>
+      <RecoilRoot>
+        <ThemeProvider theme={isPrimary ? primaryTheme : subTheme}>


ThemeProvider 좋네용 !!! 👍🏻👍🏻👍🏻

Seogeurim · 2022-01-08T05:22:06Z

src/components/Main/ProjectIntro.tsx

+const ProjectIntro: FC<ProjectIntroProps> = ({ name, description }) => {
+  // @TODO: 버튼 클릭시 채팅 컴포넌트로 넘어가도록 해야합니다.


어떤 버튼 클릭시인가요?

Seogeurim · 2022-01-08T05:26:18Z

src/components/Main/index.tsx

+const TelbbyServiceClient: FC = () => {
+  // @TODO 여기에서 Service Client를 구현해나갑니다.
+  return <div css={chatMainDefaultStyle} />;
+};


TelbbyServiceClient 컴포넌트를 Main 컴포넌트 밑에 위치시킨 이유는 무엇일까요?

Seogeurim · 2022-01-08T05:28:24Z

src/components/common/BackBtn/index.tsx

+  color: string;
+}
+
+const Exit: FC<ButtonProps> = ({ width, height, color }) => {


BackBtn인데 Exit이라고 네이밍을 잘못 해둔 것 같네요!!
그리고 Main 밑에는 BottomButton 이라고 버튼을 풀네임으로 쓰고, common 밑에는 BackBtn, ExitBtn으로 줄여서 써서 이 부분 통일하면 좋을 것 같아요!

Seogeurim · 2022-01-08T05:29:56Z

src/stories/ExitBtn.stories.tsx

+LightExitButton.decorators = [
+  (Story) => {
+    return (
+      <div style={{ backgroundColor: theme.colorPrimary }}>
+        <Story />


오호 이렇게도 가능하군요!!!

jiyong1 added 12 commits December 1, 2021 18:06

[#3] chore: swc 설정

c104852

[#3] chore: storybook, chromatic 패키지 추가

833de9d

[#3] chore: webpack 설정 변경 및 필요없는 패키지 제거

4f95645

[#3] chore: storybook 환경 설정

b513be8

[#3] feature: feedback item & list component 추가

360230f

[#3] feature: feedback item & list component story 추가

55cde3e

[#3] chore: chromatic github action setup

7e790e6

[#5] chore: TellbyChatClient컴포넌트 TelbbyChat으로 이름 변경

b9c3d12

[#3] refactor: style, tag name 변경 & feedback props 변경

4488deb

Merge branch 'feature/#3' of https://github.com/telbby/telbby-chat in…

279daf3

…to feature/#5

[#5] feature: x 버튼, 뒤로가기 버튼 컴포넌트

9e611fc

[#5] feature: chat main component 초안

6b2d879

jiyong1 added the feature New feature or request label Dec 7, 2021

jiyong1 added this to the 9주차 milestone Dec 7, 2021

jiyong1 self-assigned this Dec 7, 2021

auto-assign bot requested review from hseoy, pumpkiinbell and Seogeurim December 7, 2021 06:47

jiyong1 changed the title ~~chat main component~~ chat main component (after #3 merged) Dec 7, 2021

jiyong1 changed the title ~~chat main component (after #3 merged)~~ chat main component (after #4 merged) Dec 7, 2021

jiyong1 added 2 commits December 9, 2021 15:50

[#5] style: primary에 따른 theme 분리

5831d1f

[#5] refactor: theme 분리에 따른 코드 수정

40c677a

Seogeurim linked an issue Dec 12, 2021 that may be closed by this pull request

Telbby main (프로젝트 정보) 컴포넌트 마크업 #5

Open

1 task

jiyong1 and others added 6 commits December 18, 2021 17:42

[#3] refactor: project type을 root type(@types)에서 type 디렉토리로 변경

9da58fc

[#3] refactor: FeedbackItem을 FeedbackListItem으로 이름 변경

ec9221f

[#3] refactor: FeedbackList css속성을 함수로 변경

eb68302

Merge pull request #4 from telbby/feature/#3

8d3579b

swc, storybook 설정 및 feedback list 컴포넌트 추가

[#5] chore: TellbyChatClient컴포넌트 TelbbyChat으로 이름 변경

6d756fa

[#5] feature: x 버튼, 뒤로가기 버튼 컴포넌트

79950c9

jiyong1 added 8 commits December 23, 2021 14:35

[#5] feature: chat main component 초안

bc60a6c

[#5] style: primary에 따른 theme 분리

be31e2a

[#5] refactor: theme 분리에 따른 코드 수정

8e6b36f

[#5] refactor: lint props spreading을 허용해주고 그 방식으로 수정

b0599e9

[#5] chore: #3 merge conflict 해결

faad7e5

[#5] refactor: 각 theme에 defaultTheme을 spread 하는 방식으로 수정

c8399a8

[#5] refactor: type directory import 변경 & totalFeedbackCount로 name 변경…

7a8e45b

…에 따른 수정

[#5] style: main logo image border와 background 추가

c50588d

pumpkiinbell approved these changes Dec 30, 2021

View reviewed changes

Seogeurim reviewed Jan 1, 2022

View reviewed changes

Seogeurim reviewed Jan 8, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chat main component (after #4 merged) #6

chat main component (after #4 merged) #6

jiyong1 commented Dec 7, 2021 •

edited

Loading

pumpkiinbell left a comment

pumpkiinbell Dec 30, 2021

jiyong1 Dec 31, 2021

pumpkiinbell Dec 30, 2021

jiyong1 Dec 31, 2021

pumpkiinbell Dec 31, 2021 •

edited

Loading

pumpkiinbell Dec 30, 2021

pumpkiinbell Dec 30, 2021

jiyong1 Dec 31, 2021

pumpkiinbell Dec 30, 2021

jiyong1 Dec 31, 2021

Seogeurim left a comment

Seogeurim left a comment

Seogeurim Jan 8, 2022

Seogeurim Jan 8, 2022

Seogeurim Jan 8, 2022

Seogeurim Jan 8, 2022

Seogeurim Jan 8, 2022

		const ProjectIntro: FC<ProjectIntroProps> = ({ name, description }) => {
		// @TODO: 버튼 클릭시 채팅 컴포넌트로 넘어가도록 해야합니다.

chat main component (after #4 merged) #6

Are you sure you want to change the base?

chat main component (after #4 merged) #6

Conversation

jiyong1 commented Dec 7, 2021 • edited Loading

개요

이슈 번호

변경사항

특이사항

pumpkiinbell 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

pumpkiinbell Dec 31, 2021 • 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

Seogeurim left a comment

Choose a reason for hiding this comment

Seogeurim 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

jiyong1 commented Dec 7, 2021 •

edited

Loading

pumpkiinbell Dec 31, 2021 •

edited

Loading