main_project_team007(12)

이유정·2023년 1월 25일

[Clone_PR] & [FarmPI_PR]

목록 보기

14/32

오늘 해야할 것

메인페이지 반응형 다하기 !!!
newproduct 컴포넌트화 한거랑, bestproduct 컴포넌트화 한거 정리해두기

페이지 이동하는거 넣기 useNavigate 이용 (메인, 결제) (redux 이용해서 productId 이런 값 받아와야 할 듯)
결제페이지 css 만져야 하는거 만지기, radio, modal창 뜨게 하는거,
review CRUD 만들기

반응형

tailwind는 min 값으로 설정이 되어있어서 media 이용해서 반응형 만들어야 한다.

best product 반응형

현재 상황

이럴때 헤더 로고를 가운데로 딱 위치시켜야 할 듯

여기서도 물품은 가운데 인데 로고가 가운데가 아니여서 비대칭처럼 보임

여기서는 일단 사진을 가운데로 위치시켜야 할 듯함

tailwind도 이용하고 @media도 이용했다.
원래 이 범위 다 css를 써줬다가 중복되는 코드는 전체에 적용해주고
다르게 적용되는 css만 다시 범위 써주고 적용해줬다.

@media screen and (max-width: 640px) {
  .Product_Img_Container {
    padding: 0px 12%;
  }
  .Product_Img_Content {
    @apply min-h-full min-w-full;
  }
  .Product_Event_Title {
    @apply text-sm;
  }
  .Product_Name_Content {
    @apply text-base;
  }
  .Product_Sale_Content {
    @apply text-sm;
  }
  .Product_Price_Content {
    @apply text-base;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .Product_Img_Container {
    padding: 0px 4%;
  }
  .Product_Img_Content {
    @apply h-full min-w-full;
  }
}

.Product_Img_Content {
  @apply h-full w-full object-cover object-center group-hover:opacity-75;
}

.Product_Event_Title {
  @apply text-red-600 text-xs mt-4;
}

.Product_Price_Content {
  @apply text-red-700 font-semibold text-sm mt-2;
}

.Product_Sale_Content {
  @apply text-gray-400 text-xs mt-1;
}

.Product_Name_Content {
  @apply font-semibold text-sm mt-2;
}

best product 반응형 결과

Story 반응형

지금까지 한 것

화면 크기에 따라 story의 크기를 바꿔줬다.
화면 제일 클 때

화면 중간 사이즈

화면 제일 작을 때

못하고 있는것

줄어든 화면 크기에서 가운데 정렬을 하고싶은데 안된다....
나혼자 margin 좌우를 auto 넣어보기도 하고,
useMediaQuery 이용해서 설정해둔걸로

컨테이너의 margin 설정을 조건적으로 바꿔주고 싶은데 못하겠다... 휴^^

모달창

redux를 이용해서 useState 상태를 totalpay가 아닌 payment 창에서 상태를 같이 받아오고 싶다.
상태를 전역적인 store에서 가져와야 한다. => 리덕스 툴킷 사용하자.

마주한 문제

문제
Warning: Expected onClick listener to be a function, instead got a value of object type.
참고) https://kimtaekju-study.tistory.com/230

props drilling으로

pamentpage 에서 상태를 관리하고 props drilling으로 payment 컴포넌트랑 totalpay 컴포넌트에 내려줘서 totalpay에서 onClick 하면 onClickToggleModal함수가 작동되고, isOPenModal 상태가 true 값이 되면서 전체 pament 페이지에서 modal이 작동되길 바랐으나,
props drilling 말 그대로 밑으로 영향이 가지 위로 올라가진 않는다.
아, 그리고 타입을 제네릭 타입으로 써줘야 에러가 사라졌다.

payment페이지에서 상태 내려주는 코드

=> 하위 컴포넌트의 클릭이 상위 컴포넌트의 상태를 바꾸진 못한다.

나의 꼼수

전체 페이지에서 결제하기 버튼을 관리하도록 만들어봤다.

그러면 생기는 문제점은 totalpay가 sticky 한 상태인데 같이 안따라가서 안된다...
어쩔 수 없이 redux toolkit 을 제대로 써봐야겠다. redux나,,

상태관리 Context API냐 Redux냐

두개를 비교하는 글을 읽어봤는데,,, redux를 써야겠다고 결정했다.
참고) https://react.vlpt.us/redux/

redux toolkit

오늘의 진행상황이 답답해지더라도 리덕스 툴킷을 다시 공부해야만 했다.
결론으로 하위 컴포넌트인 totalpay에 있는 결제하기 버튼을 눌렀을 때 상위 컴포넌트paymentpage에 있는 글자를 보이게끔 만들었다. ! 그럼 이제 모달 창만 만들어주면 될 것 같다.

modalSlice.tsx

import { createSlice } from '@reduxjs/toolkit';
import type { RootState } from 'Redux/app/store';

export interface ModalState {
  isOpenModal: boolean;
}

const initialState = {
  isOpenModal: false,
};

const modalSlice = createSlice({
  name: 'modal',
  initialState,
  reducers: {
    openModal(state) {
      state.isOpenModal = true;
    },
    closeModal(state) {
      state.isOpenModal = false;
    },
  },
});

export const modalActions = modalSlice.actions;

export const madalState = (state: RootState) => state.modal;
export default modalSlice.reducer;

store.ts

import { configureStore } from '@reduxjs/toolkit';
import counterSlice from 'Redux/reducer/counterSlice';
import objectSaveSlice from 'Redux/reducer/objectSaveSlice';
import priceSlice from 'Redux/reducer/priceSlice';
import modalSlice from 'Redux/reducer/modalSlice';
//store 만들기
const store = configureStore({
  reducer: {
    //각각의 슬라이스의 리듀서
    counter: counterSlice, //counterSlice안의 reducers들을 하나로 합쳐주는 하나의 reducer 생성
    objectSave: objectSaveSlice,
    priceCheck: priceSlice,
    modal: modalSlice,
  },
});

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;

export default store;

이렇게 리덕스 툴킷을 이용해 상태를 setting 했고,
1) totalpay에 있는 결제하기 버튼

2) totalpay에 있는 modalHandler함수

3) paymentpage에 있는 useSelector을 이용해서 상태값을 가져온다.

4) paymentpage에 isModal이 true일 때 글자 입력 되게

5) 결과