Merge pull request #1333 from 42organization/feat/party모집-방-생성-페이지-구현-#…

…1281 [Feat] 파티 생성 페이지 배경 설정 및 글자수 표기
42organization · Mar 28, 2024 · 96574dc · 96574dc
2 parents b53f345 + 15b150d
commit 96574dc
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 24 deletions.
diff --git a/components/party/PartyCreate.tsx b/components/party/PartyCreate.tsx
@@ -187,6 +187,9 @@ function DetailCustomization({
             }
             placeholder='제목을 입력하세요'
           />
+          <div className={styles.titleCount}>
+            {`${partyForm.title.length}/15`}
+          </div>
         </label>
         <label>
           <h3>인원</h3>
@@ -206,7 +209,7 @@ function DetailCustomization({
                 </option>
               ))}
             </select>
-            <div>~</div>
+            <div className={styles.textCenter}>~</div>
             <select
               onChange={(e) =>
                 dispatchPartyForm({
@@ -224,7 +227,7 @@ function DetailCustomization({
                   </option>
                 ))}
             </select>
-            <div>인</div>
+            <div className={styles.textCenter}>인</div>
           </div>
         </label>
         <label>
@@ -245,7 +248,7 @@ function DetailCustomization({
                 </option>
               ))}
             </select>
-            <div>시간</div>
+            <div className={styles.textCenter}>시간</div>
             <select
               onChange={(e) =>
                 handleOpenPeriod({
@@ -261,7 +264,8 @@ function DetailCustomization({
                 </option>
               ))}
             </select>
-            <div>분 후</div>
+            <div className={styles.textCenter}>분 후</div>
+            <div className={styles.dueDate}>23시 34분 마감</div>
           </div>
         </label>
         <label className={styles.contentLabel}>
@@ -277,6 +281,9 @@ function DetailCustomization({
             }
             placeholder='상세글을 작성해 주세요.'
           />
+          <div
+            className={styles.contentCount}
+          >{`${partyForm.content.length}/1000`}</div>
         </label>
         <div className={styles.submitButtonWrap}>
           <button type='submit' disabled={isSubmitting}>

diff --git a/styles/Layout/Layout.module.scss b/styles/Layout/Layout.module.scss
@@ -30,9 +30,6 @@
   &.party-main {
     background: url('/image/party-background.png');
   }
-  &.party-detail {
-    background: linear-gradient(black, $party-blue-dark2 70%, $party-blue-sky3);
-  }
   @each $theme, $color in $bg-theme-colors {
     &.#{$theme} {
       background: map-get($map: $color, $key: 'background');

diff --git a/styles/party/PartyCreate.module.scss b/styles/party/PartyCreate.module.scss
@@ -4,7 +4,6 @@
 .pageContainer {
   @include pageWrap;
   color: $white1;
-  background: $party-gradien4;
 }
 
 .selectionPageContainer {
@@ -138,9 +137,20 @@
         font-weight: 600;
         letter-spacing: 1px;
       }
-      &.titleLabel > input {
-        width: 100%;
-        padding-left: 8px;
+      &.titleLabel {
+        position: relative;
+
+        input {
+          width: 100%;
+          padding-left: 8px;
+        }
+        .titleCount {
+          position: absolute;
+          right: 0.5em;
+          bottom: 0.5em;
+          font-size: $medium-font;
+          color: $medium-gray;
+        }
       }
       .peopleSelectWrap {
         display: flex;
@@ -151,13 +161,13 @@
           width: 2.5em;
           text-align: center;
         }
-        div {
-          display: flex;
-          justify-content: center;
+        .textCenter {
           width: 2.5em;
+          text-align: center;
         }
       }
       .dueDateWrap {
+        position: relative;
         display: flex;
         align-items: center;
         font-size: $big-font;
@@ -166,18 +176,37 @@
           width: 2.5em;
           text-align: center;
         }
-        div {
-          display: flex;
-          justify-content: center;
+        .textCenter {
           width: 2.5em;
+          text-align: center;
+        }
+        .dueDate {
+          position: absolute;
+          right: 0;
+          padding: 0.5em;
+          font-size: $medium-font;
+          color: $medium-gray;
+          text-wrap: nowrap;
+          border-radius: 8px;
         }
       }
-      &.contentLabel > textarea {
-        height: 100%;
-        padding: 0.8em;
-        overflow-y: scroll;
-        font-size: $medium-font;
-        line-height: 1.3em;
+      &.contentLabel {
+        position: relative;
+
+        textarea {
+          height: 100%;
+          padding: 0.8em;
+          overflow-y: scroll;
+          font-size: $medium-font;
+          line-height: 1.3em;
+        }
+        .contentCount {
+          position: absolute;
+          right: 0.5em;
+          bottom: 0.5em;
+          font-size: $medium-font;
+          color: $medium-gray;
+        }
       }
     }
     .submitButtonWrap {

diff --git a/types/partyTypes.ts b/types/partyTypes.ts
@@ -127,4 +127,4 @@ export type PartyPenaltyAdmin = {
   penaltyTime: number;
 };
 
-export type PartyColors = 'PARTY-MAIN' | 'PARTY-DETAIL';
+export type PartyColors = 'PARTY-MAIN';