[#19] 대회 정보 표시 #44

dmdmdkdkr · 2023-11-16T15:25:49Z

한 일

프로젝트명, 대회 이름, 문제 이름을 표시하는 Header컴포넌트를 작성하였습니다.
문제 이름을 표시하는 ProblemTitle컴포넌트를 작성하였습니다.

- 프로젝트명, 대회 이름, 문제 이름을 표시하는 헤더 컴포넌트를 작성했습니다. - 대회 이름을 표시하는 문제 제목 컴포넌트를 작성했습니다.

기존에 하드코딩 되어있던 데이터를 수정하였습니다.

컴포넌트 선언문 안에 선언되어있던 상수를 선언문 바깥으로 분리했습니다.

dev2820 · 2023-11-17T00:39:39Z

frontend/src/components/Header.tsx

+import TextForHeader from './TextForHeader';
+interface Props {


사이에 공백 하나만 넣어주세요

dev2820 · 2023-11-17T00:40:28Z

frontend/src/components/Header.tsx

이 컴포넌트는 나중에 로그인 버튼 등이 들어간다고 보면 될까요?

Header 면 모든 페이지에 사용되는 것 같아요. 제가 해석한 코드는 컨테스트 페이지 내의 대회 정보 헤더 같은데 맞다면 파일명 변경 해 주세요!

dev2820 · 2023-11-17T00:43:27Z

frontend/src/logos/Albbago.svg

이런 정적 요소는 assets이나 public으로 빼주실 수 있나요? 앞으로도 이런 정적 요소가 생길 것이고 그때가 되면 logos 폴더를 제거하고 옮겨야할거라 미리하면 좋을 것 같습니다.

개인적인 생각엔 src/assets/ 안으로 넣으면 될 것 같습니다.

동의합니다.
사실 저 로고 자체를 페이지에서 많이 사용할 것 같은데, 그렇다면 assets에 넣고 로고 컴포넌트를 따로 만들어서 크기? 정도의 프로펄티만 받아서 재사용할 수 있으면 더 좋겟네요

누끼 딴 이미지 사용해 주세요

넣어 봤는데, 잘 되네요

넵, 감사합니다!

dev2820 · 2023-11-17T00:43:42Z

frontend/src/components/TextForHeader.tsx

+}
+
+const category = 'Algo With Me';
+const tt = '>';


tt는 무슨 의미인가요?

진짜 뭐죠 😎 ??

죄송합니다, 제가 임시로 tt라는 이름을 지정했는데, PR전에 확인을 못했습니다
다음부터는 import문 공백이나 이런 실수 등이 없도록 PR전에 꼭 확인하겠습니다!

dev2820 · 2023-11-17T00:44:40Z

frontend/src/components/TextForHeader.tsx

+    <div>
+      <div className={titleContainer}>
+        <img src={Albbago} alt="Albbago Logo" className={logoStyle} />
+        {category} {tt} {title} {tt} {problemName}
+      </div>
+    </div>


여기는 div를 두 번 중첩시킬 필요는 없어보이는데, 모르는 의미가 있는걸까요?

밖의 div와 안의 div는 어떤 차이가 있나요?

구조를 바꾸면서 바깥쪽 div가 필요 없어졌는데, 이를 놓치고 그대로 작성한 상태로 넣은 것 같습니다, 다음부터는 PR전에 꼭 확인하도록 하겠습니다!
죄송하고 감사합니다!

dev2820 · 2023-11-17T00:47:15Z

frontend/src/components/TextForHeader.tsx

+const category = 'Algo With Me';
+const tt = '>';
+
+export default function TextForHeader(props: Props) {


더 명확한 이름이 있을 것 같아요. 제 생각에 지금 header의 정의가 명확하지 않은 것 같습니다.

우찬님이 작성하신 header는 사이트의 header인가요 문제 푸는 곳의 header인가요.
제 생각에 둘을 분리하자면

사이트의 header: 사이트 로고, 로그아웃/로그인

문제푸는곳의 header: 문제 이름, 남은 시간, 대시보드 보기

이런 내용이 들어갈 것 같은데, 이 header는 둘 다 들어간 것 같아요. 그래서 이 헤더는 분리하고 더 명확한 이름을 붙일 수 있을 것 같네요

감사합니다!
말씀하신 대로 분리한 뒤에 이름을 바꾸도록 하겠습니다!
다음부터는 이를 먼저 고려하겠습니다!

mahwin · 2023-11-17T02:46:55Z

frontend/src/components/ContestPage.tsx

+    <div>
+      <Header title={'test'} problemName={targetProblem.title} />
+      <ProblemTitle problemName={targetProblem.title} />
+      <div className={layout}>
+        <ProblemContent content={targetProblem}></ProblemContent>
+        <div>
+          <Editor code={code} onChangeCode={handleChangeCode} />
+          <button onClick={handleTestExec}>테스트 실행</button>
+          {testCases.map((tc, index) => (
+            <Tester
+              param={tc.param}
+              result={tc.result}
+              onChangeParam={(param: string) => handleChangeParam(index, param)}
+              key={index}
+            ></Tester>
+          ))}
+        </div>
      </div>
    </div>


너무 div tag만 사용한다고 생각듭니다.
해당 페이지에서 제일 중요한 부분이니 section으로 감싸도 좋을 것 같습니다.

감사합니다, 다음부터는 태그를 사용할 때 목적에 맞는 태그를 사용하도록 하겠습니다!

- header컴포넌트명을 수정하는 과정에서 albbago로고를 삭제했습니다. - header컴포넌트명을 HeaderOfContentPage로 수정하였습니다. - div만 사용하던 html tag를 각 목적에 맞게 수정하였습니다. - 변수명, import문 공백, 쓸데없는 html tag삭제

mahwin · 2023-11-18T10:43:36Z

frontend/src/components/ContestPage.tsx

-    <div>
-      <Header title={'test'} problemName={targetProblem.title} />
+    <main>
+      <HeaderOfContestPage title={'test'} problemName={targetProblem.title} />


전치사가 들어간 명명이 많은데, 제 생각엔 별론 것 같습니다.
또, page 조차 붙을필요가 있을까란 생각이 들어요.

로그인 페이지로 예를 들면 Login이면 충분하다고 생각해요

contestPage => contest면 충분하지 않을까란 생각입니다.

hedaerOfContestPage
=> contestHeader
제 개인적인 의견입니다.

이런 식의 구성이 되야 하지 않을까요

저도 동의합니다. ContestHeader 가 좋은 것 같네요

dev2820 · 2023-11-20T02:48:45Z

frontend/src/components/ContestPage.tsx

-    <div>
-      <Header title={'test'} problemName={targetProblem.title} />
+    <main>
+      <HeaderOfContestPage title={'test'} problemName={targetProblem.title} />


저도 동의합니다. ContestHeader 가 좋은 것 같네요

dev2820 · 2023-11-20T02:51:56Z

frontend/src/components/HeaderOfContestPage.tsx

+    <div>
+      <TextForHeader title={title} problemName={problemName}></TextForHeader>
+    </div>


헤더라면 header 태그를 쓰는게 좋아보여요.

대회 헤더라서 페이지 헤더와 구분되어야한다면 헤더라는 이름보다 ContestSummary 같은 개념으로 보는게 좋지 않을까요?

그리고 title 정보와 problemName 정보를 하나의 자료구조로 묶어서 보내는게 좋지 않을까 생각됩니다.

dev2820 · 2023-11-20T02:54:02Z

frontend/src/components/ProblemTitle.tsx

+      <div className={bottomLineOfTitle}>
+        <div>{problemName}</div>
+      </div>


bottomLine은 border-bottom으로 처리할 수 있을 것 같은데 어떤가요?
그리고 내부의 <div>{problemName}</div> 도 구지 div로 안 감싸도 될 것 같아요

- hast-util-to-jsx-runtime/lib/components 라이브러리 설치 - ContestPage 파일 구조 변경 - 디렉토리 구조 변경

mahwin

LGTM 😎

dmdmdkdkr added 2 commits November 17, 2023 00:15

feat: 헤더 및 문제제목 컴포넌트 작성

6442949

- 프로젝트명, 대회 이름, 문제 이름을 표시하는 헤더 컴포넌트를 작성했습니다. - 대회 이름을 표시하는 문제 제목 컴포넌트를 작성했습니다.

refactor: 데이터 전달 수정

33d25e1

기존에 하드코딩 되어있던 데이터를 수정하였습니다.

dmdmdkdkr added the FE fe 개발 label Nov 16, 2023

dmdmdkdkr requested review from dev2820 and mahwin November 16, 2023 15:25

dmdmdkdkr self-assigned this Nov 16, 2023

refactor: 상수 분리

2b96feb

컴포넌트 선언문 안에 선언되어있던 상수를 선언문 바깥으로 분리했습니다.

dev2820 reviewed Nov 17, 2023

View reviewed changes

mahwin reviewed Nov 17, 2023

View reviewed changes

dmdmdkdkr requested review from dev2820 and mahwin November 18, 2023 06:38

mahwin reviewed Nov 18, 2023

View reviewed changes

dev2820 reviewed Nov 20, 2023

View reviewed changes

dmdmdkdkr added 2 commits November 20, 2023 17:27

refactor: 디렉토리 구조 변경

7dc3133

refactor: 디렉토리 구조 변경

765078a

- hast-util-to-jsx-runtime/lib/components 라이브러리 설치 - ContestPage 파일 구조 변경 - 디렉토리 구조 변경

dmdmdkdkr requested review from dev2820 and mahwin November 20, 2023 08:42

mahwin approved these changes Nov 20, 2023

View reviewed changes

dev2820 approved these changes Nov 20, 2023

View reviewed changes

Co-authored-by: dev2820 <[email protected]>

4f24a60

dmdmdkdkr merged commit 55868f2 into fe-dev Nov 20, 2023

dmdmdkdkr deleted the 19-대회-정보-표시 branch November 20, 2023 08:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#19] 대회 정보 표시 #44

[#19] 대회 정보 표시 #44

dmdmdkdkr commented Nov 16, 2023

dev2820 Nov 17, 2023

dmdmdkdkr Nov 18, 2023

dev2820 Nov 17, 2023

mahwin Nov 17, 2023

dev2820 Nov 17, 2023

mahwin Nov 17, 2023

mahwin Nov 17, 2023

mahwin Nov 17, 2023

dmdmdkdkr Nov 18, 2023

dev2820 Nov 17, 2023

mahwin Nov 17, 2023

dmdmdkdkr Nov 18, 2023

dev2820 Nov 17, 2023

dmdmdkdkr Nov 18, 2023

dev2820 Nov 17, 2023

dmdmdkdkr Nov 18, 2023

mahwin Nov 17, 2023 •

edited

Loading

dmdmdkdkr Nov 18, 2023

mahwin Nov 18, 2023

dev2820 Nov 20, 2023

dev2820 Nov 20, 2023

dev2820 Nov 20, 2023

dev2820 Nov 20, 2023

mahwin left a comment

		import TextForHeader from './TextForHeader';
		interface Props {

[#19] 대회 정보 표시 #44

[#19] 대회 정보 표시 #44

Conversation

dmdmdkdkr commented Nov 16, 2023

한 일

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

mahwin Nov 17, 2023 • 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

Choose a reason for hiding this comment

mahwin left a comment

Choose a reason for hiding this comment

mahwin Nov 17, 2023 •

edited

Loading