Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

정사각형으로 나오는 이미지를 너비값 기준으로 보이게 변경 #623

Merged
merged 6 commits into from
Sep 15, 2023
Merged

정사각형으로 나오는 이미지를 너비값 기준으로 보이게 변경 #623

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6bf6d45
chore: (#620) package-lock.json 업데이트
Gilpop8663 Sep 15, 2023
b5c0c4c
fix: (#621) 스토리북을 이용하려고 할 때 웹팩 chunk 관련 에러가 나는 것 수정
Gilpop8663 Sep 15, 2023
60db56d
style: (#620) 이미지의 가로, 세로 비율에 맞게 이미지를 보여주도록 수정
Gilpop8663 Sep 15, 2023
8ce08b2
style: (#620) 게시글 작성 시 선택지 이미지에 적용
Gilpop8663 Sep 15, 2023
79ab810
chore: (#620) 변경된 컴포넌트 이름이 적용되어 있지 않던 스토리북 파일 수정
Gilpop8663 Sep 15, 2023
bbf0f92
style: (#620) 게시글 작성시 본문 이미지에도 적용
Gilpop8663 Sep 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion frontend/.storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,15 @@ import path from 'path';
import type { StorybookConfig } from '@storybook/react-webpack5';

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const webpack = require('webpack');

function disableChunkSplitting(config) {
config.optimization = { splitChunks: { chunks: 'async' } };
config.output = { ...config.output, chunkFilename: '[chunkhash].chunk.js' };
config.plugins.push(new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }));

return config;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

방금 스토리북 켰는데 왜 오류나는지 궁금했는데 이 코드를 추가해주면 되는군요! 👍👍
스토리북이랑도 웹팩 설정을 동기화하는게 중요하군요😂

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

스토리북에서는 chunk 파일들이 분리되지 않도록 하는 함수인가요??

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

네!

DSM이 업로드 및 호스팅 자산을 처리하는 방식으로 인해 현재 Live Components 아키텍처는 새로운 Storybook 번들에 의해 생성 된 추가 JavaScript 청크를 지원하지 않습니다.

스토리북은 Chunk를 지원하지 않아서 스토리북 빌드할 때 웹팩에서 Chunk를 비활성화하는 옵션이라고 합니다

https://support.invisionapp.com/docs/troubleshooting-chunkloaderror-in-dsm-storybook

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오옹 스토리북 켰을때 오류가 났군요..?
저는 코드 스플릿하는 부분을 하기 전에 브랜치를 만들어서 오류가 나는지 몰랐네요🥲


const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
Expand Down Expand Up @@ -31,7 +40,8 @@ const config: StorybookConfig = {
configFile: path.resolve(__dirname, '../tsconfig.json'),
})
);
return config;

return disableChunkSplitting(config);
},
staticDirs: ['./public'],
env: config => ({
Expand Down
109 changes: 81 additions & 28 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion frontend/src/components/PostForm/ContentImageSection/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const ContentImage = styled.img`
border-radius: 4px;

aspect-ratio: 1/1;
object-fit: cover;
object-fit: contain;
`;

export const FileInputContainer = styled.div`
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/common/Post/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ export const Image = styled.img`
margin-bottom: 10px;

aspect-ratio: 1/1;
object-fit: cover;
object-fit: contain;

@media (min-width: ${theme.breakpoint.md}) {
margin-bottom: 20px;
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/optionList/WritingVoteOptionList/WritingVoteOption/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export const Image = styled.img`
border-radius: 4px;

aspect-ratio: 1/1;
object-fit: cover;
object-fit: contain;
`;

export const ImageCancelWrapper = styled.div`
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const Image = styled.img`
width: 100%;

aspect-ratio: 1/1;
object-fit: cover;
object-fit: contain;

@media (min-width: ${theme.breakpoint.md}) {
margin-bottom: 20px;
Expand Down
Loading
Loading