Conversation
| import { css } from "@emotion/react"; | ||
| import closeIcon from "../../assets/ic-close.svg"; | ||
|
|
||
| const cardStyle = css` |
There was a problem hiding this comment.
별도의 styles.js 파일로 분리하는 것도 좋아보입니다~!
| } | ||
| }, []); | ||
|
|
||
| const updateRecentSearches = (username) => { |
There was a problem hiding this comment.
최근 검색어 관리 로직이 컴포넌트 내에 직접 구현되어 있습니다. 해당 로직을 재사용 가능한 커스텀 훅(예를 들어 useRecentSearches)으로 분리하면, 코드 중복도 줄이고 관심사를 분리하여 단일 책임 원칙도 지키고 더욱 추상화가 가능하여 추후에 더 복잡한 시스템 구현에 도움이 많이 될 것 같습니다!
| setIsGameOver(false); | ||
| }; | ||
|
|
||
| const handleSubmit = () => { |
There was a problem hiding this comment.
handleSubmit 함수가 너무 길어 보이며 여러 책임(입력 검증, 게임 로직 처리, 상태 업데이트)을 가지고 있습니다.
이를 validateInput, checkGameResult, updateGameState 등의 더 작은 함수로 분리하면 코드 가독성과 유지보수성이 향상될 것 같습니다!
| function Input({ input, setInput, onSubmit }) { | ||
| const [warning, setWarning] = useState(""); | ||
|
|
||
| const handleChange = (e) => { |
There was a problem hiding this comment.
현재 입력 유효성 검사 로직이 구현되어 있는데 BaseballContainer.jsx의 handleSubmit 함수(line: 61-64)에서도 유사한 검증을 수행하고 있어 보입니다.
유효성 검사 로직을 한 곳으로 통합하거나, 별도의 유틸리티 함수로 분리하여 재사용하는 방식으로 리팩토링하면 유지보수와 관리에 더욱 좋을 것 같습니다!
| @@ -0,0 +1,7 @@ | |||
| import React from "react"; | |||
|
|
|||
| function Message({ text }) { | |||
There was a problem hiding this comment.
Message 컴포넌트가 비록 매우 간단하지만, 별도의 파일로 분리되어 있어 관심사 분리가 잘 구현되어 있다고 생각됩니다. 이 부분은 개인적으로 매우 좋다고 생각됩니다~!
| import GithubProfileCard from "./GithubProfileCard"; | ||
| import RecentSearchList from "./RecentSearchList"; | ||
|
|
||
| function GithubSearchContainer() { |
There was a problem hiding this comment.
GithubSearchContainer 컴포넌트가 조금 크다고 생각됩니다. 현재 검색 입력 처리, API 호출, 최근 검색어 관리 등의 여러 책임을 가지고 있는데, 이를 SearchForm, SearchResults 등 더 작은 컴포넌트로 분리하고, 상태 관리 로직은 커스텀 훅으로 분리하여 (하나의 컴포넌트는 하나의 책임만 가질 수 있도록 한다면) 코드 가독성과 유지보수성이 매우 향상될 것 같습니다!
| `; | ||
|
|
||
| function App() { | ||
| const [activeTab, setActiveTab] = useState("github"); |
There was a problem hiding this comment.
activeTab의 초기값으로 "github" 문자열이 하드코딩되어 있는데 이 값은 이후에 조건부 렌더링에서도 또 사용되고 있습니다. 상수로 분리하여 활용한다면 관리 측면에서 더욱 좋을 것 같습니다
| <button | ||
| css={buttonStyle(activeTab === "github")} | ||
| onClick={() => onTabChange("github")} | ||
| disabled={activeTab === "github"} |
There was a problem hiding this comment.
마찬가지로 여기도 탭 이름이 "github", "baseball"으로 하드코딩되어 있는데 해당 값들은 App.jsx에서도 사용되므로 일관성을 유지하기 위해 상수로 분리하거나 props로 전달받는 것도 좋을 것 같습니다!
| localStorage.setItem("recentSearches", JSON.stringify(limitedList)); | ||
| }; | ||
|
|
||
| const getUserInfo = async (username) => { |
There was a problem hiding this comment.
API 호출 로직이 컴포넌트 내에 직접 구현되어 있는데 별도의 API 서비스 모듈이나 커스텀 훅으로 분리하면 재사용성과 관리 측면에서 더욱 좋을 것 같습니다!
| const handleSearch = () => { | ||
| getUserInfo(searchInput.trim()); | ||
| setSearchInput(""); | ||
| }; |
There was a problem hiding this comment.
username.trim()은 getUserInfo 안에서 처리하는 게 다른 곳에서 getUserInfo를 호출할 때 유효성 측면에서도 안전할 것 같습니다!
3 participants
🤙🏻 구현 기능 명세
💡 기본 과제
헤더
숫자야구 게임
2.1 Input
2.2 Message(사용자의 입력값에 대한 정보를 출력)
2.3 List(게임 진행 상황을 출력)
깃허브 검색 기능
3.1 Input
3.2 Card
3.3 최근 검색어
🔥 심화 과제
숫자야구 게임
깃허브 검색 기능
깃허브 검색 userInfo status에 따른 분기처리
공유과제
제목:
링크 첨부 :
🚀 내가 새로 알게 된 점
🤔 구현 과정에서의 어려웠던/고민했던 부분
⏳ 소요 시간
6h🤳🏻 구현 결과물
숫자 야구 게임
깃허브 검색