오늘은 우선 깃허브 디렉토리 정리좀해달라는 요청이있었습니다.

브런치에 프로젝트 파일이 2개인데 miniproject2만 보이도록 할 예정입니다.

.git 파일을 miniproject2로 옮겨아할 것 같습니다.

파일을 옮기고 스테이징 커밋 푸쉬 진행했습니다.

!주의 브랜치 본인꺼사용

성공

signup/index.tsx 에서 새롭게 알게된 기술스택을 적어봅니다.

바로 hook 입니다. useState는 React의 Hook 중 하나로, 컴포넌트 내 상태(state)를 관리하는 데 사용된다고 합니다.

useState초기값을 빈문자열로 만들어두고

여기서 필드값을 입력하면(e.target) setFromData에서 기존의fromData를 복사해서 새로운 값으로 변경하도록 되어있습니다.

즉 useState를 사용하면 변경된 필드값들을 관리할 수가 있습니다.

---

회원가입 화면 마저 작성

route hook을 사용하여 회원가입 완료시 홈화면으로 가도록 설정 합니다.

성공

이번에는 마이 페이지를 만들어야합니다.

요구사항 : 마이 페이지(좋아요, 결제, 팔로우)

일단 임의로 홈페이지에

mypage링크를 만들었습니다.

Mypage를 컴포넌트에 추가한다음에 해당 url 경로로 접속하니 404에러가 발생했습니다.

라우팅을위해 src/app/.../mypage 폴더를만들어 page.index 추가하여 페이지를 등록합니다.

임의로 만든 폼이 작성되었습니다.

팀원분이 메인 브런치로 머지해달라는 요청이있었습니다.

체크아웃 메인으로 바꿨더니 프로젝트 파일들이 바뀌여서 다시 깃허브에서 받아야할 것 같습니다..

리엑트가 백그라운드에 실행중일때는 브랜치 변경시 .next 폴더에 캐시와 빌드 파일들이 계속 생성되거나 잠겨 있을 수 있습니다

.next 폴더는 백그라운드에서 지속적으로 갱신합니다 바로 Next.js의 핫 리로딩 인크리멘탈 빌드 캐시 최적화의 기능 때문입니다.

그러니 리엑트 꼭 서버 종료후 바꿔야합니다.

git check out main 으로 변경후 merge 진행

성공입니다 다시 브랜치로 바꿔서 작업을 이어나갑니다.

참고하고있는 팝업스토어 게시판입니다.

게시판에 작성된 글을 클릭하면 해당 글의 상세보기에서 굿즈를 선택할 수 있어요.

위와같은 형식으로 만들기 위해

저희가만든 페이지에 상품선택을

게시판 상세보기 페이지를 만들어 그쪽으로 빼야할 것 같습니다.

Hero 컴포넌트에 링크를 추가해줍니다.

(Next.js)의 link 태그를 사용합니다 a태그보다 Next.js에서는 더 최적화된 라우팅 기능을 제공합니다.

이제 shop now 버튼을 클릭하면 아직 구현되지 않은 게시판 상세보기 페이지로 넘어갑니다.

이번에는 detail-popupstore 접속시 상품이 진열되도록 만들겠 습니다.

DetailPopupstore 컴포넌트를 만들어줍니다.

ProductDetail.tsx : 물건 불러오기 역할

index.tsx : 렌더링 역할

파일 기반 라우팅을 위해서 컴포넌트를 새로운 페이지로 추가해줍니다.

이제 404 에러가 발생하지 않고 상품이 진열 됩니다.

진열은 됬으나 장바구니 등록이라던가 좋아요기능이 구현되어있지 않습니다. 그것을 해결하야할 것 같습니다.

아이콘 이미지는 svg를 통해 불러온다고 합니다.

onclick , hover, svg를 이용해 구현해줍니다.

SVG(Scalable Vector Graphics)는 벡터 그래픽 이미지 형식 , 웹에서 아이콘이나 심볼을 그릴 때 자주 사용되고, 크기를 확대하거나 축소해도 깨지지 않는 특징이 있습니다.

굿

이번에는 홈페이지를 조금 커스텀하려고합니다.

백엔드에서 진행하는 작업들을 확인해보니

게시판은 댓글창이 있어야할 것 같습니다.

제 생각에는 메인 게시판은 대략적인 제목만 나오고 댓글 관련 기능은 detail 게시판을 사용하면 될 것 같습니다

결론 게시판을 clean하게 커스텀하기

목표는 Hero/ 이부분이 반복해서 페이지를 덥는 것 입니다.

이부분으로 덥는것!

임의로 더미 데이터를 만들어서 그거 출력하도록 만들었습니다.

임의로 4개의 더미데이터를 넣었더니 동일한 데이터 4개가 출력되네요 일단 하려고한 것은 성공입니다.

끝.