GETP-146 feature: 피플 상세 조회 페이지 퍼블리싱

[chae-won-shin]

✨ 구현한 기능

• 피플 상세 조회 퍼블리싱

📢 논의하고 싶은 내용

1. 정보 조회 페이지라 이 부분이 편집 불가능한 텍스트박스여야 할 것 같아서 input 컴포넌트를 사용하지 못했습니다. 그래서 새로 만들었는데 앞으로 비슷한 정보 조회 페이지 만들 때마다 계속 쓰일 것 같아서 따로 공통컴포넌트로 빼고 싶은데 어느 폴더에 넣어야 할지 모르겠어서... 일단 peopleDetailPage.style.tsx에 넣음... 어디로 옮기면 좋을까요

2. 비슷한 이유로 기술스택 뱃지도 옆에 X 버튼이 없어야 하는데 이건 재사용할 수 있을 것 같아서 TechstackBadge 컴포넌트를 살짝 수정했습니다. 혹시나 충돌날까봐 말해둠

3. 모바일 버전 이런 느낌 어떠신지(이건 디자인팀과도 같이 이야기해봐야할 것 같습니다!)

4. useMediaQuery 쓸 때

   const isMobile = useMediaQuery({
       query: {mobile},
   });

   이렇게 breakpoint.ts에 있는 mobile 가져다 쓰고 싶어서 요래조래 해봤는데 안돼서 string으로 박았습니다... 방법 아는 사람

🎸 기타

-

[toothlessdev]

1. 정보 조회 페이지라 이 부분이 편집 불가능한 텍스트박스여야 할 것 같아서 input 컴포넌트를 사용하지 못했습니다. 그래서 새로 만들었는데 앞으로 비슷한 정보 조회 페이지 만들 때마다 계속 쓰일 것 같아서 따로 공통컴포넌트로 빼고 싶은데 어느 폴더에 넣어야 할지 모르겠어서... 일단 peopleDetailPage.style.tsx에 넣음... 어디로 옮기면 좋을까요

기본적으로 html property 에 있는 disabled 속성을 사용하는것도 좋아보입니다

2. 비슷한 이유로 기술스택 뱃지도 옆에 X 버튼이 없어야 하는데 이건 재사용할 수 있을 것 같아서 TechstackBadge 컴포넌트를 살짝 수정했습니다. 혹시나 충돌날까봐 말해둠

확인했습니다!

3. 모바일 버전 이런 느낌 어떠신지(이건 디자인팀과도 같이 이야기해봐야할 것 같습니다!)

저는 태블릿일때 저렇게 레이아웃 구성하고 모바일일때 프로필과 해시태그 컨테이너를 column 방향으로 배치하도록 설정해두었어요 (#44)

4. useMediaQuery 쓸 때

breakpoint.ts 에 있는 해당 미디어 쿼리 다음과 같이 쓰면 됩니다

import {mobile} from "@/style/breakpoint.ts"

export const StyledComponent = styled.div`
    ${mobile} {
        // 모바일 스타일
    }
`;

[toothlessdev]

LGTM!