23.02.22) 최종 프로젝트 작업을 진행한 80일차

오늘의 작업

• header에 Link로 페이지 안 컴포넌트 이동하기.

          <Link
            href={{
              pathname: "/loginPage",
              query: { headerstatus: "headerstatus" }, // array라 문자화
            }}
            className="sorted-btn"
          >
            회원가입
          </Link>

먼저 header컴포넌트 해당 Link 에 query로 데이터를 넘긴다.

import React, { useState } from "react";
import { useRouter } from "next/router";

const LoginPage = () => {
  const router = useRouter();
  const { headerstatus } = router.query;

  return (
    <div>
      {headerstatus ? (
        <div className="grid items-center mx-auto mt-14">
        //해당 컴포넌트
        </div>
      ) : (
        <div className="grid items-center mx-auto mt-14">
        </div>
      )}
    </div>
  );
};

이후에 해당 router.query로 데이터를 props로 받아 뿌리고 이걸로 삼항연산자를 만들면 끝!!

문제는 이걸 작업하느라 1시간이 걸렷다는것!!!왜 생각을 못했을까..

 

• 회원 공개 여부에 따라 alert창 출력하기

    //회원아니면 alert뜨게함. 추가 로직
    const goToDetail = (id: any) => {
        if (storageCurrentUser === "guest") {
            alert("멤버공개 레시피글입니다. 로그인을 진행해주세요.");
            return false;
        } else {
            router.push(`/detailRecipePage/${id}`);
        }
    };
    const goToDetails = (id: any) => {
        router.push(`/detailRecipePage/${id}`);
    };
    
    //이후 onClick에 삼항연산자로 다른 결과 띄우기
                                <div
                                key={item.id}
                                className="w-[316px] cursor-pointer"
                                onClick={() => {
                                    item.displayStatus === "회원 공개"
                                        ? goToDetail(item.id)
                                        : goToDetails(item.id);
                                }}
                            >

onClick으로도 삼항연산자가 가능하다!

 

• 기타 UI 작업

" w-full h-[55px] py-2.5 text-sm font-medium leading-5 text-white border-y border-l border-mono50 last:border-r",

tailwind에서 css의 nth:child를 쓰고싶을 때는 last : 로 적용한다!!

onClick={() => {item.displayStatus === "회원 공개" ? goToDetail(item.id) : goToDetails(item.id);}