[#23] apply Detail page

src/components/Card/index.tsx

@@ -9,8 +9,8 @@ interface Props {
 
 function Card({ img, title, summary }: Props) {
   return (
-    <div css={wrapper}>
-      <div css={inWrapper}>
+    <article css={wrapper}>
+      <div css={centerWrapper}>
         <div css={imgWrapper}>
           <Image
             src={img}
@@ -25,7 +25,7 @@ function Card({ img, title, summary }: Props) {
           <span css={name}>{title}</span>
         </div>
       </div>
-    </div>
+    </article>
   );
 }
 
@@ -38,7 +38,7 @@ const wrapper = css`
   margin: 0 auto;
 `;
 
-const inWrapper = css`
+const centerWrapper = css`
   position: relative;
   display: flex;
   flex-direction: column;

src/components/Detail/Footer.tsx

@@ -0,0 +1,49 @@
+import { css, Theme } from "@emotion/react";
+
+function Footer() {
+  return (
+    <div css={wrapper}>
+      <div css={inWrapper}>
+        <span css={title}>유의사항</span>
+        <div>
+          <span css={linkTitle}>
+            메뉴 사진은 개발자가 직접 찍은 사진으로 실제 조리된 음식과 다를 수
+            있습니다.
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Footer;
+
+const wrapper = (theme: Theme) => css`
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  width: 100%;
+  height: 6rem;
+  color: #d5d8dd;
+  background-color: ${theme.color.grey100};
+  font-size: 13px;
+  font-weight: ${theme.fontWeight.light};
+`;
+
+const inWrapper = css`
+  padding: 0 1.3rem;
+`;
+
+const title = (theme: Theme) => css`
+  all: unset;
+  color: ${theme.color.grey500};
+  font-weight: ${theme.fontWeight.bold};
+  font-size: 0.88rem;
+`;
+
+const linkTitle = (theme: Theme) => css`
+  all: unset;
+  color: ${theme.color.grey900};
+`;

src/components/Detail/Inform/PlaceInform.tsx

@@ -0,0 +1,38 @@
+import { css, Theme } from "@emotion/react";
+
+interface Props {
+  title: string;
+  summary: string;
+}
+
+function PlaceInform({ title, summary }: Props) {
+  return (
+    <div css={wrapper}>
+      <span css={subName}>{title}</span>
+      <span css={inform}>{summary}</span>
+    </div>
+  );
+}
+
+export default PlaceInform;
+
+const wrapper = css`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 0.23rem 0;
+
+`;
+
+const subName = (theme: Theme) => css`
+  font-weight: ${theme.fontWeight.normal};
+  color: ${theme.color.grey500};
+  font-size: 0.75rem;
+  margin-right: 0.65rem;
+`;
+
+const inform = (theme: Theme) => css`
+  font-weight: ${theme.fontWeight.normal};
+  color: ${theme.color.black};
+  font-size: 0.92rem;
+`;

src/components/Detail/Inform/PlaceLink.tsx

@@ -0,0 +1,57 @@
+import { css, Theme } from "@emotion/react";
+import Link from "next/link";
+
+function PlaceLink() {
+  return (
+    <div css={introduceWrapper}>
+      <div css={nameWrapper}>
+        <span css={placeName}>가게이름</span>
+      </div>
+      <div css={buttonWrapper}>
+        <a href="tel:010-1234-456">
+          <span css={linkButton}>전화</span>
+        </a>
+        <span css={linkButton}>지도보기</span>
+        <span css={linkButton}>공유</span>
+        <Link href="/Review">
+          <a>
+            <span css={linkButton}>리뷰보기</span>
+          </a>
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default PlaceLink;
+
+const nameWrapper = css`
+  display: flex;
+  flex-direction: row;
+  margin: 0.5rem 0;
+`;
+
+const placeName = (theme: Theme) => css`
+  font-weight: ${theme.fontWeight.bold};
+  font-size: 1.5rem;
+`;
+
+const buttonWrapper = css`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+const introduceWrapper = (theme: Theme) => css`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: auto;
+  margin: 0.6rem 0 0.4rem 0;
+  background-color: ${theme.color.fullWhite};
+`;
+
+const linkButton = (theme: Theme) => css`
+  color: ${theme.color.grey900};
+  font-size: 0.95rem;
+`;

src/components/Detail/Inform/PlaceTime.tsx

@@ -0,0 +1,55 @@
+import { css, Theme } from "@emotion/react";
+
+interface Props {
+  title: string;
+  summary: string;
+}
+
+function PlaceTime({ title, summary }: Props) {
+  return (
+    <div css={wrapper}>
+      <span css={subName}>{title}</span>
+      <details css={detailsWrapper}>
+        <summary>{summary}</summary>
+        <ul css={ulWrapper}>
+          <li css={timeList}>월 12:00 ~ 23:00 </li>
+          <li css={timeList}>화 12:00 ~ 23:00 </li>
+          <li css={timeList}>수 12:00 ~ 23:00 </li>
+        </ul>
+      </details>
+    </div>
+  );
+}
+
+export default PlaceTime;
+
+const wrapper = css`
+  display: flex;
+  flex-direction: row;
+  margin: 0.23rem 0;
+`;
+
+const subName = (theme: Theme) => css`
+  font-weight: ${theme.fontWeight.normal};
+  color: ${theme.color.grey500};
+  font-size: 0.75rem;
+  margin-right: 0.65rem;
+  margin-top: 0.14rem;
+`;
+
+const detailsWrapper = css`
+  all: unset;
+  font-size: 0.92rem;
+`;
+
+const ulWrapper = css`
+  all: unset;
+  display: flex;
+  flex-direction: column;
+  height: auto;
+`;
+
+const timeList = css`
+  margin: 0;
+  font-size: 0.92rem;
+`;

src/components/Detail/Menu/Category.tsx

@@ -0,0 +1,57 @@
+import { css, Theme } from "@emotion/react";
+
+function Category() {
+    return (
+        <>
+            <div css={keywordMenu}>
+                <span css={title}>메뉴</span>
+            </div>
+            <div css={categoryMenu}>
+                <div css={categoryShape}>
+                    <span css={category}>키워드</span>
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default Category;
+
+const title = (theme: Theme) => css`
+  font-size: 1rem;
+  font-weight: ${theme.fontWeight.bold};
+`;
+
+const keywordMenu = (theme: Theme) => css`
+  width: 100%;
+  margin: 1.8rem 0 0.85rem 0;
+  padding: 0.55rem 1.3rem;
+  background-color: ${theme.color.grey100};
+`;
+
+const categoryMenu = css`
+  display: flex;
+  flex-direction: row;
+  padding: 0 0.7rem;
+  height: 2rem;
+  width: 100%;
+  overflow-x: scroll;
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+const categoryShape = (theme: Theme) => css`
+  border: 1px solid ${theme.color.grey500};
+  width: auto;
+  height: 1.85rem;
+  padding: 0.1rem 0.62rem;
+  border-radius: 20px;
+  margin: 0 0.13rem;
+`;
+
+const category = (theme: Theme) => css`
+  font-size: 0.81rem;
+  font-weight: ${theme.fontWeight.light};
+`;

src/components/Detail/Menu/MenuList.tsx

@@ -0,0 +1,67 @@
+import { css, Theme } from "@emotion/react";
+import Image from "next/image";
+
+function MenuList() {
+  return (
+    <div css={wrapper}>
+      <div css={itemPlaced}>
+        <div css={summaryWrapper}>
+          <span css={menuName}>메뉴명</span>
+          <span css={price}>가격</span>
+        </div>
+        <div css={imgWrapper}>
+          <Image
+            src="/images/menu.jpg"
+            alt="img"
+            layout="fill"
+            objectFit="cover"
+            css={menuImg}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default MenuList;
+
+const wrapper = (theme: Theme) => css`
+  width: 100%;
+  height: fit-content;
+  border-top: 1px solid ${theme.color.grey100}; ;
+`;
+
+const itemPlaced = css`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 0.7rem 1.3rem;
+`;
+
+const summaryWrapper = css`
+  display: flex;
+  flex-direction: column;
+`;
+
+const imgWrapper = css`
+  position: relative;
+  width: 9.7rem;
+  height: 7.5rem;
+`;
+
+const menuImg = css`
+  width: 100%;
+  height: 100%;
+  border-radius: 0.6rem;
+`;
+
+const menuName = (theme: Theme) => css`
+  font-weight: ${theme.fontWeight.bold};
+  font-size: 1.1rem;
+`;
+
+const price = (theme: Theme) => css`
+  color: ${theme.color.grey500};
+  font-weight: ${theme.fontWeight.normal};
+  font-size: 0.75rem;
+`;

src/components/Detail/QuestionLottie.tsx

@@ -0,0 +1,18 @@
+import { css, Theme } from "@emotion/react";
+import LottieWrapper from "components/common/LottieWrapper";
+import bgLottieData from "assets/lottieJSON/questionMark.json";
+
+function QuestionLottie() {
+  return (
+    <div css={wrapper}>
+      <LottieWrapper lottieData={bgLottieData} />
+    </div>
+  );
+}
+
+export default QuestionLottie;
+
+const wrapper = css`
+  width: 85%;
+  height: 50%;
+`;