176만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
해당 강의의 http://example.codebootcamp.co.kr/api-docs/ http://example.codebootcamp.co.kr/graphql 사이트에 연결할 수 없다고 나옵니다 ㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
$ yarn generate yarn run v1.22.19 $ graphql-codegen ✔ Parse Configuration ⚠ Generate outputs ❯ Generate to ./src/commons/types/generated/typed.ts ✔ Load GraphQL schemas ✔ Load GraphQL documents ✖ Cannot use GraphQLObjectType "BoardReturn" from another module or realm. Ensure that there is only one instance of "graphql" in the node_modules directory. If d… error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. practice로 주소를 변경하고 yarn generate를 실행하는데 자꾸 위와같은 오류가 납니다 ㅠㅠ
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요. 강의 잘 듣고 있습니다. 현재 섹션 1까지 모두 수강하였습니다. 다만 제목과 같이 NicknameEditForm, FollowList 구현부터 웹에 렌더가 되지 않아 진도가 막힌 상태입니다...ㅜㅜ antd나 스타일 컴포넌트의 문제 같아 환경설정도 변경해보고 VS code를 재다운로드하거나 버전별로 테스트 해보기도 했는데 아직 해결 방법을 찾지 못한 상태입니다. 코드 실행한 결과입니다. 회원 정보 카드 옆에 닉네임 수정 폼이나 팔로우 리스트가 생성되어야 하는데 전혀 뜨질 않네요. 혹시 어떤 해결 방법이 있을까요? 아래는 환경과 작성한 코드입니다. { "name": "react-nodebird-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next" }, "author": "kde", "license": "ISC", "dependencies": { "@ant-design/icons": "^5.1.3", "antd": "^4.3.1", "next": "^9.5.5", "prop-types": "^15.8.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-test-renderer": "^17.0.2", "styled-components": "^5.3.11" }, "devDependencies": { "eslint": "^8.41.0", "eslint-plugin-import": "^2.27.5", "eslint-plugin-react": "^7.32.2", "eslint-plugin-react-hooks": "^4.6.0" } } import React, { useCallback } from 'react'; import { Avatar, Button, Card } from 'antd'; const UserProfile = ({ setIsLoggedIn }) => { const onLogOut = useCallback(() => { setIsLoggedIn(false); }, []); return ( <Card actions={[ <div key="twit">짹짹<br/>0</div>, <div key="following">팔로잉<br/>0</div>, <div key="following">팔로워<br/>0</div>, ]} > <Card.Meta avatar={<Avatar>test</Avatar>} title="test" /> <Button onClick={onLogOut}>로그아웃</Button> </Card> ); }; export default UserProfile; import React, { useMemo } from "react"; import { Form, Input } from 'antd'; const NicknameEditForm = () => { return ( <Form style={{ marginBottom: '20px', border: '1px solid #d9d9d9', padding: '20px' }}> <Input.Search addonBefore="닉네임" enterButton="수정"/> </Form> ); }; export default NicknameEditForm; import React from "react"; import PropTypes from 'prop-types'; import { Button, List, Card } from 'antd'; import { StopOutlined } from '@ant-design/icons'; const FollowList = ({ header, data }) => { return ( <List style={{ marginBottom: '20px' }} grid={{ gutter: 4, xs: 2, md: 3 }} size="small" header={<div>{header}</div>} loadMore={<div style={{ textAlign: 'center', margin: '10px 0' }}><Button>더보기</Button></div>} bordered dataSource={data} renderItem={(item) => ( <List.Item style={{ marginTop: '20px' }}> <Card actions={[<StopOutlined key="stop"/>]}> <Card.Meta description={item.nickname}/> </Card> </List.Item> )} /> ); }; FollowList.propTypes = { header: PropTypes.string.isRequired, data: PropTypes.array.isRequired, }; export default FollowList import React, { useState } from 'react'; import PropTypes from 'prop-types'; import Link from 'next/link'; import { Menu, Input, Row, Col } from 'antd'; import UserProfile from '../components/UserProfile'; import LoginForm from '../components/LoginForm'; // const SearchInput = styled(Input.Search)` // vertical-align: middle; // `; const AppLayout = ({ children }) => { const [isLoggedIn, setIsLoggedIn] = useState(false); return ( <div> <Menu mode="horizontal"> <Menu.Item> <Link href="/"><a>노드버드</a></Link> </Menu.Item> <Menu.Item> <Link href="/profile"><a>프로필</a></Link> </Menu.Item> <Menu.Item> <Link href="/signup"><a>회원가입</a></Link> </Menu.Item> <Menu.Item> <Input.Search enterButton style={{ verticalAlign: 'middle' }}/> </Menu.Item> </Menu> <Row gutter={8}> <Col xs={24} md={6}> {isLoggedIn ? <UserProfile setIsLoggedIn={setIsLoggedIn}/> : <LoginForm setIsLoggedIn={setIsLoggedIn}/>} </Col> <Col xs={24} md={12}> </Col> <Col xs={24} md={6}> <a href="http://google.com" target="_blank" rel="noreferrer noopener">메인화면</a> </Col> </Row> </div> ); }; AppLayout.propTypes = { children: PropTypes.node.isRequired, }; export default AppLayout; import React, { useState, useCallback, useMemo } from 'react'; import { Form, Input, Button } from 'antd'; import Link from 'next/link'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import useInput from '../hooks/useInput'; // const ButtonWrapper = styled.div` // margin-top: 10px; // `; // const FormWrapper = styled(Form)` // padding: 10px; // `; function LoginForm({ setIsLoggedIn }) { const [id, onChangeId] = useInput(''); const [password, onChangePassword] = useInput(''); // const style = useMemo(() => ({ marginTop: 10 }), []); const onSubmitForm = useCallback(() => { console.log(id, password); setIsLoggedIn(true); }, [id, password]); return ( <Form onFinish={onSubmitForm} style={{ padding: '10px' }}> <div> <label htmlFor="user-id">아이디</label> <br /> <Input name="user-id" value={id} onChange={onChangeId} required /> </div> <div> <label htmlFor="user-password">비밀번호</label> <br /> <Input name="user-password" type="password" value={password} onChange={onChangePassword} required /> </div> <div style={{ marginTop: '10px' }}> <Button type="primary" htmlType="submit" loading={false}>로그인</Button> <Link href="/signup"><a><Button>회원가입</Button></a></Link> </div> </Form> ); } LoginForm.propTypes = { setIsLoggedIn: PropTypes.func.isRequired, } export default LoginForm; /* eslint-disable react/jsx-no-undef */ /* eslint-disable no-unused-vars */ import React from 'react'; import Head from 'next/head'; import AppLayout from '../components/AppLayout'; import NicknameEditForm from '../components/NicknameEditForm'; import FollowList from '../components/FollowList'; const Profile = () => { const followerList = [{ nickname: 'test1' }, { nickname: 'test2' }, { nickname: 'test3' }]; const followingList = [{ nickname: 'test1' }, { nickname: 'test2' }, { nickname: 'test3' }]; return ( <> <Head> <title>내 프로필 | NodeBird</title> </Head> <AppLayout> <NicknameEditForm/> <FollowList header="팔로잉 목록" data={followingList}/> <FollowList header="팔로워 목록" data={followerList}/> </AppLayout> </> ); }; export default Profile;
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
안녕하세요. 강의를 수강하면서 next 13으로 만들고 있습니다... 노드에서 이미지 정적 폴더를 생성하고, 이미지가 서버에 저장되게끔 하는거는 구현했는데, 아무리 해도 next에서 서버에 있는 이미지를 불러오지를 못합니다. 아래는 제가 시도해본 방법입니다. app.use('/', express.static(__dirname + '/public')); app.use(express.static('public')); express에서 클라이언트 단으로 던져주는 저 app.use 자체가 먹지 않고 있고 아무 에러도 나오지 않아서 너무 답답합니다 ㅠㅠ 어떻게 해야 될까요...?.......
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
안녕하세요 선생님 현재 섹션2까지 수강하였는데요 이후에는 전부 함수형 컴포넌트로 강의 해주시는 건가요? 클래스형 컴포넌트 기초적 인 내용 학습 병행해야 할지 고민이되서 질문드립니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
useState로 number를 만들어서 createBoard로 작성한 게시글의 번호를 저장해두고그 number를 variables로 넣어서 내용을 확인하려고 합니다. import { gql } from "@apollo/client"; import { useQuery } from "@apollo/client"; import { useMutation } from "@apollo/client"; import React, { useState } from "react"; const CREATE_BOARD = gql` mutation createBoard($writer: String, $title: String, $contents: String) { createBoard(writer: $writer, title: $title, contents: $contents) { _id number message } } `; const FETCH_BOARD = gql` query fetchBoard($number: Int) { fetchBoard(number: $number) { number writer title contents } } `; const GraphqlMutationArgsPage = () => { const [createBoard] = useMutation(CREATE_BOARD); const { data: fetchBoardData, refetch } = useQuery(FETCH_BOARD); const [number, setNumber] = useState(0); const onClickSubmit = async () => { const result = await createBoard({ variables: { // variables: $ 역할 writer: "훈이", title: "안녕하세요!", contents: "반갑습니다.", }, }); console.log(result); setNumber(result.data.createBoard.number); }; const onClickFetch = async () => { await refetch({ number }); console.log(fetchBoardData); }; return ( <div> <button onClick={onClickSubmit}>GRAPHQL-API 요청하기</button> {number} <button onClick={onClickFetch}>GRAPHQL-API 내용확인</button> </div> ); }; export default GraphqlMutationArgsPage; 이렇게 refetch 를 사용하는게 맞나요? 현재 작성한 게시글이 조회가 안되고 직전 게시글이 조회가 되네요.. 현재 작성한 게시글 number는 13280인데 조회된 게시글은 13279입니다.
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
getStaticProps강의의 2분대에 나오는 코드를 동일하게 작성하고 npm run dev를 입력해서 localhost:3000/section1/getStaticProps 로 접속을 했는데 개발자도구에서 보니 계속 pending으로만 되어있고 빈 화면으로 계속 로딩중 상태에서 변화가 없는데 왜그런건가요? 콘솔에 별다른 에러도 안뜹니다 getStaticProps함수를 주석처리해주면 정상적으로 접속이 되는데 해당 함수를 사용하기만 하면 이렇게 접속이 안돼요
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
import React from "react"; import PropTypes from "prop-types"; import Link from "next/link"; import { Menu } from "antd"; const AppLayout = ({ children }) => { return ( <div> <Menu mode="horizontal"> <Menu.Item> <Link href="/">노드버드</Link> </Menu.Item> <Menu.Item> <Link href="/profile">프로필</Link> </Menu.Item> <Menu.Item> <Link href="/signup" legacyBehavior> <a>회원가입</a> </Link> </Menu.Item> </Menu> {children} </div> ); }; AppLayout.propTypes = { children: PropTypes.node.isRequired, }; export default AppLayout; 이렇게만 해도 디자인 잘 적용 됩니다!
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
복습하면서 강의를 보지 않고 저 혼자 다시 만들어보고 있는 중입니다. 그래서 드래그 라이브러리나 React.memo 같은 기능은 우선 차치하고 CRUD 기능만 해보려고 하는데요. edit을 위한 💬 버튼을 누를 경우 다른 할 일들도 editing... 으로 전체 수정되는 오류가 있습니다 ㅠㅠ 어디가 꼬였는지 알 수 없어 몇 시간 째 헤매고 있는데, 어느 부분이 문제인지 알 수 있을까요? Lists 컴포넌트에서 문제가 발생하고 있습니다. App.js import React, { useState } from "react"; import Form from "./components/Form"; import Lists from "./components/Lists"; function App() { const today = new Date(); const month = today.getMonth() + 1; const day = today.getDate(); const [value, setValue] = useState(""); const [todoData, setTodoData] = useState([]); const handleSubmit = (event) => { event.preventDefault(); let newTodo = { id: Date.now(), title: value, done: false, }; setTodoData([...todoData, newTodo]); setValue(""); }; const handleClear = () => { setTodoData([]); }; return ( <div className="flex justify-center items-center min-h-screen w-screen bg-purple-100"> <div className="w-full lg:max-w-lg lg:max-w-3/4 p-6 m-4 bg-white rounded shadow"> <div className="flex justify-between pb-2"> <h1> 📌 {month}월 {day}일 오늘의 할 일 </h1> <button onClick={handleClear}>🧹 전체 삭제</button> </div> <Lists todoData={todoData} setTodoData={setTodoData} /> <Form handleSubmit={handleSubmit} value={value} setValue={setValue} /> </div> </div> ); } export default App; Lists.js import React, { useState } from "react"; const Lists = ({ todoData, setTodoData, title, id }) => { const [isEditing, setIsEditing] = useState(false); const [editedTitle, setEditedTitle] = useState(title); const handleDelete = (id) => { let newTodoData = todoData.filter((data) => data.id !== id); setTodoData(newTodoData); }; const handleDone = (id) => { let newTodoData = todoData.map((data) => { if (data.id === id) { data.done = !data.done; } return data; }); setTodoData(newTodoData); }; if (isEditing) { return <div>Editing...</div>; } else { return ( <div> {todoData.map((data) => ( <div className="flex py-2 my-2 justify-between items-center border rounded bg-purple-50" key={data.id} > <div className="mr-2 p-2"> <input className="mr-2" type="checkbox" defaultChecked={data.done} onChange={() => handleDone(data.id)} ></input> <span className={data.done ? "line-through" : undefined}> {data.title} </span> </div> <div className="pr-2"> <button className="mr-2" onClick={() => setIsEditing(true)}> 💬 //오류 발생 </button> <button className="mr-2" onClick={() => handleDelete(id)}> ❌ </button> </div> </div> ))} </div> ); } }; export default Lists; Form.js import React from "react"; const Form = ({ handleSubmit, value, setValue }) => { const handleChange = (event) => { setValue(event.target.value); }; return ( <div> <form className="flex justify-between pt-2" onSubmit={handleSubmit}> <input className="p-2 mr-2 border-2 rounded shadow w-full" type="text" placeholder="할 일을 입력하세요" value={value} onChange={handleChange} /> <input className="p-2 border-2 rounded bg-purple-200 text-white hover:bg-purple-300" type="submit" value="입력" /> </form> </div> ); }; export default Form;
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
import { UpCircleOutlined } from "@ant-design/icons"; import styled from '@emotion/styled' import { MouseEvent } from "react"; import { useState } from "react"; const MyIcon = styled(UpCircleOutlined)` color: red; font-size: 130px; ` export default function LibaryIconPage(): JSX.Element { const [ count, setCount] = useState(0) const onClickDelete = (event: MouseEvent<HTMLDivElement>): void => { console.log(event.currentTarget.id) setCount(count + 1) console.log(count) } return ( <div id="삭제" onClick={onClickDelete}> <MyIcon />; </div> ) } MyIcon에서 위와 같은 오류가 뜹니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
알려주신데로 한거 같은데 반응이 성공적이지 않았다 400 상태 코드를 받았다고 alert창에 뜨는데.. 어떤게 문제 인지 잘 모르겠네요 ㅠㅠ 네트워크 페이로드를 보면 다 잘 들어간거같은데... 페이로드랑 코드입니다. {operationName: "createProduct",…} operationName: "createProduct" query: "mutation createProduct($seller: String, $createProductInput: CreateProductInput!) {\n createProduct(seller: $seller, createProductInput: $createProductInput) {\n id\n _typename\n }\n}" variables: {seller: "김갑수", createProductInput: {pName: "안경", contents: "멋진 안경", price: "15000"}} createProductInput: {pName: "안경", contents: "멋진 안경", price: "15000"} contents: "멋진 안경" pName: "안경" price: "15000" seller: "김갑수" import { gql, useMutation } from "@apollo/client"; import { useState } from "react"; const CREATE_PRODUCT = gql` mutation createProduct( $seller: String $createProductInput: CreateProductInput! ) { createProduct(seller: $seller, createProductInput: $createProductInput) { _id } } `; export default function Boards_05_quiz() { //js const [seller, setSeller] = useState(""); const [pName, setPname] = useState(""); const [contents, setContents] = useState(""); const [price, setPrice] = useState(""); const [createProduct] = useMutation(CREATE_PRODUCT); const onChangeSeller = (event) => { setSeller(event.target.value); }; const onChangePname = (event) => { setPname(event.target.value); }; const onChangeContents = (event) => { setContents(event.target.value); }; const onChangePrice = (event) => { setPrice(event.target.value); }; const onClickHandler = async () => { try { const result = await createProduct({ variables: { seller, createProductInput: { pName, contents, price, }, }, }); console.log(result); } catch (error) { alert(error.message); } }; return ( //html <div> <input type="text" placeholder="판매자명을 입력해주세요" onChange={onChangeSeller} ></input> <input type="text" placeholder="상품명을 입력해주세요" onChange={onChangePname} ></input> <input type="text" placeholder="삼품내용을 입력해주세요" onChange={onChangeContents} ></input> <input type="text" placeholder="상품가격을 입력해주세요" onChange={onChangePrice} ></input> <button onClick={onClickHandler}>상품등록</button> </div> ); }
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
const onClickSpan = (event: MouseEvent<HTMLSpanElement>) => { alert(event.currentTarget.id + "번 게시물입니다.") console.log(event.currentTarget.id) } const onClickDiv = (event: MouseEvent<HTMLDivElement>) => { alert(event.currentTarget.id + "번 게시물입니다.") console.log(event.currentTarget.id) } const qqq = (event: MouseEvent<HTMLSpanElement>) => { alert("클릭 타이틀") } // map의 특이점 또는 callback함수의 특이점 : 중괄호{} 로 쓰면return 생략 불가능 , () 로 쓰면 return 생략 가능 return( <> <div> {data?.fetchBoards.map((el: any) => ( // 함수타입은 인자 받는 곳에서 타입을 선언해주면됨 <div> <span> <input type='checkbox' /> </span> <span onClick = {() => ( // 안에서 바로 지정해버리는 법 alert(el.number + "번 게시물입니다. 안에서 지정 법") )} style = {mystyle}>{el.number}</span> <span id = {el.number} onClick = {onClickSpan} style = {mystyle}>{el.writer}</span> <span id = {el.number} onClick = {onClickSpan} style = {{margin: "10px"}}>{el.title}</span> <span id = {el.number} onClick = {onClickSpan} style = {{margin: "10px"}}>{el.contents}</span> </div>))} </div> <div> {data?.fetchBoards.map((el: any) => ( // 위에서 처럼 하나하나 지정 말고 한번에 지정하는 법 (이벤트 버블링으로 클릭 이벤트 전파) <div id={el.number} onClick={onClickDiv}> <span> <input type='checkbox' /> </span> <span onClick = {qqq} style = {mystyle}>{el.number}</span> <span style = {mystyle}>{el.writer}</span> <span style = {{margin: "10px"}}>{el.title}</span> <span style = {{margin: "10px"}}>{el.contents}</span> </div>))} </div> 위 코드에서 span 태그에는 HTMLSpanElement Div 태그에는 HTMLDivElement 를 적용했는데 'MouseEvent 형식이 제네릭이 아닙니다.' 이 오류가 계속 뜹니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강사님 안녕하세요, 제가 배운거 바탕으로 포트폴리오를 제작중인데요 body 태그에 접근할려면 구글링 해본 결과 _document 파일이 있어야 하는데 아무리 찾아봐도 _document가 없더라구요 혹시 body태그에 접근하는방법을 여쭤봐도 될까요? ※ document.querySelector 접근할 생각을 했는데 react, next.js에서는 되도록이면 사용안하는게 좋다고해서 어쩔수없을때는 사용해도 될까요?
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
server state 관리를 swr 말고 react-query를 사용하려고 합니다. 아래와 같이 해당 queryKey를 가지고 stores에 대한 data를 전역으로 관리하고 싶었는데, fetchFunction 자리에 stores props가 들어갈 수 없어서 처음에 어떻게 initialdata를 가져올 수 있을지 잘 모르겠습니다.. react-query는 수업때 배우진 않지만 혹시 아시는 부분이 있다면 알려주시면 감사하겠습니다 !! const { data } = useQuery([queryKey], fetchFun)
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
> git push -u origin master To https://github.com/eunpse/preCamp.git ! [rejected] master -> master (non-fast-forward) error: failed to push some refs to 'https://github.com/eunpse/preCamp.git' hint: Updates were rejected because the tip of your current branch is behind hint: its remote counterpart. Integrate the remote changes (e.g. hint: 'git pull ...') before pushing again. hint: See the 'Note about fast-forwards' in 'git push --help' for details. 과제에 알려주신 방법으로 깃에 먼저 파일을 올렸다가, 내용을 수정하고 다시 깃에 올리려고 하는데 오류가 발생합니다. git pull을 해라 이런 말이 있는 것 같은데 어떻게 해야하나요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의 화면과 달리 result 타입이 unknown이라고 뜹니다 소스를 비교했을 땐 동일한 것 같은데, 어떤 부분이 잘못 된걸까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
let phone1 = document.getElementById('phone1').value; function ph1() { if (phone1.length === 3) { document.getElementById('phone2').focus(); } } function ph1() { let phone1 = document.getElementById('phone1').value; if (phone1.length === 3) { document.getElementById('phone2').focus(); } } 안녕하세요. 섹션1 final 과제 sign up 진행 중입니다. 핸드폰 번호를 입력하면 포커스를 이동 중에 첫번째 코드블럭 같이 정의한 후 포커스를 이동하려 했더니 되지 않더라고요! 혹시 위의 두 코드 블럭은 다른 코드로 정의되는 것인가요 ? 저는 {} 밖에서 정의를 해 주면 전체 코드에 적용된다고 해서 한번에 phone1,phone2,phone3 을 정의하려고 했거든요!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
let phone1 = document.getElementById('phone1').value; function ph1() { if (phone1.length === 3) { document.getElementById('phone2').focus(); } } let phone1 을 상위에 정의 하면 왜 null 값으로 읽히는 걸까요 ?
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
동일한 질문이 있는데 답변을 이해하지 못해서 질문합니다. 저는 [깃허브아이디]/상위폴더/하위폴더/ 하위폴더2 에 지금까지 만든 넷플릭스 파일들이 있습니다. 이 경우에 package.json의 homepage 부분과 index.js의 basename은 어떻게 설정해야 하는 것인지요? 아까까지 전체 주소(하위폴더2까지) homepage, basename을 작성하여 배포했는데 완성된 주소는 상위폴더까지만 적혀 있습니다. 지금은 [깃허브아이디]. github.io/[상위폴더]/로 다시 배포했는데 상위폴더 안의 Read.me만 나오고 있습니다. (캐시 삭제 및 20분 정도 기다림) ㅠㅠ 왜 이러는지 알고 싶습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
중고마켓을 만들고 있습니다. 이부분인데 여기서 판매중상품 판매된상품 두개로 나눠서 searchbar(검색)을 만들었습니다. useSerach 파일로 밑에 코드로 따로 빼놨고 (useSearch) container 이부분에서 onChangeSearch안에 있는 refetch를 어떻게 가져와야 하나요 refetch: SoldOutTrueRefetch || SoldOutFalseRefetch 이렇게 처음에 가져오려고 했지만 실패했습니다.. presenter 코드가 조금 지저분하지만 완성이 목표라서 현재 짜는 코드는 조금 지저분해도 이런식으로 두개를 가져오고 싶습니다. refetch 부분 어떤식으로 가져와야할지 알려주세요.
