[feat] 레벨 페이지 구현 by soyun-git121 · Pull Request #40 · Leets-Official/SEEAT-FE

soyun-git121 · 2025-07-31T15:23:34Z

🔍 관련된 이슈

closed [Feat] #39 레벨페이지 구현 #39

📝 작업 내용

레벨페이지 구현

📸 스크린샷

🚨 이슈

레벨페이지 작업만 먼저 올려용

📣 리뷰 요구사항

✅ 체크리스트

코드가 정상적으로 컴파일되나요?
merge할 브랜치의 위치를 확인했나요?
Label을 지정했나요?
리뷰어를 지정했나요?

sispo3314

수고 많으셨습니다!! 빠르게 구현해주셧네요🙌 리뷰 남겨드린 부분은 한 번 더 확인부탁드릴게요!

sispo3314 · 2025-07-31T16:10:21Z

src/pages/my/Level.tsx

+export default function LevelPage() {
+  return (
+    <div className="px-4 py-3 bg-gray-900 text-white min-h-screen font-suit">
+      <HeaderBasic>{null}</HeaderBasic>


그런데 HeaderBasic이랑 그냥 Header 컴포넌트랑 차이점이 있나요?? 혹시 아이콘 때문에 HeaderBasic을 따로 분리해서 사용하시는 거라면 그냥 헤더 컴포넌트에서도 showLike=false, showBookmark=false를 prop으로 받으면 보이지 않도록 만들어두었습니다!

제가 좀 전에 pr 올렸는데 헤더 컴포넌트 리팩토링을 했씁니다..
그래서 아마 나중에 충돌날거라서.. 우선 헤더 없애거나 주석처리 해두는게 좋을 것 같아요!!

넵 알겠습니당

sispo3314 · 2025-07-31T16:15:15Z

src/pages/my/Level.tsx

+const levels = [
+  {
+    level: 1,
+    title: '레벨 1 이름',
+    condition: 'seeat 가입하기',
+    Icon: LevelCharacter1,
+  },
+  {
+    level: 2,
+    title: '레벨 2 이름',
+    condition: '후기 2개 작성하기\n좋아요 5개 누르기',
+    Icon: LevelCharacter2,
+  },
+  {
+    level: 3,
+    title: '레벨 3 이름',
+    condition: '후기 10개 작성하기\n좋아요 25개 누르기',
+    Icon: LevelCharacter3,
+  },
+  {
+    level: 4,
+    title: '레벨 4 이름',
+    condition: '후기 40개 작성하기\n좋아요 100개 누르기',
+    Icon: LevelCharacter4,
+  },


이 부분은 파일 분리해주시는 게 코드 가독성에 좋을 것 같습니다!

저도 같은 의견임니당 constants 폴더로 분리해주시면 좋을것같아요

sispo3314 · 2025-07-31T16:18:07Z

src/pages/my/Level.tsx

+                <span className="text-gray-500 shrink-0">달성 조건</span>
+                <div className="flex flex-col">
+                  {condition.split('\n').map((line, index) => (
+                    <span key={index} className="text-red-300">
+                      {line}


"달성 조건" 텍스트와 조건 텍스트 사이에 간격이 필요할 것 같습니다! 피그마 상으로는 8px이라고 되어있습니당

sispo3314 · 2025-07-31T16:19:53Z

src/pages/my/Level.tsx

+      </div>
+
+      {/* 구분선 */}
+      <div className="w-full border-t border-[#424242] mt-6 mb-6" />


구분선도 길이 맞춰주세요! 🙌🙌

넵 반영해서 수정하겠습니당

sispo3314 · 2025-07-31T16:21:53Z

src/pages/my/Level.tsx

+            <div className="w-[120px] h-[120px] bg-[#4242424D] rounded-lg flex items-center justify-center shrink-0">
+              <Icon className="w-[100px] h-[100px]" />
+            </div>


그리고 여기서부터 시작되는 레벨 달성 조건카드는 별도 컴포넌트로 분리하면 코드가 더 간결해질 것 같습니당🙌

dalzzy

수고하셨습니다~~ 코멘트확인부탁드릴게욤

dalzzy · 2025-07-31T16:40:34Z

src/pages/my/Level.tsx

+export default function LevelPage() {
+  return (
+    <div className="px-4 py-3 bg-gray-900 text-white min-h-screen font-suit">
+      <HeaderBasic>{null}</HeaderBasic>


제가 좀 전에 pr 올렸는데 헤더 컴포넌트 리팩토링을 했씁니다..
그래서 아마 나중에 충돌날거라서.. 우선 헤더 없애거나 주석처리 해두는게 좋을 것 같아요!!

dalzzy · 2025-07-31T16:45:07Z

src/pages/my/Level.tsx

+const levels = [
+  {
+    level: 1,
+    title: '레벨 1 이름',
+    condition: 'seeat 가입하기',
+    Icon: LevelCharacter1,
+  },
+  {
+    level: 2,
+    title: '레벨 2 이름',
+    condition: '후기 2개 작성하기\n좋아요 5개 누르기',
+    Icon: LevelCharacter2,
+  },
+  {
+    level: 3,
+    title: '레벨 3 이름',
+    condition: '후기 10개 작성하기\n좋아요 25개 누르기',
+    Icon: LevelCharacter3,
+  },
+  {
+    level: 4,
+    title: '레벨 4 이름',
+    condition: '후기 40개 작성하기\n좋아요 100개 누르기',
+    Icon: LevelCharacter4,
+  },


저도 같은 의견임니당 constants 폴더로 분리해주시면 좋을것같아요

dalzzy · 2025-07-31T17:09:53Z

src/pages/my/Level.tsx

+      {/* 현재 레벨 박스 */}
+      <div className="w-[335px] h-[320px] bg-[#4242424D] rounded-lg p-4 flex flex-col items-center justify-around mt-4 mx-auto">
+
+        {/* ----- ⬇️ [수정] 캐릭터를 감싸던 내부 박스 제거 ----- */}
+        <LevelCharacter3 className="w-[150px] h-[150px]" />
+        {/* ----- ⬆️ [수정] 캐릭터를 감싸던 내부 박스 제거 ----- */}
+
+        <p className="text-center">
+          <span className="text-title-1 text-red-400">Lv.3</span>
+          <span className="text-title-4 text-white"> 영화계의 권위자</span>
+        </p>
+
+        <div className="w-[295px] h-[12px] bg-gray-950 rounded-full">
+          <div className="h-full bg-red-300 rounded-full" style={{ width: '45%' }}></div>
+        </div>
+        <p className="text-caption-3 text-gray-300 text-center">
+          다음 레벨까지 할 일은?<br />
+          후기 <span className="text-red-400">00</span>개, 좋아요 <span className="text-red-400">00</span>개 누르기
+        </p>
+      </div>


이 부분은 나중에 API 연결 시 값을 받아와야 할 텐데, 이렇게 하드코딩 해두는 것보다는 컴포넌트로 분리해서 레벨값을 props로 받아둘 수 있게 해두는 게 좋을 것 같아요!
사용자 레벨이 항상 3인 건 아니니까요 !!ㅎㅎ
제 생각에는 MyLevelCard와 같은 컴포넌트로 분리해서, 레벨값을 props로 받아두고 사용하는 방식이 더 좋을 것 같아용
(레벨명도 constants에 정의해둔 값을 쓰면 더 좋을 것 같아요!)

넵 알겠습니당 다른부분들도 수정하겠습니다!

soyun-git121

추가 컴포넌트 완성됐는데 파일문제로 이거 머지되면 pull하고나서 바로 pr올리도록 하겠습니다ㅏㅜㅜ

sispo3314

변경된 부분 모두 확인했습니다!! 리뷰 잘 반영해주신 것 같네요 수고하셨습니당~

✨ feat : 레벨페이지 구현

9e22990

soyun-git121 requested review from dalzzy, eileen4505 and sispo3314 July 31, 2025 15:23

soyun-git121 self-assigned this Jul 31, 2025

soyun-git121 added the 🎨Style 스타일 추가 및 수정 label Jul 31, 2025

soyun-git121 linked an issue Jul 31, 2025 that may be closed by this pull request

[Feat] #39 레벨페이지 구현 #39

Closed

1 task

soyun-git121 added the ✨Feature 새로운 기능 추가 label Jul 31, 2025

🔥 fix : 충돌 수정

ac70310

soyun-git121 changed the title ~~✨ feat : 레벨페이지 구현~~ [feat] 레벨 페이지 구현 Jul 31, 2025

sispo3314 reviewed Jul 31, 2025

View reviewed changes

dalzzy reviewed Jul 31, 2025

View reviewed changes

soyun-git121 added 3 commits August 2, 2025 05:24

♻️ refactor : 컴포넌트,constants 분리

805ee0b

♻️ refactor : 마이페이지 레벨카드 수정

eb290df

🔥 fix : 에러 수정

67a1b99

soyun-git121 commented Aug 1, 2025

View reviewed changes

sispo3314 approved these changes Aug 2, 2025

View reviewed changes

dalzzy approved these changes Aug 2, 2025

View reviewed changes

Merge branch 'develop' into feat/#39/레벨-페이지-구현

7584462

soyun-git121 merged commit 43fdc36 into develop Aug 2, 2025
1 check failed

dalzzy deleted the feat/#39/레벨-페이지-구현 branch August 8, 2025 15:26

Conversation

soyun-git121 commented Jul 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔍 관련된 이슈

📝 작업 내용

📸 스크린샷

🚨 이슈

📣 리뷰 요구사항

✅ 체크리스트

Uh oh!

sispo3314 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!

Choose a reason for hiding this comment

Uh oh!

soyun-git121 Aug 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dalzzy 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!

soyun-git121 left a comment

Choose a reason for hiding this comment

Uh oh!

sispo3314 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

soyun-git121 commented Jul 31, 2025 •

edited

Loading

soyun-git121 Aug 1, 2025 •

edited

Loading