Merge pull request #12 from Recipe-GPT/feat/detail

Recipe-GPT · Jun 18, 2023 · e69be56 · e69be56
2 parents afbf35c + 12a9ddc
commit e69be56
Show file tree

Hide file tree

Showing 21 changed files with 360 additions and 22 deletions.
diff --git a/components/Board/BoardItem/index.tsx b/components/Board/BoardItem/index.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import * as S from "./style";
 
 function BoardItem() {
+
   return (
     <S.BoardItem>
       <S.FoodWrap>

diff --git a/components/Board/BoardItem/style.ts b/components/Board/BoardItem/style.ts
@@ -46,7 +46,7 @@ export const TitleWrap = styled.div`
 
 export const Title = styled.h1`
   font-weight: 600;
-  font-size: 1.5rem;
+  font-size: 1.4rem;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

diff --git a/components/Board/BoardMainSection/style.ts b/components/Board/BoardMainSection/style.ts
@@ -38,7 +38,7 @@ export const Search = styled.input`
   background-color: #f0f0f0;
   color: ${({ theme }) => theme.color.grey900};
   border: none;
-  width: 260px;
+  width: 18rem;
   padding: 1rem 1.5rem;
   /* font-size: 1.25rem; */
 `;

diff --git a/components/Board/BoardSection/style.ts b/components/Board/BoardSection/style.ts
@@ -10,7 +10,7 @@ export const BoardSection = styled.section<{ isYellow?: true }>`
 `;
 
 export const Title = styled.h1<{ isYellow?: true }>`
-  font-size: 2.5rem;
+  font-size: 1.8rem;
   display: flex;
   align-items: center;
   gap: 10px;

diff --git a/components/Chat/ChatSection/style.ts b/components/Chat/ChatSection/style.ts
@@ -4,7 +4,7 @@ import styled from "styled-components";
 export const ChatSection = styled.section`
   min-height: calc(100vh - 5rem);
   position: relative;
-  top: 5rem;
+  top: 4rem;
   left: 16.25rem;
   width: calc(100% - 16.25rem);
 `;

diff --git a/components/ChatResult/ChatResultRecipe/index.tsx b/components/ChatResult/ChatResultRecipe/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import * as S from "./style";
 import { useRouter } from "next/router";
 import { MaterialType } from "@/types/Chat/ChatList";
-import { MaterialList } from "../ChatResultSection/style";
+import { Material } from "../ChatResultSection/style";
 import { useRecoilState } from "recoil";
 import { isLoadingState } from "@/atoms/Etc/isLoading";
 import { getRecipeMutation } from "@/utils/apis/recipe";
@@ -25,7 +25,6 @@ function ChatResultRecipe({
 }) {
   const { asPath } = useRouter();
   const [isOpenList, setIsOpenList] = useState(Array(length).fill(false));
-  console.log(isOpenList);
   const [isLoading, setIsLoading] = useRecoilState(isLoadingState);
   const i = index + 1;
   const { ingredients, seasonings } = data;
@@ -70,15 +69,15 @@ function ChatResultRecipe({
         <S.MaterialList>
           <div>
             재료 :{" "}
-            <MaterialList>
+            <S.MaterialEmphasis>
               {data.ingredients.map((item) => item.name).join(", ")}
-            </MaterialList>
+            </S.MaterialEmphasis>
           </div>
           <div>
             조미료 :{" "}
-            <MaterialList>
+            <S.MaterialEmphasis>
               {data.seasonings.map((item) => item.name).join(", ")}
-            </MaterialList>
+            </S.MaterialEmphasis>
           </div>
         </S.MaterialList>
       )}

diff --git a/components/ChatResult/ChatResultRecipe/style.ts b/components/ChatResult/ChatResultRecipe/style.ts
@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { MdKeyboardArrowDown } from "react-icons/md";
 import styled from "styled-components";
+import { Material } from "../ChatResultSection/style";
 
 export const Index = styled.span`
   display: inline-block;
@@ -38,10 +39,15 @@ export const MaterialOpenButton = styled(MdKeyboardArrowDown)<{
   transform: translateY(-50%) ${({ isOpen }) => isOpen && "rotate(180deg)"};
   width: 1.5rem;
   height: 1.5rem;
+  cursor: pointer;
 `;
 
 export const MaterialList = styled.div`
   margin-left: 30px;
   display: flex;
   flex-direction: column;
 `;
+
+export const MaterialEmphasis = styled(Material)`
+  background-color: rgba(255, 215, 96, 0.5);
+`;
diff --git a/components/ChatResult/ChatResultSection/index.tsx b/components/ChatResult/ChatResultSection/index.tsx
@@ -14,17 +14,17 @@ function ChatResultSection({ data }: { data: ChatListType }) {
             <CS.Content>
               <CS.ShortContentLabel>
                 재료 :{" "}
-                <S.MaterialList>
+                <S.Material>
                   {data.list[0].requestedIngredients.join(", ")}
-                </S.MaterialList>
+                </S.Material>
               </CS.ShortContentLabel>
             </CS.Content>
             <CS.Content>
               <CS.ContentLabel>
                 조미료 :{" "}
-                <S.MaterialList>
+                <S.Material>
                   {data.list[0].requestedSeasonings.join(", ")}
-                </S.MaterialList>
+                </S.Material>
               </CS.ContentLabel>
             </CS.Content>
             <CS.Content>

diff --git a/components/ChatResult/ChatResultSection/style.ts b/components/ChatResult/ChatResultSection/style.ts
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const MaterialList = styled.span`
+export const Material = styled.span`
   background-color: ${({ theme }) => theme.color.lightYellow};
   font-weight: normal;
 `;

diff --git a/components/Detail/DetailInfor/index.tsx b/components/Detail/DetailInfor/index.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import * as S from "./style";
+import { MdPeopleAlt } from "react-icons/md";
+import { BiTimeFive } from "react-icons/bi";
+import { AiTwotoneStar } from "react-icons/ai";
+function DetailInfor() {
+  return (
+    <>
+      <S.DetailInfor>
+        <S.Title>
+          <S.MainTitle>매콤한 LA갈비</S.MainTitle>
+          <S.Description>매콤하면서 달달한 간단하게 만드는 LA 갈비</S.Description>
+        </S.Title>
+        <S.ImageDiv>
+          <S.FoodImage
+            src="../images/Food.svg"
+            alt="음식 사진"
+            width={700}
+            height={533}
+          />
+        </S.ImageDiv>
+        <S.Infor>
+          <S.InforDiv>
+            <S.InforIcon>
+              <MdPeopleAlt />
+            </S.InforIcon>
+            <S.InforTitle>2인분</S.InforTitle>
+          </S.InforDiv>
+          <S.InforDiv>
+            <S.InforIcon>
+              <BiTimeFive />
+            </S.InforIcon>
+            <S.InforTitle>900</S.InforTitle>
+          </S.InforDiv>
+          <S.InforDiv>
+            <S.InforIcon>
+              <AiTwotoneStar />
+            </S.InforIcon>
+            <S.InforTitle>어려움</S.InforTitle>
+          </S.InforDiv>
+        </S.Infor>
+      </S.DetailInfor>
+    </>
+  );
+}
+
+export default DetailInfor;
diff --git a/components/Detail/DetailInfor/style.ts b/components/Detail/DetailInfor/style.ts
@@ -0,0 +1,53 @@
+import styled from "styled-components";
+import Image from "next/image";
+
+export const DetailInfor = styled.div`
+  width: 50vw;
+  margin: 0 auto;
+  text-align: center;
+`;
+
+export const Title = styled.div``;
+
+export const MainTitle = styled.p`
+  font-size: 2.2rem;
+  font-weight: 700;
+`;
+
+export const Description = styled.p`
+  color: ${({ theme }) => theme.color.grey800};
+  font-size: 1.2rem;
+  padding: 5px 0px 18px 0px;
+`;
+
+export const ImageDiv = styled.div`
+  position: relative;
+  margin: 0 auto;
+  border-radius: 20px;
+  overflow: hidden;
+`;
+
+export const FoodImage = styled(Image)`
+  border-radius: 20px;
+  object-fit: cover;
+  display: block;
+  width: 100%;
+  height: 100%;
+`;
+
+export const Infor = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 40px 80px 30px 80px;
+`;
+
+export const InforDiv = styled.div`
+  color: ${({ theme }) => theme.color.grey800};
+  font-size: 1.3rem;
+`;
+
+export const InforIcon = styled.p`
+  font-size: 1.8rem;
+`;
+
+export const InforTitle = styled.p``;
diff --git a/components/Detail/DetailIngredient/index.tsx b/components/Detail/DetailIngredient/index.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import * as S from "./style";
+function DetailIngredient() {
+  return (
+    <>
+      <S.DetailIngredients>
+        <S.Title>재료</S.Title>
+        <S.MainHr />
+        <S.Ingredients>
+          <S.Ingredient>
+            <S.MiniTitle>기본재료</S.MiniTitle>
+            <S.HrPad>
+              <S.ServeHr />
+            </S.HrPad>
+            <div>
+              <S.IngredientInfor>
+                <S.IngredientName>돼지고기</S.IngredientName>
+                <S.IngredientNum>1팩</S.IngredientNum>
+              </S.IngredientInfor>
+            </div>
+          </S.Ingredient>
+          <S.Ingredient>
+            <S.MiniTitle>소스재료</S.MiniTitle>
+            <S.HrPad>
+              <S.ServeHr />
+            </S.HrPad>
+            <div>
+              <S.IngredientInfor>
+                <S.IngredientName>돼지고기</S.IngredientName>
+                <S.IngredientNum>1팩</S.IngredientNum>
+              </S.IngredientInfor>
+            </div>
+          </S.Ingredient>
+        </S.Ingredients>
+      </S.DetailIngredients>
+    </>
+  );
+}
+
+export default DetailIngredient;
diff --git a/components/Detail/DetailIngredient/style.ts b/components/Detail/DetailIngredient/style.ts
@@ -0,0 +1,59 @@
+import styled from "styled-components";
+
+export const DetailIngredients = styled.div`
+  width: 50vw;
+  margin: 0 auto;
+`;
+
+export const Title = styled.p`
+  font-size: 1.4rem;
+  padding-bottom: 0.8rem;
+  font-family: "Pretendard-Light";
+`;
+
+export const MainHr = styled.hr`
+  background-color: ${({ theme }) => theme.color.mainYellow};
+  height: 2px;
+  border: 0;
+`;
+
+export const Ingredients = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding-top: 1.5rem;
+`;
+
+export const Ingredient = styled.div`
+  width: 24vw;
+`;
+
+export const IngredientInfor = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 0.5rem;
+`;
+
+export const MiniTitle = styled.p`
+  font-size: 1.1rem;
+  font-family: "Pretendard-Light";
+`;
+
+export const ServeHr = styled.hr`
+  background-color: ${({ theme }) => theme.color.grey700};
+  height: 1px;
+  border: 0;
+`;
+
+export const HrPad = styled.div`
+  padding: 12px 0px 12px 0px;
+`;
+
+export const IngredientName = styled.p`
+  font-size: 0.8rem;
+  font-family: "Pretendard-Light";
+`;
+export const IngredientNum = styled.p`
+  font-size: 0.8rem;
+  color: ${({ theme }) => theme.color.grey900};
+  font-family: "Pretendard-Light";
+`;
diff --git a/components/Detail/DetailRecipe/index.tsx b/components/Detail/DetailRecipe/index.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import * as S from "./style";
+
+function DetailRecipe() {
+  return (
+    <>
+      <S.DetailRecipe>
+        <S.Title>레시피</S.Title>
+        <S.MainHr />
+        <S.Recipe>
+          <S.RecipeStep>
+            <S.RecipeTop>
+              <S.Step>step 1</S.Step>
+              <S.StepStory>먹기좋게~</S.StepStory>
+            </S.RecipeTop>
+            <S.RecipeHr />
+          </S.RecipeStep>
+        </S.Recipe>
+        <S.RecipeWriter>
+          <S.Writer>작성자</S.Writer>
+          <S.Info>ᐧ</S.Info>
+          <S.Writer>2022.03.05</S.Writer>
+        </S.RecipeWriter>
+      </S.DetailRecipe>
+    </>
+  );
+}
+
+export default DetailRecipe;