[기능 추가] 스터디 세션 리스트 페이지 구현 #55

ShipFriend0516 · 2024-11-05T15:02:03Z

✅ 체크리스트

코드가 정상적으로 작동하는지 확인했습니다.
주요 변경사항에 대한 설명을 작성했습니다.
코드 스타일 가이드에 따라 코드를 작성했습니다.

🧩 작업 내용

스터디 세션 리스트 페이지 구현
스터디 세션 카드 컴포넌트 구현
tailwind 디자인 시스템 적용

📝 작업 상세 내역

세션 리스트 페이지 구현

디자인 기획서에서 정한 요소들을 tailwind 유틸리티 클래스화하여 재사용하기 쉽도록 설정했다.
전반적인 디테일은 현재 중요하지 않다고 판단하고, 크게크게 구현했다. 추후 리팩토링 예정

세션 카드 컴포넌트 구현

상세 설명: 세션이 열려있는지, 진행 중인지 여부를 상태표시등을 통해 한눈에 보기 쉽게 구현
TODO: 세션이 열려있지만, 가득차 들어갈 수 없는 경우에 다른 표시를 생각해봐야 할 것 같다.

<div
   className={`${sessionStatus === "open" ? "bg-accent-gray" : "bg-primary-active"} 
                           w-6 h-full absolute left-0 top-0`}
   aria-label={"상태표시등"}
/>

💬 다음 작업 또는 논의 사항

시그널링 서버가 구현되기 전에 UI 작업하고 있으면 좋을 것 같아서 진행.
다음으로는 webRTC 구현을 목표로 할 예정

🐥 리뷰 받고 싶은 포인트

디테일적인 부분은 빠르게 프로토타입을 만들기 위해 살짝 날려서 구현했습니다.
가독성이나 일관성 측면에서 리뷰해주시면 좋을 것 같습니다. 🤓

- 메인 색상으로 그린 컬러 - 기본 색상으로 grayscale 컬러 - 타이포그래피 설정 - 기존 CSS 제거

- UI만 구현한 상태

yiseungyun

디자인 시스템 구축한거 너무 좋아요. 👍
컴포넌트 폴더 이름은 components로 하셨군요! 나중에 만들다가 많은 컴포넌트가 생기게 되면 그 때 최적의 구조를 찾아보면 좋을거 같아요. 보통 정해놓고 많이하시는데, 저희는 일단 기능 개발 먼저 해보고 저희한테 최적인 구조를 함께 찾아보면 좋을거 같습니다. ☃️

yiseungyun · 2024-11-06T03:50:27Z

frontend/tailwind.config.js

+    extend: {
+      colors: {
+        grayscale: {
+          'white-alt': 'rgba(255, 255, 255, 0.7)',
+          white: '#FFFFFF',
+          50: '#F5F7F9',
+          100: '#D2DAE0',
+          200: '#879298',
+          300: '#6E8091',
+          400: '#5F6E76',
+          500: '#4B5966',
+          black: '#14212B',
+        },
+        primary: {
+          light: {
+            DEFAULT: '#e6f9f1',    // rgb(230, 249, 241)
+            hover: '#d9f5e9',      // rgb(217, 245, 233)
+            active: '#b0ebd2',     // rgb(176, 235, 210)
+          },
+          DEFAULT: '#01bf6f',      // rgb(1, 191, 111)
+          hover: '#01ac64',        // rgb(1, 172, 100)
+          active: '#019959',       // rgb(1, 153, 89)
+          dark: {
+            DEFAULT: '#018f53',    // rgb(1, 143, 83)
+            hover: '#017343',      // rgb(1, 115, 67)
+            active: '#005632',     // rgb(0, 86, 50)
+          },
+          darker: '#004327',       // rgb(0, 67, 39)
+        },
+        accent: {
+          gray: {
+            DEFAULT: '#dfddd5'
+          }
+        }
+      },
+      borderColor: {
+        skin: {
+          bold: 'var(--color-border-bold)',
+          default: 'var(--color-border-default)',
+        },
+      },


정우님 피그마 foundation 탭에 기존에 있던 값으로 설정하셨는데, 어제 저녁에 최종적으로 수정한 거로 반영하면 될거 같아요!

아 넴넴 저걸로 수정해볼게요

twalla26

css foundation이랑 카드 컴포넌트 작업 하셨꾼요!! 고생하셨습니다!! 👍 👍

blu3fishez

수고하셨습니다!

퍼블리싱 하는 속도가 저보다 훨씬 빠르시네요.. 저도 HTML CSS 코드를 빨리 작성해보고 싶습니다 ㅋㅋ ㅠㅠㅠ

제가 언급 드린 부분 확인해주시고 머지하시면 좋을 것 같습니다!

개인적으로 state가 로드 되지 않았을 때 생기는 공통작업이 없는가?를 생각해보시면 좋을 것 같습니다.

세션 목록에 관한 부분도 중복이 있으니 아예 함수로 빼보시는 것도 좋을 것 같네요!

현재 진행중/공개중 인 세션들의 상태가 자주 바뀔 텐데 이런 부분에 관한 렌더링 고민도 정말 중요할 것 같네요. 이렇게 매번 map 을 돌려야할까.. 최적화 할 수 있는 방법은 없을까 말이죠.

일단 돌아가게 만들어라 라는 룰에 따라 이번에는 그냥 머지하셔도 괜찮을 것 같습니다! 다만 한번 읽어주시고 머지해주시면 감사할 것 같습니다~

blu3fishez · 2024-11-06T10:41:57Z

frontend/src/pages/SessionListPage.tsx

+              {sessionList.length <= 0 ? (
+                <li>아직 아무도 세션을 열지 않았어요..!</li>
+              ) : (
+                sessionList.map((session) => {
+                  return (
+                    session.sessionStatus === "open" && (
+                      <SessionCard
+                        key={session.id}
+                        sessionStatus={session.sessionStatus}
+                        category={session.category}
+                        title={session.title}
+                        host={session.host.nickname}
+                        questionListId={1}
+                        participant={session.participant}
+                        maxParticipant={session.maxParticipant}
+                      />
+                    )
+                  );
+                })


이부분 한번 따로 분리해보는게 어떨까요?

감사합니다! ㅎㅎ 저도 몰랐는데 UI 구현 속도가 좀 빠르긴한거 같더라구요 tailwind에 익숙해져서 그런 것 같습니다 ㅋㅋ

이부분 반영해서 함수로 분리했습니다! 감사합니다

blu3fishez · 2024-11-06T10:43:35Z

frontend/src/pages/SessionListPage.tsx

+          {listLoading ? (
+            <>loading</>
+          ) : (
+            <>
+              {sessionList.length <= 0 ? (
+                <li>아직 아무도 세션을 열지 않았어요..!</li>
+              ) : (
+                sessionList.map((session) => {
+                  return (
+                    session.sessionStatus === "close" && (
+                      <SessionCard
+                        key={session.id}
+                        sessionStatus={session.sessionStatus}
+                        category={session.category}
+                        title={session.title}
+                        host={session.host.nickname}
+                        questionListId={1}
+                        participant={session.participant}
+                        maxParticipant={session.maxParticipant}
+                      />
+                    )
+                  );
+                })
+              )}
+            </>


이 부분은 해당 파일 윗부분과 코드 중복이 살짝 있는 것 같습니다

들여쓰기가 많이 깊어지니 이 부분과 위에 제가 언급한 부분은 분리가 되면 괜찮을 것 같네요~

blu3fishez · 2024-11-06T10:43:54Z

frontend/src/App.tsx

    iceServers: [
      {
-        urls: "stun:stun.l.google.com:19302",
+        urls: process.env.REACT_STUN_SERVER ?? "stun:stun.l.google.com:19302",


.env 로 가리신거 좋습니다!! 따봉 3개

blu3fishez · 2024-11-06T10:44:47Z

frontend/src/index.css

-  font-size: 3.2em;
-  line-height: 1.1;
-}



지우신 것 좋습니다~

다만 한가지 예측이 힘들 것 같은데, 해당 파일 윗 부분에 anchor 태그에 관한 style이 남아있는데 이건 의도하신 걸까요?

스타일링에 방해되는 스타일만 지우느라 남아있는 것 같습니다

ShipFriend0516 and others added 7 commits November 5, 2024 20:28

feat: Tailwind config에 foundation 설정

5433f4d

- 메인 색상으로 그린 컬러 - 기본 색상으로 grayscale 컬러 - 타이포그래피 설정 - 기존 CSS 제거

feat: 세션 리스트 페이지 라우팅 설정

6213aca

feat: 세션 리스트 카드 컴포넌트 레이아웃 지정

e16de49

chore: React-icons 라이브러리 설치,

44a5c30

style: 테일윈드 config 설정

d9f8d70

chore: 폴더구조 변경

259a12b

feat: 세션 리스트 페이지와 세션 카드 컴포넌트 구현

c2e1562

- UI만 구현한 상태

ShipFriend0516 requested review from blu3fishez, twalla26 and yiseungyun November 5, 2024 15:02

ShipFriend0516 added the ✨ Feature label Nov 5, 2024

yiseungyun approved these changes Nov 6, 2024

View reviewed changes

This comment was marked as duplicate.

Sign in to view

twalla26 approved these changes Nov 6, 2024

View reviewed changes

blu3fishez approved these changes Nov 6, 2024

View reviewed changes

ShipFriend0516 merged commit 8960dfd into boostcampwm-2024:dev Nov 6, 2024

ShipFriend0516 self-assigned this Nov 7, 2024

ShipFriend0516 deleted the feature/session-list-page branch December 5, 2024 16:50

[기능 추가] 스터디 세션 리스트 페이지 구현 #55

[기능 추가] 스터디 세션 리스트 페이지 구현 #55

Uh oh!

Conversation

ShipFriend0516 commented Nov 5, 2024

✅ 체크리스트

🧩 작업 내용

📝 작업 상세 내역

세션 리스트 페이지 구현

세션 카드 컴포넌트 구현

💬 다음 작업 또는 논의 사항

🐥 리뷰 받고 싶은 포인트

Uh oh!

yiseungyun left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment was marked as duplicate.

Uh oh!

twalla26 left a comment

Choose a reason for hiding this comment

Uh oh!

blu3fishez left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants