feat: add dev-test draft #22

Jun99uu · 2023-02-05T13:03:41Z

Issue

Resolves #20

Description

2022-02-05
코드 리뷰를 위한 Draft PR 입니다!
현재 간단한 재사용 컴포넌트와 함께, 결과 페이지를 제외한 테스트 페이지를 제작하였습니다.

Check List

PR 제목을 커밋 규칙에 맞게 작성
적절한 라벨 설정
GitHub Projects에 연결
작업한 사람 모두를 Assign
Code Review 요청
DB Schema를 바꾼 경우, DB Schema를 바꾸는 다른 PR이 없는지 확인
main 브랜치의 최신 상태를 반영하고 있는지 확인

vercel · 2023-02-05T13:03:44Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
web	❌ Failed (Inspect)			Feb 28, 2023 at 11:58AM (UTC)

aube-dev

작업 깔끔하게 잘해주고 계시네요 👍 코드 레벨에서 몇가지 리뷰했습니다!

그리고 Button, token.ts 등 공통 디자인 토큰 관련된 작업은 다른 PR로 나누어 주실 수 있을까요? 커뮤니티팀 고유의 작업과 분명히 분리된 PR로 올라오는 게 좋을 것 같아서요!

aube-dev · 2023-02-06T11:54:37Z

src/components/comuunity/index.ts

+import DevTestPage from './playground/DevTest';
+
+export { DevTestPage };


🍎 폴더 이름 community인데 comuunity로 오타났어요!

헉 수정하겠습니다! 감사해요!!!

aube-dev · 2023-02-06T12:01:21Z

src/components/comuunity/playground/DevTest/PlayPage.tsx

+import { COLORS } from '../common/token';
+
+interface Props {
+  setStage: Dispatch<SetStateAction<number>>;


🥝 setter 자체를 넘겨주면 외부 로직에 너무 의존성이 높아질 것 같은데, 단순히 '이 스텝이 끝날 때 실행된다'는 의미로 onFinish 또는 onEnd 느낌으로 네이밍을 한 뒤에, 타입을 () => void로 단순히 정의하면 어떨까요? 그리고 외부에서는 이런 식으로 쓰면 될 것 같아요.

const goToNextStep = () => { setState(prev => prev + 1); }; return ( <PlayPage onEnd={goToNextStep} /> );

이런 느낌으로 하면 더 유연하게 짤 수 있지 않을까요?

그리고 이렇게 한다면 모든 step에 쓰이는 컴포넌트들이 동일한 interface를 가지도록 할 수 있을 것 같아요. 예를 들어서

// src/components/community/playground/DevTest/types.ts export interface StepProps { onEnd?: () => void; }

// src/components/community/playground/DevTest/PlayPage.tsx import type { StepProps } from './types'; interface Props extends StepProps {}

이렇게 짜도 좋을 것 같아요!

오홍...!! 뭔가 함수 넘겨주기보다 setter 넘겨주는게 편하다고 생각해서 아무 생각없이 이렇게 해왔는데 인터페이스도 통일할 수 있고 의존성 문제도 해결할 수 있겠네요...
수정하겠습니당!!

aube-dev · 2023-02-06T12:03:14Z

src/components/comuunity/playground/DevTest/PlayPage.tsx

+  setStage: Dispatch<SetStateAction<number>>;
+}
+
+const PlayPage = (props: Props) => {


혹시 props를 spread하지 않는 이유가 따로 있을까요?

ㅋㅋㅋㅋㅋ앗 props가 하나라 귀..찮아서 안했던건데 들켰네효...ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
수정하겠습니당!

aube-dev · 2023-02-06T12:05:30Z

src/components/comuunity/playground/DevTest/PlayPage.tsx

+      <style jsx>{`
+        .devtest__play-page {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: 50px;
+        }
+        .devtest__play-page--question,
+        .devtest__play-page--select {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 15px;
+        }
+      `}</style>


🍌 저희는 이번 프로젝트에서 스타일링 라이브러리로 vanilla-extract를 사용하기로 했는데, 혹시 styled-jsx를 쓰신 이유가 따로 없다면 vanilla-extract로 바꿔보면 어떨까요?

넵!! 변경하겠습니당

aube-dev · 2023-02-06T12:18:20Z

src/components/comuunity/playground/DevTest/index.tsx

+        {stage === 0 ? (
+          <StartPage setStage={setStage} />
+        ) : (
+          <PlayPage setStage={setStage} />
+        )}


🥝 stage가 앞으로도 0 또는 1만 있을 거라는 보장이 없으니 조금 더 확장성 있게 설계하면 어떨까요?

const STAGES = [ StartPage, PlayPage, ] as const; const DevTestPage = () => { // ... const CurrentPage = STAGES[stage]; return ( <div className="devtest__page"> <Wrapper topColor="#00A4CA" bottomColor="#58C4C4"> <CurrentPage setStage={setStage} /> {/* ... */} ); };

오홍... 훨씬 직관적이네요! 감사합니다~!

aube-dev · 2023-02-06T12:40:42Z

src/components/comuunity/playground/common/Button/Button.tsx

@@ -0,0 +1,54 @@
+import { TEXT_STYLE_BUTTON_PC, TEXT_STYLE_BUTTON_MOBILE } from '../token';
+
+interface Props {


🍌 어차피 내부에서 <button>을 직접적으로 사용하니, <button>이 받을 수 있는 모든 prop을 허용해도 되지 않을까요?

interface Props extends React.ComponentProps<'button'> { backgroundColor: string; color: string; title: string; } const Button = ({ backgroundColor, color, title, ...buttonProps }: Props) => { return ( <button {...buttonProps}> {/* ... */} ); };

이렇게 하면 onClickHandler도 생략할 수 있어요!

아 헐... 너무 좋은 것 같아요.... 대박
감사합니다!

aube-dev · 2023-02-06T12:50:06Z

src/components/comuunity/playground/common/token.ts

+export const TEXT_STYLE_TITLE_PC = {
+  title: {
+    fontSize: 36,
+    fontWeight: 900,
+  },
+  subtitle1: {
+    fontSize: 30,
+    fontWeight: 800,
+  },
+  subtitle2B: {
+    fontSize: 22,
+    fontWeight: 700,
+  },
+  subtitle2R: {
+    fontSize: 22,
+    fontWeight: 500,
+  },
+  subtitle3: {
+    fontSize: 20,
+    fontWeight: 700,
+  },
+};


🥝 vanilla-extract를 쓰면 이런 식으로 media query까지 미리 처리해 놓을 수 있어요!

export const text = styleVariants({ title: { fontSize: 36, fontWeight: 900, '@media': { 'screen and (max-width: 500px)': { fontSize: 30, fontWeight: 900, }, }, }, // ... };

그리고 breakpoint도 상수로 관리해 놓으면 편리해요!

const BREAKPOINTS = [500, 800] as const; const MEDIA_QUERY = { pc: `screen and (min-width: ${BREAKPOINTS[1]}px)`, mobile: `screen and (max-width: ${BREAKPOINTS[0]}px)`, } as const; export const text = styleVariants({ title: { fontSize: 36, fontWeight: 900, '@media': { [MEDIA_QUERY.mobile]: { fontSize: 30, fontWeight: 900, }, }, }, // ... };

오오옹오오 대박...!!!!!

aube-dev · 2023-02-06T12:50:55Z

src/pages/_document.tsx

+          <link
+            href="https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/variable/woff2/SUIT-Variable.css"
+            rel="stylesheet"
+            type="text/css"
+          />


🍌 외부 CDN을 이용하면 폰트 로딩이 조금 느릴 수 있는데, @next/font/local을 이용해 보면 어떨까요? (https://nextjs.org/docs/basic-features/font-optimization#local-fonts)

aube-dev · 2023-02-06T12:53:02Z

src/resources/communityRes.tsx

+/** 임시 이미지 리소스 -- 커뮤니티팀
+ * 임시로 제(이준규) S3버킷에 업로드해서 사용하고 있어요.
+ * 이미지 업로드 필요하면 말씀해주세요!
+ */
+
+export const devTestLogo =
+  'https://horosocular.s3.ap-northeast-1.amazonaws.com/res1.svg';


혹시 로컬 이미지가 아니라 외부에 업로드된 이미지를 사용하려는 이유가 있을까요?
아 그리고 혹시 이미지 업로드가 필요하시면 저희 DB로 쓰고 있는 Supabase에서 가능하니 말씀해 주세요!

앗 그냥 프로젝트 무거워질까봐 그냥 가져와서 쓰려고 했었습니다...!! 상관이 없는건가요?!
넵!!

aube-dev · 2023-02-06T12:54:37Z

tsconfig.json

@@ -21,7 +21,8 @@
      "@/logics/*": ["src/logics/*"],
      "@/constants/*": ["src/constants/*"],
      "@/assets/*": ["src/assets/*"],
-      "@/lib/*": ["lib/*"]
+      "@/lib/*": ["lib/*"],
+      "@/resources/*": ["src/resources/*"]


이 src/resources의 쓰임에 대해서 정리해서 저희 Notion 페이지의 wiki에 올려주실 수 있을까요?

넵 정리해서 올려두겠습니다!

aube-dev · 2023-02-06T13:08:51Z

src/components/comuunity/playground/DevTest/StartPage.tsx

+        onClickHandler={() => props.setStage((prev) => prev + 1)}
+      />
+      <span>GDSC Soongsil Univ.</span>
+      <img src={devTestLogo} alt="devtest-logo" />


🍌 앗 리뷰하다가 깜빡했는데, 그냥 img 말고 next/image의 <Image>를 쓰면 좋을 것 같아요! 이건 제가 세팅만 해놓고 테스트를 못해서 궁금해서 여쭈어 보는 건데, 혹시 이 부분에서 eslint warning 떴나요?

아 헐 Image 까먹고있었어요...ㅋㅋㅋㅋㅋㅋ 수정하겠씁니다!
아뇨 별도의 문제는 없었습니다!!

…ev-test

Jun99uu added 17 commits February 5, 2023 15:03

feat: set global style

3644102

feat: add _document file

cf38722

feat: add Page-Wrapper for mobile viewport

4e43b67

feat: set DevTest empty Page

544c64c

feat: add community-StartButton Component

ff07208

feat: add community-Button Component

64f6196

feat: add community-Title Box Component

5092f7c

feat: add community-Visitor Component

8e79f75

feat: add design token for community spec

7b4f980

fix: apply design token

a4a5534

fix: fix Page Wrapper

9029cd1

feat: add absolute path

dc97fcc

fix: fix mobile web vh-bug

b7aa0f8

feat: add devtest inner content changing

db62045

fix: fix font in TitleBox

1c65c1e

fix: fix Font in Button

6d18e79

feat: add questions content page

6b6cbd8

Jun99uu added the feature 기능 추가/수정 label Feb 5, 2023

Jun99uu requested a review from aube-dev February 5, 2023 13:03

Jun99uu self-assigned this Feb 5, 2023

Jun99uu changed the title ~~feat: add dev-test draft (#20)~~ feat: add dev-test draft Feb 5, 2023

aube-dev requested changes Feb 6, 2023

View reviewed changes

Jun99uu added 6 commits February 12, 2023 12:48

fix : change community directory name

9f79c93

fix : fix component dependency and props

20369b1

fix : take out DevTestPage

d299b47

fix : styling by vanilla-extract

4557271

feat : add dev-test questions

1fb23c0

fix : fix Image and fontSize

0cb2a72

Jun99uu added 6 commits February 14, 2023 11:37

feat : add progress bar

b166518

feat : add feat caculating test-result

9aa6685

fix : fix init value in Progressbar

a0bf7ea

feat : add result resources(svg)

d2e4f8a

feat : print dev-test result

1563edb

Merge branch 'main' of https://github.com/gdsc-ssu/web into feat/20_d…

80dab9c

…ev-test

Jun99uu had a problem deploying to Preview February 19, 2023 08:38 — with GitHub Actions Failure

Jun99uu temporarily deployed to Preview February 19, 2023 08:38 — with GitHub Actions Inactive

fix : fix Result type

f382802

Jun99uu temporarily deployed to Preview February 20, 2023 14:33 — with GitHub Actions Inactive

Jun99uu had a problem deploying to Preview February 20, 2023 14:33 — with GitHub Actions Failure

Jun99uu added 4 commits February 28, 2023 18:46

feat : add result dom to image function

4d08f40

feat : add loading spinner

89e41d1

feat : add useInterval hooks

a38b00e

feat : add loading spinner in result page (3s)

7cec2fe

Jun99uu temporarily deployed to Preview February 28, 2023 11:57 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add dev-test draft #22

feat: add dev-test draft #22

Jun99uu commented Feb 5, 2023

vercel bot commented Feb 5, 2023 •

edited

Loading

aube-dev left a comment

aube-dev Feb 6, 2023

Jun99uu Feb 11, 2023

aube-dev Feb 6, 2023

Jun99uu Feb 11, 2023

aube-dev Feb 6, 2023

Jun99uu Feb 11, 2023

aube-dev Feb 6, 2023

Jun99uu Feb 11, 2023

aube-dev Feb 6, 2023

Jun99uu Feb 11, 2023

aube-dev Feb 6, 2023

Jun99uu Feb 11, 2023

aube-dev Feb 6, 2023

Jun99uu Feb 11, 2023

aube-dev Feb 6, 2023

aube-dev Feb 6, 2023

Jun99uu Feb 11, 2023

aube-dev Feb 6, 2023

Jun99uu Feb 11, 2023

aube-dev Feb 6, 2023

Jun99uu Feb 11, 2023

		import DevTestPage from './playground/DevTest';

		export { DevTestPage };

		@@ -0,0 +1,54 @@
		import { TEXT_STYLE_BUTTON_PC, TEXT_STYLE_BUTTON_MOBILE } from '../token';

		interface Props {

feat: add dev-test draft #22

Are you sure you want to change the base?

feat: add dev-test draft #22

Conversation

Jun99uu commented Feb 5, 2023

Issue

Description

Check List

vercel bot commented Feb 5, 2023 • edited Loading

aube-dev 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

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

vercel bot commented Feb 5, 2023 •

edited

Loading