[FE] feature/#301 내 정보 페이지 구현 #309
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,161 @@ | ||
| import { Fragment, useEffect, useState } from 'react'; | ||
| import { styled } from 'styled-components'; | ||
| import { getApi } from '../../../apis/getApi'; | ||
| import { MyInfoPinType, MyInfoTopicType } from '../../../types/MyInfo'; | ||
| import PinCard from '../../PinCard'; | ||
| import TopicCard from '../../TopicCard'; | ||
|
|
||
| const data = [ | ||
| { | ||
| id: 1, | ||
| name: '준팍의 또 토픽', | ||
| image: 'https://map-befine-official.github.io/favicon.png', | ||
| pinCount: 3, | ||
| bookmarkCount: 0, | ||
| isBookmarked: false, | ||
| updatedAt: '2023-08-14T13:15:40.15966098', | ||
| }, | ||
| { | ||
| id: 2, | ||
| name: '준팍의 두번째 토픽', | ||
| image: 'https://map-befine-official.github.io/favicon.png', | ||
| pinCount: 5, | ||
| bookmarkCount: 0, | ||
| isBookmarked: false, | ||
| updatedAt: '2023-08-14T13:15:40.15966888', | ||
| }, | ||
| { | ||
| id: 3, | ||
| name: '준팍의 또 토픽', | ||
| image: 'https://map-befine-official.github.io/favicon.png', | ||
| pinCount: 3, | ||
| bookmarkCount: 0, | ||
| isBookmarked: false, | ||
| updatedAt: '2023-08-14T13:15:40.15966098', | ||
| }, | ||
| { | ||
| id: 4, | ||
| name: '준팍의 두번째 토픽', | ||
| image: 'https://map-befine-official.github.io/favicon.png', | ||
| pinCount: 5, | ||
| bookmarkCount: 0, | ||
| isBookmarked: false, | ||
| updatedAt: '2023-08-14T13:15:40.15966888', | ||
| }, | ||
| ]; | ||
|
|
||
| const data2 = [ | ||
| { | ||
| id: 1, | ||
| name: '매튜의 산스장', | ||
| address: '지번 주소', | ||
| description: '매튜가 사랑하는 산스장', | ||
| latitude: 37.0, | ||
| longitude: 127.0, | ||
| }, | ||
| { | ||
| id: 2, | ||
| name: '매튜의 안갈집', | ||
| address: '지번 주소', | ||
| description: '매튜가 두번은 안 갈 집', | ||
| latitude: 37.0, | ||
| longitude: 127.0, | ||
| }, | ||
| { | ||
| id: 3, | ||
| name: '매튜의 산스장', | ||
| address: '지번 주소', | ||
| description: '매튜가 사랑하는 산스장', | ||
| latitude: 37.0, | ||
| longitude: 127.0, | ||
| }, | ||
| { | ||
| id: 4, | ||
| name: '매튜의 안갈집', | ||
| address: '지번 주소', | ||
| description: '매튜가 두번은 안 갈 집', | ||
| latitude: 37.0, | ||
| longitude: 127.0, | ||
| }, | ||
| ]; | ||
|
|
||
| interface MyInfoListProps { | ||
| isTopic: boolean; | ||
| } | ||
|
|
||
| const MyInfoList = ({ isTopic }: MyInfoListProps) => { | ||
| const [myInfoTopics, setMyInfoTopics] = useState<MyInfoTopicType[]>([]); | ||
| const [myInfoPins, setMyInfoPins] = useState<MyInfoPinType[]>([]); | ||
|
|
||
| const getMyInfoListFromServer = async () => { | ||
| if (isTopic) { | ||
| const serverMyInfoTopics = await getApi<MyInfoTopicType[]>( | ||
| 'default', | ||
| '/members/pins', | ||
| ); | ||
| setMyInfoTopics(serverMyInfoTopics); | ||
| } | ||
|
|
||
| if (!isTopic) { | ||
| const serverMyInfoPins = await getApi<MyInfoPinType[]>( | ||
| 'default', | ||
| '/members/topics', | ||
| ); | ||
| setMyInfoPins(serverMyInfoPins); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| // getMyInfoListFromServer(); | ||
| }, []); | ||
|
|
||
| if (!isTopic) | ||
| return ( | ||
| <MyInfoListWrapper> | ||
| {data2.map((pin, index) => { | ||
| return ( | ||
| index < 3 && ( | ||
| <Fragment key={pin.id}> | ||
| <PinCard | ||
| pinId={pin.id} | ||
| pinTitle={pin.name} | ||
| pinAddress={pin.address} | ||
| pinDescription={pin.description} | ||
| /> | ||
| </Fragment> | ||
| ) | ||
| ); | ||
| })} | ||
| </MyInfoListWrapper> | ||
| ); | ||
|
|
||
| if (!data) return <></>; | ||
|
There was a problem hiding this comment. 이 early return 이 !isTopic 보다 위에 있으면 좋을 것 같아요~~ There was a problem hiding this comment. 와우 제가 캐치 하지 못한 부분을 잡아주시다니 바로 반영하겠습니닷 !!! |
||
|
|
||
| return ( | ||
| <MyInfoListWrapper> | ||
| {data.map((topic, index) => { | ||
| return ( | ||
| index < 3 && ( | ||
| <Fragment key={topic.id}> | ||
| <TopicCard | ||
| topicId={topic.id} | ||
| topicImage={topic.image} | ||
| topicTitle={topic.name} | ||
| topicUpdatedAt={topic.updatedAt} | ||
| topicPinCount={topic.pinCount} | ||
| /> | ||
| </Fragment> | ||
| ) | ||
| ); | ||
| })} | ||
| </MyInfoListWrapper> | ||
| ); | ||
| }; | ||
|
|
||
| const MyInfoListWrapper = styled.ul` | ||
|
|
||
| display: grid; | ||
| grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); | ||
| grid-row-gap: ${({ theme }) => theme.spacing[5]}; | ||
| `; | ||
|
|
||
| export default MyInfoList; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import { styled } from 'styled-components'; | ||
| import Flex from '../common/Flex'; | ||
| import Text from '../common/Text'; | ||
| import Box from '../common/Box'; | ||
| import Space from '../common/Space'; | ||
| import { lazy, Suspense } from 'react'; | ||
| import TopicCardListSeleton from '../TopicCardList/TopicCardListSeleton'; | ||
| import Button from '../common/Button'; | ||
| import MyInfoList from './MyInfoList'; | ||
|
|
||
| interface MyInfoContainerProps { | ||
| containerTitle: string; | ||
| containerDescription: string; | ||
| routeWhenSeeAll: () => void; | ||
| } | ||
|
|
||
| const MyInfoContainer = ({ | ||
| containerTitle, | ||
| containerDescription, | ||
| routeWhenSeeAll, | ||
| }: MyInfoContainerProps) => ( | ||
| <section> | ||
| <Flex $justifyContent="space-between" $alignItems="flex-end"> | ||
| <Box> | ||
| <Text | ||
| color="black" | ||
| $fontSize="extraLarge" | ||
| $fontWeight="bold" | ||
| tabIndex={0} | ||
| > | ||
| {containerTitle} | ||
| </Text> | ||
| <Space size={0} /> | ||
| <Text | ||
| color="gray" | ||
| $fontSize="default" | ||
| $fontWeight="normal" | ||
| tabIndex={1} | ||
| > | ||
| {containerDescription} | ||
| </Text> | ||
| </Box> | ||
|
|
||
| { | ||
| <SeeAllButton variant="primary" onClick={routeWhenSeeAll}> | ||
| 전체 보기 | ||
| </SeeAllButton> | ||
| } | ||
| </Flex> | ||
|
|
||
| <Space size={4} /> | ||
|
|
||
| <Suspense fallback={<TopicCardListSeleton />}> | ||
| {containerTitle === '나의 핀' ? ( | ||
| <MyInfoList isTopic={false} /> | ||
| ) : ( | ||
| <MyInfoList isTopic={true} /> | ||
| )} | ||
| </Suspense> | ||
| </section> | ||
| ); | ||
|
|
||
| const SeeAllButton = styled(Button)` | ||
| cursor: pointer; | ||
| `; | ||
|
|
||
| export default MyInfoContainer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
재사용의 관점에서는 지금도 충분히 좋습니다만, MyInfoList 컴포넌트는 껍데기 UI만 유지하고 props 받은 값들을 렌더링할 수 있도록 하는 것도 괜찮아보여요.
Fetching 로직도 분기처리하고 있기 때문에 위 상태들을 부모로 올리고 fetching 로직을 분리해서 실행시킨 후 set 된 값들을 props로 이 컴포넌트에 전달하는 것이 어떨까 하는 생각도 드네요.
아니면 아예 topic, pin 이렇게 나누는 것도 고려해볼만 하네욥~~ 물론 제 얇은 지식이기에 내일 다시 보면 생각 바뀌어서 이 코멘트를 삭제할 수도 있을거 같아요 🤪
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<세인과 페어 프로그래밍 완료. 나중에 리팩토링 하기로 결정!>