Skip to content

Commit

Permalink
컴포넌트 분리
Browse files Browse the repository at this point in the history
  • Loading branch information
kss53043 committed Nov 29, 2024
1 parent f4cb411 commit 02c5bad
Show file tree
Hide file tree
Showing 8 changed files with 90 additions and 86 deletions.
31 changes: 31 additions & 0 deletions src/components/FileInput.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
.add_form_list > li .input_file_box {display : flex;}
.add_form_list > li .input_file_box label {display : flex; align-items: center; justify-content: center; flex-direction: column; width: 282px; height: 282px; background-color: #F3F4F6; border-radius: 12px; cursor: pointer;}
.add_form_list > li .input_file_box label > span {margin-top: 12px; color: #9CA3AF; font-size: 1.6rem; font-weight: 400; line-height: 1.625; }
.add_form_list > li .input_file_box input {display: none;}
.add_form_list > li .input_file_box .file_img_list > li {position: relative; overflow: hidden; width: 282px; height: 282px; margin-left: 24px; border-radius: 12px;}
.add_form_list > li .input_file_box .file_img_list > li > .remove_btn {position: absolute; top: 12px; right: 12px; z-index: 2;}
.add_form_list > li .input_file_box .file_img_list > li > img {width: 100%; height: 100%; object-fit: cover;}

.limit_text {position: relative; z-index: -1; margin-top: -26px; color: #F74747; font-size: 1.6rem; line-height: 1.625; opacity: 0; transition: all 0.2s ease-in-out;}
.limit_text.active {opacity: 1; margin-top: 16px; margin-bottom: -8px;}

@media (max-width: 1200px) {
.add_form_list > li .input_file_box label {width: 168px; height: 168px;}
.add_form_list > li .input_file_box .file_img_list > li {width: 168px; height: 168px; margin-left: 10px;}
.limit_text {width: 168px; white-space: nowrap; font-size: 1.4rem;}
}

@media (max-width: 768px) {
.add_form_list > li .input_file_box {justify-content: space-between;}
.add_form_list > li .input_file_box .file_add_wrap {position: relative; width: calc(50% - 5px); height: 0; padding-top: calc(50% - 5px);}
.add_form_list > li .input_file_box label {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.add_form_list > li .input_file_box:has( .limit_text.active) .file_add_wrap {padding-top: calc(50% + 15px);}
.add_form_list > li .input_file_box:has( .limit_text.active) label {height: calc(100% - 20px);}

.add_form_list > li .input_file_box .file_img_list {position: relative; width: calc(50% - 5px); height: 0; padding-top: calc(50% - 5px);}
.add_form_list > li .input_file_box .file_img_list > li {position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-left: 0;}

.limit_text {margin-top: -50px;}
.limit_text.active {margin-top: -13px;}
}
3 changes: 2 additions & 1 deletion src/components/FileInput.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import addImg from "./../assets/icon_add.svg";
import removeIcon from "./../assets/icon_remove.svg";
import { useEffect, useState, useRef } from "react";
import "./FileInput.css";

function FileInput({ name, value, onChange }) {
const handleFileChange = (e) => {
Expand Down Expand Up @@ -47,7 +48,7 @@ function FileInput({ name, value, onChange }) {
<ul className="file_img_list">
<li>
<button type="button" onClick={handlePreviewRemove} className="btn_reset remove_btn">
<img src={removeIcon} alt="티셔츠 삭제하기" />
<img src={removeIcon} alt="삭제하기" />
</button>
<img src={fileImg} alt="" />
</li>
Expand Down
8 changes: 8 additions & 0 deletions src/components/FormItem.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.add_form_list > li .input_box input[type="text"] {width: 100%; height: 56px; padding: 0 24px; background-color: #F3F4F6; border-radius: 12px; font-size: 1.6rem; font-weight: 400; line-height: 1.625;}
.add_form_list > li .input_box input[type="text"]::placeholder {color: #9CA3AF;}
.add_form_list > li .input_box textarea {width: 100%; height: 282px; padding: 16px 24px; background-color: #F3F4F6; border-radius: 12px; font-size: 1.6rem; font-weight: 400; line-height: 1.625; resize: none;}
.add_form_list > li .input_box textarea::placeholder {color: #9CA3AF;}

@media (max-width: 1200px) {
.add_form_list > li + li {margin-top: 24px;}
}
22 changes: 22 additions & 0 deletions src/components/FormItem.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import FormLabel from "./../components/FormLabel";
import FileInput from "./../components/FileInput";
import "./FormLabel.css";
import "./FormItem.css";

const FormItem = ({ labelName, type, id, name, className, value, onChange, placeholder }) => {
return (
<li>
<FormLabel htmlFor={id} labelName={labelName} />
<div className={type !== "file" ? `input_box` : `input_box input_file_box`}>
{type === "textarea" ? (
<textarea type={type} id={id} name={name} className={className} value={value} onChange={onChange} placeholder={placeholder}></textarea>
) : type === "file" ? (
<FileInput name={name} value={value} onChange={onChange} />
) : (
<input type={type} id={id} name={name} className={className} value={value} onChange={onChange} placeholder={placeholder} />
)}
</div>
</li>
);
};
export default FormItem;
1 change: 1 addition & 0 deletions src/components/FormLabel.css
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.add_form_list > li .title {display: block; margin-bottom: 16px; font-size: 1.8rem; font-weight: 700; line-height: 1.4444;}
8 changes: 8 additions & 0 deletions src/components/FormLabel.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
const FormLabel = ({ htmlFor, labelName }) => {
return (
<label htmlFor={htmlFor} className="title">
{labelName}
</label>
);
};
export default FormLabel;
39 changes: 1 addition & 38 deletions src/page/AddItemPage.css
Original file line number Diff line number Diff line change
@@ -1,46 +1,9 @@
.add_submit {margin-left: auto;}
.add_form_list > li + li {margin-top: 32px;}
.add_form_list > li .title {display: block; margin-bottom: 16px; font-size: 1.8rem; font-weight: 700; line-height: 1.4444;}
.add_form_list > li .input_box input[type="text"] {width: 100%; height: 56px; padding: 0 24px; background-color: #F3F4F6; border-radius: 12px; font-size: 1.6rem; font-weight: 400; line-height: 1.625;}
.add_form_list > li .input_box input[type="text"]::placeholder {color: #9CA3AF;}
.add_form_list > li .input_box textarea {width: 100%; height: 282px; padding: 16px 24px; background-color: #F3F4F6; border-radius: 12px; font-size: 1.6rem; font-weight: 400; line-height: 1.625; resize: none;}
.add_form_list > li .input_box textarea::placeholder {color: #9CA3AF;}

.tag_list {display : flex; flex-wrap: wrap; gap:12px; margin-top: 14px; }
.tag_list > li {display : flex; align-items: center; padding: 6px 16px; background-color: #F3F4F6; border-radius: 50px; transition: all 0.2s; }
.tag_list > li > span {font-size: 1.6rem; font-weight: 400; line-height: 1.625;}
.tag_list > li > .remove {margin-left: 8px;}
.tag_list > li:has( > .remove:hover ) {background-color: #E5E7EB;}

.add_form_list > li .input_file_box {display : flex;}
.add_form_list > li .input_file_box label {display : flex; align-items: center; justify-content: center; flex-direction: column; width: 282px; height: 282px; background-color: #F3F4F6; border-radius: 12px; cursor: pointer;}
.add_form_list > li .input_file_box label > span {margin-top: 12px; color: #9CA3AF; font-size: 1.6rem; font-weight: 400; line-height: 1.625; }
.add_form_list > li .input_file_box input {display: none;}
.add_form_list > li .input_file_box .file_img_list > li {position: relative; overflow: hidden; width: 282px; height: 282px; margin-left: 24px; border-radius: 12px;}
.add_form_list > li .input_file_box .file_img_list > li > .remove_btn {position: absolute; top: 12px; right: 12px; z-index: 2;}
.add_form_list > li .input_file_box .file_img_list > li > img {width: 100%; height: 100%; object-fit: cover;}

.limit_text {position: relative; z-index: -1; margin-top: -26px; color: #F74747; font-size: 1.6rem; line-height: 1.625; opacity: 0; transition: all 0.2s ease-in-out;}
.limit_text.active {opacity: 1; margin-top: 16px; margin-bottom: -8px;}

@media (max-width: 1200px) {
.add_form_list > li + li {margin-top: 24px;}
.add_form_list > li .input_file_box label {width: 168px; height: 168px;}
.add_form_list > li .input_file_box .file_img_list > li {width: 168px; height: 168px; margin-left: 10px;}
.limit_text {width: 168px; white-space: nowrap; font-size: 1.4rem;}
}

@media (max-width: 768px) {
.add_form_list > li .input_file_box {justify-content: space-between;}
.add_form_list > li .input_file_box .file_add_wrap {position: relative; width: calc(50% - 5px); height: 0; padding-top: calc(50% - 5px);}
.add_form_list > li .input_file_box label {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.add_form_list > li .input_file_box:has( .limit_text.active) .file_add_wrap {padding-top: calc(50% + 15px);}
.add_form_list > li .input_file_box:has( .limit_text.active) label {height: calc(100% - 20px);}

.add_form_list > li .input_file_box .file_img_list {position: relative; width: calc(50% - 5px); height: 0; padding-top: calc(50% - 5px);}
.add_form_list > li .input_file_box .file_img_list > li {position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-left: 0;}

.limit_text {margin-top: -50px;}
.limit_text.active {margin-top: -13px;}

}
64 changes: 17 additions & 47 deletions src/page/AddItemPage.jsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,27 @@
import SubTitle from "./../components/SubTitle";
import "./AddItemPage.css";
import removeIcon from "./../assets/icon_remove.svg";
import FileInput from "./../components/FileInput";
import { useState, useEffect, useRef } from "react";
import FormItem from "./../components/FormItem";
import { useState, useEffect } from "react";
import FormLabel from "./../components/FormLabel";
import "./../components/FormLabel.css";

const AddItemPage = () => {
const [fakeTag, setFakeTag] = useState("");
const [inputValue, setInputValue] = useState({
name: "",
introduce: "",
price: "",
imgFile: null,
imgFile: "",
tag: "",
});

const tagList = inputValue.tag.split("|");

const handleSubmit = (e) => {
//e.preventDefault();
};

const handleChange = (name, value) => {
if (name === "price") {
const priceValue = value.replaceAll(",", "");
Expand All @@ -39,12 +48,6 @@ const AddItemPage = () => {
handleChange(name, value);
};

const handleSubmit = (e) => {
//e.preventDefault();
};

const [fakeTag, setFakeTag] = useState("");

const handleFakeTag = (e) => {
setFakeTag(e.target.value);
};
Expand All @@ -58,8 +61,6 @@ const AddItemPage = () => {
}
};

const tagList = inputValue.tag.split("|");

const handleTagRemove = (tagName) => {
setInputValue((prev) => {
const tagUpdate = prev.tag
Expand Down Expand Up @@ -97,46 +98,15 @@ const AddItemPage = () => {
</div>
<div className="add_form">
<ul className="add_form_list">
<FormItem labelName="상품이미지" type="file" id="add_img" name="imgFile" className="imgFile" value={inputValue.imgFile} onChange={handleChange} />
<FormItem labelName="상품명" type="text" id="add_name" name="name" className="inp_reset" value={inputValue.name} onChange={handleInputChange} placeholder="상품명을 입력해주세요" />
<FormItem labelName="상품 소개" type="textarea" id="add_introduce" name="introduce" className="inp_reset" value={inputValue.introduce} onChange={handleInputChange} placeholder="상품 소개를 입력해주세요" />
<FormItem labelName="판매 가격" type="text" id="add_price" name="price" className="inp_reset" value={inputValue.price} onChange={handleInputChange} placeholder="판매 가격을 입력해주세요" />
<li>
<div htmlFor="add_img" className="title">
상품이미지
</div>
<div className="input_box input_file_box">
<FileInput name="imgFile" value={inputValue.imgFile} onChange={handleChange} />
</div>
</li>
<li>
<label htmlFor="add_name" className="title">
상품명
</label>
<div className="input_box">
<input type="text" id="add_name" name="name" className="inp_reset" value={inputValue.name} onChange={handleInputChange} placeholder="상품명을 입력해주세요" />
</div>
</li>
<li>
<label htmlFor="add_introduce" className="title">
상품 소개
</label>
<div className="input_box">
<textarea id="add_introduce" name="introduce" className="inp_reset" value={inputValue.introduce} onChange={handleInputChange} placeholder="상품 소개를 입력해주세요"></textarea>
</div>
</li>
<li>
<label htmlFor="add_price" className="title">
판매가격
</label>
<div className="input_box">
<input type="text" id="add_price" name="price" className="inp_reset" value={inputValue.price} onChange={handleInputChange} placeholder="판매 가격을 입력해주세요" />
</div>
</li>
<li>
<label htmlFor="add_tag" className="title">
태그
</label>
<FormLabel htmlFor="add_tag" labelName="태그" />
<div className="input_box">
<input type="text" id="add_tag" className="inp_reset" placeholder="태그를 입력해주세요" onKeyDown={handleTagChange} onChange={handleFakeTag} value={fakeTag} />
</div>

{inputValue.tag && (
<ul className="tag_list">
{tagList.map((el, idx) => (
Expand Down

0 comments on commit 02c5bad

Please sign in to comment.