23/12/20 simwha 리뷰(6)

나머지 파일들을 봅세다.

<PublicHook.jsx> 커스텀훅이 들어있었네요 하하

import {useDispatch} from 'react-redux';

import {useNavigate} from 'react-router-dom';

import {closePublicModal} from '../../redux/modules/publicModalSlice';

import {closeAddModal} from '../../redux/modules/modalSlice';

function PublicHook() {          // 딱히 받는 인자는 없고

  const dispatch = useDispatch();  //스테이트변경 리랜더링을 위한 디스패치

  const navigate = useNavigate();   //라우트 이동을 위한 네비게이트

  const handleContinueWriting = () => {     //모달을 끄는 기능이겠군

    dispatch(closePublicModal());                //퍼블릭 모달을 보니 //혜민님의 커스텀 훅이구먼

  };

  const handleExit = () => {

    dispatch(closePublicModal());              //여기도 모달을 끄는구먼

    dispatch(closeAddModal());              // 새글작성모달 닫기

    navigate('/');                                  //동시에 홈으로 이동

  };

  return {handleContinueWriting, handleExit};      

}

export default PublicHook; //요고를 이제  임포트 받는곳에서 리턴된 함수를 끌어다 쓰겠구먼

 

<Button.jsx> //미희님의 버튼 쩜 작스  // 통일된 버튼을 쓰기위한 미희님 작품 

import React from 'react';

import styled from 'styled-components';

const Btn = styled.button.attrs(props => ({type: props.type}))` // 요문법을 잘 모르겠당 ㅎ

  background-color: var(--deep-blue);                                    //프롭스로 타입을 받아서 그거에 

  border: none;                                                          //따라 변화를 준다는 거 같음

  padding: 10px;                                                   //근데 프롭스 타입에 따른 변화는 없는듯?

  border-radius: 10px;

  font-weight: bold;

  font-size: 1rem;

  cursor: pointer;

  &:hover {

    filter: brightness(1.2);         //오 호버 할떄 밝아지게 하는것도 있구나 호호호 배웟따.

  }

`;

const CancelButton = styled(Btn)`    //요건 알지 위에 Btn 의 css를 물려받는거지 ㅎㅎ

  background-color: #6e6e6e;

  color: var(--white);                           //아 이걸 놓칠뻔 했네 var(-- )이 문법 

`;

const SubButton = styled(Btn)`

  background-color: var(--beige);

  color: var(--black);

`;

const Button = ({children, onClick, type}) => {   //오 이건 프롭스로 칠드런 온클릭 타입을 물려주는군

  return (                                                           //칠드런은 글자 써주는 용도고 //온클릭은 클릭시발생하도록

    <Btn type={type} onClick={onClick}>       //타입은 타입에 따라 변화를 주기위한거 같네

      {children}

    </Btn>

  );

};

export {CancelButton, SubButton};

export default Button;

// 아니 공용버튼 너무 잘만드셨는데? 능력자 ㅎㄷㄷ

<index.css>

:root {                                  //요렇게 만들어 놓으시고 따로 임포트 없이 var(--blue) 이런식으로 

  --deep-blue: #39a7ff;            //색상을 가져다 쓸수 있게 하심 오우 능력자

  --blue: #87c4ff;

  --light-blue: #e0f4ff;

  --beige: #ffeed9;

  --black: #000;

  --white: #fff;

}

 

<publicmodalSlice.js>

import {createSlice} from '@reduxjs/toolkit';

const initialState = {      //혜민님의 퍼블릭모달 슬라이스

  isUse: false,

  title: '제목',

  message: '메세지',

  btnMsg: '',

  btnType: '',

  btnMsg2: '',

  btnType2: '',

};

const publicModalSlice = createSlice({

  name: 'publicModal',

  initialState,

  reducers: {

    closePublicModal: (state, action) => {    //이즈 유즈상태를 false로 두면 꺼지게 하셨나봄

      state.isUse = false;

    },

    showPublicModal: (state, action) => {     //오 여기서 스프레드로 그냥 합치셨네?

      return {...state, ...action.payload};           //  이러면 같은 키값은 합쳐지는 구나 오호오호 배웠다.

    },                                                                //그럼 어차피 객체안에 키값 들이 같으니까 그냥

  },                                                              //스테이트 날리고 payload를 바로 리턴하면 되지 않나?

});                                                            //어쩃든 좋았다./

export const {closePublicModal, showPublicModal} = publicModalSlice.actions;

export default publicModalSlice.reducer;

 

 

<modalSlice.js>

import {createSlice} from '@reduxjs/toolkit';

const initialState = {isUseInput: false};

const modalSlice = createSlice({

  name: 'modal',

  initialState,

  reducers: {

    closeAddModal: (state, action) => {               // isUseIuput의 블리언을 바꾸면서 토글 하는 느낌으로 쓰셨군

      state.isUseInput = false;

    },

    openAddmodal: (state, action) => {         

      state.isUseInput = true;

    },

  },

});

export const {closeAddModal, openAddmodal} = modalSlice.actions;

export default modalSlice.reducer;

 

<Modal.jsx>

const ScDiv = styled.div`

  background-color: rgba(0, 0, 0, 0.5);               //역시 모달의 비밀은 css에 있었군

  backdrop-filter: saturate(180%) blur(8px);

  z-index: 1;                //가장화면 앞에 표시하도록하고 

  position: fixed;         //위치고정

  width: 100%;

  height: 100vh;

  top: 0;

  left: 0;

  border: none;

`;

const ScDivContainer = styled.div`

  width: 560px;

  height: auto;

  z-index: 100;            //얜더 앞에 나오네?

  position: absolute;       //포지션은 변경없고

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  background-color: var(--white);

  border-radius: 12px;

`;

export default Modal;           //와 css공부 더해야겠다. 

 //결론 재밌다.