BB-choi / wanted-pre-onboarding-fe

원티드 프리온보딩 프론트엔드 코스 사전과제

✅ 원티드 프리온보딩 프론트엔드 코스 사전과제

원티드 프리온보딩 프론트엔드 코스 사전과제를 수행한 repository입니다.

데모페이지 🖥️

🔗 https://bstagram.netlify.app/

로그인 정보

ID : [e-mail]

PW: Abcd@1234

위 정보로만 로그인이 가능합니다.

프로젝트 구조 🗃️

📁
├─public
│  └─data
└─src
    ├─assets
    ├─components
    │  ├─common
    │  │  ├─Icon
    │  │  ├─Logo
    │  │  └─TextInput
    │  ├─Feeds
    │  │  └─Feed
    │  │      └─FeedItem
    │  │          └─CommentsArea
    │  │              └─WriteCommentArea
    │  ├─GNB
    │  ├─Loading
    │  └─Login
    │      └─LoginItem
    ├─context
    ├─pages
    │  ├─Home
    │  ├─Login
    │  ├─Main
    │  └─NotFound
    ├─service
    ├─styles
    └─utils

components

• 컴포넌트 파일
  • 하위 컴포넌트가 다수 존재하거나, page에 사용되는 컴포넌트의 경우 디렉토리로 분류
• common : 페이지, 타 컴포넌트에 공통적으로 사용되는 컴포넌트

pages : Routing에 사용되는 페이지

components 디렉토리 내 index.js

• import Loading from "components/Loading/Loading과 같이 가독성을 떨어뜨리는 import문을 개선하기 위해 작성

---

요구사항을 만족시키면서 구현하였고, 아래는 요구사항 링크와 추가 코멘트 및 화면 스크린샷입니다.

Assignment 1 - Login

✔ 요구사항

Assignment 1 - Login

🤓 구현

• 로그인 정보를 입력하는 input을 LoginInput으로 분리하여, onChange이벤트가 발생하더라도 input에서만 렌더링이 일어나도록 구현
  • TextInput을 common디렉토리 내의 공통 컴포넌트로 만들어, 이를 이용하여 로그인에서 사용할 수 있도록 LoginInput 구현
• 올바른 정보로 로그인할 시에만 로그인 가능
• 로그인 완료시 메인페이지로 이동

Assignment2 - GNB

✔ 요구사항

Assignment2 - GNB

🤓 구현

• position: sticky 를 이용하여 고정된 GNB 구현
• GNB 모바일 대응 (미디어 쿼리 사용)
  • max-width: 640px 보다 작아질 경우 검색창 input 숨기기
    • 기준 640px은 실제 instagram을 토대로 결정
  • max-width: 640px 보다 작아질 경우 버튼 메뉴들 간격 조정
  • max-width: 480px 보다 작아질 경우 기존 GNB의 padding을 제거

Assignment3 - Validation

✔ 요구사항

Assignment3 - Validation

🤓 구현

• 이메일과 비밀번호의 유효성을 정규표현식으로 확인 (LoginInput.jsx)

const patterns = {
  email:
    /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i,
  password: /^(?=.*?[A-Z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/,
};

• Validation 함수를 분리

const checkValidInput = {
  email(value) {
    return patterns.email.test(value);
  },
  password(value) {
    return patterns.password.test(value);
  },
};

• Validation 상태를 CSS(border 색상 red)로 표시
  • isValidId, isValidPw상태를 이용하여 border style 변경
• 아이디(이메일), 비밀번호 모두 유효성 검사를 통과한 경우에만 로그인 버튼을 활성화
  • 하나라도 유효하지 않은 경우(공백 포함)에는 disabled처리

const isButtonActive = isValidId && isValidPw;

• 저장(등록)된 유저정보와 일치하지 않는경우 알림 표시
• 로그아웃하지 않은 경우, localStorage에 저장된 정보로 자동 로그인 처리
  • loginData 상태로 관리(App.js)

Assignment4 - Routing

✔ 요구사항

Assignment4 - Routing

🤓 구현

• 로그인, 로그아웃시 화면 전환
  • 루트(/)로 접속, 로그인 여부에 따라 화면 전환(주소 변경x) Home.jsx
    • <Link>혹은 <Navigate>는 history API를 이용하므로, loginData 상태를 정의하여 사용
  • 로그아웃시 로그인 화면으로 전환

Assignment5 - Feeds

✔ 요구사항

Assignment5 - Feeds

🤓 구현

• public/data/feedData.json을 fetch해 화면에 렌더링(Feeds.jsx)
• 이미지 로딩 후 화면 표시(spinner 표시 후 로딩 완료시 Feeds 표시)
  • after함수를 이용하여 모든 이미지가 로딩 된 후에, state(imagesOnLoad)를 변경

• 댓글 기능
  • 댓글 작성 및 작성 후 Input 초기화

• 반응형 적용