Merge pull request #106 from gkgkgkgkgk73/v0.0.5

addmodal, closet, outfit 관련 css 수정
swsnu · Dec 8, 2022 · a61b94c · a61b94c
2 parents 925d4a6 + c198244
commit a61b94c
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 43 deletions.
diff --git a/Frontend/ooo/src/components/AddClothModal/AddClothModal.css b/Frontend/ooo/src/components/AddClothModal/AddClothModal.css
@@ -19,30 +19,34 @@
 	padding: 8px 8px;
 	/* font-size: 20px; */
 	line-height: 20px;
+	margin-top: 5px;
+	margin-bottom: 5px;
 	border: 1px solid;
 	color: inherit;
 	background-color: transparent;
 	/* margin-bottom: 30px; */
 }
 
 #AddClothModal-text {
+	margin-left: 25px;
 	font-size: 30px;
 	color: black;
 }
 
 .AddClothModal .AddClothModalTop {
 	display: flex;
 	flex-direction: row;
+	width: 1000px;
 }
 
 /*cashing?*/
 .AddClothModal .AddClothModalTop .UploadClothDiv {
 	display: flex;
-	width: 44%;
+	width: 600px;
 	min-width: 500px;
 	height: auto;
 	flex-direction: column;
-	margin-left: 5%;
+	margin-left: 25px;
 	margin-top: 2%;
 	margin-bottom: 1%;
 	/* border-color: black; */
@@ -77,11 +81,11 @@
 
 .AddClothModal .AddClothModalTop .UploadedClothInfoDiv {
 	display: flex;
-	width: 44%;
+	width: 500px;
 	min-width: 500px;
 	height: auto;
 	flex-direction: column;
-	margin-left: 5%;
+	margin-left: 50px;
 	margin-top: 2%;
 	/* border-color: black; */
 	box-shadow: gray;

diff --git a/Frontend/ooo/src/components/AddClothModal/AddClothModal.tsx b/Frontend/ooo/src/components/AddClothModal/AddClothModal.tsx
@@ -169,7 +169,7 @@ const AddClothModal = (props: IProps) => {
 					<div className="UploadedClothPreviewDiv">
 						{fileImage ? (
 							fileImage && (
-								<img id="uploaded-image-preview" src={fileImage} height="400" />
+								<img id="uploaded-image-preview" src={fileImage} height="400" width="600px"/>
 							)
 						) : (
 							<div className="UploadedClothTempDiv"></div>
@@ -200,14 +200,15 @@ const AddClothModal = (props: IProps) => {
 						</select>
 					</div>
 					<div className="UploadedClothInfoDiv-sub">
-						<text id="UploadedClothInfoDiv-text">▶ 세부 TYPE</text>
+						<text id="UploadedClothInfoDiv-text">▶ TYPE DETAIL</text>
 						<TypeFilter
 							metaType={metaType}
 							selectHandler={clickTypeOptionHandler}
 						></TypeFilter>
 					</div>
 
 					<div className="UploadedClothInfoDiv-sub">
+						<text id="UploadedClothInfoDiv-text">▶ COLOR</text>
 						<GithubPicker
 							data-testid="cloth-info-input-color"
 							color={colorHex}

diff --git a/Frontend/ooo/src/components/FilterModal/FilterModal.css b/Frontend/ooo/src/components/FilterModal/FilterModal.css
@@ -11,9 +11,6 @@
 	display: flex;
 	flex-basis: 100%;
 	flex-direction: column;
-	width: 200px;
-	height: 100px;
-	flex-direction: column;
 }
 
 #type-select {
@@ -22,6 +19,8 @@
 	padding: 8px 8px;
 	/* font-size: 20px; */
 	line-height: 20px;
+	margin-top: 5px;
+	margin-bottom: 5px;
 	border: 1px solid;
 	color: inherit;
 	background-color: transparent;
@@ -56,6 +55,7 @@
 	line-height: 20px;
 	border: 1px solid;
 	color: inherit;
+	margin-top: 5px;
 	background-color: transparent;
 }
 
@@ -64,7 +64,8 @@
 }
 
 #done-button {
-	margin-top: 30px;
+	display: inline;
+	margin-top: 15px;
 	background-color: black;
 	color: white;
 	border: none;

diff --git a/Frontend/ooo/src/components/FilterModal/FilterModal.tsx b/Frontend/ooo/src/components/FilterModal/FilterModal.tsx
@@ -121,6 +121,7 @@ const FilterModal = (props: IProps) => {
 	return (
 		<div className="FilterModal">
 			<div>
+				<text>TYPE</text>
 				<select
 					id="meta-type-select"
 					onChange={(e) => clickMetaTypeOptionHandler(e.target.value)}
@@ -131,38 +132,42 @@ const FilterModal = (props: IProps) => {
 						</option>
 					))}
 				</select>
+			</div>
+			<div>
+				<text>TYPE DETAIL</text>
 				<TypeFilter
 					data-testid="typefilter"
 					metaType={metaType}
 					selectHandler={clickTypeOptionHandler}
 				></TypeFilter>
 			</div>
-
-			<br></br>
-			<text>Color</text>
-			<GithubPicker
-				data-testid="color-select"
-				color={colorHex}
-				colors={COLOROPTIONS}
-				onChange={colorHandler}
-			/>
-			<text>{color}</text>
-
-			<select
-				id="pattern-select"
-				onChange={(e) => clickPatternOptionHandler(e.target.value)}
-			>
-				{PatternOptions.map((option, index) => (
-					<option
-						key={index}
-						value={option.value}
-						// onClick={() => clickPatternOptionHandler(option.value)}
-					>
-						{option.value}
-					</option>
-				))}
-			</select>
-
+			<div style={{marginBottom:'5px'}}>
+				<text style={{paddingBottom:'5px'}}>COLOR</text>
+				<GithubPicker
+					data-testid="color-select"
+					color={colorHex}
+					colors={COLOROPTIONS}
+					onChange={colorHandler}
+				/>
+				<text>{color}</text>
+			</div>
+			<div>
+				<text>PATTERN</text>
+				<select
+					id="pattern-select"
+					onChange={(e) => clickPatternOptionHandler(e.target.value)}
+				>
+					{PatternOptions.map((option, index) => (
+						<option
+							key={index}
+							value={option.value}
+							// onClick={() => clickPatternOptionHandler(option.value)}
+						>
+							{option.value}
+						</option>
+					))}
+				</select>
+			</div>
 			<button
 				id="done-button"
 				data-testid="done-button"

diff --git a/Frontend/ooo/src/components/OutfitPreview/OutfitPreview.css b/Frontend/ooo/src/components/OutfitPreview/OutfitPreview.css
@@ -43,7 +43,6 @@
 	text-overflow: ellipsis;
 	font-size: 10px;
 	font-weight: 100;
-	margin-bottom: 10%;
 }
 
 #name-label{

diff --git a/Frontend/ooo/src/containers/Closet/Closet.css b/Frontend/ooo/src/containers/Closet/Closet.css
@@ -54,8 +54,7 @@
 
 #type-select {
 	/* margin-left: 100%; */
-	margin-left: 40px;
-	margin-top: 15%;
+	margin-top: 5px;
 	padding: 8px 8px;
 	line-height: 20px;
 	border: 1px solid;
@@ -66,17 +65,26 @@
 #type-select:focus {
 	border-color: red;
 }
-
+#Closet-select-div {
+	margin-left: 50px;
+	margin-top: 15px;
+}
 #Closet-text-main {
 	margin-left: 2%;
 	font-size: 60px;
 	color: black;
 }
+#add-cloth-modal {
+	width: 1300px;
+	height: 800px;
+}
 
 #add-cloth-button {
 	margin-left: 2%;
 	background-color: black;
 	color: white;
+	height: fit-content;
+	margin-top: 13px;
 	border: none;
 	padding: 10px;
 	padding-left: 20px;
@@ -85,7 +93,7 @@
 }
 
 #modal-close-button{
-	margin-left: 95%;
+	margin-left: 25px;
 	background-color: black;
 	color: white;
 	border: none;

diff --git a/Frontend/ooo/src/containers/Closet/Closet.tsx b/Frontend/ooo/src/containers/Closet/Closet.tsx
@@ -222,7 +222,6 @@ export default function Closet() {
 							isOpen={addClothModalOpen}
 							// onRequestClose={() => setAddClothModalOpen(false)}
 						>
-
 							<div id="close-buton-div">
 								<button
 									id="modal-close-button"

diff --git a/Frontend/ooo/src/containers/Outfit/Outfit.css b/Frontend/ooo/src/containers/Outfit/Outfit.css
@@ -66,7 +66,7 @@
 
 #filter-modal {
 	display: flex;
-	max-width: 600px;
+	max-width: 400px;
 	max-height: 400px;
 	justify-content: center;
 	align-content: center;
@@ -166,6 +166,7 @@
 	background-color: grey;
 }
 #outfit-image {
+	padding-top: 20px;
 	object-fit: scale-down;
 }
 .now-pattern-filter-div{