Merge branch 'feature/#271' into feature/#273

.github/workflows/LINT_CHECK.yml

@@ -23,11 +23,7 @@ jobs:
           node-version: 20
           registry-url: https://registry.npmjs.org/
       - name: Install package
-        run: |
-           yarn set version 3.8.0
-           yarn
-      - name: Install dependencies
-        run: yarn install --immutable --immutable-cache
+        run: yarn
       - name: Check lint
         run: yarn lint
       - name: TS check

src/components/editor/TextEditor/AddImageFile/index.tsx

@@ -2,8 +2,6 @@ import React, { ChangeEvent, useState } from 'react';
 
 import { ReactComponent as Plus } from 'assets/svg/post/picture.svg';
 
-import styles from './AddImageFile.module.scss';
-
 function AddImageFile() {
   const [imageSrc, setImageSrc] = useState<string>();
 
@@ -28,19 +26,18 @@ function AddImageFile() {
   return (
     <main>
       <label htmlFor="image" aria-label="이미지 추가">
-        <div className={styles.getImage}>
-          <Plus className={styles.getImage__Image} />
+        <div>
+          <Plus />
         </div>
         <input
           type="file"
           onChange={handleFileChange}
           id="image"
-          className={styles.input}
           multiple
         />
       </label>
       <div>
-        {imageSrc && <img src={imageSrc} alt="preview-img" width="80" height="80" className={styles.preview} />}
+        {imageSrc && <img src={imageSrc} alt="preview-img" width="80" height="80" />}
       </div>
     </main>
   );

src/layout/DefaultLayout/DefaultLayout.module.scss

@@ -1,6 +1,13 @@
-.sidebar-space {
-  width: 100px;
-  flex-shrink: 0;
+@use "src/utils/styles/mediaQuery" as media;
+
+.main {
+  width: calc(100% - 90px);
+  margin-left: 90px;
+
+  @include media.media-breakpoint-down(mobile) {
+    margin: 0;
+    width: 100%;
+  }
 }
 
 .home {

src/layout/DefaultLayout/index.tsx

@@ -4,12 +4,16 @@ import BottomNavigation from 'components/common/BottomNavigation';
 import SideNavigation from 'components/common/SideNavigation';
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 
+import styles from './DefaultLayout.module.scss';
+
 export default function DefaultLayout(): JSX.Element {
   const { isMobile } = useMediaQuery();
   return (
     <>
       {!isMobile && <SideNavigation />}
-      <Outlet />
+      <main className={styles.main}>
+        <Outlet />
+      </main>
       {isMobile && <BottomNavigation />}
     </>
   );

src/pages/Follow/components/FollowProfile.module.scss

@@ -1,7 +1,7 @@
 @use "src/utils/styles/mediaQuery.scss" as media;
 
 .container {
-  width: calc(100vw - 100px);
+  width: 100%;
   height: calc(100vh - 80px);
   display: flex;
   justify-content: center;

src/pages/Follow/index.module.scss

@@ -1,8 +1,8 @@
 @use "src/utils/styles/mediaQuery.scss" as media;
 
 .template {
+  width: 100%;
   height: 100vh;
-  width: calc(100vw - 100px);
   margin-left: 100px;
   padding-top: 60px;
   box-sizing: border-box;

src/pages/Notice/Notice.module.scss

@@ -6,7 +6,7 @@ $back: white;
 $normal: #666666;
 
 .container {
-  width: 100vw;
+  width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;

src/pages/Notice/detail/Detail.module.scss

@@ -6,7 +6,7 @@ $back: white;
 $normal: #666666;
 
 .container {
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   display: flex;
   flex-direction: column;

src/pages/SearchDetails/SearchDetails.module.scss

@@ -1,12 +1,12 @@
 @use "src/utils/styles/mediaQuery.scss" as media;
 
 .container {
-  width: calc(100vw - 100px);
+  width: 100%;
   height: 100dvh;
+  box-sizing: border-box;
   padding: 16px;
 
   @include media.media-breakpoint-down(mobile) {
-    width: 100%;
     padding: 0;
   }
 }

src/pages/Setting/PC/PcSetting.module.scss

@@ -53,15 +53,16 @@ $title: #ff7f23;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: calc(100vw - 100px);
+  width: 100%;
   height: calc(100vh - 80px);
 }
 
 .setting {
-  position: relative;
-  bottom: 17vh;
-  padding-bottom: 90px;
-  right: 100px;
+  width: 246px;
+  height: 100%;
+  margin-top: 160px;
+  display: flex;
+  flex-direction: column;
 
   &__title {
     font-size: 32px;

src/pages/ShopDetail/index.tsx

@@ -60,7 +60,12 @@ function ShopDetail() {
     <div className={styles.container}>
       {!isMobile
         ? (
-          <button type="button" onClick={toggle} aria-labelledby="image-carousel-label">
+          <button
+            type="button"
+            onClick={toggle}
+            title="image-carousel-label"
+            aria-labelledby="image-carousel-label"
+          >
             <ImageCarousel pathname="shop" imageUrls={photos} />
           </button>
         ) : <ImageCarousel pathname="pin" imageUrls={photos} />}