[SP2] 메인페이지 뒤집히는 카드 효과 만들기 #294
Conversation
SeojinSeojin
requested review from
solar3070 and
f0rever0
and removed request for
solar3070
| backContent: React.ReactNode; | ||
| }; | ||
|
|
||
| function FlippableCard({ frontContent, backContent }: FlippableCardProps) { |
There was a problem hiding this comment.
export default function FlippableCard; 컨벤션으로 수정 부탁드려요!
| return ( | ||
| <S.Wrapper> | ||
| {OWN_ORGANIZATION_LIST.map((organization) => ( | ||
| <OwnOrganizationCard key={organization.nameEng} {...organization} /> |
There was a problem hiding this comment.
{...organization} 이렇게 풀면은 OwnOrganizationCardProps 값들이 nameKor(nameKor={nameKor}에서 nameKor가 같은 단어라서 생략?) 이런식으로 바로 넘겨지는 건가요?!
코드가 깔끔하네요!!
There was a problem hiding this comment.
아마 이것이 계속 새 객체를 생성한다는 논란이 있었던 것 같은데 일단 이렇게 하였습니다 ..!!!!
|
|
||
| export default function OwnOrganizationCard(props: OwnOrganizationCardProps) { | ||
| return ( | ||
| <FlippableCard |
There was a problem hiding this comment.
FlippableCard를 main의 내부의 컴포넌트가 아니라 공통 컴포넌트로 분리한 이유가 무엇인가요?
제가, 작업한 코드 구조를 폴더화 했다면
OwnOragnization/FilppableCard/FrontContent , OwnOragnization/FilppableCard/BackContent 이렇게 폴더구조로 짜서 FilppableCard에서 FrontContent, BackContent 컴포넌트를 불러왔을 것 같아요!
그래서 이유가 궁금합니다!!
There was a problem hiding this comment.
혹시 다른 페이지에서도 FlippableCard를 쓰고 싶을 까봐 입니다 ..!!
그래서 prop으로 받는 값도 최대한 단순하게 해두었어용
| ); | ||
| } | ||
|
|
||
| export default function OwnOrganizationCard(props: OwnOrganizationCardProps) { |
There was a problem hiding this comment.
props 전개하는 코드로 수정해야할 것 같아요!
| backSideBg: string; | ||
| }; | ||
|
|
||
| function Footer(props: Pick<OwnOrganizationCardProps, 'nameKor' | 'nameEng'>) { |
There was a problem hiding this comment.
props 전개하는 코드로 수정해야할 것 같아요!
피그마 사진이 픽스되었으나 border-radius 없는걸로 쓰고 싶어서 요청을 해둔 상태입니다!! |
| color: ${colors.white}; | ||
| border: 1px solid rgba(255, 255, 255, 0.5); | ||
| background: rgba(117, 97, 79, 0.33); | ||
| backdrop-filter: blur(2.949289321899414px); | ||
| border-radius: 14px; | ||
| color: #fff; |
| type FlippableCardProps = { | ||
| frontContent: React.ReactNode; | ||
| backContent: React.ReactNode; | ||
| }; |
There was a problem hiding this comment.
저희 Props 정의할 때 type, interface도 통일하면 좋을 것 같네요!
| backContent: React.ReactNode; | ||
| }; | ||
|
|
||
| const useFlippableCard = () => { |
There was a problem hiding this comment.
@solar3070
이런 식으로 훅으로 빼서, desktop이 아니면 다 click으로 작동하도록 하였습니다!!!
There was a problem hiding this comment.
앗 아뇨 한 번 클릭해서 뒤집은 후에 다시 클릭하면 앞면으로 돌아오면 좋을 것 같아서요..!
There was a problem hiding this comment.
toggle 로 넣어줘서 다시 클릭하면 앞면으로 뒤집힙니다..!!
There was a problem hiding this comment.
아아 코드 수정하셨군요!! 위 커밋을 놓쳤네요.. 확인했습니다!!!
|
12/8 작업이 덜 된 부분
|
| @media (max-width: 768px) { | ||
| width: max(416px, min(100vw - 200px, 512px)); | ||
| height: calc(max(432px, min(100vw - 200px, 512px)) * 0.84); | ||
| } |
There was a problem hiding this comment.
내맘대로 디자인 ..........
시험끝난후 그린언니와 진중한 대화가 필요합니다..
|
@f0rever0 @solar3070 일단 (피그마 상의) 작업은 모두 하였고, 레이아웃 세밀한 조정은 추후에 그리드 속에 폭 넣어진 후에 해야 할 듯합니다..!! |
|
알겠습니다! 세심한 디자인은 레이아웃에 넣고 해야할 것 같네요!! 고생하셨어요~!! |
Summary
메인페이지에 뒤집히는 카드 효과를 제작합니다.
Screenshot
Comment
추후에 해야 하는 작업
다른 카드들도 일단 이런 식으로만 작업한 후에 -> 전체 레이아웃 관한 작업하면 어떨까 싶은데 어떠신가요?