Merge pull request #29 from flowerseok/style/reviewpage

[style] 리뷰 페이지 QA반영
team-acode · Jan 31, 2024 · e221918 · e221918
2 parents cc8005b + 2a2552e
commit e221918
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 20 deletions.
diff --git a/components/reviews/InputPhoto.tsx b/components/reviews/InputPhoto.tsx
@@ -39,9 +39,12 @@ const InputPhoto = ({ onChange }: { onChange: (photos: File[]) => void }) => {
         aria-hidden
       >
         <span>사진 첨부</span>
-        <span className="block text-acodegray-300 ml-3 h-4 text-[16px] font-medium mb-[2px] leading-[16px] mr-auto">
+        <span className="block text-acodegray-400 ml-3 h-4 text-[16px] font-medium mb-[2px] leading-[16px] mr-[14px]">
           (선택)
         </span>
+        <span className="text-acodegray-300 caption2 mr-auto">
+          *최대 3장까지 가능합니다
+        </span>
 
         <button type="button">
           {isSpread ? <ArrowUpIcon3 /> : <ArrowDownIcon3 />}

diff --git a/components/reviews/InputStar.tsx b/components/reviews/InputStar.tsx
@@ -18,7 +18,7 @@ const InputStar = ({ maxRating = 5, onRatingChange }: InputStarProps) => {
     <div className="container mx-auto px-4">
       <div className="flex flex-col items-center justify-center">
         <div className="text-acodeblack review-1 mb-[6px]">별점 남기기</div>
-        <div className="flex space-x-1">
+        <div className="flex space-x-0.5">
           {Array.from({ length: maxRating }, (_, i) => (
             <button
               type="button"

diff --git a/components/reviews/Modal.tsx b/components/reviews/Modal.tsx
@@ -66,7 +66,7 @@ function Modal({ onReturn }: ModalProps) {
             {selectedOptions.map((option) => (
               <div
                 key={option}
-                className="body2 text-acodewhite bg-black border flex items-center justify-center rounded-[50px] mr-1 px-[10px]"
+                className="body2 text-acodewhite bg-black border-black flex items-center justify-center rounded-[50px] mr-1 px-[10px]"
               >
                 <span className="">{option}</span>
                 <button
@@ -123,16 +123,16 @@ function Modal({ onReturn }: ModalProps) {
       {isOpen && (
         <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex justify-center items-end">
           <div
-            className="bg-white shadow-lg mx-auto w-full h-[491px]"
+            className="bg-white shadow-lg mx-auto w-full h-[560px]"
             ref={modalRef}
           >
-            <div className="flex flex-col justify-center items-center mt-[26px] w-full">
+            <div className="flex flex-col justify-center items-center mt-[30px] w-full">
               <div className="h1 text-acodblack mb-[10px]">스타일</div>
               <div className="caption2 text-acodegray-300">
                 *최대 3개까지 고를 수 있습니다
               </div>
             </div>
-            <div className="flex flex-row flex-wrap gap-x-2.5 gap-y-3 mt-6 mb-5 mx-[30px]">
+            <div className="flex flex-row flex-wrap gap-x-2.5 gap-y-3 mt-6 mb-[48px] mx-[34px]">
               {STYLEOPTIONS.map((option) => (
                 <button
                   type="button"
@@ -157,7 +157,7 @@ function Modal({ onReturn }: ModalProps) {
                   selectedOptions.length > 0
                     ? 'bg-acodeblack'
                     : 'bg-acodegray-300'
-                } w-full text-white py-3 px-4 rounded transition`}
+                } w-full mx-4 h-[56px] text-white py-3 px-4 rounded transition`}
                 onClick={completeSelection}
                 disabled={selectedOptions.length === 0}
               >

diff --git a/components/reviews/ReviewContentContainer.tsx b/components/reviews/ReviewContentContainer.tsx
@@ -194,10 +194,10 @@ const ReviewContentContainer = ({ id }: { id: string }) => {
       <TextReview onChange={setTextReview} />
       <hr className="my-11 mx-4 border-t-[1.5px] border-acodegray-50" />
       <InputPhoto onChange={setPhotos} />
-      <div className="flex justify-center pb-4">
+      <div className="flex justify-center pb-4 mx-4">
         <button
           type="button"
-          className="bg-acodeblack w-full text-white  py-3 px-4 rounded"
+          className="bg-acodeblack w-full h-[56px] text-white  py-3 px-4 rounded"
           onClick={() => handleSubmit()}
         >
           올리기

diff --git a/components/reviews/TextReview.tsx b/components/reviews/TextReview.tsx
@@ -36,7 +36,8 @@ const TextReview = ({ onChange }: TextReviewProps) => {
             value={text}
             onChange={handleTextChange}
             maxLength={1000}
-            className="w-full bg-acodegray-50 px-[14px] py-[11px] body2 h-40 resize-none outline-none rounded-[8px]"
+            className="w-full body2 bg-acodegray-50 px-[14px] py-[11px] body2 h-40 resize-none outline-none rounded-[8px] placeholder:text-acodegray-300 "
+            placeholder="텍스트 리뷰를 작성해주세요"
           />
           <div className="text-right caption1 mr-[14px] text-acodegray-700">
             {text.length}/<span className="text-acodegray-300">1000</span>

diff --git a/public/images/empty-star.svg b/public/images/empty-star.svg
diff --git a/public/images/errormessage3.svg b/public/images/errormessage3.svg