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

* chore: (#620) package-lock.json 업데이트

* fix: (#621) 스토리북을 이용하려고 할 때 웹팩 chunk 관련 에러가 나는 것 수정

* style: (#620) 이미지의 가로, 세로 비율에 맞게 이미지를 보여주도록 수정

* style: (#620) 게시글 작성 시  선택지 이미지에 적용

* chore: (#620) 변경된 컴포넌트 이름이 적용되어 있지 않던 스토리북 파일 수정

* style: (#620) 게시글 작성시 본문 이미지에도 적용

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 => ({

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`

frontend/src/components/common/Post/style.ts

@@ -126,7 +126,7 @@ export const Image = styled.img`
  align-self: center;
 
  aspect-ratio: 1/1;
- object-fit: cover;
+ object-fit: contain;
 
  @media (min-width: ${theme.breakpoint.md}) {
  margin-bottom: 20px;

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`