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

* chore: (#620) package-lock.json 업데이트 * fix: (#621) 스토리북을 이용하려고 할 때 웹팩 chunk 관련 에러가 나는 것 수정 * style: (#620) 이미지의 가로, 세로 비율에 맞게 이미지를 보여주도록 수정 * style: (#620) 게시글 작성 시 선택지 이미지에 적용 * chore: (#620) 변경된 컴포넌트 이름이 적용되어 있지 않던 스토리북 파일 수정 * style: (#620) 게시글 작성시 본문 이미지에도 적용
woowacourse-teams · Sep 15, 2023 · 14aaafd · 14aaafd
1 parent 918bc3d
commit 14aaafd
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 47 deletions.
diff --git a/frontend/.storybook/main.ts b/frontend/.storybook/main.ts
@@ -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;
+}
 
 const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
@@ -31,7 +40,8 @@ const config: StorybookConfig = {
  configFile: path.resolve(__dirname, '../tsconfig.json'),
  })
  );
- return config;
+
+ return disableChunkSplitting(config);
  },
  staticDirs: ['./public'],
  env: config => ({

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/components/PostForm/ContentImageSection/style.ts b/frontend/src/components/PostForm/ContentImageSection/style.ts
@@ -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`

diff --git a/frontend/src/components/common/Post/style.ts b/frontend/src/components/common/Post/style.ts
@@ -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;

diff --git a/frontend/src/components/optionList/WritingVoteOptionList/WritingVoteOption/style.ts b/frontend/src/components/optionList/WritingVoteOptionList/WritingVoteOption/style.ts
@@ -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`

diff --git a/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/style.ts b/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/style.ts
@@ -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;