[Design/#307] 기획, 디자인 QA 반영 (#312)

* fix: NumberLabel에 들어가는 icon 옵셔널로 넣도록 수정하기 * fix: textArea랑 Input 간격 다른 부분 맞추기 * fix: TimeSelect 드롭다운 크기 조절을 위한 레이아웃 및 스타일 수정 * fix: 입금 안내 모달 x 버튼 클릭 시 페이지 이동 안하도록 수정 * fix: 관리자 페이지 순서대로 정렬 / 신청자 모달 navigate 경로 수정 * fix: 계좌번호 placeholder / 공지사항 엠티뷰 멘트 수정, 소셜링크 부분 유효성 검사 https:// 형식 추가 * fix: 자잘한 멘트 수정, 신청자 관리 토스트 추가, 스픽커 프로필 스크롤 추가 * fix: 소비니 언니와 함께 자잘한 멘트 수정 * fix: 디자인 QA 반영 * feat: home 배너 두번째 거 누르면 host 신청 부분으로 넘어가게 * fix: 픽사이트 줄바꿈 수정 * fix: offline 아이콘 다시 추출
PICK-PLE · Sep 20, 2024 · a1aed88 · a1aed88
1 parent 57a28de
commit a1aed88
Show file tree

Hide file tree

Showing 39 changed files with 190 additions and 166 deletions.
diff --git a/public/image/profile/image_host_background_ver2.png b/public/image/profile/image_host_background_ver2.png
diff --git a/public/svg/ic_offline.svg b/public/svg/ic_offline.svg
diff --git a/src/apis/domains/moimSubmission/usePatchSubmitter.ts b/src/apis/domains/moimSubmission/usePatchSubmitter.ts
@@ -37,7 +37,7 @@ export const usePatchSubmitter = (isOngoing: boolean, onClose: () => void) => {
       });
       onClose();
       smoothScroll(0);
-      navigate('/myclass/host/myclass'); // 다시 모임 관리하는 host 페이지로 이동
+      navigate('/mypage/host/myclass'); // 다시 모임 관리하는 host 페이지로 이동
     },
   });
 };
diff --git a/src/assets/svg/IcOffline.tsx b/src/assets/svg/IcOffline.tsx
@@ -1,19 +1,14 @@
+import * as React from 'react';
 import type { SVGProps } from 'react';
 const SvgIcOffline = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>
-    <g clipPath="url(#ic_offline_svg__a)">
-      <path
-        stroke="#3E3F45"
-        strokeLinejoin="round"
-        strokeWidth={1.5}
-        d="M18.652 4.714a.25.25 0 0 1 .322.322l-5.307 14.196a.23.23 0 0 1-.098.128.26.26 0 0 1-.152.034.26.26 0 0 1-.147-.054.24.24 0 0 1-.08-.14l-1.397-5.998a1.75 1.75 0 0 0-1.307-1.307l-6-1.397a.24.24 0 0 1-.139-.08.26.26 0 0 1-.053-.147.26.26 0 0 1 .034-.152.23.23 0 0 1 .128-.098l14.196-5.307-.263-.703z"
-      />
-    </g>
-    <defs>
-      <clipPath id="ic_offline_svg__a">
-        <path fill="#fff" d="M0 0h24v24H0z" />
-      </clipPath>
-    </defs>
+    <path
+      stroke="#3E3F45"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m20 5-5.031 15.702a.51.51 0 0 1-.928 0l-2.886-6.36a1 1 0 0 0-.497-.497l-6.36-2.886a.51.51 0 0 1 0-.928z"
+    />
   </svg>
 );
 export default SvgIcOffline;
diff --git a/src/components/common/DateSelect/DateSelect.style.ts b/src/components/common/DateSelect/DateSelect.style.ts
@@ -38,6 +38,10 @@ export const customInputStyle = (hasValue: boolean) => (theme: Theme) => css`
     box-shadow: none;
     background-color: ${theme.color.white};
   }
+
+  &::placeholder {
+    color: ${theme.color.midgray1};
+  }
 `;
 
 export const iconStyle = (theme: Theme) => css`

diff --git a/src/components/common/Notice/Notice.tsx b/src/components/common/Notice/Notice.tsx
@@ -10,7 +10,7 @@ export interface NoticeProps extends HTMLAttributes<HTMLDivElement> {
 const Notice = ({ children, numberLabel, ...props }: NoticeProps) => {
   return (
     <div css={noticeStyle} {...props}>
-      <NumberLabel>{numberLabel}</NumberLabel>
+      <NumberLabel withIcon={true}>{numberLabel}</NumberLabel>
       <p css={textStyle}>{children}</p>
     </div>
   );

diff --git a/src/components/common/NumberLabel/NumberLabel.tsx b/src/components/common/NumberLabel/NumberLabel.tsx
@@ -1,13 +1,16 @@
-import { PropsWithChildren } from 'react';
-
 import { IcNumberLabel } from '@svg';
 
 import { wrapperStyle, textStyle } from './NumberLabel.style';
 
-const NumberLabel = ({ children, ...props }: PropsWithChildren) => {
+interface NumberLabelProps {
+  withIcon?: boolean;
+  children: React.ReactNode;
+}
+
+const NumberLabel = ({ withIcon = false, children, ...props }: NumberLabelProps) => {
   return (
     <div css={wrapperStyle} {...props}>
-      <IcNumberLabel />
+      {withIcon && <IcNumberLabel />}
       <span css={textStyle}>{children}</span>
     </div>
   );

diff --git a/src/components/common/TextArea/TextArea.style.ts b/src/components/common/TextArea/TextArea.style.ts
@@ -12,7 +12,7 @@ export const textAreaWrapperStyle = (isError: boolean, isFocused: boolean) => (t
   ${flexGenerator('column', 'space-between', 'flex-end')}
   width: 100%;
   min-width: 33.5rem;
-  padding: 1.2rem 1.6rem;
+  padding: 1.2rem 1.5rem;
 
   border: 1px solid
     ${isError && isFocused
@@ -39,6 +39,7 @@ export const textAreaStyle = (theme: Theme) => css`
   width: 100%;
   height: 100%;
   resize: none;
+  padding: 0;
 
   color: ${theme.color.blackgray};
   background-color: ${theme.color.white};

diff --git a/src/components/common/TimeSelect/TimeSelect.style.ts b/src/components/common/TimeSelect/TimeSelect.style.ts
@@ -10,18 +10,25 @@ export const timeSelectContainer = css`
 
 export const timeSelectWrapper = (theme: Theme) => css`
   ${flexGenerator('column', 'center', 'flex-start')};
-  width: 100%;
-  padding: 1rem 1.6rem;
   gap: 0.3rem;
+  width: 100%;
   border: 1px solid ${theme.color.lightgray1};
   border-radius: 10px;
+  position: relative;
 
   cursor: pointer;
 `;
 
+export const labelWrapper = css`
+  ${flexGenerator()};
+  width: 100%;
+  padding: 1rem 1.6rem;
+`;
+
 export const selectStyle = (hasValue: boolean) => (theme: Theme) => css`
-  display: flex;
-  width: 13rem;
+  ${flexGenerator('column', 'flex-start', 'flex-start')}
+  gap: 0.3rem;
+  width: 100%;
   border: none;
   border-radius: 4px;
   color: ${hasValue ? theme.color.blackgray : theme.color.midgray1};
@@ -38,45 +45,29 @@ export const textStyle = (theme: Theme) => css`
   ${theme.font['body03-r-12']};
 `;
 
-export const iconStyle = css`
-  ${flexGenerator()}
-  width: 2.4rem;
-  height: 2.4rem;
-  right: 0;
-  position: absolute;
-
-  cursor: pointer;
-`;
-
-export const labelWrapper = css`
-  position: relative;
-  width: 100%;
-`;
-
 export const svgStyle = (hasValue: boolean) => (theme: Theme) => css`
   path {
     fill: ${hasValue ? theme.color.blackgray : theme.color.midgray1};
   }
 
+  cursor: pointer;
+
   width: 2.4rem;
   height: 2.4rem;
 `;
 
 export const dropdownStyle = (theme: Theme) => css`
   position: absolute;
   top: 100%;
-  left: -1.6rem;
-  right: 0;
   z-index: 1;
 
   background-color: ${theme.color.white};
   border: 1px solid ${theme.color.lightgray1};
   border-radius: 10px;
 
-  width: 16.2rem;
+  width: 100%;
   max-height: 200px;
-  padding-right: 5rem;
-  margin-top: 1.5rem;
+  margin-top: 0.5rem;
 
   overflow-y: auto;
 

diff --git a/src/components/common/TimeSelect/TimeSelect.tsx b/src/components/common/TimeSelect/TimeSelect.tsx
@@ -7,7 +7,6 @@ import {
   timeSelectWrapper,
   selectStyle,
   textStyle,
-  iconStyle,
   labelWrapper,
   svgStyle,
   dropdownStyle,
@@ -66,51 +65,49 @@ const TimeSelect = ({
     <section css={timeSelectContainer}>
       <div css={timeSelectWrapper} onClick={() => toggleDropdown('start')}>
         <div css={labelWrapper}>
-          <label css={textStyle}>시작 시간</label>
           <div css={selectStyle(Boolean(startTime))}>
+            <label css={textStyle}>시작 시간</label>
             <span>{startTime !== null ? generateTimeOptions()[startTime].label : '선택'}</span>
-            <span css={iconStyle}>
-              <IcDropdownPlatformDown css={svgStyle(Boolean(startTime))} />
-            </span>
           </div>
-          {startDropdownOpen && (
-            <div css={dropdownStyle}>
-              {generateTimeOptions().map((option) => (
-                <div
-                  key={option.value}
-                  css={optionStyle}
-                  onClick={() => handleStartTimeChange(option.value)}>
-                  {option.label}
-                </div>
-              ))}
-            </div>
-          )}
+
+          <IcDropdownPlatformDown css={svgStyle(Boolean(startTime))} />
         </div>
+        {startDropdownOpen && (
+          <div css={dropdownStyle}>
+            {generateTimeOptions().map((option) => (
+              <div
+                key={option.value}
+                css={optionStyle}
+                onClick={() => handleStartTimeChange(option.value)}>
+                {option.label}
+              </div>
+            ))}
+          </div>
+        )}
       </div>
+
       <div css={timeSelectWrapper}>
         <div css={labelWrapper} onClick={() => startTime !== null && toggleDropdown('end')}>
-          <label css={textStyle}>종료 시간</label>
           <div css={selectStyle(Boolean(endTime))}>
+            <label css={textStyle}>종료 시간</label>
             <span>{endTime !== null ? generateTimeOptions()[endTime].label : '선택'}</span>
-            <span css={iconStyle}>
-              <IcDropdownPlatformDown css={svgStyle(Boolean(endTime))} />
-            </span>
           </div>
-          {endDropdownOpen && (
-            <div css={dropdownStyle}>
-              {generateTimeOptions()
-                .filter((option) => startTime === null || option.value > startTime)
-                .map((option) => (
-                  <div
-                    key={option.value}
-                    css={optionStyle}
-                    onClick={() => handleEndTimeChange(option.value)}>
-                    {option.label}
-                  </div>
-                ))}
-            </div>
-          )}
+          <IcDropdownPlatformDown css={svgStyle(Boolean(endTime))} />
         </div>
+        {endDropdownOpen && (
+          <div css={dropdownStyle}>
+            {generateTimeOptions()
+              .filter((option) => startTime === null || option.value > startTime)
+              .map((option) => (
+                <div
+                  key={option.value}
+                  css={optionStyle}
+                  onClick={() => handleEndTimeChange(option.value)}>
+                  {option.label}
+                </div>
+              ))}
+          </div>
+        )}
       </div>
     </section>
   );

diff --git a/src/components/common/inputs/AccountNumberInput/AccountNumberInput.tsx b/src/components/common/inputs/AccountNumberInput/AccountNumberInput.tsx
@@ -26,7 +26,7 @@ const AccountNumberInput = ({ value, onChange }: AccountNumberInputProps) => {
       value={value}
       onChange={handleInputChange}
       inputLabel="계좌 번호"
-      placeholder="'-' 없이 입력"
+      placeholder="'-' 없이 숫자만 입력해 주세요."
       isValid={true}
       isCountValue={false}
     />

diff --git a/src/constants/images/index.ts b/src/constants/images/index.ts
@@ -1,7 +1,7 @@
 export const CheckModalImage = '/image/icons/image_check_modal.png';
 export const GuestProfileImage = '/image/profile/image_guest_profile.png';
 export const HostProfileImage = '/image/profile/image_host_profile.png';
-export const HostBackGroundImage = '/image/profile/image_host_background.png';
+export const HostBackGroundImage = '/image/profile/image_host_background_ver2.png';
 export const PicksightBanner = '/image/banners/picksight-banner.png';
 export const PicksightMain = '/image/banners/picksight-main.png';
 export const PicksightImage = '/image/banners/picksight-image.png';
diff --git a/src/pages/admin/components/HostSubmitter/HostSubmitter.tsx b/src/pages/admin/components/HostSubmitter/HostSubmitter.tsx
@@ -22,6 +22,12 @@ const HostSubmitter = () => {
     mutate({ submitterId });
   };
 
+  const sortedHostSubmitterList = hostSubmitterList?.sort((a, b) => {
+    const idA = a.submitterId ?? Number.MAX_SAFE_INTEGER; // undefined일 경우 가장 뒤로 정렬
+    const idB = b.submitterId ?? Number.MAX_SAFE_INTEGER;
+    return idA - idB;
+  });
+
   return (
     <div css={tableLayoutStyle}>
       <h1 css={titleStyle}>PICKPLE 스픽커 승인</h1>
@@ -30,22 +36,22 @@ const HostSubmitter = () => {
           <thead>
             <tr css={trStyle}>
               <th>신청 순서</th>
-              <th>게스트 ID</th>
+              <th>참가자 ID</th>
               <th>닉네임</th>
-              <th>[1] 호스트 소개</th>
-              <th>[2] 모임 목표</th>
-              <th>[3] 호스트 설명 링크</th>
-              <th>[4] 호스트 닉네임</th>
+              <th>[1] 스픽커 소개</th>
+              <th>[2] 클래스 목표</th>
+              <th>[3] 스픽커 설명 링크</th>
+              <th>[4] 스픽커 닉네임</th>
               <th>[5] 키워드 </th>
-              <th>[6] 모임 계획</th>
+              <th>[6] 클래스 계획</th>
               <th>[7] 이메일 </th>
               <th> 상태 </th>
               <th> 승인여부 </th>
             </tr>
           </thead>
           <tbody>
-            {hostSubmitterList?.map((item, index) => (
-              <tr key={index} css={trStyle}>
+            {sortedHostSubmitterList?.map((item) => (
+              <tr key={item.submitterId} css={trStyle}>
                 <td>{item.submitterId}</td>
                 <td>{item.guestId}</td>
                 <td>{item.guestNickname}</td>

diff --git a/src/pages/admin/components/MoimSubmitter/MoimSubmitter.tsx b/src/pages/admin/components/MoimSubmitter/MoimSubmitter.tsx
@@ -30,6 +30,12 @@ const MoimSubmitter = () => {
     mutate({ moimSubmissionId });
   };
 
+  const sortedMoimSubmitterList = moimSubmitterList?.sort((a, b) => {
+    const idA = a.moimSubmissionId ?? Number.MAX_SAFE_INTEGER; // undefined일 경우 가장 뒤로 정렬
+    const idB = b.moimSubmissionId ?? Number.MAX_SAFE_INTEGER;
+    return idA - idB;
+  });
+
   const renderApprovalStatus = (item: MoImSubmitterListGetResponse) => {
     switch (item.moimSubmissionState) {
       case 'pendingPayment':
@@ -73,8 +79,8 @@ const MoimSubmitter = () => {
             </tr>
           </thead>
           <tbody>
-            {moimSubmitterList?.map((item, index) => (
-              <tr key={index} css={trStyle}>
+            {sortedMoimSubmitterList?.map((item) => (
+              <tr key={item.moimSubmissionId} css={trStyle}>
                 <td>{item.moimSubmissionId}</td>
                 <td>{item.date}</td>
                 <td>{item.guestId}</td>

diff --git a/src/pages/article/components/ArticleParagraph/ArticleParagraph.style.ts b/src/pages/article/components/ArticleParagraph/ArticleParagraph.style.ts
@@ -11,6 +11,7 @@ export const articleContainer = css`
 export const articleTitle = (theme: Theme) => css`
   color: ${theme.color.blackgray};
   ${theme.font['subhead01-sb-18']}
+  white-space: pre-wrap;
 `;
 
 export const articleCotent = (theme: Theme) => css`