new01260170

<p>아 죄송합니다 제가 뭘 빼먹었었네요 잘 동작됩니다 ㅜㅜ</p>

Unhandled Runtime Error

<p>아 오타가 있었네요 LggedIn</p>
<p>근데 그거 오타 수정해도 똑같은 에러가 나네요 ㅜㅜ</p>
<p>&nbsp;</p>

<p>아 네 알겠습니다.</p>
<p>AppLayout 코드 입니다.</p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div><span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">useState</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'react'</span>;</div>
<div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">PropTypes</span> <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'prop-types'</span>;</div>
<div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">Link</span> <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'next/link'</span>;</div>
<div><span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">Input</span>, <span style="color: #9cdcfe;">Menu</span>, <span style="color: #9cdcfe;">Row</span>, <span style="color: #9cdcfe;">Col</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'antd'</span>;</div>
<div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">UserProfile</span> <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'../components/UserProfile'</span>;</div>
<div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">LoginForm</span> <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'../components/LoginForm'</span>;</div>
<div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">styled</span> <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'styled-components'</span>;</div>
<br />
<div><span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">SearchInput</span> = <span style="color: #dcdcaa;">styled</span>(<span style="color: #4ec9b0;">Input</span>.<span style="color: #9cdcfe;">Search</span>)<span style="color: #ce9178;">`</span></div>
<div><span style="color: #ce9178;"> vertical-align: middle</span></div>
<div><span style="color: #ce9178;">`</span>;</div>
<br />
<div><span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">AppLayout</span> = ({ <span style="color: #9cdcfe;">children</span> }) <span style="color: #569cd6;">=></span> {</div>
<div><span style="color: #6a9955;">// ToDo</span></div>
<div><span style="color: #569cd6;">const</span> [<span style="color: #4fc1ff;">isLoggedIn</span>, <span style="color: #dcdcaa;">setIsLoggedIn</span>] = <span style="color: #dcdcaa;">useState</span>(<span style="color: #569cd6;">false</span>);</div>
<div><span style="color: #c586c0;">return</span> (</div>
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #4ec9b0;">Menu</span> <span style="color: #9cdcfe;">mode</span>=<span style="color: #ce9178;">"horizontal"</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #4ec9b0;">Menu.Item</span> <span style="color: #9cdcfe;">key</span>=<span style="color: #ce9178;">"home"</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #4ec9b0;">Link</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/"</span><span style="color: #808080;">><</span><span style="color: #569cd6;">a</span><span style="color: #808080;">></span>홈<span style="color: #808080;"></</span><span style="color: #569cd6;">a</span><span style="color: #808080;">></</span><span style="color: #4ec9b0;">Link</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"></</span><span style="color: #4ec9b0;">Menu.Item</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #4ec9b0;">Menu.Item</span> <span style="color: #9cdcfe;">key</span>=<span style="color: #ce9178;">"profile"</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #4ec9b0;">Link</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/profile"</span><span style="color: #808080;">><</span><span style="color: #569cd6;">a</span><span style="color: #808080;">></span>프로필<span style="color: #808080;"></</span><span style="color: #569cd6;">a</span><span style="color: #808080;">></</span><span style="color: #4ec9b0;">Link</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"></</span><span style="color: #4ec9b0;">Menu.Item</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #4ec9b0;">Menu.Item</span> <span style="color: #9cdcfe;">key</span>=<span style="color: #ce9178;">"search"</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #4ec9b0;">SearchInput</span> <span style="color: #9cdcfe;">enterButton</span> <span style="color: #808080;">/></span></div>
<div><span style="color: #808080;"></</span><span style="color: #4ec9b0;">Menu.Item</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #4ec9b0;">Menu.Item</span> <span style="color: #9cdcfe;">key</span>=<span style="color: #ce9178;">"signup"</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #4ec9b0;">Link</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/signup"</span><span style="color: #808080;">><</span><span style="color: #569cd6;">a</span><span style="color: #808080;">></span>회원가입<span style="color: #808080;"></</span><span style="color: #569cd6;">a</span><span style="color: #808080;">></</span><span style="color: #4ec9b0;">Link</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"></</span><span style="color: #4ec9b0;">Menu.Item</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"></</span><span style="color: #4ec9b0;">Menu</span><span style="color: #808080;">></span></div>
<div><span style="color: #569cd6;">{</span><span style="color: #6a9955;">/* column 사이 간격: gutter */</span><span style="color: #569cd6;">}</span></div>
<div><span style="color: #808080;"><</span><span style="color: #4ec9b0;">Row</span> <span style="color: #9cdcfe;">gutter</span>=<span style="color: #569cd6;">{</span><span style="color: #b5cea8;">8</span><span style="color: #569cd6;">}</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #4ec9b0;">Col</span> <span style="color: #9cdcfe;">xs</span>=<span style="color: #569cd6;">{</span><span style="color: #b5cea8;">24</span><span style="color: #569cd6;">}</span> <span style="color: #9cdcfe;">md</span>=<span style="color: #569cd6;">{</span><span style="color: #b5cea8;">6</span><span style="color: #569cd6;">}</span><span style="color: #808080;">></span></div>
<div><span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">isLoggedIn</span> ? <span style="color: #808080;"><</span><span style="color: #4ec9b0;">UserProfile</span> <span style="color: #9cdcfe;">setIsLoggedIn</span>=<span style="color: #569cd6;">{</span><span style="color: #dcdcaa;">setIsLoggedIn</span><span style="color: #569cd6;">}</span> <span style="color: #808080;">/></span> : <span style="color: #808080;"><</span><span style="color: #4ec9b0;">LoginForm</span> <span style="color: #9cdcfe;">setIsLoggedIn</span>=<span style="color: #569cd6;">{</span><span style="color: #dcdcaa;">setIsLoggedIn</span><span style="color: #569cd6;">}</span> <span style="color: #808080;">/></span> <span style="color: #569cd6;">}</span></div>
<div><span style="color: #808080;"></</span><span style="color: #4ec9b0;">Col</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #4ec9b0;">Col</span> <span style="color: #9cdcfe;">xs</span>=<span style="color: #569cd6;">{</span><span style="color: #b5cea8;">24</span><span style="color: #569cd6;">}</span> <span style="color: #9cdcfe;">md</span>=<span style="color: #569cd6;">{</span><span style="color: #b5cea8;">12</span><span style="color: #569cd6;">}</span><span style="color: #808080;">></span></div>
<div>가운데 메뉴</div>
<div><span style="color: #808080;"></</span><span style="color: #4ec9b0;">Col</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #4ec9b0;">Col</span> <span style="color: #9cdcfe;">xs</span>=<span style="color: #569cd6;">{</span><span style="color: #b5cea8;">24</span><span style="color: #569cd6;">}</span> <span style="color: #9cdcfe;">md</span>=<span style="color: #569cd6;">{</span><span style="color: #b5cea8;">6</span><span style="color: #569cd6;">}</span><span style="color: #808080;">></span></div>
<div>오른쪽 메뉴</div>
<div><span style="color: #808080;"></</span><span style="color: #4ec9b0;">Col</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"></</span><span style="color: #4ec9b0;">Row</span><span style="color: #808080;">></span></div>
<div><span style="color: #569cd6;">{</span><span style="color: #9cdcfe;">children</span><span style="color: #569cd6;">}</span></div>
<div><span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span></div>
<div>)</div>
<div>}</div>
<br />
<div><span style="color: #6a9955;">// children 값이 있는지 체크하기 위한 용도</span></div>
<div><span style="color: #4fc1ff;">AppLayout</span>.<span style="color: #9cdcfe;">propTypes</span> = {</div>
<div><span style="color: #9cdcfe;">children</span><span style="color: #9cdcfe;">:</span> <span style="color: #9cdcfe;">PropTypes</span>.<span style="color: #4fc1ff;">node</span>.<span style="color: #9cdcfe;">isRequired</span>,</div>
<div>};</div>
<br />
<div><span style="color: #c586c0;">export</span> <span style="color: #c586c0;">default</span> <span style="color: #4fc1ff;">AppLayout</span>;</div>
</div>

<p>오타는 아닌 것 같습니다. 대소문자까지 같이 해서 확인해 봤어요.<br />로그인 폼 코드 붙여넣기 해서 드립니다.</p>
<p>&nbsp;</p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div><span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">useState</span>, <span style="color: #9cdcfe;">useCallback</span>, <span style="color: #9cdcfe;">useMemo</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'react'</span>;</div>
<div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">PropTypes</span> <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'prop-types'</span>;</div>
<div><span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">Form</span>, <span style="color: #9cdcfe;">Input</span>, <span style="color: #9cdcfe;">Button</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'antd'</span>;</div>
<div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">Link</span> <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'next/link'</span>;</div>
<div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">styled</span> <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'styled-components'</span>;</div>
<div>&nbsp;</div>
<div><span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">ButtonWrapper</span> = <span style="color: #4fc1ff;">styled</span><span style="color: #ce9178;">.</span><span style="color: #9cdcfe;">div</span><span style="color: #ce9178;">`</span></div>
<div><span style="color: #ce9178;"> margin-top: 10px;</span></div>
<div><span style="color: #ce9178;">`</span>;</div>
<br />
<div><span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">FormWrapper</span> = <span style="color: #dcdcaa;">styled</span>(<span style="color: #4fc1ff;">Form</span>)<span style="color: #ce9178;">`</span></div>
<div><span style="color: #ce9178;"> padding: 10px;</span></div>
<div><span style="color: #ce9178;">`</span>;</div>
<br />
<div><span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">LoginForm</span> = ({ <span style="color: #9cdcfe;">setIsLoggedIn</span> }) <span style="color: #569cd6;">=></span> {</div>
<div><span style="color: #569cd6;">const</span> [<span style="color: #4fc1ff;">id</span>, <span style="color: #dcdcaa;">setId</span>] = <span style="color: #dcdcaa;">useState</span>(<span style="color: #ce9178;">''</span>);</div>
<div><span style="color: #569cd6;">const</span> [<span style="color: #4fc1ff;">password</span>, <span style="color: #dcdcaa;">setPassword</span>] = <span style="color: #dcdcaa;">useState</span>(<span style="color: #ce9178;">''</span>);</div>
<div><span style="color: #569cd6;">const</span> <span style="color: #dcdcaa;">onChangeId</span> = <span style="color: #dcdcaa;">useCallback</span>((<span style="color: #9cdcfe;">e</span>) <span style="color: #569cd6;">=></span> {</div>
<div><span style="color: #dcdcaa;"> setId</span>(<span style="color: #9cdcfe;">e</span>.<span style="color: #9cdcfe;">target</span>.<span style="color: #9cdcfe;">value</span>);</div>
<div>}, []);</div>
<br />
<div><span style="color: #569cd6;">const</span> <span style="color: #dcdcaa;">onChangePassword</span> = <span style="color: #dcdcaa;">useCallback</span>((<span style="color: #9cdcfe;">e</span>) <span style="color: #569cd6;">=></span> {</div>
<div><span style="color: #dcdcaa;"> setPassword</span>(<span style="color: #9cdcfe;">e</span>.<span style="color: #9cdcfe;">target</span>.<span style="color: #9cdcfe;">value</span>);</div>
<div>}, []);</div>
<br />
<div><span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">style</span> = <span style="color: #dcdcaa;">useMemo</span>(() <span style="color: #569cd6;">=></span> ({ <span style="color: #9cdcfe;">marginTop</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">10</span>}), [])</div>
<br />
<div><span style="color: #569cd6;">const</span> <span style="color: #dcdcaa;">onSubmitForm</span> = <span style="color: #dcdcaa;">useCallback</span>(() <span style="color: #569cd6;">=></span> {</div>
<div><span style="color: #9cdcfe;"> console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #4fc1ff;">id</span>, <span style="color: #4fc1ff;">password</span>);</div>
<div><span style="color: #dcdcaa;"> setIsLoggedIn</span>(<span style="color: #569cd6;">true</span>);</div>
<div>}, [<span style="color: #4fc1ff;">id</span>, <span style="color: #4fc1ff;">password</span>]);</div>
<div>&nbsp;</div>
<div><span style="color: #c586c0;">return</span> (</div>
<div><span style="color: #808080;"> <</span><span style="color: #4ec9b0;">FormWrapper</span> <span style="color: #9cdcfe;">onFinish</span>=<span style="color: #569cd6;">{</span><span style="color: #dcdcaa;">onSubmitForm</span><span style="color: #569cd6;">}</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"> <</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"> <</span><span style="color: #569cd6;">label</span> <span style="color: #9cdcfe;">htmlFor</span>=<span style="color: #ce9178;">"user-id"</span><span style="color: #808080;">></span>아이디<span style="color: #808080;"></</span><span style="color: #569cd6;">label</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"> <</span><span style="color: #569cd6;">br</span> <span style="color: #808080;">/></span></div>
<div><span style="color: #808080;"> <</span><span style="color: #4ec9b0;">Input</span> <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">"user-id"</span> <span style="color: #9cdcfe;">value</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">id</span><span style="color: #569cd6;">}</span> <span style="color: #9cdcfe;">onChange</span>=<span style="color: #569cd6;">{</span><span style="color: #dcdcaa;">onChangeId</span><span style="color: #569cd6;">}</span> <span style="color: #9cdcfe;">required</span> <span style="color: #808080;">/></span></div>
<div><span style="color: #808080;"> </</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"> <</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"> <</span><span style="color: #569cd6;">label</span> <span style="color: #9cdcfe;">htmlFor</span>=<span style="color: #ce9178;">"user-password"</span><span style="color: #808080;">></span>비밀번호<span style="color: #808080;"></</span><span style="color: #569cd6;">label</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"> <</span><span style="color: #569cd6;">br</span> <span style="color: #808080;">/></span></div>
<div><span style="color: #808080;"> <</span><span style="color: #4ec9b0;">Input</span> <span style="color: #9cdcfe;">name</span>=<span style="color: #ce9178;">"user-password"</span> <span style="color: #9cdcfe;">value</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">password</span><span style="color: #569cd6;">}</span> <span style="color: #9cdcfe;">onChange</span>=<span style="color: #569cd6;">{</span><span style="color: #dcdcaa;">onChangePassword</span><span style="color: #569cd6;">}</span> <span style="color: #9cdcfe;">required</span> <span style="color: #808080;">/></span></div>
<div><span style="color: #808080;"> </</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"> <</span><span style="color: #4ec9b0;">ButtonWrapper</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">style</span><span style="color: #569cd6;">}</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"> <</span><span style="color: #4ec9b0;">Button</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"primary"</span> <span style="color: #9cdcfe;">htmlType</span>=<span style="color: #ce9178;">"submit"</span> <span style="color: #9cdcfe;">loading</span>=<span style="color: #569cd6;">{false}</span><span style="color: #808080;">></span>로그인<span style="color: #808080;"></</span><span style="color: #4ec9b0;">Button</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"> <</span><span style="color: #4ec9b0;">Link</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"/signup"</span><span style="color: #808080;">><</span><span style="color: #569cd6;">a</span><span style="color: #808080;">><</span><span style="color: #4ec9b0;">Button</span><span style="color: #808080;">></span>회원가입<span style="color: #808080;"></</span><span style="color: #4ec9b0;">Button</span><span style="color: #808080;">></</span><span style="color: #569cd6;">a</span><span style="color: #808080;">></</span><span style="color: #4ec9b0;">Link</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"> </</span><span style="color: #4ec9b0;">ButtonWrapper</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"> </</span><span style="color: #4ec9b0;">FormWrapper</span><span style="color: #808080;">></span></div>
<div>);</div>
<div>}</div>
<br />
<div><span style="color: #4fc1ff;">LoginForm</span>.<span style="color: #9cdcfe;">propTypes</span> = {</div>
<div><span style="color: #9cdcfe;">setIsLoggedIn</span><span style="color: #9cdcfe;">:</span> <span style="color: #9cdcfe;">PropTypes</span>.<span style="color: #4fc1ff;">node</span>.<span style="color: #9cdcfe;">isRequired</span>,</div>
<div>};</div>
<br />
<div><span style="color: #c586c0;">export</span> <span style="color: #c586c0;">default</span> <span style="color: #4fc1ff;">LoginForm</span>;</div>
</div>

<p>아 제가 이 부분을 놓쳤네요 감사합니다~!</p>

new01260170

Posts