백엔드가 어떤 기능을 만드는지 확인하고 어제 작업을 이어갑니다.
일단 홈화면 스왑되는 큰 화면이 전체화면이 되도록 하고싶습니다.
코드내의 필요없는 부분을 주석처리 합니다.
ui 크기를 조정합니다 일단 슬라이드 화면 부터
건들수록 ui가 별로인 관계로 그대로 갖다 쓰는걸로..
마이페이지를 디자인 해야할 것 같습니다.
좋아요 한 아이탬
결제 내역
팔로잉 목록
각각 만들어서 Mypage/index.tsx에 뿌려줍니다.
만들었어요
헤더는 삭제했어요 팀원과 같이 만들기위해서
C:\Users\r2com\Documents\MiniProject2\project\Frontend\src\app(site)\layout.tsx
C:\Users\r2com\Documents\MiniProject2\project\Frontend\src\components\header
이부분 제거해주면 됩니다.
이런식으로 사용되지 않는페이지는 삭제하겠습니다.
회원가입 기능이 만들어졌다고 합니다 테스트 해보겠습니다.
백엔드분이 명세서를 잘 정리해 주셨어요
파라미터를 전부 입력할수 있도록 바꿔야겠죠??
틀을 바꿔줍니다.
url주소 변경
from-data로 전송해야 에러가 발생하지 않네요!
기존 코드 : axios.post 요청 시 JSON 형식으로 데이터를 전송
await axios.post("http://47.130.76.132:8080/auth/join", { email: formData.email, password: formData.password, nickname: formData.nickname, birth: formData.birth, phone: formData.phone, address: formData.address, });
수정된 코드 : 데이터를 FormData 형식으로 변환하여 전송합니다.
const formDataToSend = new FormData(); formDataToSend.append("email", formData.email); formDataToSend.append("password", formData.password); formDataToSend.append("nickname", formData.nickname); formDataToSend.append("birth", formData.birth); formDataToSend.append("phone", formData.phone); formDataToSend.append("address", formData.address); await axios.post("http://47.130.76.132:8080/auth/join", formDataToSend, { headers: { "Content-Type": "multipart/form-data", }, });
success
github가 새롭게 만들어졌어요
이번에는 진짜 필요한 부분만 발췌해서 쓰는 식으로 갖다가 쓰려고합니다
혹시모르니 압축해 둡시다
폴더를 새로만들어서 땡겨옵니다.
일단 이번에 작업하면서 만든페이지를 나열해보자면
홈, 게시판 상세, 로그인, 회원가입, 마이페이지 이렇게입니다. 컴포넌트만 일단 슥 갖다 넣어볼께요
필수로 필요한 부분
components
Common - 공통으로 재사용되는 컴포넌트 모음
home - 홈화면
detailpopstore - 게시판상세 (Shop 컴포넌트가 있어야함, 상품 목록을 위해서)
Mypage - 마이페이지
Auth - 로그인, 회원가입
site
src/app/(site)/layout.tsx - 홈화면 렌더링
src/app/(site)/(pages) - 컴포넌트에서 구성한 페이지들 렌더링
context
src/app/context - 클라이언트 내부에서 사용되는 api 정의
redux
src/redux/features/product-details.ts - 제품의 상세 정보 상태를 관리.
src/redux/features/quickView-slice.ts - 제품의 빠른 보기(Quick View) 기능 상태를 관리.
홈
게시판 상세
로그인
sign up
오늘작업한걸 새로운 브랜치에 push 하겠습니다.
같이 프론트 진행하시는분이 상단 바를 구현했다고합니다. 제꺼랑 합쳐보겠습니다.
팀원분이 만든 타임스크립트 파일들입니다
제 프로젝트에 무작정 붙히면 안될것같아 다른 컴포넌트와 비슷한 형태를 유지했습니다.
우선 navbar 컴포넌트
fortawesome 이라는 리엑트 패키지를 설치해야할 것 같습니다.
설치완료
이번에는 searchform 컴포넌트 만들어볼께요
준비물은 react-hook-form 패키지군요
Topbar 컴포넌트를 추가했으니
렌더링을위해 layout에 추가했습니다
ui가 무너지는걸 볼 수 있는데요
기존 프로젝트에 있던 .tsx들의 부재가 원인인 것 같습니다.
기존 layout을 적용시키려다가 문제가 발생했습니다.
next/font/google은 설치되어있는데 빨간불이 들어온 것으로보아 next 자체의 버전 차이인 것같습니다.
해결
use client와 metadata가 충돌을 이르켜서 렌더링이안됨
왜 충돌하는가?
바로 server컴포넌트 client컴포넌트를 따로관리해야한다는것임 공존할 수 없음 왜냐하면
server컴포넌트는 브라우저를 사용하지않는데 client 컴포넌트는 브라우저 내부에서 사용되야하기때문
src/
├── app/
│ ├── (site)/
│ │ ├── layout.tsx // 클라이언트 전용 레이아웃
│ │ ├── page.tsx
│ │ └── (pages)/
│ │ └── Topbar/
│ │ └── page.tsx // Topbar 페이지
│ └── layout.server.tsx // 서버 전용 레이아웃
├── components/
│ ├── ClientComponent/ // 클라이언트 전용 컴포넌트
│ └── ServerComponent/ // 서버 전용 컴포넌트 (예:
이런구조로 만들어야할 것 같음
내가받아온것은 클라이언트전용이고 팀원분은 서버전용임
내일 해결해보자고
끝.
