Feature/#137 workspace에 로티애니메이션 적용 #141

hyonun321 · 2024-11-17T11:29:08Z

📝 변경 사항

1212.mp4

workspace 데이터 미수신시 표시할 화면 구현

🔍 변경 사항 설명

hook 을 사용해 error 여부를 판단하고, fetch부분은 추후 다른 이슈에서 진행할 예정입니다.
error 화면과 인트로 화면을 제작할 예정입니다.
아직 nocta 아이콘 로티가 제작 되지 않아서 로딩으로 위치만 잡고, 제작이 완료되면 추후에 바꿀 예정입니다.
처음 client 부분을 작업해 보는지라, 많이 틀릴수도 있을 것 같습니다..!

🙏 질문 사항

컨벤션, 재사용성고려, 적절한 함수명, 파일명, 요소이름을 사용했는지 검토 부탁드립니다!

📷 스크린샷 (선택)

UI 변경이 있는 경우 스크린샷이나 GIF를 첨부합니다.

✅ 작성자 체크리스트

Self-review: 코드가 스스로 검토됨
Unit tests 추가 또는 수정
로컬에서 모든 기능이 정상 작동함
린터 및 포맷터로 코드 정리됨
의존성 업데이트 확인
문서 업데이트 또는 주석 추가 (필요 시)

PR 만 열어둔 상태입니다 !!!

- useWorkspaceInit 으로부터 error 정보를 받아와서 화면에 표시 #137

- 정상 연결 되었을때, 서비스를 소개하기위한 화면 생성 - 아직은 loadingSpinner가 2초동안 돌아간다. 추후 수정 예정 #137

- 서버로부터 workspace 데이터를 받아오는 임시 hooks 제작. - 추후 issue 에서 자세하게 연동할 예정. #138

- 워크스페이스 관련 hook 추가 #137 #138

pipisebastian

고생하셨습니다~~~!~!

pipisebastian · 2024-11-17T11:37:48Z

client/src/features/workSpace/WorkSpace.tsx

  const { pages, addPage, selectPage, closePage, updatePageTitle } = usePagesManage();
-  const visiblePages = pages.filter((a) => a.isVisible);
+  const visiblePages = pages.filter((page) => page.isVisible);


핫핫 a 누가 썼는지,,, 수정해주셔서 감사합니다!

pipisebastian · 2024-11-17T11:40:44Z

client/src/features/workSpace/hooks/useWorkspaceInit.ts

+  error: Error | null;
+}
+
+export const useWorkspaceInit = (): UseWorkspaceInitReturn => {


Hook 으로 뺘셨군요!! 👍

그런데 저희 나중에 react query를 쓰게되면
const { data, isError, error, isLoading } = useQuery() 로 자체적인 useQuery훅을 써서, 지금 짜신 코드가 안 쓰일 수도 있습니다,,, useQuery 자체에서 현훈님이 작성하신 코드기능을 제공할겁니다,,,🥲

그치만 직접 구현하신거 너무 짱입니다!! 👍👍👍

추후에 reactQuery를 도입할때 개선해보겠습니다..!

pipisebastian · 2024-11-17T11:42:17Z

client/src/features/workSpace/WorkSpace.tsx

-          />
-        ))}
+    <>
+      <IntroScreen isVisible={isLoading} />


Suggested change

<IntroScreen isVisible={isLoading} />

isLoading && <IntroScreen />

이렇게 조건부로도 사용할 수 있을 것 같아요!

반영했습니다! 어차피 hook 에서 isLoading을 부여하니까 따로 내부에서 isVisible을 볼 필요가 없군요!

pipisebastian · 2024-11-17T11:44:07Z

client/src/features/workSpace/components/ErrorScreen.style.ts

+  width: "500px",
+  minHeight: "400px",
+  padding: "40px",
+});


여기 띄어쓰기 넣어주실 수 있을까요,, ㅎㅁㅎ,,,, 약간 신경쓰입니다.. 머쓱하군요,,

반영했습니다! 세세하게 봐주셔서 감사합니다 !! ㅋㅋ

client/src/features/workSpace/components/ErrorScreen.style.ts

pipisebastian · 2024-11-17T11:49:30Z

client/src/features/workSpace/components/ErrorScreen.tsx

+export const ErrorScreen = ({ errorMessage }: ErrorScreenProps) => {
+  return (
+    <div className={overlay}>
+      <div className={`${glassContainer({ border: "lg" })} ${modalWrapper}`}>


여기 부분은 style파일로 다 넣어도 좋을 것 같아요! panda css 함수중에 cx 사용하면 될거에요!
bottomNavigatorContainer 검색해보시고 참고하시면 좋을 것 같습니당!

이파일은 지금은 지워버렸지만.. 다음에 꼭 사용해 보겠습니다 !

특정 스타일들을 불러와서 사용할 수 있군요! glassContainer로 지정한 Recipe와 css값을 불러올 수 있다니.. 조금 복잡하지만 정말 편한 것 같아요 panda CSS !

pipisebastian · 2024-11-17T11:55:26Z

client/src/features/workSpace/WorkSpace.tsx

+          visibility: isInitialized && !isLoading ? "visible" : "hidden",
+          opacity: isInitialized && !isLoading ? 1 : 0,
+          transition: "opacity 0.3s ease-in-out",


panda css에서 조건부 스타일링도 cva로 가능합니다!
그렇지 오히려 코드가 좀 더 길어지는건 단점이지만요,, 만약 나중에 조건부 스타일링이 더 많아지면, panda css 파일안에서 관리해도 좋을 것 같습니다! 그리고 transition자체는 panda css에서도 바로 넣으면 됩니다!

export const pageControlButton = cva({ base: { borderRadius: "full", width: "20px", height: "20px", cursor: "pointer", }, variants: { color: { yellow: { background: "yellow" }, green: { background: "green" }, red: { background: "red" }, }, },

이렇게 사용할 수 있군요!
pandaCSS를 써보기로 했으니 적극 적용해보겠습니다.

pipisebastian · 2024-11-17T11:56:40Z

client/src/features/workSpace/components/IntroScreen.tsx

+      className="fixed inset-0 flex items-center justify-center bg-white z-50"
+      style={{
+        opacity: isVisible ? 1 : 0,
+        transition: "opacity 0.5s ease-in-out",


transition은 panda css 파일에 같이 넣으면 더 깔끔해질 것 같아요!

반영했습니다 !

pipisebastian · 2024-11-17T11:58:57Z

client/src/components/loading/LoadingSpinner.tsx

@@ -0,0 +1,10 @@
+import { Player } from "@lottiefiles/react-lottie-player";


이 loading 폴더는 나중에 스켈레톤 ui 같은 컴포넌트들이 담기는 걸까요??

loading 폴더를 만들었지만, 현재

components/lotties/LoadingSpinner components/lotties/ErrorAlert

등으로 로티용 tsx를 선언할까 생각중입니다!

스켈레톤의 경우는 별도 or lotties와 결합? 등을 고려해봐야 할 것 같네요 !

pipisebastian · 2024-11-17T13:07:04Z

client/src/features/workSpace/components/ErrorScreen.tsx

+  errorMessage: string;
+}
+
+export const ErrorScreen = ({ errorMessage }: ErrorScreenProps) => {


ErrorScreen는 공통 컴포넌트로 빼는거 어떠신가요?? 워크스페이스뿐만 아니라, 다른 에러나는 곳에서도 쓸 수 있을 것 같아서요!

Screen에만 국한되지 않게 공통적으로 확인할 수 있도록 ErrorModal 로 빼놓겠습니다!

…into Feature/FE/#137_workspace에_로티애니메이션_적용

- glassContainer

- 내부 모듈도 Modal을 사용하여 추상화 예정

#137

- 목적 별 분류가 아닌, 로티파일 tsx 별로 분류

- 추후 내부 요소의 크기에 맞게 container가 조절되도록 수정

- 로티애니메이션 주입 - 에러메세지 붉은색 메세지로 변경 #137

- pandaCSS로 스타일 이전 - cva사용 - red.500 -> red 로 변경 (토큰값) - isLoading 표시 올바르게 변경 - dummy error boolean값 삭제

pipisebastian

반영하신다고 고생하셨습니다... 👍

Ludovico7

확인했습니다!

…b.com/boostcampwm-2024/web33-Nocta into HEAD

- lint 에러용

hyonun321 · 2024-11-18T10:30:53Z

자동 머지가 안되서 제가 직접 눌렀습니다 !

hyonun321 added 4 commits November 17, 2024 20:02

feat: ErrorScreen 생성

b22bc26

- useWorkspaceInit 으로부터 error 정보를 받아와서 화면에 표시 #137

feat: IntroScreen 생성

8293162

- 정상 연결 되었을때, 서비스를 소개하기위한 화면 생성 - 아직은 loadingSpinner가 2초동안 돌아간다. 추후 수정 예정 #137

feat: workspace init hook 생성

b7125ab

- 서버로부터 workspace 데이터를 받아오는 임시 hooks 제작. - 추후 issue 에서 자세하게 연동할 예정. #138

feat: IntroScreen 및 ErrorScreen 추가

c6fa06c

- 워크스페이스 관련 hook 추가 #137 #138

hyonun321 added the FE 프론트엔드 작업 label Nov 17, 2024

hyonun321 added this to the 사용자는 워크스페이스를 관리할 수 있다. milestone Nov 17, 2024

hyonun321 requested review from minjungw00, pipisebastian and Ludovico7 November 17, 2024 11:29

hyonun321 self-assigned this Nov 17, 2024

pipisebastian reviewed Nov 17, 2024

View reviewed changes

hyonun321 added 8 commits November 18, 2024 11:35

Merge branch 'dev' of https://github.com/boostcampwm-2024/web33-Nocta …

868d58c

…into Feature/FE/#137_workspace에_로티애니메이션_적용

chore: 사용하지않는 파일 제거

367c964

- glassContainer

refactor: ErrorScreen -> ErrorModal 로 공통 컴포넌트화

52eb202

- 내부 모듈도 Modal을 사용하여 추상화 예정

refacotor: IntroScreen 내부 로직 변경

d266f2f

refactor: ErrorModal 등록 및 introScreen 부분 수정

fca26c6

#137

refactor: lotties 관련 파일들 공통 로티폴더 생성

1d91e13

- 목적 별 분류가 아닌, 로티파일 tsx 별로 분류

design: modal 컴포넌트 내 고정 height 200px -> auto 로 변경

9f898a5

- 추후 내부 요소의 크기에 맞게 container가 조절되도록 수정

feat: ErrorModal 스타일 부여

748e573

- 로티애니메이션 주입 - 에러메세지 붉은색 메세지로 변경 #137

hyonun321 changed the title ~~Feature/fe/#137 workspace에 로티애니메이션 적용~~ Feature/#137 workspace에 로티애니메이션 적용 Nov 18, 2024

refactor: 서윤님 피드백 반영

2c2ecac

- pandaCSS로 스타일 이전 - cva사용 - red.500 -> red 로 변경 (토큰값) - isLoading 표시 올바르게 변경 - dummy error boolean값 삭제

pipisebastian approved these changes Nov 18, 2024

View reviewed changes

Ludovico7 approved these changes Nov 18, 2024

View reviewed changes

hyonun321 and others added 3 commits November 18, 2024 18:47

Merge branch 'dev' into Feature/FE/#137_workspace에_로티애니메이션_적용

f5b8f11

Merge branch 'Feature/FE/#137_workspace에_로티애니메이션_적용' of https://githu…

e1653a7

…b.com/boostcampwm-2024/web33-Nocta into HEAD

chore: 사용하지 않는 cva 삭제

2217f0a

- lint 에러용

hyonun321 merged commit 3f58bed into dev Nov 18, 2024
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/#137 workspace에 로티애니메이션 적용 #141

Feature/#137 workspace에 로티애니메이션 적용 #141

hyonun321 commented Nov 17, 2024

pipisebastian left a comment

pipisebastian Nov 17, 2024

pipisebastian Nov 17, 2024

hyonun321 Nov 18, 2024

pipisebastian Nov 17, 2024

hyonun321 Nov 18, 2024

pipisebastian Nov 17, 2024

hyonun321 Nov 18, 2024

pipisebastian Nov 17, 2024

hyonun321 Nov 18, 2024

pipisebastian Nov 17, 2024

hyonun321 Nov 18, 2024

pipisebastian Nov 17, 2024

hyonun321 Nov 18, 2024

pipisebastian Nov 17, 2024

hyonun321 Nov 18, 2024

pipisebastian Nov 17, 2024

hyonun321 Nov 18, 2024

pipisebastian left a comment

Ludovico7 left a comment

hyonun321 commented Nov 18, 2024

	<IntroScreen isVisible={isLoading} />
	isLoading && <IntroScreen />

		@@ -0,0 +1,10 @@
		import { Player } from "@lottiefiles/react-lottie-player";

Feature/#137 workspace에 로티애니메이션 적용 #141

Feature/#137 workspace에 로티애니메이션 적용 #141

Conversation

hyonun321 commented Nov 17, 2024

📝 변경 사항

🔍 변경 사항 설명

🙏 질문 사항

📷 스크린샷 (선택)

✅ 작성자 체크리스트

PR 만 열어둔 상태입니다 !!!

pipisebastian 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

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

pipisebastian left a comment

Choose a reason for hiding this comment

Ludovico7 left a comment

Choose a reason for hiding this comment

hyonun321 commented Nov 18, 2024