Skip to content

Commit

Permalink
Merge pull request #21 from Sung-jin/drinkme#16
Browse files Browse the repository at this point in the history
#16 레시피 보기
  • Loading branch information
AnGwangHo authored Apr 23, 2019
2 parents 9763878 + c47645d commit efb92a0
Showing 11 changed files with 301 additions and 195 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -21,3 +21,5 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*

./package-lock.json
14 changes: 7 additions & 7 deletions src/containers/ViewRecipe/Function/Header.jsx
Original file line number Diff line number Diff line change
@@ -4,19 +4,19 @@ import styles from "./ViewRecipe.scss";

const cx = classNames.bind(styles);

const RecipeHeader = ({cocktail, nick, like, comment}) => {
const RecipeHeader = (props) => {
return (
<div className={cx("detail-content-header")}>
<span>{cocktail}</span>
<span>{props.cocktail}</span>

<div className={cx("detail-content-header-info")}>
<span>{nick}</span>
<span>{props.nick}</span>

<div className={cx("detail-content-header-info-count")}>
<span style={{width: "16px", height: "16px", border: "1px solid #707070", "margin-right": "7px"}}></span>
<span style={{"margin-right": "20px"}}>{like}</span>
<span style={{width: "16px", height: "16px", border: "1px solid #707070", "margin-right": "7px"}}></span>
<span>{comment}</span>
<span style={{width: "16px", height: "16px", border: "1px solid #707070", "marginRight": "7px"}}></span>
<span style={{"marginRight": "20px"}}>{props.like}</span>
<span style={{width: "16px", height: "16px", border: "1px solid #707070", "marginRight": "7px"}}></span>
<span>{props.comment}</span>
</div>
</div>
</div>
30 changes: 12 additions & 18 deletions src/containers/ViewRecipe/Function/SideComment.jsx
Original file line number Diff line number Diff line change
@@ -5,38 +5,32 @@ import { Edit, Button } from "../../../components";

const cx = classNames.bind(styles);

const RecipeComment = ({comments}) => {
const RecipeComment = (props) => {
return (
<div className={cx("detail-content-main-side-comment")}>
<div className={cx("detail-content-main-side-comment-container")}>
<div className={cx("detail-content-main-side-comment-item")}>
<span className={cx("comment-name")}>{comments[0].nick}</span>
<span className={cx("comment-content")}>{comments[0].comments}</span>
<span className={cx("comment-time")}>{comments[0].time}</span>
</div>

<div className={cx("detail-content-main-side-comment-item")}>
<span className={cx("comment-name")}>{comments[1].nick}</span>
<span className={cx("comment-content")}>{comments[1].comments}</span>
<span className={cx("comment-time")}>{comments[1].time}</span>
</div>

<div className={cx("detail-content-main-side-comment-item")}>
<span className={cx("comment-name")}>{comments[2].nick}</span>
<span className={cx("comment-content")}>{comments[2].comments}</span>
<span className={cx("comment-time")}> {comments[2].time}</span>
</div>
{
props.comments.map((input, index) => {
return <div key={`comment${index}`} className={cx("detail-content-main-side-comment-item")}>
<span className={cx("comment-name")}>{input.nick}</span>
<span className={cx("comment-content")}>{input.comments}</span>
<span className={cx("comment-time")}>{input.time}</span>
</div>
})
}
</div>

<div className={cx("detail-content-main-side-comment-input")}>
<Edit
id="commentText"
className={cx("comment-input")}
type="text"
placeholder="텍스트를 입력해주세요"
/>

<Button
className={cx("comment-button")}
onClick={props.onAddComment}
/>
</div>
</div>
6 changes: 3 additions & 3 deletions src/containers/ViewRecipe/Function/SideInfo.jsx
Original file line number Diff line number Diff line change
@@ -8,18 +8,18 @@ const RecipeCup = ({recipe, descripe, tags}) => {
return (
<div className={cx("detail-content-main-side-info")}>
<span className={cx("side-info")}>레시피 이름</span>
<span className={cx("side-info content")}>{recipe}</span>
<span className={cx("side-info", "content")}>{recipe}</span>

<span className={cx("side-info")}>한줄 설명</span>
<span className={cx("side-info content")}>{descripe}</span>
<span className={cx("side-info", "content")}>{descripe}</span>

<span className={cx("side-info")}>도수</span>
<ul className={cx("side-info-alcohol")}>
<li></li>
</ul>

<span className={cx("side-info")}>태그</span>
<span className={cx("side-info content")}>{tags}</span>
<span className={cx("side-info", "content", "tags")}>{tags}</span>
</div>
);
};
13 changes: 6 additions & 7 deletions src/containers/ViewRecipe/Function/SidePhoto.jsx
Original file line number Diff line number Diff line change
@@ -4,16 +4,15 @@ import styles from "./ViewRecipe.scss";

const cx = classNames.bind(styles);

const RecipePhoto = ({photos}) => {
const RecipePhoto = (props) => {
return (
<div className={cx("detail-content-main-side-photo")}>
<div className={cx("detail-content-main-side-photo-container")}>
<span className={cx("photo-item")}>{photos[0]}</span>
<span className={cx("photo-item")}>{photos[1]}</span>
<span className={cx("photo-item")}>{photos[2]}</span>
<span className={cx("photo-item")}>{photos[3]}</span>
<span className={cx("photo-item")}>{photos[4]}</span>
<span className={cx("photo-item")}>{photos[5]}</span>
{
props.photos.map((input, index) => {
return <span key={`images${index}`} className={cx("photo-item")}>{input}</span>
})
}
</div>
</div>
);
33 changes: 12 additions & 21 deletions src/containers/ViewRecipe/Function/SideStuff.jsx
Original file line number Diff line number Diff line change
@@ -1,33 +1,24 @@
import React from "react";
import classNames from "classnames/bind";
import styles from "./ViewRecipe.scss";
import StuffItem from "./StuffItem";

const cx = classNames.bind(styles);

const RecipeStuff = ({stuffs}) => {
const RecipeStuff = (props) => {
return (
<div className={cx("detail-content-main-side-stuff")}>
<div className={cx("detail-content-main-side-stuff-container")}>
<div className={cx("detail-content-main-side-stuff-item")}>
<span className={cx("stuff-color")}></span>
<span className={cx("stuff-name")}>{stuffs[0].name}</span>
<span className={cx("stuff-volume")}>{stuffs[0].volume}</span>
<span className={cx("stuff-ratio")}>{stuffs[0].ratio}</span>
</div>

<div className={cx("detail-content-main-side-stuff-item")}>
<span className={cx("stuff-color")}></span>
<span className={cx("stuff-name")}>{stuffs[1].name}</span>
<span className={cx("stuff-volume")}>{stuffs[1].volume}</span>
<span className={cx("stuff-ratio")}>{stuffs[1].ratio}</span>
</div>

<div className={cx("detail-content-main-side-stuff-item")}>
<span className={cx("stuff-color")}></span>
<span className={cx("stuff-name")}>{stuffs[2].name}</span>
<span className={cx("stuff-volume")}>{stuffs[2].volume}</span>
<span className={cx("stuff-ratio")}>{stuffs[2].ratio}</span>
</div>
{
props.stuffs.map((input, index) => {
return <StuffItem
idx={index}
name={input.name}
volume={input.volume}
ratio={input.ratio}
/>
})
}
</div>
</div>
);
19 changes: 19 additions & 0 deletions src/containers/ViewRecipe/Function/StuffItem.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from "react";
import classNames from "classnames/bind";
import styles from "./ViewRecipe.scss";

const cx = classNames.bind(styles);


const EnrolmentStuffItem = (props) => {
return (
<div key={`stuff${props.idx}`} className={cx("detail-content-main-side-stuff-item")}>
<span className={cx("stuff-color")}></span>
<span className={cx("stuff-name")}>{props.name}</span>
<span className={cx("stuff-volume")}>{props.volume}</span>
<span className={cx("stuff-ratio")}>{props.ratio}</span>
</div>
);
};

export default EnrolmentStuffItem;
2 changes: 1 addition & 1 deletion src/containers/ViewRecipe/Function/ViewCup.jsx
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@ import styles from "./ViewRecipe.scss";

const cx = classNames.bind(styles);

const RecipeCup = () => {
const RecipeCup = (props) => {
return (
<span className={cx("detail-content-main-view-cup")}></span>
);
Loading

0 comments on commit efb92a0

Please sign in to comment.