Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[점심 뭐 먹지 미션 Step 2] 윤생(이윤성) 미션 제출합니다. #64

Merged
merged 26 commits into from
Apr 18, 2023
+374 −389
Merged

[점심 뭐 먹지 미션 Step 2] 윤생(이윤성) 미션 제출합니다. #64

Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
c362b95
refactor(Drawer): 함수형 컴포넌트로 변경
2yunseong Apr 14, 2023
01ac77c
refactor(Header): 함수형 컴포넌트로 변경
2yunseong Apr 14, 2023
b7f2109
refactor(Select): 함수형 컴포넌트로 변경
2yunseong Apr 14, 2023
e8a33ce
refactor(MainHeader): 함수형 컴포넌트로 변경
2yunseong Apr 14, 2023
3ad22ae
refactor(RestaurantDetailDrawer): 함수형 컴포넌트로 변경
2yunseong Apr 14, 2023
310aee7
refactor(RestaurantItem): 함수형 컴포넌트로 변경
2yunseong Apr 14, 2023
14bd03b
refactor: 메서드 분리
2yunseong Apr 14, 2023
136ee31
refactor: type 명 구체화
2yunseong Apr 14, 2023
86a387b
refactor(RestaurantList): 함수형 컴포넌트로 변경
2yunseong Apr 14, 2023
0aeafd1
refactor(SelectContainer): 함수형 컴포넌트로 변경
2yunseong Apr 14, 2023
53cbdda
refactor(App): 함수형 컴포넌트로 변경
2yunseong Apr 14, 2023
18be4e1
fix: 페이지 title 수정
2yunseong Apr 14, 2023
a4a480f
refactor: 로컬스토리지 로직 Custom Hook 으로 변경
2yunseong Apr 15, 2023
1a170e6
chore: typescript config 설정
2yunseong Apr 15, 2023
d753b1b
style: 코드 포맷팅
2yunseong Apr 15, 2023
6dae5e2
refactor: type import 명시
2yunseong Apr 15, 2023
597a866
refactor: 의미에 맞는 변수명 변경
2yunseong Apr 15, 2023
02bb074
chore: trivial
2yunseong Apr 15, 2023
fc22a75
refactor: 디렉터리 네이밍 변경
2yunseong Apr 17, 2023
f4eb604
refactor: React.FC 선언 제거
2yunseong Apr 17, 2023
139223d
style: 코드 포맷팅
2yunseong Apr 17, 2023
6c20b21
feat: 필터링을 해주는 로직 Hook으로 분리
2yunseong Apr 17, 2023
af8939e
refactor: type 분리
2yunseong Apr 17, 2023
aa8a891
refactor: 프로퍼티 네이밍 변경
2yunseong Apr 17, 2023
5429324
feat: 웹 접근성 개선
2yunseong Apr 17, 2023
ab48c82
feat: default로 전달하는 함수 네이밍
2yunseong Apr 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>점심 뭐먹지?</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
36 changes: 18 additions & 18 deletions public/mockData.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
{
"id": "0",
"title": "가 한식",
"distance": "5",
"estimateTime": "5",
"category": "한식",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"link": "www.naver.com"
Expand All @@ -11,22 +11,22 @@
"id": "1",
"title": "나 한식",
"category": "한식",
"distance": "10",
"estimateTime": "10",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"link": "www.google.com"
},
{
"id": "2",
"title": "다 한식",
"category": "한식",
"distance": "15",
"estimateTime": "15",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"link": "www.google.com"
},
{
"id": "3",
"title": "가 중식",
"distance": "5",
"estimateTime": "5",
"category": "중식",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"link": "www.naver.com"
Expand All @@ -35,22 +35,22 @@
"id": "4",
"title": "나 중식",
"category": "중식",
"distance": "10",
"estimateTime": "10",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"link": "www.google.com"
},
{
"id": "5",
"title": "다 중식",
"category": "중식",
"distance": "15",
"estimateTime": "15",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"link": "www.google.com"
},
{
"id": "6",
"title": "가 일식",
"distance": "5",
"estimateTime": "5",
"category": "일식",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"link": "www.naver.com"
Expand All @@ -59,22 +59,22 @@
"id": "7",
"title": "나 일식",
"category": "일식",
"distance": "10",
"estimateTime": "10",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"link": "www.google.com"
},
{
"id": "8",
"title": "다 일식",
"category": "일식",
"distance": "15",
"estimateTime": "15",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"link": "www.google.com"
},
{
"id": "9",
"title": "가 아시안",
"distance": "5",
"estimateTime": "5",
"category": "아시안",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"link": "www.naver.com"
Expand All @@ -83,22 +83,22 @@
"id": "10",
"title": "나 아시안",
"category": "아시안",
"distance": "10",
"estimateTime": "10",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"link": "www.google.com"
},
{
"id": "11",
"title": "다 아시안",
"category": "아시안",
"distance": "15",
"estimateTime": "15",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"link": "www.google.com"
},
{
"id": "12",
"title": "가 양식",
"distance": "5",
"estimateTime": "5",
"category": "양식",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"link": "www.naver.com"
Expand All @@ -107,22 +107,22 @@
"id": "13",
"title": "나 양식",
"category": "양식",
"distance": "10",
"estimateTime": "10",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"link": "www.google.com"
},
{
"id": "14",
"title": "다 양식",
"category": "양식",
"distance": "15",
"estimateTime": "15",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"link": "www.google.com"
},
{
"id": "15",
"title": "가 기타음식",
"distance": "15",
"estimateTime": "15",
"category": "기타",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"link": "www.naver.com"
Expand All @@ -131,15 +131,15 @@
"id": "16",
"title": "나 기타음식",
"category": "기타",
"distance": "10",
"estimateTime": "10",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"link": "www.google.com"
},
{
"id": "17",
"title": "다 기타음식",
"category": "기타",
"distance": "5",
"estimateTime": "5",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",
"link": "www.google.com"
}
Expand Down
90 changes: 37 additions & 53 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import React from 'react';
import React, { useState } from 'react';

import type { FilterOption } from './util/type.js';
import MainHeader from './MainHeader.tsx';
import RestaurantList from './RestaurantList.tsx';
import SelectContainer from './SelectContainer.tsx';
Expand All @@ -8,62 +10,44 @@ import {
DEFAULT_SORTING,
NO_SELECT_ID,
} from './util/constant.ts';
import { FilterOption } from './util/type.js';

type AppState = {
filterOptions: FilterOption;
isOpenDrawer: boolean;
drawerSelectId: number;
};
class App extends React.Component<{}, AppState> {
constructor(props) {
super(props);
this.state = {
filterOptions: {
category: DEFAULT_CATEGORY,
sorting: DEFAULT_SORTING,
},
isOpenDrawer: false,
drawerSelectId: NO_SELECT_ID,
};

this.onChangeFilterOptions = this.onChangeFilterOptions.bind(this);
this.onToggleDrawer = this.onToggleDrawer.bind(this);
}
const App: React.FC = () => {
const [isOpenDrawer, setIsOpenDrawer] = useState<boolean>(false);
const [drawerSelectId, setDrawerSelectId] = useState<number>(NO_SELECT_ID);
const [filterOptions, setFilterOptions] = useState<FilterOption>({
category: DEFAULT_CATEGORY,
sorting: DEFAULT_SORTING,
});

onChangeFilterOptions(e: React.ChangeEvent<HTMLSelectElement>) {
this.setState({
filterOptions: {
...this.state.filterOptions,
[e.target.name]: e.target.value,
},
const onChangeFilterOptions = (
e: React.ChangeEvent<HTMLSelectElement>
): void => {
setFilterOptions({
...filterOptions,
[e.target.name]: e.target.value,
});
}
};

onToggleDrawer(id: number = NO_SELECT_ID) {
this.setState({
isOpenDrawer: !this.state.isOpenDrawer,
drawerSelectId: id,
});
}
const onToggleDrawer = (id: number = NO_SELECT_ID): void => {
setDrawerSelectId(id);
setIsOpenDrawer(!isOpenDrawer);
};
Comment on lines +31 to +34
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 부분과 const [isOpenDrawer, setIsOpenDrawer] = useState<boolean>(false); 해당 상태는 App 에서가 아닌 RestaurantDetailDrawer 안에서 정의해도 되지않을까요? 최대한 App은 가벼운게 좋습니당!

Copy link
Author

@2yunseong 2yunseong Apr 17, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Drawer를 열고 닫는 부분이 같은 계층에 있는 RestraurantItem과 RestaurantDetailDrawer 둘다에 있어서 다음과 같이 주었습니다!
state 끌어올리기를 참고했어요!!

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아하 RestraurantItem, RestaurantDetailDrawer 둘다 필요하군요! 이해했습니다


render() {
return (
<div className="App">
<MainHeader />
<SelectContainer onChangeFilterOptions={this.onChangeFilterOptions} />
<RestaurantList
filterOptions={this.state.filterOptions}
onToggleDrawer={this.onToggleDrawer}
/>
<RestaurantDetailDrawer
isOpenDrawer={this.state.isOpenDrawer}
onToggleDrawer={this.onToggleDrawer}
restaurantId={this.state.drawerSelectId}
/>
</div>
);
}
}
return (
<div className="App">
<MainHeader />
<SelectContainer onChangeFilterOptions={onChangeFilterOptions} />
<RestaurantList
filterOptions={filterOptions}
onToggleDrawer={onToggleDrawer}
/>
<RestaurantDetailDrawer
isOpenDrawer={isOpenDrawer}
onToggleDrawer={onToggleDrawer}
restaurantId={drawerSelectId}
/>
</div>
);
};

export default App;
16 changes: 7 additions & 9 deletions src/MainHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import React from 'react';
import Header from './common/Header.tsx';

class MainHeader extends React.Component {
render() {
return (
<Header>
<h1 className="gnb__title text-title">점심 뭐 먹지</h1>
</Header>
);
}
}
const MainHeader: React.FC = () => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

타입으로 React.FC 를 주는건 좋지 않습니다!
이유는 크게는 defaultProps 를 쓰지 못하는 이유가 있는데, 관련해서 읽을만한 것들 첨부해드리겠습니다 :)
https://yceffort.kr/2022/03/dont-use-react-fc
https://velog.io/@yena1025/FunctionComponent-FC-%EC%82%AC%EC%9A%A9-%EC%A4%84%EC%9D%B4%EA%B8%B0-24jhm0wp

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

헉 읽을 것 까지.. 감사합니다 케빈 🙇

return (
<Header>
<h1 className="gnb__title text-title">점심 뭐 먹지</h1>
</Header>
);
};

export default MainHeader;
Loading