프로젝트 초기 설정 정보

📦 ├─ .eslintrc.json ├─ .github │ ├─ ISSUE_TEMPLATE │ │ ├─ ✅-기능-개발.md │ │ ├─ 🎨-화면-개발.md │ │ └─ 🐞-버그-리포트.md │ └─ pull_request_template.md ├─ .gitignore ├─ .prettierignore ├─ .prettierrc.json ├─ README.md ├─ package-lock.json ├─ package.json ├─ public │ ├─ favicon │ │ └─ favicon-32x32.png │ └─ index.html └─ src ├─ App.jsx ├─ assets │ ├─ fonts │ │ ├─ SpoqaHanSansNeo-Bold.eot │ │ ├─ SpoqaHanSansNeo-Bold.ttf │ │ ├─ SpoqaHanSansNeo-Bold.woff │ │ ├─ SpoqaHanSansNeo-Bold.woff2 │ │ ├─ SpoqaHanSansNeo-Medium.eot │ │ ├─ SpoqaHanSansNeo-Medium.ttf │ │ ├─ SpoqaHanSansNeo-Medium.woff │ │ ├─ SpoqaHanSansNeo-Medium.woff2 │ │ ├─ SpoqaHanSansNeo-Regular.eot │ │ ├─ SpoqaHanSansNeo-Regular.ttf │ │ ├─ SpoqaHanSansNeo-Regular.woff │ │ └─ SpoqaHanSansNeo-Regular.woff2 │ ├─ icons │ │ ├─ chat-fill-icon.png │ │ ├─ chat-icon.png │ │ ├─ close-icon.png │ │ ├─ community-fill-icon.png │ │ ├─ community-icon.png │ │ ├─ edit-fill-icon.png │ │ ├─ edit-icon.png │ │ ├─ facebook-icon.png │ │ ├─ google-icon.png │ │ ├─ heart-fill-icon.png │ │ ├─ heart-icon.png │ │ ├─ home-fill-icon.svg │ │ ├─ home-icon.svg │ │ ├─ image-icon.png │ │ ├─ kakao-icon.png │ │ ├─ layers-icon.png │ │ ├─ left-arrow-icon.png │ │ ├─ more-icon.png │ │ ├─ more-small-icon.png │ │ ├─ post-album-off-icon.png │ │ ├─ post-album-on-icon.png │ │ ├─ post-list-off-icon.png │ │ ├─ post-list-on-icon.png │ │ ├─ search-icon.png │ │ ├─ share-icon.png │ │ ├─ user-fill-icon.png │ │ └─ user-icon.png │ └─ images │ ├─ empty-feed-image.png │ ├─ empty-post-image.png │ ├─ error-image.png │ ├─ logo-image.png │ ├─ logo-white-image.png │ ├─ logo-wink-image.png │ ├─ main-title-image.png │ ├─ profile1-image.png │ ├─ profile2-image.png │ ├─ sub-title-image.png │ ├─ walk-able-image.png │ └─ walk-disable-image.png ├─ index.jsx └─ styles ├─ GlobalStyle.jsx ├─ font.css └─ global.css

{ "bracketSpacing": true, // 객체 리터럴에서 괄호에 공백 삽입 "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부 "jsxSingleQuote": true, // JSX에 홑따옴표 사용 여부 "singleQuote": true, // 홑따옴표 사용 여부 "proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2) "semi": true, // 세미콜론 사용 여부 "printWidth": 120, // 줄 바꿈 할 폭 길이 "endOfLine": "lf", // EoF 방식, OS별로 처리 방식이 다름 "useTabs": false, // 탭 사용 여부 "tabWidth": 2, // 탭 너비 "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식 "arrowParens": "always" // 화살표 함수 괄호 사용 여부 }

/node_modules /.github

{ "extends": ["react-app", "react-app/jest", "prettier"], "rules": { "indent": ["error", 2], // 들여쓰기 2칸만 허용 "no-var": "error", // // var 키워드 사용 금지 "require-await": "error", // async 함수 내부에 await 키워드가 없으면 오류 발생 "eqeqeq": "warn", // ==, != 대신에 ===, !== 사용 "react/prop-types": 0, // 프롭스 타입 무시 "no-unused-vars": "off" // 호출되지 않은 변수도 사용 가능하게 설정 } }

import styled from 'styled-components'; import GlobalStyle from './styles/GlobalStyle'; const FrameMain = styled.main` position: relative; max-width: 390px; margin: 0 auto; background-color: var(--main-bg-color); box-shadow: rgb(0 0 0 / 16%) 0px 0px 8px; overflow: hidden; word-break: break-all; `; const ScreenContainer = styled.div` display: flex; height: 100vh; flex-direction: column; `; const ScreenPage = styled.div` position: relative; flex: 1 1 0%; overflow-y: auto; `; function App() { return ( <> <GlobalStyle /> <FrameMain> <ScreenContainer> <ScreenPage className='hidden-scroll'> <h1>가져도댕냥 프로젝트</h1> </ScreenPage> </ScreenContainer> </FrameMain> </> ); } export default App;