• somthing..

• somthing..

• somthing..

• somthing..

• somthing..

• somthing..

• somthing..

• somthing..

• somthing..

• somthing..

• somthing..

• somthing..

• 스토리북 절대 경로 설정하기 → 에러 해결

• 서버 글자 색깔 변경하기 image

• 채팅 이미지 업로드 모달 구현 image

• 메인화면에서 친구 검색하기 모달 위로 버튼이 올라가는 문제 해결하기 image

• opacity, transform과 같은 속성을 사용하면 z-index에도 영향을 주는지 처음 알았다. 이에 대해서 좀 더 공부해보고 왜 그렇게 되는지, 영향을 주는 다른 속성들은 어떤 것들이 있는지 자세히 알아봐야겠다.

• 스토리북 절대 경로 설정하기

프로젝트에 절대 경로를 설정하고 나니 스토리북에서 에러가 발생했다. 찾아보니 스토리북도 따로 절대 경로를 설정해야 한다고 한다. 참고 자료

먼저 tsconfig.json에서 해당 코드를 추가하여 path 설정을 하였다.

{
 "compilerOptions": {
 "baseUrl": "./",
 "paths": {
 "@api/*": ["src/api/*"],
 "@components/*": ["src/components/*"],
 "@configs/*": ["src/configs/*"],
 "@fonts/*": ["src/fonts/*"],
 "@hooks/*": ["src/hooks/*"],
 "@pages/*": ["src/pages/*"],
 "@store/*": ["src/store/*"],
 "@styles/*": ["src/styles/*"],
 "@utils/*": ["src/utils/*"]
 },
}

그리고 tsconfig-paths-webpack-plugin 을 설치한다.

yarn add -D tsconfig-paths-webpack-plugin

마지막으로 .storybook/main.js 에서 TsconfigPathsPlugin 설정을 추가한다.

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
module.exports = {
 webpackFinal: async (config) => {
 config.resolve.plugins.push(new TsconfigPathsPlugin({}));
 return config;
 },
};

• 요소에 opacity나 transform와 같은 속성을 적용하면 z-index가 최상단으로 끌어올려진다. image 이전에 친구 요청 보내기 버튼이 친구 선택하기 모달 위로 뜨는 현상이 발생했었다.

발생한 이유는 친구 요청 보내기 인풋 창 안에 값을 입력하기 전까지 친구 요청 보내기 버튼이 disabled 처리가 되는데, 이때 opacity: 0.4 속성도 적용해준다.

하지만 요소에 opacity 속성을 주게 되면 z-index: auto을 자동으로 주게 되므로 요소가 최상단으로 끌어올려진다. 그래서 웬만하면 opacity를 주는 대신에 background-color를 rgba로 주어 투명도를 조절하라고 한다.

→ 참고 자료

• https://devbirdfeet.tistory.com/200
• https://abcdqbbq.tistory.com/84

• 내일 팀원들과 만나서 백엔드 부분 합치기!