[4주차-ts] Search BAR with TS #7
Conversation
|
오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :) |
|
|
||
| return ( | ||
| <Styled.Root> | ||
| {/* Header에 뭐를 props로 내려주고 있나요? */} |
| id?: number; | ||
| place_url?: string; | ||
| place_name?: string; | ||
| road_address_name?: string; | ||
| distance?: string; | ||
| phone?: string; |
There was a problem hiding this comment.
옵셔널로 안주니까 에러가 떠서 옵셔널로 줬어유!
| const GlobalStyle = createGlobalStyle` | ||
| ${reset} | ||
| @font-face { | ||
| font-family: 'ParkYongJun'; |
| * { | ||
|
|
||
| box-sizing: border-box; | ||
| font-family: 'ParkYongJun'; |
There was a problem hiding this comment.
근데 안돼서 새로 지정해줬어유 ... ㅈㅔ 컴의 문제일수도 있심다
week4_ts/src/mixxin/index.ts
Outdated
| export const flexColumnCenter = ` | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-contents: center; | ||
| align-items: center; | ||
| `; |
There was a problem hiding this comment.
이것도 스타일링이니 아예 theme에 추가하는 게 어떨까 싶습니다!!
mixxin 폴더의 의미가 궁금해요!
There was a problem hiding this comment.
넵!! theme에 추가하겠습니다!
| //useRef의 타입을 어떻게 정의해여!?!!? | ||
| const searchRef = useRef<HTMLInputElement>(null); | ||
| const position = useRef<Coordinates>({ longitude: 0, latitude: 0 }); |
There was a problem hiding this comment.
잘한 것 같은데,!! 관련 아티클 첨부합니당
useRef 의 3가지 정의와 사용법(링크)
week4_ts/src/components/Header.tsx
Outdated
| const Styled = { | ||
| Root: styled.header` | ||
| ${flexColumnCenter} | ||
| & h1 { | ||
| margin-bottom: 2rem; | ||
| } | ||
| `, | ||
| SearchWrapper: styled.div` | ||
| display: flex; | ||
| gap: 2rem; | ||
| `, | ||
| }; | ||
|
|
||
| const MyLocationButton = styled.button` | ||
| // 왜 색 안바뀌지 |
There was a problem hiding this comment.
Styled 로 묶은 SC 와 아닌 SC 의 차이점이 있는지 궁금합니다!
There was a problem hiding this comment.
주관적인 기준으로 여러 컴포넌트들을 묶으면 styled로 하게 했는데, 스타일링을 위한 부분은 Styled를 붙이는게 가장 좋은 것일까요?
week4_ts/src/components/Header.tsx
Outdated
| const MyLocationButton = styled.button` | ||
| // 왜 색 안바뀌지 | ||
| color: ${(props: StHeaderProps) => | ||
| props.isChoice ? theme.colors.skyblue : theme.colors.lightgreen}; | ||
| `; |
There was a problem hiding this comment.
왜 색 안 바뀌는지는 모르겠지만,,, 아래처럼도 SC props 타입 지정이 가능합니다!
제네릭으로 선언함으로써, 이후 css에서도 isChoice를 사용할 때마다 타입지정을 하지 않아도 됩니다
| const MyLocationButton = styled.button` | |
| // 왜 색 안바뀌지 | |
| color: ${(props: StHeaderProps) => | |
| props.isChoice ? theme.colors.skyblue : theme.colors.lightgreen}; | |
| `; | |
| const MyLocationButton = styled.button<{ isChoice: boolean }>` | |
| color: ${({ isChoice }) => | |
| isChoice ? theme.colors.skyblue : theme.colors.lightgreen}; | |
| `; |
There was a problem hiding this comment.
const colors = {
black: "#333333",
white: "#ffffff",
lemonchiffon: "#fffacd",
gray: "#6B7280",
skeleton: "#808080",
skyblue: "87ceeb",
lightgreen: "99f299",
};# 붙여주세요,,,,,
week4_ts/src/pages/Main/index.tsx
Outdated
| background-color: lemonchiffon; | ||
|
|
||
| & h1 { | ||
| margin-top: 2rem; | ||
| } | ||
| `, |
There was a problem hiding this comment.
해당 하는 & h1 을 쓰기보다는 h1 태그마다 css 선언을 해주는 것이
이후에 문제가 생겼을 때 원인 규명(유지보수)에 더 좋다고 생각합니다
중복 제거 등으로 정말로 필요할 때, & > h1 자식 선택자 정도로 사용하는 것이 필요해 보여요
| // 이건 대체 뭔뜻일까 | ||
| if (isSearch) return new Array(10).fill(1).map((_, i) => <Skeleton key={i} />); |
There was a problem hiding this comment.
Main 페이지에서 선언ㅇ한 isSearch state로
Header 컴포넌트에서 (handleIsSearch) 검색을 시작할 때 true로, 끝날 때 false로 변경시켜줍니다
그래서 검색 중일 때 스켈레톤 ui 를 보여줌으로써 로딩 중을 표시해주는 코드가 아닐까 생각합니다
| const searchInput = searchRef.current; | ||
| searchInput.disabled = !searchInput.disabled; | ||
| setIsLocation((prev) => !prev); | ||
| if (searchRef.current !== null) { |
There was a problem hiding this comment.
| if (searchRef.current !== null) { | |
| if (searchRef.current) |
로 해도 될것같은느낌~.~
week4_ts/src/components/Header.tsx
Outdated
| //useRef의 타입을 어떻게 정의해여!?!!? | ||
| const searchRef = useRef<HTMLInputElement>(null); |
| id?: number; | ||
| place_url?: string; | ||
| place_name?: string; | ||
| road_address_name?: string; | ||
| distance?: string; | ||
| phone?: string; |
|
오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :) |
|
오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :) |
|
오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :) |
|
오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :) |
✨ 구현 기능 명세
🎁 PR Point
😭 어려웠던 점
😎 구현 결과물