feat : implement leaderboard component #17

SamTheKorean · 2024-10-18T04:20:30Z

No description provided.

SamTheKorean · 2024-10-18T04:30:28Z

@sounmind 테크 리드님! 질문있습니다. 에반님이 미리 names 배열을 만들어주셔서 data와 css도 추가해서 대강 만들고 있는데, 티켓 내용처럼 css나 data는 일절 넣지 않고 html만 이용해서 프레임을 만드는게 좋을까요?

SamTheKorean · 2024-10-18T19:30:59Z

요건 선재님 pr참고해서 바꿔보겠습니다.

SamTheKorean · 2024-10-18T20:16:12Z

src/main.tsx

@@ -14,11 +14,11 @@ const router = createBrowserRouter([
    errorElement: <ErrorPage />,
  },
  {
-    path: "/members/:username/progress",
+    path: "/members/progress",


달레님과 초기 셋업 pr에서 나눈 대화를 보고 바꿔봤습니다.

이 PR의 이 커밋 반영할 예정이라, 이거 먼저 봐주시겠어요?!

sounmind · 2024-10-18T20:17:34Z

테크 리드님! 질문있습니다. 에반님이 미리 names 배열을 만들어주셔서 data와 css도 추가해서 대강 만들고 있는데, 티켓 내용처럼 css나 data는 일절 넣지 않고 html만 이용해서 프레임을 만드는게 좋을까요?

넵 아직 디자인이 나온 것이 아니기 때문에 아주 간단하게만 만들어주시면 될 것 같습니다.
확실한 요구사항만 반영해주세요!

SamTheKorean · 2024-10-18T20:17:54Z

amend 후 force push해서 commit을 정리하고 싶었는데 amend가 안되는 오류가 생겨서 해결해보다가 시간관계로 우선은 올렸습니다..

sounmind · 2024-10-18T20:18:23Z

amend 후 force push해서 commit을 정리하고 싶었는데 amend가 안되는 오류가 생겨서 해결해보다가 시간관계로 우선은 올렸습니다..

오잉 무슨 오류가 생겼을까요?

SamTheKorean · 2024-10-18T20:18:53Z

지워도 계속 생성되네요...

SamTheKorean · 2024-10-18T20:20:12Z

따로 열린 터미널도 없고 COMMIT_EDITMS 저 파일도 계속 지워봤는데 지속적으로 생성되네요. 처음보는 오류입니다. 재부팅은 안해봤습니다.

src/components/leaderboard/leaderboard.test.tsx

sounmind

이후에 실제 데이터를 불러올 수 있는 기능이 리더보드 컴포넌트에 적용된다면, 컴포넌트도 테스트도 높은 확률로 바뀌어야 하겠네요. 일단 뼈대를 잡는다는 것에 의미가 있겠습니다! 고생하셨습니다 🙇‍♂️

Sunjae95

데이터까지 고려하여 queryclient까지 적용하셨군요
수고하셨습니다 :)

DaleSeo · 2024-10-25T20:13:34Z

src/components/leaderboard/index.tsx

지난 모임에서 폴더 구조 논의할 때 index.tsx 파일을 쓰지 않기로 하지 않았던가요?

DaleSeo · 2024-10-25T20:28:28Z

src/components/leaderboard/leaderboard.tsx

-        Leaderboard
-      </h1>
+    <main>
+      <h1>Leaderboard</h1>


<main> 안에 <h1>을 넣는 것은 일반적인 HTML 구조에서 벗어나는 것 같습니다.

보통 스크린 리더 사용자를 위해서 아래와 같이 많이 구성합니다.

<header> <h1>Leaderboard</h1> </header> <main>  </main> <footer>  </footer>

전체 레이아웃과 헤더를 담당해줄 컴포넌트가 필요해보이네요. 이번 모임 안건으로 넣겠습니다.

예시 제공과 설명 감사합니다! 피드백 반영해서 고쳐보겠습니다!

html 구조 같은 경우에는 main에서 div로 바꿨습니다! 다만 피드백을 듣고 공부하는 과정에서 궁금증이 생겨서 질문드립니다.

h1이 main에 들어는게 일반적이지 않다는 것은 어떤 맥락에서 말씀하신 건지 완전하게 이해가 안됩니다! w3schools 과 mdn 모두 main을 사용하는 예시에서는 h1이 main안에 있고, 직관적으로도 메인 컨텐츠안에 h1이 있는 것 자체만으로 이상하다고 느껴지지는 않아서요. 관련해서 검색해봐도 납득이 되는 레퍼런스가 없어서 혹시 제가 어떤 부분을 놓치고 있는지 궁금해서 질문드립니다! https://www.w3schools.com/tags/tag_main.asp, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main

간단한 웹페이지라면 <h1>을 <main> 안에 넣어도 무방합니다. 하지만 그렇게 했을 때 문제점은 시간이 지남에 따라 <main> 영역이 점점 넓어져, 나중에는 웹사이트 전체가 <main> 안에 들어가버리는 현상이 발생합니다. 즉, 메인 컨텐츠를 구분해주는 본연의 역할을 상실하는 것이죠.

아하 친절한 설명 감사드립니다! main의 의미가 퇴색될 수 있다는 점 잘 이해가 갔습니다! 리더보드가 전체를 감싸고 있어서 더 문제가 될 수도 있다는 생각이 드네요 ㅎㅎ 감사합니다.

DaleSeo · 2024-10-25T20:31:48Z

src/components/leaderboard/leaderboard.tsx

+      <section aria-labelledby="leaderboard">
+        <h2 id="leaderboard">Members List</h2>


어디서 이런 고급 테크닉을 배우셨나요? ㅋㅋ

달레님한테 배운걸로 기억합니다! 1기 웹사이트 만들 때 접근성 이유로 aria-label을 쓰라고 권장 받아서 이번에 기억나서 mdn 찾아서 썼는데 혹시 쓰임이 문제가 있을까요?

아니, 제가 이런 거까지 벌써 알려드렸던가요? ㅎㅎ 주니어 개발자가 aria-labelledby 이렇게 쓰는 거는 보기 드물어서 여쭤봤네요. 잘 하셨어요! 👏

딱 한가지 아쉬운 점은 이렇게 잘 lableling해놓으시고 정작 테스트에서 활용하시지 않으셨다는 거에요. 다음과 같은 테스트를 추가하시면 더 멋질 것 같습니다. 😁

test("renders the members list section", () => { expect( screen.getByRole("region", { name: /members list/i }), ).toBeInTheDocument(); });

피드백 감사합니다 ㅎㅎ 네네! 달레님 덕분에 접근성을 고려하는 법을 여러 방면으로 배웠습니다! 테스트 피드백도 현재 어느정도로 하면 좋을 지 확신이 안썼는데 예시까지 감사드립니다! 반영해보겠습니다!.

DaleSeo · 2024-10-25T20:33:58Z

src/components/leaderboard/leaderboard.tsx

+  const members = [
+    { name: "DaleSeo", solved: 71, rank: "새싹" },
+    { name: "sounmind", solved: 69, rank: "나무" },
+    { name: "yolophg", solved: 65, rank: "새싹" },
+    { name: "Sunjae95", solved: 63, rank: "나무" },
+    { name: "HC-kang", solved: 62, rank: "나무" },
+    { name: "SamTheKorean", solved: 60, rank: "나무" },


타이핑이 안 되어 있어서 좀 아쉽네요. 흠... 일단 두시죠. 데이터를 제공하는 모듈에서 타입을 제공하면 될 것 같습니다.

DaleSeo · 2024-10-25T20:35:24Z

src/components/leaderboard/leaderboard.tsx

+              <div>푼 문제: {member.solved}</div>
+              <div>
+                <a href={`/progress?member=${member.name}`}>
+                  <button>풀이 보기</button>


"진척률"이나 "진행 상황"으로 하기로 하지 않았던가요?

아 진행상황으로 고치겠습니다!

DaleSeo · 2024-10-26T14:06:41Z

src/components/leaderboard/leaderboard.tsx

#22 (comment) 에 👍 하셨으니 폴더명과 파일명도 대문자로 시작하도록 고치면 어떨까요?

오 고치겠습니다!

SamTheKorean self-assigned this Oct 18, 2024

SamTheKorean marked this pull request as ready for review October 18, 2024 20:15

SamTheKorean requested a review from sounmind October 18, 2024 20:15

SamTheKorean commented Oct 18, 2024

View reviewed changes

SamTheKorean requested review from DaleSeo, Sunjae95 and HC-kang October 18, 2024 20:35

DaleSeo linked an issue Oct 20, 2024 that may be closed by this pull request

리더보드 페이지 구현 (CSS 빼고, Data 빼고) #11

Closed

SamTheKorean marked this pull request as draft October 20, 2024 20:19

SamTheKorean closed this Oct 20, 2024

SamTheKorean force-pushed the sam/create-leaderboard-page branch from 48d9be9 to d150036 Compare October 20, 2024 20:20

SamTheKorean reopened this Oct 20, 2024

SamTheKorean marked this pull request as ready for review October 21, 2024 01:22

SamTheKorean requested a review from a team as a code owner October 21, 2024 01:22

SamTheKorean marked this pull request as draft October 21, 2024 01:33

SamTheKorean force-pushed the sam/create-leaderboard-page branch from e92ad7c to 2f2a93b Compare October 21, 2024 01:37

SamTheKorean changed the title ~~feat : set up the rough frame for leaderboard component~~ feat : implement leaderboard component Oct 21, 2024

SamTheKorean marked this pull request as ready for review October 21, 2024 01:39

SamTheKorean commented Oct 23, 2024

View reviewed changes

src/components/leaderboard/leaderboard.test.tsx Outdated Show resolved Hide resolved

sounmind approved these changes Oct 24, 2024

View reviewed changes

sounmind mentioned this pull request Oct 24, 2024

Feat : Implement progress page component #31

Merged

Sunjae95 approved these changes Oct 25, 2024

View reviewed changes

fix : clean up css not required

2378ee2

SamTheKorean added 4 commits October 25, 2024 12:58

feat : implement leaderboard component

0c95ee6

feat : implement story for leaderboard

7069566

feat : implement unit test for leaderboard

ed91ab0

feat : implement index page

f13112a

SamTheKorean force-pushed the sam/create-leaderboard-page branch from c694ec6 to 116c13f Compare October 25, 2024 17:04

fix : refactor test and remove unused imports

8b0ba70

SamTheKorean force-pushed the sam/create-leaderboard-page branch from 116c13f to 8b0ba70 Compare October 25, 2024 17:09

DaleSeo reviewed Oct 25, 2024

View reviewed changes

DaleSeo mentioned this pull request Oct 25, 2024

feat: Certificate page implement #18

Merged

fix : apply feadback with test cases and htnl structure

f5dec9c

DaleSeo reviewed Oct 26, 2024

View reviewed changes

SamTheKorean force-pushed the sam/create-leaderboard-page branch from 8bf54b1 to de88b35 Compare October 28, 2024 02:18

fix : adjust folder and filenames for convention

969f60d

SamTheKorean force-pushed the sam/create-leaderboard-page branch from de88b35 to 969f60d Compare October 28, 2024 02:28

SamTheKorean merged commit 0865793 into main Oct 28, 2024
1 check passed

SamTheKorean deleted the sam/create-leaderboard-page branch October 28, 2024 02:30

SamTheKorean mentioned this pull request Nov 5, 2024

Panda CSS 의존성 제거 및 기존 코드 수정 #50

Merged

1 task

Sunjae95 mentioned this pull request Nov 27, 2024

feat: Card component #53

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat : implement leaderboard component #17

feat : implement leaderboard component #17

SamTheKorean commented Oct 18, 2024

SamTheKorean commented Oct 18, 2024 •

edited

Loading

SamTheKorean commented Oct 18, 2024

SamTheKorean Oct 18, 2024

sounmind Oct 19, 2024 •

edited

Loading

sounmind commented Oct 18, 2024

SamTheKorean commented Oct 18, 2024

sounmind commented Oct 18, 2024

SamTheKorean commented Oct 18, 2024

SamTheKorean commented Oct 18, 2024

sounmind left a comment

Sunjae95 left a comment

DaleSeo Oct 25, 2024

DaleSeo Oct 25, 2024

DaleSeo Oct 25, 2024 •

edited

Loading

SamTheKorean Oct 25, 2024

SamTheKorean Oct 26, 2024 •

edited

Loading

DaleSeo Oct 26, 2024

SamTheKorean Oct 26, 2024

DaleSeo Oct 25, 2024

SamTheKorean Oct 25, 2024

DaleSeo Oct 25, 2024

SamTheKorean Oct 26, 2024

DaleSeo Oct 25, 2024

DaleSeo Oct 25, 2024

SamTheKorean Oct 25, 2024

DaleSeo Oct 26, 2024

SamTheKorean Oct 26, 2024

		<section aria-labelledby="leaderboard">
		<h2 id="leaderboard">Members List</h2>

feat : implement leaderboard component #17

feat : implement leaderboard component #17

Conversation

SamTheKorean commented Oct 18, 2024

SamTheKorean commented Oct 18, 2024 • edited Loading

SamTheKorean commented Oct 18, 2024

Choose a reason for hiding this comment

sounmind Oct 19, 2024 • edited Loading

Choose a reason for hiding this comment

sounmind commented Oct 18, 2024

SamTheKorean commented Oct 18, 2024

sounmind commented Oct 18, 2024

SamTheKorean commented Oct 18, 2024

SamTheKorean commented Oct 18, 2024

sounmind left a comment

Choose a reason for hiding this comment

Sunjae95 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DaleSeo Oct 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SamTheKorean Oct 26, 2024 • 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

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

SamTheKorean commented Oct 18, 2024 •

edited

Loading

sounmind Oct 19, 2024 •

edited

Loading

DaleSeo Oct 25, 2024 •

edited

Loading

SamTheKorean Oct 26, 2024 •

edited

Loading