Conversation
There was a problem hiding this comment.
공통으로 사용될 styled-component를 따로 관리해주시는 점 좋네요!
There was a problem hiding this comment.
styled-component는 컴포넌트 하단에 작성해주시는 것이 좋습니다. styled-component가 많아 질수록 컴포넌트 코드가 하단에 배치되서 찾아가기 힘들어지기 때문입니다!
| function getLinkStyle(isActive: boolean) { | ||
| return { color: isActive ? "var(--blue)" : undefined }; | ||
| } |
There was a problem hiding this comment.
style을 적용하기 위해 공통으로 사용될 함수를 잘 만들어주셨네요!
| </nav> | ||
| </HeaderLeft> | ||
| <HeaderRight> | ||
| <Image src={profileImg} alt="프로필" width={50} /> |
There was a problem hiding this comment.
next/image는 크기값을 줘야하기 때문에 width와 height 둘 다 작성해주시는 것을 추천드립니다.
| import Image from "next/image"; | ||
|
|
||
| export default function AddImage() { | ||
| const [imgSrc, setimgSrc] = useState<string>("/images/default-image.png"); |
There was a problem hiding this comment.
상태를 문자열로 초기화 해주시는 경우, 타입추론에 의해서 상태가 string으로 추론 되기 때문에 useState에 string 타입을 명시해주시지 않아도 괜찮습니다!
| useEffect(() => { | ||
| console.log(imgSrc); | ||
| }, [imgSrc]); |
There was a problem hiding this comment.
console.log는 제거해주시는 것을 추천드립니다!
| <div> | ||
| <h2>이미지</h2> | ||
| <input type="file" accept="image/*" onChange={handleChange} /> | ||
| <Image src={imgSrc} alt="" width={200} height={150} priority /> |
| const Container = styled.div` | ||
| padding: 20px; | ||
| margin: auto 360px; | ||
|
|
||
| .SubmitSection { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .title, | ||
| .content, | ||
| .image { | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| label { | ||
| display: block; | ||
| margin-bottom: 8px; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| input { | ||
| width: 100%; | ||
| padding: 10px; | ||
| font-size: 16px; | ||
| border: 1px solid #ccc; | ||
| border-radius: 12px; | ||
| background-color: #f3f4f6; | ||
| } | ||
| `; |
There was a problem hiding this comment.
className을 각각 style-component로 만들어주셔서 사용하는 방법도 추천드립니다.
| static async getInitialProps( | ||
| ctx: DocumentContext | ||
| ): Promise<DocumentInitialProps> { | ||
| const sheet = new ServerStyleSheet(); | ||
| const originalRenderPage = ctx.renderPage; | ||
|
|
||
| try { | ||
| ctx.renderPage = () => | ||
| originalRenderPage({ | ||
| enhanceApp: (App) => (props) => | ||
| sheet.collectStyles(<App {...props} />), | ||
| }); | ||
|
|
||
| const initialProps = await Document.getInitialProps(ctx); | ||
| return { | ||
| ...initialProps, | ||
| styles: ( | ||
| <> | ||
| {initialProps.styles} | ||
| {sheet.getStyleElement()} | ||
| </> | ||
| ), | ||
| }; | ||
| } finally { | ||
| sheet.seal(); | ||
| } | ||
| } |
There was a problem hiding this comment.
next.js에서 getInitialProps 보다는 getServerSideProps 사용을 추천하기 때문에 활용해보시면 좋을 것 같습니다.
getInitialProps를 사용하시면 정적 생성은 활용할 수 없어지기 떄문입니다.
| import axios from "axios"; | ||
|
|
||
| const instance = axios.create({ | ||
| baseURL: "https://panda-market-api.vercel.app", |
There was a problem hiding this comment.
base url은 보안 이슈 때문에 .env 파일에 넣어서 사용하고, .gitignore에 추가해서 관리해보시는 것을 추천드립니다.
요구사항
기본
상품 상세 페이지
심화
주요 변경사항
스크린샷
멘토에게