chore: dlx and fix lint

.eslintrc.js

@@ -120,7 +120,7 @@ module.exports = {
       },
     ],
     'jsx-a11y/label-has-associated-control': [
-      'error',
+      'warn',
       {
         labelComponents: ['label'],
         labelAttributes: ['label'],

.vscode/settings.json

@@ -6,17 +6,25 @@
   "eslint.nodePath": ".yarn/sdks",
   "typescript.tsdk": ".yarn/sdks/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
-
-  "stylelint.validate": ["css", "scss", "typescript", "typescriptreact"],
+  "stylelint.validate": [
+    "css",
+    "scss",
+    "typescript",
+    "typescriptreact"
+  ],
   "stylelint.configFile": ".stylelintrc.json",
   "stylelint.customSyntax": "postcss-styled-syntax",
-
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit",
     "source.fixAll.stylelint": "explicit"
   },
   "editor.formatOnSave": true,
-  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
   "editor.defaultFormatter": "dbaeumer.vscode-eslint",
   "editor.tabSize": 2,
   "prettier.prettierPath": ".yarn/sdks/prettier/index.js",

.yarn/sdks/eslint/lib/unsupported-api.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require eslint/use-at-your-own-risk
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real eslint/use-at-your-own-risk your application uses
+module.exports = absRequire(`eslint/use-at-your-own-risk`);

.yarn/sdks/eslint/package.json

@@ -1,6 +1,14 @@
 {
   "name": "eslint",
-  "version": "8.38.0-sdk",
+  "version": "8.57.0-sdk",
   "main": "./lib/api.js",
-  "type": "commonjs"
+  "type": "commonjs",
+  "bin": {
+    "eslint": "./bin/eslint.js"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": "./lib/api.js",
+    "./use-at-your-own-risk": "./lib/unsupported-api.js"
+  }
 }

.yarn/sdks/prettier/bin-prettier.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require prettier/bin-prettier.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real prettier/bin-prettier.js your application uses
+module.exports = absRequire(`prettier/bin-prettier.js`);

.yarn/sdks/prettier/index.js

@@ -11,10 +11,10 @@ const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
-    // Setup the environment to be able to require prettier/index.js
+    // Setup the environment to be able to require prettier
     require(absPnpApiPath).setup();
   }
 }
 
-// Defer to the real prettier/index.js your application uses
-module.exports = absRequire(`prettier/index.js`);
+// Defer to the real prettier your application uses
+module.exports = absRequire(`prettier`);

.yarn/sdks/prettier/package.json

@@ -1,6 +1,7 @@
 {
   "name": "prettier",
-  "version": "2.8.7-sdk",
+  "version": "2.8.8-sdk",
   "main": "./index.js",
-  "type": "commonjs"
+  "type": "commonjs",
+  "bin": "./bin-prettier.js"
 }

.yarn/sdks/typescript/lib/typescript.js

@@ -11,10 +11,10 @@ const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
-    // Setup the environment to be able to require typescript/lib/typescript.js
+    // Setup the environment to be able to require typescript
     require(absPnpApiPath).setup();
   }
 }
 
-// Defer to the real typescript/lib/typescript.js your application uses
-module.exports = absRequire(`typescript/lib/typescript.js`);
+// Defer to the real typescript your application uses
+module.exports = absRequire(`typescript`);

.yarn/sdks/typescript/package.json

@@ -1,6 +1,10 @@
 {
   "name": "typescript",
-  "version": "5.0.4-sdk",
+  "version": "5.4.2-sdk",
   "main": "./lib/typescript.js",
-  "type": "commonjs"
+  "type": "commonjs",
+  "bin": {
+    "tsc": "./bin/tsc",
+    "tsserver": "./bin/tsserver"
+  }
 }

src/components/badge/Badge.tsx

@@ -17,7 +17,6 @@ export default Badge;
 
 const badgeCss = (theme: Theme) => css`
   ${BODY_1};
-
   display: inline-flex;
   align-items: center;
   justify-content: center;

src/components/bottomSheet/BottomSheet.tsx

@@ -42,7 +42,6 @@ export default BottomSheet;
 
 const mobileScrimCss = (theme: Theme) => css`
   ${scrimCss(theme)}
-
   right: 0;
   left: 0;
   max-width: ${theme.size.maxWidth};

src/components/dialog/DialogText.tsx

@@ -16,15 +16,13 @@ export const Description = ({
 
 const titleBaseCss = ({ colors }: Theme) => css`
   ${HEAD_1}
-
   color: ${colors.black};
   text-align: left;
   white-space: pre-wrap;
 `;
 
 const descriptionBaseCss = css`
   ${BODY_1}
-
   color: #6b7180;
   text-align: center;
   white-space: pre-wrap;

src/components/error/ErrorBoundary.tsx

@@ -90,19 +90,16 @@ const sectionCss = css`
 
 const headingCss = css`
   ${HEAD_1}
-
   margin-bottom: 6px;
 `;
 
 const smallCss = (theme: Theme) => css`
   ${BODY_1};
-
   color: ${theme.colors.gray_300};
 `;
 
 const paragraphCss = (theme: Theme) => css`
   ${BODY_1};
-
   margin-bottom: 14px;
   color: ${theme.colors.gray_500};
 `;

src/components/snackBar/SnackBar.tsx

@@ -12,7 +12,6 @@ const Content = ({ content }: Pick<SnackBarProps, 'content'>) => {
 
 const contentCss = (theme: Theme) => css`
   ${BODY_1};
-
   cursor: pointer;
 
   z-index: ${theme.zIndex.fixed};
@@ -45,7 +44,6 @@ const DeleteButton = ({ id, deleteElement }: DeleteButtonProps) => {
 
 const deleteButtonCss = (theme: Theme) => css`
   ${BODY_1};
-
   min-width: 40px;
   margin-left: 10px;
   color: ${theme.colors.primary_200};

src/components/toast/Toast.tsx

@@ -28,7 +28,6 @@ const Text = ({ children }: { children: ReactNode }) => {
 
 const toastTextCss = ({ colors }: Theme) => css`
   ${BODY_1};
-
   color: ${colors.white};
 `;
 

src/components/tooltip/components/Tooltip/FloatingTooltip.tsx

@@ -131,8 +131,7 @@ const wrapperCss = (scrollHeight: number) => css`
   top: 0;
   left: 0;
 
-  overflow-x: hidden;
-  overflow-y: visible;
+  overflow: hidden visible;
 
   width: 100dvw;
   height: ${scrollHeight}px;

src/components/tooltip/components/Tooltip/TooltipBase.tsx

@@ -100,7 +100,6 @@ const messageContainerCss = (theme: Theme, anchorWidth: number, paddingX: number
 
 const messageCss = (theme: Theme) => css`
   ${BODY_2_REGULAR}
-
   color: ${theme.colors.white}
 `;
 

src/components/tooltipButton/TooltipButton.tsx

@@ -73,7 +73,6 @@ const floatingKeyframes = keyframes`
 
 const bubbleSpanCss = (theme: Theme) => css`
   ${BODY_2_REGULAR};
-
   position: absolute;
   top: -100%;
   left: 50%;

src/features/changeQuestion/Question.tsx

@@ -48,7 +48,6 @@ const QuestionWrapperCss = (isSelected: boolean, theme: Theme) => css`
 
 const QuestionDescCss = css`
   ${HEAD_2_REGULAR}
-
   overflow: hidden;
   display: block;
 

src/features/dna/BookmarkSection.tsx

@@ -62,7 +62,6 @@ const crewFeedbackContainer = (theme: Theme) => css`
 
 const subTitleCss = (theme: Theme) => css`
   ${HEAD_2_BOLD};
-
   color: ${theme.colors.gray_500};
 `;
 

src/features/dna/DnaBanner.tsx

@@ -96,12 +96,10 @@ const textWrapperCss = css`
 
 const dnaDesc = css`
   ${BODY_1}
-
   color: ${colors.gray_400};
 `;
 
 const dnaTitle = css`
   ${HEAD_1_BOLD}
-
   color: ${colors.gray_500};
 `;

src/features/dna/TendencySection.tsx

@@ -35,15 +35,13 @@ export default TendencySection;
 
 const subTitleCss = (theme: Theme) => css`
   ${HEAD_2_BOLD};
-
   color: ${theme.colors.gray_500};
 `;
 
 const pillContainer = css`
   display: flex;
   flex-wrap: wrap;
-  row-gap: 11px;
-  column-gap: 10px;
+  gap: 11px 10px;
 
   margin-top: 16px;
 

src/features/feedback/CollaborationCounter.tsx

@@ -36,7 +36,6 @@ const CollaborationCounterCard = ({ count, positive }: { count: number; positive
 
 const cardCss = (theme: Theme, positive: boolean) => css`
   ${positive ? HEAD_2_BOLD : HEAD_2_REGULAR}
-
   display: flex;
   align-items: center;
   justify-content: center;

src/features/feedback/Feedback.tsx

@@ -82,7 +82,6 @@ const containerCss = ({ colors }: Theme) => css`
 
 const replyCss = css`
   ${BODY_1};
-
   white-space: pre-wrap;
 `;
 
@@ -117,7 +116,6 @@ const AnonymousPositionBadge = ({ position, nickname }: { position: ReviewerPosi
 
 const AnonymousPositionBadgeCss = (theme: Theme, position: ReviewerPosition) => css`
   ${BODY_2_REGULAR};
-
   width: fit-content;
   height: 32px;
   padding: 6px 8px;

src/features/feedback/ParticipatingReviewerChart.tsx

@@ -174,7 +174,6 @@ const descriptionColorBadgeAmountWrapperCss = css`
 
 const descriptionTextCss = ({ colors }: Theme) => css`
   ${HEAD_2_REGULAR};
-
   color: ${colors.gray_400};
 `;
 

src/features/home/KakaoLoginButton.tsx

@@ -32,13 +32,11 @@ const KakaoLoginButton = () => {
 
 const KakaoLoginWrapper = css`
   ${BODY_1};
-
   line-height: 24px;
   color: ${colors.gray_400};
 
   & * {
     ${BODY_1};
-
     color: ${colors.gray_400};
   }
 

src/features/multipleChoiceAnswer/MultipleChoiceAnswer.tsx

@@ -101,7 +101,6 @@ const textCss = (theme: Theme, variant: string) => css`
 
 const countTextCss = (theme: Theme, variant: string) => css`
   ${BODY_2_BOLD}
-
   z-index: ${theme.zIndex.aboveDefault};
   color: ${variant === 'default' ? colors.gray_400 : colors.primary_200};
   background-color: transparent;

src/features/result/DnaBanner.tsx

@@ -72,7 +72,6 @@ const anchorCss = css`
 
 const buttonCss = css`
   ${BODY_2_BOLD};
-
   margin-top: 16px;
   padding: 8px 16px;
 `;
@@ -116,7 +115,6 @@ const notEnoughSectionCss = css`
 
 const paragraphCss = (theme: Theme) => css`
   ${HEAD_3_SEMIBOLD}
-
   margin-top: 4px;
   margin-bottom: 17px;
   color: ${theme.colors.secondary_200};

src/features/review/BottomNavigation.tsx

@@ -45,7 +45,6 @@ export default BottomNavigation;
 
 const wrapperCss = (theme: Theme) => css`
   ${fixedBottomCss(theme)};
-
   bottom: 0%;
 
   display: flex;

src/features/review/QuestionHeader.tsx

@@ -48,7 +48,6 @@ const wrapperCss = css`
 
 const headingCss = css`
   ${HEAD_1}
-
   margin-bottom: 0;
 
   @supports (text-wrap: balance) {
@@ -58,7 +57,6 @@ const headingCss = css`
 
 const smallCss = (theme: Theme) => css`
   ${BODY_1}
-
   margin-top: 8px;
   color: ${theme.colors.gray_500};
 `;

src/features/review/StepStatus.tsx

@@ -90,7 +90,6 @@ const stepBarCss = (theme: Theme, widthPercentage: number) => css`
 
 const statusCss = (theme: Theme) => css`
   ${BODY_2_REGULAR}
-
   position: absolute;
   top: 14px;
   right: 8px;