Feat/#218 medley #220

NYeonK · 2023-03-08T17:33:28Z

브랜치명, 브랜치 알맞게 설정
Reviewer, Assignees, Label, Milestone, Issue(PR 작성 후에) 붙이기
PR이 승인된 경우 해당 브랜치는 삭제하기

📌 내용

MainPage의 Medley 기능을 구현했습니다.

⭐ 추가해야 하는 부분 ⭐

medley 그라데이션 따로 정리
DB 반영되면, 작동 확인
modal 애니메이션 넣기 + modal 작동 확인😥

📌 질문할 부분

Medley Content를 누르면, preview로 관련 정보가 넘어가야 하는데 좋은 방법이 있을까요!!
코드 맨 하단의 {isModalOpen && <MedleyPreview closePreview={toggleModal} />}에 props로 전달하고 싶었는데,
자리를 옮기면 에러가 계속 나네요,,?😥😥

          <St.MedleyContainer isClicked={isModalOpen}>
            {medleyLists &&
              medleyLists.data.map((medleyLists) => {
                return (
                  <St.MedleyWrapper key={medleyLists._id} onClick={toggleModal}>
                    <St.ContentTag>{medleyLists.sticker}</St.ContentTag>
                    <St.ContentTitle>{medleyLists.title}</St.ContentTitle>
                  </St.MedleyWrapper>
                );
              })}
          </St.MedleyContainer>
          {isModalOpen && <MedleyPreview closePreview={toggleModal} />}

아래 코드에서 item은 사용안하는데, 제거하면 오류가 나는 이유를 아실까요?-?

                  {medleyLists.previewCards.map((item: object, i: number) => {
                    return <St.CardWrapper key={i}>{medleyLists.previewCards[i].content}</St.CardWrapper>;
                  })}

📸 스크린샷

KakaoTalk_20230309_061218095.mp4

joohaem

항상 예상을 뛰어넘는🔥 ........ 나연이의 실력🔥🔥🔥🔥
최고다🦾🦾
앞으로 많이 부탁할게!!!!!!!!!!!!!!!!! 고생해쒀

백그라운드 로직
이건 내가 생각 해봤는데, const 상수에 Map 객체를 사용해서
key: 특정 메들리의 _id 값 / value: 백그라운드 칼라값
으로 구성해서 이 객체를 불러다가 넣어주면 될 것 같아!!!!
그러면 가영이가 원하는 디자인적인 요소의 분리도 이루어지고, 클라에서도 유연성 있게 설계가 될 것 같당
로딩 로직
이건 내가 api들 다 swr로 치환하고, 로딩 로직들 Suspense로 치환하는 작업을 하려고 해!
이번주 내로 해볼게 !!!

joohaem · 2023-03-09T01:02:50Z

src/@components/MainPage/Medley/MedleyPreview/index.tsx

+  const moveMedley = (id: string) => {
+    navigate(routePaths.CardCollection, { state: { type: "medley", medleyId: id } });
+    setSliderIdx(0);
+  };


이거를 useMedleyLists 훅 안에 넣어놔도 되겠다!
다른 것들도 다 그래야겠네 하하하~.~

string으로 직접 써주는 type 값을 const 상수로 빼내는 게 좋을 것 같다!

setSliderIdx(0) 일 경우에, 안써도 되도록 하는 방안이 뭐가 있을까?

moveMedley -> moveCardCollectionFromMedley 같은 이름이 어떨지 ???

src/@components/MainPage/Medley/MedleyPreview/index.tsx

src/@components/MainPage/Medley/index.tsx

src/@components/MainPage/Medley/MedleyPreview/index.tsx

src/@components/MainPage/Medley/index.tsx

joohaem · 2023-03-09T01:17:09Z

src/@components/MainPage/Medley/MedleyPreview/index.tsx

+interface MedleyPreviewProps {
+  closePreview: () => void;
+}


❗ 질문1

프리뷰 컴포넌트게서 메들리리스트의 정보가 모두 필요한가요?
아니면 한 메들리의 프리뷰 정보가 필요한가요??

카드의 인덱스가 필요함 -> medleyIdx: number;

특정 메들리의 프리뷰 정보가 필요함 -> {...previewCards} 를 prop으로 받음. _id: string, content: string

특정 메들리의 정보도 필요 -> title: string, ...

이것들을 다 props 로 받아주면 될 것 같고-

/* 폴더 구조 */ Medley └── MedleyPreiveiw └── MedleyCard

구조가 위와 같은데, MedleyPreiveiw는 MedleyCard에서 사용합니당.

그래서 Medley에서 api 연결하구 props 전달해주려고 하는데,
MedleyCard에서는 preview 정보가 필요없거든요! 그래도 props로 전부 받아서 넘겨줘야 할까요?-?

아니면 MedleyPreiveiw에서 api 한 번 더 쓰는 방법이 더 나을지 궁금합니다.!

api 통신을 한 번 더 하는 건 정말 불필요한 작업같고,

부분 전역적으로 사용하는 context를 사용할 수도 있겠지만
뎁스가 길지도 않아서, prop drilling 하는 게 나아보여요-

네엡 감사합니당:D

joohaem · 2023-03-09T01:20:00Z

src/@components/MainPage/Medley/MedleyPreview/index.tsx

+    <St.Root>
+      <St.Container ref={outClickCloserRef}>


Modal 공통 컴포넌트 사용해주세요!

그리고 이건 제안인데, 메뉴바처럼 애니메이션이 추가되면 좋을 것 같아. 어떄??

Modal이 있었네 맞네ㅎㅎ 바루 반영할게요!

joohaem · 2023-03-09T01:22:43Z

src/@components/MainPage/Medley/index.tsx

+            {medleyLists &&
+              medleyLists.data.map((medleyLists) => {
+                return (
+                  <St.MedleyWrapper key={medleyLists._id} onClick={toggleModal}>
+                    <St.ContentTag>{medleyLists.sticker}</St.ContentTag>
+                    <St.ContentTitle>{medleyLists.title}</St.ContentTitle>
+                  </St.MedleyWrapper>
+                );
+              })}


❗ 질문1

{isModalOpen && <MedleyPreview closePreview={toggleModal} />} 를 이 안에 넣어줘야겠지?

return 안의 요소들을 MedleyCard 로 따로 빼내고,
그 안에서 useModal 훅을 사용해서 각 카드에 독립적인 모달을 만들어주면 될 것 같은데!

어떤 에러가 나는지 잘 모르겠어. 자세히 설명해줄래?

웅 거마워:D 오빠가 말한대러 다시 해볼게!! 왜 빼낼 생각을 안했으까😂😂

NYeonK · 2023-03-09T19:36:13Z

@joohaem HELP ME😂

Modal 적용했는데, 사진과 같이 뜹니다,,,! 어느 부분잉 문제일까여ㅠ
Modal theme이 두가지가 있는데, 이번에는 그레이 색상이거둔여,,! 그럼 theme에 추가해야 될까요?

joohaem · 2023-03-10T02:49:50Z

스크린샷 보고는 알 수 없어요... 트러블 슈팅을 하고 어느 부분에서 문제가 생기는 것 같은데, 왜 이렇게 될까요? 정도로 질문해주시면 제가 좀 편할 것 같습니다,,
네! 추가해주세요!! 너무 다르다싶으면 분리해도 좋아요

?. 카드 주제 제목으로 오는 데이터들에 줄바꿈 표시도 함께 오나요?? 온다면 pre-wrap 해줘야 할 것 같아요!!

NYeonK · 2023-03-10T03:04:00Z

아하 한 번 더 확인하고 다시 질문해보겠습니다! 알려주셔서 감사해요 (｡˃́⌔˂̀｡)

카드 주제 제목들은 줄바꿈 요청한 게 아직 반영이 안 돼서, 이후에 확인해보겠습니다!!

joohaem · 2023-03-12T12:39:17Z

남은 것

- props drilling 해서 프리뷰 컴포넌트 금방
- 서버 데이터 (줄바꿈 등) 적용 확인
- Modal 손보기 해봐야 앎
- 애니메이션

NYeonK added 8 commits March 8, 2023 23:59

[ feat ] api type 추가

a56c758

[ feat ] MainPage에 Medly Component 추가

3345bde

[ feat ] Medley Component 생성 및 UI 구현

6dd09d8

[ design ] Medly style 적용

2e43fce

[ feat ] theme.ts에 new color 추가

4009a58

[ feat ] add Medley LocationType

572d28e

[ feat ] add medley cardList api

f129fce

[ feat ] medley api 연결 완료

8805665

NYeonK linked an issue Mar 8, 2023 that may be closed by this pull request

[ Main ] 메인 페이지 메들리 기능 구현 #218

Closed

7 tasks

NYeonK self-assigned this Mar 8, 2023

NYeonK added Feature 나연 labels Mar 8, 2023

NYeonK added this to the 🦄 스프린트2 🦄 milestone Mar 8, 2023

NYeonK marked this pull request as draft March 8, 2023 17:35

NYeonK added 7 commits March 9, 2023 03:01

[ design ] theme colors -> newColors

e6bb8ca

[ feat ] MedleyPreview ui 구현 및 서버 연결

74c4e20

[ design ] MedleyPreview style 완성

e583e43

[ feat ] Medley Content 클릭 시, Preview Modal 띄우기

e794757

[ feat ] Preview에 close 버튼 추가 및 카드 보기 클릭 시, 카드뷰로 이동

48e3c43

[ design ] add closebtn style

b063190

[ refactor ] medly -> medley 폴더명 수정

7ddca58

NYeonK marked this pull request as ready for review March 8, 2023 21:13

NYeonK requested a review from joohaem March 8, 2023 21:14

joohaem requested changes Mar 9, 2023

View reviewed changes

NYeonK added 6 commits March 10, 2023 01:02

[ refactor ] 불필요한 코드 제거

beb08d5

[ design ] Medley Card 사이에 여백 주기

5539040

[ refactor ] MedleyCard로 map() 분리

10a8e5d

[ refactor ] MedleyCard Componenet 분리

0ba7cb0

[ refactor ] Modal Compoenent 사용

e756f71

[ refactor ] medley button rename

5b47bf5

joohaem mentioned this pull request Mar 12, 2023

Feat/#223 스토리북 삭제 및 파일 분리 #224

Merged

3 tasks

joohaem merged commit 5b47bf5 into release/1.3 Mar 12, 2023

Feat/#218 medley #220

Feat/#218 medley #220

Uh oh!

Conversation

NYeonK commented Mar 8, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 내용

⭐ 추가해야 하는 부분 ⭐

📌 질문할 부분

📸 스크린샷

Uh oh!

joohaem left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

NYeonK Mar 10, 2023 • 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

joohaem Mar 9, 2023 • 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

NYeonK commented Mar 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

joohaem commented Mar 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

NYeonK commented Mar 10, 2023

Uh oh!

joohaem commented Mar 12, 2023 • edited by NYeonK Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

NYeonK commented Mar 8, 2023 •

edited

Loading

NYeonK Mar 10, 2023 •

edited

Loading

joohaem Mar 9, 2023 •

edited

Loading

NYeonK commented Mar 9, 2023 •

edited

Loading

joohaem commented Mar 10, 2023 •

edited

Loading

joohaem commented Mar 12, 2023 •

edited by NYeonK

Loading