YounglanHong

// ref: https://www.swyx.io/css-100-bytes/

html {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
  line-height: 1.5rem;
  font-size: 24px;
}

YounglanHong

// pages/posts/[slug].tsx

import Head from "next/head";
import Link from "next/link";
import styles from "../../styles/Post.module.scss";
import { GetStaticProps, GetStaticPaths } from "next";

const Post = ({ post }) => {
  // console.log(post);
  return (

YounglanHong

// ref: https://github.com/twbs/stylelint-config-twbs-bootstrap/blob/main/css/index.js

'order/properties-order': [
      'position',
      'top',
      'right',
      'bottom',
      'left',
      'z-index',
      'box-sizing',

YounglanHong

// ==========================================
// RECESS
// RULE: Must use correct property ordering
// ==========================================
// Copyright 2012 Twitter, Inc
// Licensed under the Apache License v2.0
// http://www.apache.org/licenses/LICENSE-2.0
// ==========================================
// (ref: https://github.com/twitter/recess/blob/8a4835299518a57c71fb11cb7dc87cd1577a9872/lib/lint/strict-property-order.js)

YounglanHong

// redux store로부터 불러온 card data
const { cards } = this.props;

{cards.map((card, idx) => {
    <Formik
       key={card.id}
          initialValues={{
            id: card.id,
            cardtype: card.cardtype,
            question: card.question,

YounglanHong

import { ADD_CARD, SHOW_CARD } from "../actions/cardActions.js";

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case SHOW_CARD:
      return Object.assign({}, state, { cards: action.cards });
    
     // ...
      
  }

YounglanHong

import axios from "axios";

export const SHOW_CARD = "SHOW_CARD";

// 서버로부터 카드 데이터 가져오기
export function getDeckCards() {
  return dispatch => {
    axios
      .get("http://localhost:4000/card/cardInfo")
      .then(res => {

YounglanHong

import Card from "../components/Card";
import { connect } from "react-redux";

// 컴포넌트에서 필요한 데이터를 store에서 추출하여 객체 반환
function mapStateToProps(state) {
  return {
    cards: state.card.cards,
    decks: state.deck.decks,
    category: state.deck.category,
  };

YounglanHong

//* Formik props
  const initialValues = {
    decks: [""],    // --- 1️⃣
  };

  const onSubmit = (values, actions) => {
    registerDeck(values.decks);
    getDeck();
    // 입력창 초기화
    actions.resetForm({

YounglanHong

// Header.js
import React from "react";
import { Link, withRouter } from "react-router-dom";

import "../styles/header.css";

import NavBar from "./NavBar";

function Header(props) {
  console.log(props);