[style] 공통컴포넌트

[jjjjjinseo]

공통 컴포넌트 만든거 사용법이랑 어떻게 생겼는지 사진 붙입시다.!

[dahxxn]

➕ GoBackHeader.jxs (뒤로 가기 헤더) 생성

📖 사용법 : App.jsx 코드에 아래와 같이 설정해주기

1. 해당 헤더를 사용할 페이지 경로와 설정할 제목을 아래의 goBackHeaderPaths에 추가합니다

  // GoBackHeader를 사용할 페이지 경로 설정 및 제목 정의
   const goBackHeaderPaths = [
    { path: '/login', title: '로그인' },
    { path: '/signup', title: '회원가입' }
  ];

2. 라우팅도 path와 똑같이 해주면 헤더 설정이 자동으로 됩니다

   {/* Routes 설정 */}
      <Routes>
        <Route path="/" element={<TestPage />} />
        <Route path="/desktop" element={<TestPageDT />} />
        <Route path="/login" element={<LoginPage/>}/>
        <Route path="/signup" element={<SignupPage/>}/>
      </Routes>

✅ 테스트 결과

[jjjjjinseo]

searchbar

일단 useRef랑 버튼이벤트만 연결했습니다. (콘솔에 키워드 찍히는것만 확인), api 연결하면 수정하겠습니다

📖 사용법

PR #20

import SearchBar from '../../components/SearchBar';
...
<div className="desktop-container">
      <SearchBar width={'98%'}/>
</div>

✅ 테스트 결과

1. searchbar

[jjjjjinseo]

Tab

부트스트랩 tab 커스텀했습니다.

📖 사용법

PR #21

import DesktopTab from '../../components/DesktopTab';
const tabData = [
        { eventKey: 'allRequests', title: '전체요청', content: '전체 요청 내용' },
        { eventKey: 'approved', title: '승인', content: '승인된 요청 내용' },
        { eventKey: 'pending', title: '보류', content: '보류된 요청 내용' },
        { eventKey: 'rejected', title: '거절', content: '거절된 요청 내용' },
        { eventKey: 'unread', title: '미열람', content: '미열람된 요청 내용' },
];
...

<DesktopTab tabData={tabData}/>

✅ 테스트 결과

[jjjjjinseo]

Pagination

react-js-pagination 커스텀했습니다

📖 사용법

PR #23

npm i react-js-pagination

import MyPagination from '../../components/Pagination';

// itemsCountPerPage = 한 페이지에 보이는 아이템개수
// totalItemsCount = 전체 아이템 개수
// pageRangeDisplayed = 한번에 보이는 페이지 번호 개수
<MyPagination itemsCountPerPage={12} totalItemsCount={300} pageRangeDisplayed={5} />

✅ 테스트 결과

[eunnnju]

MainList

React Swiper 사용했습니다.

📖 사용법

PR #27

npm i swiper

import MenuList from "../../components/MenuList";

<div className='mobile-header m0 pd0'>
      <MenuList/>
</div>

✅ 테스트 결과

[eunnnju]

헤드라인 기사, 기본 기사 컴포넌트

대충 틀만 짜놨습니다.. 기사 백엔드 연결하면 추가해서 수정하겠습니다.

📖 사용법

PR #31

import HeadlineArticle from "../../components/HeadlineArticle";
import BasicArticle from "../../components/BasicArticle";

<div className='flex column mobile-header m0 pd0'>
            <HeadlineArticle></HeadlineArticle>
             <BasicArticle/>
</div>

✅ 테스트 결과

[dahxxn]

텍스트 버튼 컴포넌트

📖 사용법

label에 텍스트 내용, style에 텍스트 사이즈, isActive에 useState 설정, onClick에 버튼 이벤트 설정해주면 됩니다.

import TextButton from '../../components/TextButton';

  const [activeMenu, setActiveMenu] = useState(); 

  <TextButton
      label="아이디 찾기"
      style={{fontSize:'2rem'}}
      isActive={activeMenu === "id"}
      onClick={() => setActiveMenu("id")}
  ></TextButton>

✅테스트 결과

1. 마우스 올리기 전

   

2. 마우스 올린 후

   

[eunznidang]

카카오톡 api key

📖 사용법

Kakao.init('utils/KakaoShare.jsx의 line 6: window.kakao.init 안에 있는 값 사용');

[jjjjjinseo]

Label

색, 배경색 지정할 수 있는 라벨 만들었습니다.

📖 사용법

PR #41

import Label from '../components/Label';

<Label  text={"정치/경제"} color={'white'} backgroundColor={'blue'}/>

✅ 테스트 결과

[eunznidang]

광고

아직 배포 전이라 삽입하면 까만색 div만 뜹니다. 배포 후 애드센스 가입하고, 광고 적용되는지 확인하겠습니다! 다른 크기 필요하시면 width랑 height만 바꾼다고 되는 게 아니니 꼭 #28 에 댓글 남겨 주십쇼~

📖 사용법

import GoogleAdsense from '../../components/GoogleAdsense';

<GoogleAdsense adName="AD580x150" />
<GoogleAdsense adName="AD560x150" />
<GoogleAdsense adName="AD560x300" />

✅ 테스트 결과

기사 상세: AD580x150	메인: AD560x150	메인2: AD560x300

기사 상세: <GoogleAdsense adName="AD580x150" />

메인: <GoogleAdsense adName="AD560x150" />

메인2: <GoogleAdsense adName="AD560x300" />

[jjjjjinseo]

Dropdown

부트스트랩 드롭다운 커스텀했습니다.

📖 사용법

링크 수정을 원하면, components/Dropdown 에 href를 수정하면 되겠습니당

 <Dropdown.Item href="../mypage">계정</Dropdown.Item>

✅ 테스트 결과

1. 드롭다운 메뉴

[dahxxn]

입력 모달(팝업) 컴포넌트

부트스트랩 모달 사용

📖 사용법

[기본 입력] 모달, [비밀번호 입력] 모달, [휴대폰 번호] 입력 모달 컴포넌트 3가지 생성했습니다

✔️ 공통으로 가지고 있는 Prop

1) showModal: 모달 표시 여부 제어 상태

const [showModal, setShowModal] = useState(false); : 처음에는 false로 하고 팝업 버튼 클릭 시 true로 바뀌게 설정하는 클릭 함수 작성해주면 됩니다

예시

const handleEditClick = (label, value) => {
setCurrentLabel(label);
setCurrentValue(value);
setShowModal(true);
};

2) handleClose : 모달 닫기 함수

3) handleSave/onSave : 변경된 값 전달하는 함수

➕ [기본 입력] 모달 만 가지고 있는 Prop

아래 두 개 Prop 설정해주면 동적으로 팝업창 제목을 바꿔줍니다

1) titleLabel : 여기에 팝업 제목 넣어주기

2) value : 초기 입력 값으로 입력 칸에 기본으로 넣어 줄 값

---

〰️모달 컴포넌트 추가 예시

        <InputInfoModal
            showModal={showModal}
            handleClose={handleModalClose}
            titleLabel={currentLabel}
            value={currentValue}
            handleSave={handleModalSave}
        />
        <PasswordInputModal
            showModal={showPasswordModal}
            handleClose={() => setShowPasswordModal(false)}
            onSave={handleSavePassword}
        />
        <PhoneInputModal
            showModal={showPhoneModal}
            handleClose={() => setShowPhoneModal(false)}
            handleSave={handleSavePhone}
        /> 

✅테스트 결과

기본 입력 모달 (titleLabel : 닉네임)

비밀번호 입력 모달

휴대폰 번호 입력 모달

[eunznidang]

💫 카테고리 horizon 슬라이드

/components/Category

옆으로 슬라이드 할 수 있는 카테고리 바입니다.

부모 컴포넌트에서 선언 후 useState로 제어하면 됩니다!

• selectedCategory는 영어여야 함 convertToEng 쓰세여

  
  import Category from '../../components/Category'
  const [selectedCategory, setSelectedCategory] = useState('');

## 💫 한글로 된 카테고리를 영어로, 영어로 된 카테고리를 한글로 만들기
### `utils/convertCategories`

import { convertToEng, convertToKor } from '../utils/convertCategories'

const engCategory = convertToEng(category); const korCategory = convertToKor (category);