Merge pull request #20 from YAPP-Github/feat/YS-164

[YS-164] 공고 등록 / 조회 수정사항 반영 및 시연 플로우 세팅

src/app/post/[post_id]/components/PostDetailContent/PostDetailContent.tsx

@@ -3,7 +3,7 @@ import formattedContentText from '../../PostPage.utils';
 
 export const POST_CONTENT = {
   content:
-    '안녕하세요. 야뿌대학교 심리학과에서 웹 서비스 사용자 경험을 개선하기 위한 실험 참가자를 모집합니다.\\n본 실험은 웹 서비스와의 상호작용을 통해 사용자 편의성을 분석하고, 더 나은 인터페이스 설계를 목표로 합니다.\\n\\n실험 전 간단한 오리엔테이션 진행 후, 참가하시게 되면 실험 당일 약 10분 동안 화면에 나오는 특정 서비스의 시연을 보며 과제를 수행하게 됩니다. 이후 15분 내외의 설문 응답이 진행됩니다.\\n\\n참가 자격\\n- 만 19세 이상 한국 국적의 여자 학부생 및 대학원생\\n- IT 서비스에 관심이 있는 분\\n\\n실험 세부 사항\\n- 실험 방법: 오프라인 참여\\n- 실험 장소: 서울 마포구 야뿌대학교 공덕창업허브 7층\\n- 소요 시간: 약 30분\\n\\n참여 혜택\\n- 50,000원 상당의 참가비\\n',
+    '안녕하세요. 야뿌대학교 심리학과에서 웹 서비스 사용자 경험을 개선하기 위한 실험 참가자를 모집합니다.\\n\\n웹 서비스의 사용자 경험을 개선하고, 더 나은 사용자 인터페이스 설계를 위한 중요한 실험에 참가해 주세요! 본 실험은 웹 서비스와의 상호작용을 통해 서비스의 편의성 및 사용성을 분석하고, 이를 기반으로 향후 서비스 개선 방안을 도출하는 데 목표를 두고 있습니다.\\n\\n본 실험은 웹 서비스 사용 중의 편리함과 불편함을 경험적으로 분석하고, 다양한 사용자 피드백을 통해 서비스 개선 방향을 모색합니다. 실험을 통해 얻어진 데이터는 실제 서비스 개선에 반영될 예정입니다.\\n\\n실험 전 간단한 오리엔테이션이 진행되며, 참가자 분들은 실험 절차와 진행 방법에 대해 안내를 받게 됩니다.\\n\\n실험은 약 10분 동안 특정 웹 서비스의 시연을 보며 과제를 수행하는 형식으로 진행됩니다. 이후에는 사용 중 느낀 점과 의견을 바탕으로 약 15분 동안 설문을 작성하게 됩니다.\\n\\n참가 자격\\n- 만 19세 이상 한국 국적의 여자 학부생 및 대학원생\\n- 웹 서비스를 자주 사용하는 일반적인 사용자 경험을 가지고 계신 분\\n\\n실험 세부 사항\\n- 실험 방법: 오프라인 참여\\n- 실험 장소: 서울 마포구 야뿌대학교 공덕창업허브 7층\\n- 소요 시간: 약 30분 (실험 진행 후 설문 응답 포함)\\n\\n참여 혜택\\n- 50,000원 상당의 참가비\\n\\n- 실험 후 추가적인 피드백을 제공해 주신 분들께는 추후 서비스 관련 연구 참여 기회가 제공될 수 있습니다.',
 };
 
 const PostDetailContent = () => {

src/app/post/[post_id]/components/PostOutline/PostOutline.styles.ts

@@ -22,7 +22,11 @@ export const postOutlineLayout = (theme: Theme) => css`
     ${theme.fonts.title.small.SB18};
     color: ${theme.colors.text07};
 
-    margin-bottom: 2rem;
+    position: sticky;
+    top: 0;
+    background-color: ${theme.colors.field01};
+
+    padding-bottom: 1.6rem;
   }
 `;
 
@@ -33,6 +37,8 @@ export const postOutlineContent = (theme: Theme) => css`
   border-spacing: 1.6rem 1.2rem;
   margin-left: -1.6rem;
 
+  overflow-y: hidden;
+
   th,
   td {
     text-align: left;
@@ -122,9 +128,9 @@ export const checkButton = (theme: Theme) => css`
 `;
 
 export const scrollableContent = css`
-  overflow-y: auto;
   flex: 1;
   position: relative;
+  overflow-y: auto;
 
   overflow-x: hidden;
 `;

src/app/post/[post_id]/components/PostOutline/PostOutline.tsx

@@ -18,8 +18,8 @@ const PostOutline = () => {
 
   return (
     <div css={postOutlineLayout}>
+      <h3>실험 개요</h3>
       <div css={scrollableContent}>
-        <h3>실험 개요</h3>
         <table css={postOutlineContent}>
           <tbody>
             <tr>

src/app/upload/components/ApplyMethodSection/ApplyMethodSection.tsx

@@ -31,7 +31,7 @@ const ApplyMethodSection = () => {
       {/* 실험 참여 방법 */}
       <div css={applyMethodContainer}>
         <h3>
-          <span css={headingIcon}>3</span>실험에 참여려면 어떻게 하면 되나요?
+          <span css={headingIcon}>3</span>실험에 참여하려면 어떻게 하면 되나요?
         </h3>
 
         <div css={applyMethodContentLayout}>

src/app/upload/components/DescriptionSection/DescriptionSection.tsx

@@ -119,7 +119,7 @@ const DescriptionSection = () => {
           <div css={uploadImagesContainer}>
             <label htmlFor="photos" css={addImageContainer}>
               <Icon icon="ImageAdd" width={16} height={16} />
-              <p>사진 추가</p>
+              <p style={{ color: colors.text04, fontWeight: '500' }}>사진 추가</p>
             </label>
             <input
               type="file"
@@ -163,10 +163,6 @@ const descriptionContentContainer = (theme: Theme) =>
 
     :focus-within {
       border: 0.1rem solid ${theme.colors.lineTinted};
-
-      > div:last-of-type {
-        border-bottom: 0.1rem solid ${theme.colors.line01};
-      }
     }
   `;
 
@@ -227,6 +223,10 @@ const addImageContainer = (theme: Theme) => css`
 
   border-radius: 0.8rem;
   cursor: pointer;
+
+  p {
+    ${theme.colors.text04}
+  }
 `;
 
 const photoGrid = css`

src/app/upload/components/UploadContainer/UploadContainer.tsx

@@ -33,7 +33,7 @@ const UploadContainer = () => {
         <Link href={'/'}>
           <button css={activeButton}>이전으로</button>
         </Link>
-        <Link href={'/post/12'}>
+        <Link href={'/post/10'}>
           <button css={uploadButton}>공고 등록하기</button>
         </Link>
       </div>

src/components/Footer/Footer.styles.ts

@@ -31,7 +31,7 @@ export const verticalLine = (theme: Theme) => css`
   ::after {
     content: '';
     width: 0.1rem;
-    height: 80%;
+    height: 1.2rem;
     position: absolute;
     top: 50%;
     right: 0;