minyoung

저번 포스팅에서는 Example.jsx 에서 props의 status 값을 제어했는데, 이렇게 한다면 개발 중 또는 유지보수 시 상태값의 종류나 네이밍이 수정될 경우 이를 모든 곳에서 수정이 필요하기 때문에 번거로울 것이고, 상태값에 대한 명시가 헷갈릴 수 있을 것 같다는 팀원의 피드백이 있었다. 있었다.d NicknameInput 컴포넌트 내부에서 value를 기반으로 status를 결정하도록 코드를 수정했다. NicknameInput.jsximport styled from "styled-components";const NicknameInput = ({ type, placeholder, value, onChange }) => { // value 값(사용자 입력값)을 기반으로 status를 결정 ..

공통 컴포넌트 NicknameInput 개발 과정NicknameInput 컴포넌트 구현src/components/common/NicknameInput.jsximport styled from "styled-components";const NicknameInput = ({ type, placeholder, value, onChange, status }) => { return ( );};const Input = styled.input` background-color: transparent; // 기본 배경색 제거 (투명하게 설정) border: none; // 기본 테두리 제거 outline: none; // 클릭했을 때 outline 제거 width: 350px..

공통 컴포넌트, 로그인 버튼 개발 과정디자이너분께 Login/Join 파트의 모바일 디자인을 적응형에서 반응형으로 수정 요청을 드렸고, 수정될 때까지 지금 당장 할 수 있는 공통 컴포넌트를 먼저 개발하기로 했다.FE 3명으로 구성된 우리 팀은 역할을 나눠 개발에 들어갔다.LoginButton 초기 디자인은 왼쪽 사진과 같았으나, 디자이너분이 오른쪽 사진으로 수정하셨고, 코드도 수정해서 PR 했다.수정한 코드를 통해 공통 컴포넌트 개발을 어떻게 진행했는지 간단하게 기록한다.LoginButton 컴포넌트 구현src/components/common/LoginButton.jsx 'LoginButton.jsx' 는 다양한 플랫폼(카카오, 네이버, 구글)에 맞춘 로그인 버튼을 제공하는 재사용 가능한 React 컴포..