[포스트 생성] step 순서 및 sns option 순서 변경

src/assets/svg/index.ts

@@ -42,3 +42,6 @@ export { default as IcHome01 } from './IcHome01';
 export { default as IcPosting01 } from './IcPosting01';
 export { default as IcPosting02 } from './IcPosting02';
 export { default as IconArrow } from './IconArrow';
+
+export { default as IconEventEmoji } from './IconEventEmoji';
+export { default as IconMenuEmoji } from './IconMenuEmoji';

src/components/PostNew/Step1/Step1.tsx → src/components/PostNew/SelectSns/SelectSns.tsx

@@ -6,15 +6,29 @@ import carrot from '../../../assets/Image/carrot.png';
 import kakaoMap from '../../../assets/Image/kakaoMap.png';
 import insta from '../../../assets/Image/Instagram.png';
 import { useOnboardingContext } from '../../../context/PostNew/PostNewContext';
-import Step1Title from './Step1Title/Step1Title';
+import Step1Title from './SelectSnsTitle';
 import NextButton from '../PostFooter/NextButton';
 import { POSTING_CHANNEL } from '../../../core/Post';
 
 export interface NameInputProps {
   onNext: VoidFunction;
 }
 
-export default function Step1(props: NameInputProps) {
+const SNS_ORDER_DEFAULT = [
+  POSTING_CHANNEL.INSTAGRAM,
+  POSTING_CHANNEL.KAKAO_CHANNEL,
+  POSTING_CHANNEL.DANGUEN,
+  POSTING_CHANNEL.KAKAO_TALK,
+];
+
+const SNS_ORDER_40s_50s = [
+  POSTING_CHANNEL.KAKAO_CHANNEL,
+  POSTING_CHANNEL.DANGUEN,
+  POSTING_CHANNEL.KAKAO_TALK,
+  POSTING_CHANNEL.INSTAGRAM,
+];
+
+export default function SelectSns(props: NameInputProps) {
   const { onNext } = props;
   const { onboardingInfo, updatePostInfo } = useOnboardingContext();
   const [selectedSNS, setSelectedSNS] = useState<string | null>(
@@ -28,6 +42,16 @@ export default function Step1(props: NameInputProps) {
     { name: POSTING_CHANNEL.KAKAO_TALK, icon: kakaoMap },
   ];
 
+  const getOrderedSnsOptions = () => {
+    const ageGroups = onboardingInfo.targetAge || [];
+    const is40sOr50sSelected = ageGroups.includes('40대') && ageGroups.includes('50대');
+    const order = is40sOr50sSelected ? SNS_ORDER_40s_50s : SNS_ORDER_DEFAULT;
+
+    return snsOptions.sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name));
+  };
+
+  const orderedSnsOptions = getOrderedSnsOptions();
+
   const handleSelectSNS = (sns: string) => {
     setSelectedSNS((prev) => {
       const newSelectedSNS = prev === sns ? null : sns;
@@ -41,7 +65,7 @@ export default function Step1(props: NameInputProps) {
       <PostTitleContainer>
         <Step1Title />
         <SNSOptionContainer>
-          {snsOptions.map((sns) => (
+          {orderedSnsOptions.map((sns) => (
             <SNSOption
               key={sns.name}
               selected={selectedSNS === sns.name}

src/components/PostNew/Step1/Step1Title/Step1Title.tsx → src/components/PostNew/SelectSns/SelectSnsTitle.tsx

@@ -1,4 +1,4 @@
-import Title from '../../../common/Title/Title';
+import Title from '../../common/Title/Title';
 import styled from 'styled-components';
 
 export default function Step1Title() {

src/components/PostNew/Step2/PostTitle/PostTitle.tsx → src/components/PostNew/SelectTarget/PostTitle.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Title from '../../../common/Title/Title';
+import Title from '../../common/Title/Title';
 
 export default function PostTitle() {
   return (

src/components/PostNew/Step2/SelectAge/SelectAge.tsx → src/components/PostNew/SelectTarget/SelectAge.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import styled from 'styled-components';
-import { AgeBoxProps } from '../../../../types/PostNew';
-import { useOnboardingContext } from '../../../../context/PostNew/PostNewContext';
+import { AgeBoxProps } from '../../../types/PostNew';
+import { useOnboardingContext } from '../../../context/PostNew/PostNewContext';
 
 export default function SelectAge() {
   const { onboardingInfo, updatePostInfo } = useOnboardingContext();

src/components/PostNew/Step2/SelectGender/SelectGender.tsx → src/components/PostNew/SelectTarget/SelectGender.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import styled from 'styled-components';
-import { GenderOptionProps } from '../../../../types/PostNew';
-import { useOnboardingContext } from '../../../../context/PostNew/PostNewContext';
-import maleIc from '../../../../assets/Icon/maleIc.png';
-import femaleIc from '../../../../assets/Icon/femalIc.png';
+import { GenderOptionProps } from '../../../types/PostNew';
+import { useOnboardingContext } from '../../../context/PostNew/PostNewContext'
+import maleIc from '../../../assets/Icon/maleIc.png';
+import femaleIc from '../../../assets/Icon/femalIc.png';
 
 export default function SelectGender() {
   const { onboardingInfo, updatePostInfo } = useOnboardingContext();

src/components/PostNew/Step2/Step2.tsx → src/components/PostNew/SelectTarget/SelectTarget.tsx

@@ -1,13 +1,13 @@
 import { useState } from 'react';
 import { styled } from 'styled-components';
-import PostTitle from './PostTitle/PostTitle';
-import { NameInputProps } from '../Step1/Step1';
+import PostTitle from './PostTitle';
+import { NameInputProps } from '../SelectSns/SelectSns';
 import NextButton from '../PostFooter/NextButton';
 import { AgeBoxProps } from '../../../types/PostNew';
-import SelectGender from './SelectGender/SelectGender';
+import SelectGender from './SelectGender';
 import { useOnboardingContext } from '../../../context/PostNew/PostNewContext';
 
-export default function Step2(props: NameInputProps) {
+export default function SelectTarget(props: NameInputProps) {
   const { onNext } = props;
   const { onboardingInfo, updatePostInfo } = useOnboardingContext();
   const [selectedAges, setSelectedAges] = useState<string[]>(onboardingInfo.targetAge || []);

src/components/PostNew/Step3/Step3.tsx → src/components/PostNew/SelectType/SelectType.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import SelectType from './SelectType/SelectType';
+import SelectType from './SelectTypeOptions';
 import Title from '../../common/Title/Title';
-import { NameInputProps } from '../Step1/Step1';
+import { NameInputProps } from '../SelectSns/SelectSns';
 
 export default function Step3(props: NameInputProps) {
   return (

src/components/PostNew/Step3/SelectType/SelectType.tsx → src/components/PostNew/SelectType/SelectTypeOptions.tsx

@@ -1,11 +1,10 @@
 import { useState } from 'react';
 import styled from 'styled-components';
-import { GenderOptionProps } from '../../../../types/PostNew';
-import { useOnboardingContext } from '../../../../context/PostNew/PostNewContext';
-import NextButton from '../../PostFooter/NextButton';
-import { NameInputProps } from '../../Step1/Step1';
-import menuIc from '../../../../assets/Icon/menuIc.png';
-import eventIc from '../../../../assets/Icon/eventIc.png';
+import { GenderOptionProps } from '../../../types/PostNew';
+import { useOnboardingContext } from '../../../context/PostNew/PostNewContext';
+import NextButton from '../PostFooter/NextButton';
+import { NameInputProps } from '../SelectSns/SelectSns';
+import { IconEventEmoji, IconMenuEmoji } from '../../../assets/svg';
 
 export default function SelectType(props: NameInputProps) {
   const { onNext } = props;
@@ -27,8 +26,13 @@ export default function SelectType(props: NameInputProps) {
   }
 
   const typeOptions = [
-    { label: '메뉴 홍보', value: '메뉴', image: menuIc },
-    { label: '이벤트 홍보', value: '이벤트', image: eventIc },
+    { label: '메뉴 홍보', labelSub: 'ex. 신메뉴 홍보', value: '메뉴', image: IconMenuEmoji },
+    {
+      label: '이벤트 홍보',
+      labelSub: 'ex. 첫 오픈 할인 이벤트',
+      value: '이벤트',
+      image: IconEventEmoji,
+    },
   ];
 
   return (
@@ -40,8 +44,11 @@ export default function SelectType(props: NameInputProps) {
             selected={selectedType === option.value}
             onClick={() => handleMenuSelect(option.value)}
           >
-            <img src={option.image} />
-            {option.label}
+            <option.image className='nav-icon' />
+            <LabelContainer>
+              {option.label}
+              <p>{option.labelSub}</p>
+            </LabelContainer>
           </TypeOption>
         ))}
       </TypeSelection>
@@ -54,23 +61,31 @@ export default function SelectType(props: NameInputProps) {
 
 const TypeSelection = styled.div`
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
 
   margin-top: 5rem;
   gap: 1rem;
 `;
 
+const LabelContainer = styled.article`
+  p {
+    margin-top: 0.5rem;
+    color: ${({ theme }) => theme.colors.G_06};
+    ${({ theme }) => theme.fonts.type_option};
+  }
+`;
 const TypeOption = styled.div<GenderOptionProps>`
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
 
-  width: 7.875rem;
-  height: 11.125rem;
+  width: 17rem;
+  height: 6rem;
   gap: 2rem;
+  padding-left: 1rem;
   cursor: pointer;
-  flex-direction: column;
 
   border-radius: 0.625rem;
   background: #fff;
@@ -80,8 +95,7 @@ const TypeOption = styled.div<GenderOptionProps>`
   ${({ theme, selected }) =>
     selected ? `border: 1px solid ${theme.colors.main}; color: ${theme.colors.main}; ` : ''}
 
-  img {
+  .nav-icon {
     width: 3.75rem;
-    margin-top: 16%;
   }
 `;

src/components/PostNew/Step4/Step4.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import Title from '../../common/Title/Title';
 import { Xmark } from '../../../assets/svg';
 import useMenuInput from '../../../hooks/PostNew/useMenuInput';
-import { NameInputProps } from '../Step1/Step1';
+import { NameInputProps } from '../SelectSns/SelectSns';
 import NextButton from '../PostFooter/NextButton';
 import { useEffect, useState } from 'react';
 

src/components/PostNew/Step5/Step5.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import Title from '../../common/Title/Title';
 import { Xmark } from '../../../assets/svg';
-import { NameInputProps } from '../Step1/Step1';
+import { NameInputProps } from '../SelectSns/SelectSns';
 import NextButton from '../PostFooter/NextButton';
 import { useEffect, useRef, useState } from 'react';
 import Keywords from './Keywords/Keywords';

src/pages/Feed/FeedPage.tsx

@@ -1,4 +1,4 @@
-import { Highlight } from '../../components/PostNew/Step1/Step1Title/Step1Title';
+import { Highlight } from '../../components/PostNew/SelectSns/SelectSnsTitle';
 import RelatedPosts from '../../components/common/Card/RelatedPosts';
 import SubTitle from '../../components/common/Title/SubTitle';
 import styled from 'styled-components';
@@ -45,7 +45,7 @@ const ImgContainer = styled.section`
   top: 20%;
   left: 50%;
   gap: 1rem;
-  padding: 0 1rem;
+  padding: 0 1.5rem;
   transform: translateX(-50%);
   overflow-x: auto;
 `;

src/pages/Home/HomePage.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import styled from 'styled-components';
-import { Highlight } from '../../components/PostNew/Step1/Step1Title/Step1Title';
+import { Highlight } from '../../components/PostNew/SelectSns/SelectSnsTitle';
 import CommonCard from '../../components/common/Card/CommonCard';
 
 export default function Home() {

src/pages/PostNew/PostNewPage.tsx

@@ -2,9 +2,9 @@ import { useNavigate } from 'react-router-dom';
 import { useFunnel } from '../../hooks/useFunnel';
 import { ONBOARDING_FORM_STEP } from '../../core/PostNew/Onboarding';
 import { useOnboardingContext } from '../../context/PostNew/PostNewContext';
-import Step1 from '../../components/PostNew/Step1/Step1';
-import Step2 from '../../components/PostNew/Step2/Step2';
-import Step3 from '../../components/PostNew/Step3/Step3';
+import SelectSns from '../../components/PostNew/SelectSns/SelectSns';
+import SelectTarget from '../../components/PostNew/SelectTarget/SelectTarget';
+import SelectType from '../../components/PostNew/SelectType/SelectType';
 import Step4 from '../../components/PostNew/Step4/Step4';
 import Step5 from '../../components/PostNew/Step5/Step5';
 import Step6 from '../../components/PostNew/Step6/Step6';
@@ -38,19 +38,19 @@ export default function PostNewPage() {
       <Funnel.Step name='POSTING_CHANNEL'>
         <PostNewHeader onClickBackBtn={() => onClickBackBtn(1)} />
         <ProcessBar currentStep={1} stepCount={6} />
-        <Step1 onNext={() => setStep(() => 'AGE_GENDER')} />
+        <SelectType onNext={() => setStep(() => 'AGE_GENDER')} />
       </Funnel.Step>
 
       <Funnel.Step name='AGE_GENDER'>
         <PostNewHeader onClickBackBtn={() => onClickBackBtn(2)} />
         <ProcessBar currentStep={2} stepCount={6} />
-        <Step2 onNext={() => setStep(() => 'TYPE')} />
+        <SelectTarget onNext={() => setStep(() => 'TYPE')} />
       </Funnel.Step>
 
       <Funnel.Step name='TYPE'>
         <PostNewHeader onClickBackBtn={() => onClickBackBtn(3)} />
         <ProcessBar currentStep={3} stepCount={6} />
-        <Step3 onNext={() => setStep(() => 'POSTING_SUBJECT')} />
+        <SelectSns onNext={() => setStep(() => 'POSTING_SUBJECT')} />
       </Funnel.Step>
 
       <Funnel.Step name='POSTING_SUBJECT'>

src/style/theme.ts

@@ -80,6 +80,13 @@ const fonts = {
     font-weight: 400;
     line-height: normal;
   `,
+  type_option: css`
+    font-family: Pretendard;
+    font-size: 0.9rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 144.583%;
+  `,
   card_button: css`
     font-family: Pretendard;
     font-size: 0.8rem;